/* ===========================================================
   Alejandro Ruiz — Acupuntura y Osteopatía
   Paleta: hueso / tinta / salvia / arcilla
   =========================================================== */

:root{
  --bone:      #F7F4EE;
  --bone-2:    #EFEAE1;
  --paper:     #FFFFFF;
  --ink:       #14170F;
  --ink-soft:  #4A4F44;
  --ink-mute:  #7C8175;
  --line:      #DED7CA;
  --sage:      #5C7060;
  --sage-deep: #3B4A3E;
  --clay:      #B26A4B;
  --radius:    2px;
  --maxw:      1180px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --hdr-h:     74px;
  --gutter:    1.3rem;
  --tap:       48px;      /* altura mínima táctil */
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 10px);
  -webkit-text-size-adjust:100%;   /* iOS no reescala al girar */
}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:"Jost","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;               /* ningún desbordamiento lateral */
  -webkit-tap-highlight-color:rgba(92,112,96,.18);
}
body.no-scroll{ overflow:hidden; }
/* Áreas seguras del iPhone (notch / barra inferior) */
@supports (padding:max(0px)){
  .wrap{ padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
[hidden]{ display:none !important; }   /* gana a .btn{display:inline-flex} */

h1,h2,h3,.serif{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:.005em;
  line-height:1.12;
  margin:0;
  overflow-wrap:break-word;   /* ninguna palabra larga rompe el ancho */
}
h1{ font-size:clamp(2.6rem,6.2vw,4.6rem); }
h2{ font-size:clamp(2rem,4vw,3rem); }
h3{ font-size:1.35rem; }
p{ margin:0 0 1em; }

.wrap{ width:min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline:auto; }
.eyebrow{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sage); margin:0 0 1.1rem; font-weight:500;
}
.lead{ font-size:1.08rem; color:var(--ink-soft); max-width:56ch; }
.muted{ color:var(--ink-mute); }
section{ padding:clamp(4.5rem,9vw,7.5rem) 0; }
.section-head{ max-width:62ch; margin-bottom:3rem; }
h1 + .lead, h2 + .lead{ margin-top:1.1rem; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.7rem; border:1px solid var(--ink); border-radius:var(--radius);
  background:var(--ink); color:var(--bone);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  text-decoration:none; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ background:var(--sage-deep); border-color:var(--sage-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--bone); }
.btn--wa{ background:var(--sage); border-color:var(--sage); color:#fff; }
.btn--wa:hover{ background:var(--sage-deep); border-color:var(--sage-deep); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(247,244,238,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:var(--line); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:var(--hdr-h); }
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.brand img{ height:38px; width:auto; }
.brand b{ font-family:"Cormorant Garamond",serif; font-size:1.25rem; font-weight:500; letter-spacing:.06em; }
.brand span{ display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); position:relative; padding:.25rem 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--sage); transition:width .3s var(--ease);
}
.nav a:hover::after{ width:100%; }
.nav .btn{ padding:.7rem 1.3rem; }
.nav .btn::after{ display:none; }
.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.burger span{ display:block; width:24px; height:1.5px; background:var(--ink); margin:5px 0; transition:.3s var(--ease); }
.burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ padding:calc(var(--hdr-h) + 4rem) 0 0; position:relative; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.hero h1 em{ font-style:italic; color:var(--sage-deep); }
.hero .lead{ margin-top:1.6rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }
/* Cormorant Garamond usa cifras de estilo antiguo: el 1 y el 0 quedan
   a la altura de las minúsculas y los números no se leen. Aquí se piden
   las cifras normales, de caja alta, allí donde hay que leer un dato. */
.hero__meta div strong,
.hero__art .tag b,
.card__price,
.step b,
.linea__anios,
.tbl__dia td{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}

.hero__meta{
  display:flex; flex-wrap:wrap; gap:2rem; margin-top:3.2rem;
  padding-top:1.8rem; border-top:1px solid var(--line);
}
.hero__meta div strong{ display:block; font-family:"Cormorant Garamond",serif; font-size:2.1rem; line-height:1; font-weight:500; }
.hero__meta div span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.hero__art{ position:relative; }
.hero__art .frame{
  aspect-ratio:4/5; background:var(--paper); border:1px solid var(--line);
  display:grid; place-items:center; padding:12%;
  box-shadow:0 40px 80px -50px rgba(20,23,15,.45);
}
.hero__art .frame img{ width:100%; }
.hero__art .tag{
  position:absolute; left:-1.5rem; bottom:2.5rem; background:var(--sage-deep); color:var(--bone);
  padding:1rem 1.4rem; max-width:230px;
  font-size:.8rem; line-height:1.45;
}
.hero__art .tag b{ font-family:"Cormorant Garamond",serif; font-size:1.15rem; display:block; }

/* ---------- Marquee de motivos ---------- */
.marquee{ border-block:1px solid var(--line); background:var(--bone-2); overflow:hidden; padding:1.1rem 0; }
.marquee__track{
  display:flex; gap:3rem; width:max-content;
  animation:slide 42s linear infinite;   /* la duración real la ajusta main.js */
  backface-visibility:hidden;            /* fuerza capa propia: evita repintados */
}
.marquee span{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  white-space:nowrap; display:flex; align-items:center; gap:3rem;
}
.marquee span::after{ content:"◆"; color:var(--clay); font-size:.5rem; }
@keyframes slide{ to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------- Servicios ---------- */
.grid-serv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{
  background:var(--bone); padding:2.4rem 2rem; display:flex; flex-direction:column; gap:.9rem;
  transition:background .35s var(--ease);
}
.card:hover{ background:var(--paper); }
.card__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.card__price{ font-family:"Cormorant Garamond",serif; font-size:1.5rem; color:var(--sage-deep); white-space:nowrap; }
.card__dur{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }
.card__sab{ font-size:.78rem; color:var(--sage-deep); }
.card__consulta{
  display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
  font-size:.85rem; color:var(--sage-deep); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:.15rem;
  transition:border-color .2s var(--ease);
}
.card__consulta:hover{ border-color:var(--sage); }
.card__consulta svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.card p{ color:var(--ink-soft); font-size:.95rem; margin:0; }
.card ul{ margin:.2rem 0 0; padding:0; list-style:none; display:grid; gap:.45rem; }
.card li{ font-size:.88rem; color:var(--ink-mute); padding-left:1.1rem; position:relative; }
.card li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; background:var(--clay); border-radius:50%; }
.card__link{
  margin-top:auto; padding-top:1rem; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sage-deep); text-decoration:none;
}
.card__link:hover{ color:var(--clay); }

/* ---------- Método ---------- */
.metodo{ background:var(--sage-deep); color:var(--bone); }
.metodo .eyebrow{ color:#B9C7B4; }
.metodo .lead{ color:#D7DED2; }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2.5rem; margin-top:3.5rem; }
.step{ border-top:1px solid rgba(247,244,238,.28); padding-top:1.3rem; }
.step b{ display:block; font-family:"Cormorant Garamond",serif; font-size:2.4rem; line-height:1; color:#96A98F; }
.step h3{ margin:.7rem 0 .5rem; }
.step p{ color:#CBD3C6; font-size:.93rem; margin:0; }

/* ---------- Sobre mí ---------- */
.about__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.about__card{ background:var(--paper); border:1px solid var(--line); padding:3rem 2.4rem; text-align:center; }
.about__card img{ width:150px; margin:0 auto 1.6rem; }
.about__card .name{ font-family:"Cormorant Garamond",serif; font-size:1.7rem; }
.about__card .role{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-top:.3rem; }
.creds{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.9rem; }
.creds li{ display:flex; gap:.9rem; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); }
.creds li::before{ content:"—"; color:var(--clay); }

/* ---------- Testimonios ---------- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; }
.quote{ background:var(--paper); border:1px solid var(--line); padding:2.2rem 2rem; }
.quote p{ font-family:"Cormorant Garamond",serif; font-size:1.25rem; line-height:1.45; font-style:italic; }
.quote cite{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); font-style:normal; }

/* ---------- Reserva ---------- */
.reserva{ background:var(--bone-2); }
.reserva__grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.info-list{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:1.4rem; }
.info-list li{ display:grid; gap:.2rem; }
.info-list .k{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }
.info-list .v{ font-size:1.02rem; }
.info-list a{ text-decoration:none; border-bottom:1px solid var(--line); }
.info-list a:hover{ border-color:var(--sage); }

.form{ background:var(--paper); border:1px solid var(--line); padding:clamp(1.6rem,3vw,2.6rem); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:grid; gap:.4rem; margin-bottom:1.1rem; }
.field label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.field input,.field select,.field textarea{
  font-family:inherit; font-size:.98rem; color:var(--ink);
  background:var(--bone); border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem .9rem; width:100%;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--sage); background:var(--paper);
}
.field textarea{ resize:vertical; min-height:88px; }

.slots{ display:flex; flex-wrap:wrap; gap:.5rem; }
.slot{
  border:1px solid var(--line); background:var(--bone); border-radius:var(--radius);
  padding:.55rem .95rem; font-family:inherit; font-size:.9rem; cursor:pointer;
  transition:.2s var(--ease);
}
.slot:hover:not(:disabled){ border-color:var(--sage); }
.slot.is-on{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.slot:disabled{ opacity:.32; cursor:not-allowed; text-decoration:line-through; }
.slots__empty{ font-size:.9rem; color:var(--ink-mute); grid-column:1 / -1; flex:1 0 100%; }
.slots__nota{ font-size:.82rem; color:var(--sage-deep); grid-column:1 / -1; flex:1 0 100%;
  background:var(--sage-soft, rgba(122,139,116,.1)); border-radius:8px; padding:.5rem .7rem; }

.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.82rem; color:var(--ink-mute); line-height:1.5; }
.consent input{ width:16px; height:16px; margin-top:.2rem; flex:none; accent-color:var(--sage-deep); }
.consent a{ color:var(--sage-deep); }

.form__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }
.msg{ margin-top:1.1rem; padding:.9rem 1.1rem; border-radius:var(--radius); font-size:.9rem; display:none; }
.msg.is-ok{ display:block; background:#E7EEE6; color:var(--sage-deep); border:1px solid #C4D3C0; }
.msg.is-err{ display:block; background:#F6E7E1; color:#8C4526; border:1px solid #E4C7BB; }
.msg.is-info{ display:block; background:var(--bone-2); color:var(--ink-soft); border:1px solid var(--line); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); padding:1.4rem 0; }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:2rem;
  font-family:"Cormorant Garamond",serif; font-size:1.35rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--clay); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:.9rem 0 0; color:var(--ink-soft); max-width:70ch; font-size:.96rem; }

/* ---------- Footer ---------- */
.ftr{ background:var(--ink); color:#BDC2B6; padding:4rem 0 2rem; font-size:.9rem; }
.ftr__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.ftr h4{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone); margin:0 0 1rem; font-weight:500; }
.ftr a{ color:#BDC2B6; text-decoration:none; }
.ftr a:hover{ color:var(--bone); }
.ftr ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.ftr__logo{ height:56px; width:auto; margin-bottom:1.2rem; }
.ftr__bottom{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(247,244,238,.16);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.78rem; color:#8B9084;
}

/* ---------- Aviso sanitario ---------- */
.disclaimer{ background:var(--bone-2); border:1px solid var(--line); padding:1.4rem 1.6rem; font-size:.86rem; color:var(--ink-soft); }

/* ---------- WhatsApp flotante ---------- */
.fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:50;
  width:54px; height:54px; border-radius:50%; background:var(--sage-deep); color:#fff;
  display:grid; place-items:center; text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(20,23,15,.6); transition:.3s var(--ease);
}
.fab:hover{ transform:scale(1.07); background:var(--sage); }

/* ---------- Reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }

/* ---------- Páginas de texto ---------- */
.doc{ padding:calc(var(--hdr-h) + 4rem) 0 5rem; }
.doc .wrap{ max-width:760px; }
.doc h2{ margin:2.6rem 0 .8rem; font-size:1.9rem; }
.doc p,.doc li{ color:var(--ink-soft); font-size:.98rem; }
.doc ul{ padding-left:1.2rem; }

/* ---------- Agenda (privada) ---------- */
.agenda{ padding:calc(var(--hdr-h) + 3rem) 0 5rem; }
.panel{ background:var(--paper); border:1px solid var(--line); padding:2rem; }
.login{ max-width:420px; margin:0 auto; }
.toolbar{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.chips{ display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{ border:1px solid var(--line); background:var(--bone); padding:.45rem .9rem; font:inherit; font-size:.8rem; cursor:pointer; border-radius:var(--radius); }

/* El botón de filtros y el título de la hoja solo existen en móvil.
   Esta base va ANTES del media query para que aquel pueda ganarle. */
.chip--filtro{ display:none; }
.filtros__tit{
  display:none; margin:0 0 .3rem; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute);
}
.chip__badge{
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--clay); color:#fff; font-size:.66rem; line-height:18px;
  text-align:center; flex:none;
}
.chip.is-on{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.tbl{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tbl th{ text-align:left; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; padding:.7rem .6rem; border-bottom:1px solid var(--line); }
.tbl td{ padding:.85rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl tr:hover td{ background:var(--bone); }
.badge{ display:inline-block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:.25rem .6rem; border-radius:999px; }
.badge.pendiente{ background:#F6EEDF; color:#8A6516; }
.badge.confirmada{ background:#E7EEE6; color:#3B4A3E; }
.badge.cancelada{ background:#F1EFEC; color:#8B8B84; text-decoration:line-through; }
.mini{ font-size:.72rem; padding:.35rem .7rem; letter-spacing:.1em; }
.tbl__scroll{ overflow-x:auto; }

/* ===========================================================
   BARRA DE ACCIÓN MÓVIL (solo teléfonos)
   =========================================================== */
.actionbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:rgba(247,244,238,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:.55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom,0px));
  gap:.5rem;
}
.actionbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.22rem; min-height:var(--tap); text-decoration:none; border-radius:var(--radius);
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--ink-soft); border:1px solid var(--line); background:var(--paper);
}
.actionbar a svg{ width:19px; height:19px; }
.actionbar a.is-primary{ background:var(--ink); border-color:var(--ink); color:var(--bone); flex:1.35; }
.actionbar a.is-wa{ background:var(--sage-deep); border-color:var(--sage-deep); color:#fff; }
.actionbar a:active{ transform:scale(.97); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */

/* --- Tablet --- */
@media (max-width:1000px){
  .hero__grid,.about__grid,.reserva__grid{ grid-template-columns:1fr; }
  .hero__art{ order:-1; max-width:340px; margin-inline:auto; }
  .hero__art .tag{ left:auto; right:-.5rem; }
  .ftr__grid{ grid-template-columns:1fr 1fr; }
  .grid-serv{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}

/* --- Móvil --- */
@media (max-width:760px){
  :root{ --hdr-h:64px; --gutter:1.15rem; }
  body{ font-size:16px; }

  /* Deja hueco para la barra de acción inferior */
  main{ padding-bottom:calc(var(--tap) + 1.6rem); }
  .ftr{ padding-bottom:calc(4rem + var(--tap)); }
  .actionbar{ display:flex; }
  .fab{ display:none; }              /* la sustituye la barra */

  section{ padding:3.6rem 0; }
  .section-head{ margin-bottom:2rem; }
  h1{ font-size:clamp(2.3rem,10.5vw,3.2rem); }
  h2{ font-size:clamp(1.75rem,7.4vw,2.3rem); }
  h3{ font-size:1.2rem; }
  h1 br{ display:none; }             /* deja fluir el título */
  .lead{ font-size:1rem; }
  .eyebrow{ font-size:.66rem; margin-bottom:.8rem; }

  /* Cabecera y menú */
  .burger{ display:block; margin-right:-.5rem; }
  .brand img{ height:32px; }
  .brand b{ font-size:1.08rem; }
  .brand span{ font-size:.55rem; letter-spacing:.16em; }
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto 0; background:var(--bone);
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem var(--gutter) calc(1.6rem + env(safe-area-inset-bottom,0px));
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -28px rgba(0,0,0,.45);
    max-height:calc(100dvh - var(--hdr-h)); overflow-y:auto;
    /* Ocultar con visibilidad, no desplazándolo: un translateY negativo
       solo tapa el menú si es más alto que la cabecera, y dejaba asomar
       los últimos enlaces por debajo. */
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }

  /* Páginas sin menú hamburguesa (agenda, legal): nav siempre visible */
  .nav.nav--plain{
    position:static; transform:none; flex-direction:row; align-items:center;
    gap:.9rem; padding:0; background:none; border:0; box-shadow:none;
    max-height:none; overflow:visible;
  }
  .nav.nav--plain a{
    font-family:inherit; font-size:.7rem; letter-spacing:.1em;
    text-transform:uppercase; padding:.4rem 0; border:0; white-space:nowrap;
  }
  .nav.nav--plain .btn{ white-space:nowrap; }
  .nav.nav--plain .btn{ margin:0; min-height:38px; padding:.5rem .9rem; font-size:.68rem; }

  .nav a{
    font-size:1.05rem; letter-spacing:.04em; text-transform:none;
    font-family:"Cormorant Garamond",serif;
    padding:.95rem .2rem; border-bottom:1px solid var(--line);
  }
  .nav a::after{ display:none; }
  .nav .btn{
    text-transform:uppercase; font-family:inherit; font-size:.78rem;
    letter-spacing:.16em; margin-top:1.1rem; border-bottom:0;
    min-height:var(--tap); padding:.9rem 1.3rem;
  }

  /* Hero */
  .hero{ padding-top:calc(var(--hdr-h) + 2.2rem); }
  .hero__art{ max-width:min(74vw,300px); }
  .hero__art .frame{ aspect-ratio:1/1; padding:9%; box-shadow:0 24px 44px -34px rgba(20,23,15,.5); }
  .hero__art .tag{
    position:static; max-width:none; margin-top:.9rem;
    padding:.85rem 1.1rem; font-size:.82rem; text-align:left;
  }
  .hero .lead{ margin-top:1.2rem; }
  .hero__cta{ margin-top:1.8rem; gap:.7rem; }
  .hero__cta .btn{ flex:1 1 100%; min-height:var(--tap); }
  .hero__meta{
    display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem;
    margin-top:2.2rem; padding-top:1.4rem;
  }
  .hero__meta div strong{ font-size:1.75rem; }
  .hero__meta div span{ font-size:.6rem; letter-spacing:.1em; line-height:1.3; display:block; }

  /* Filtros de la agenda: botón + hoja deslizante desde abajo.
     En una lista horizontal de 8 chips no se veían ni la mitad. */
  .chip--filtro{
    display:inline-flex; align-items:center; gap:.55rem;
    min-height:var(--tap); padding:.5rem 1rem;
  }
  .chip--filtro svg{
    width:14px; height:14px; fill:none; stroke:currentColor;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }
  .chip--filtro[aria-expanded="true"] svg{ transform:rotate(180deg); }

  .filtros__caja{
    position:fixed; inset:0; z-index:85; background:rgba(20,23,15,.5);
    display:none; align-items:flex-end;
  }
  .filtros__caja.is-open{ display:flex; }
  .filtros__caja #filtros{
    width:100%; background:var(--paper); border-radius:16px 16px 0 0;
    padding:1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
    display:grid; gap:.45rem; max-height:80vh; overflow-y:auto;
    animation:subirHoja .25s var(--ease) both;
  }
  .filtros__caja #filtros .chip{
    width:100%; justify-content:flex-start; min-height:var(--tap);
    display:flex; align-items:center; font-size:.9rem;
  }
  .filtros__tit{ display:block; }
  @keyframes subirHoja{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }

  /* Marquee un poco más contenido */
  .marquee{ padding:.85rem 0; }
  .marquee__track{ gap:2rem; }
  .marquee span{ font-size:.68rem; gap:2rem; }

  /* Servicios: una columna, tarjetas compactas */
  .grid-serv{ grid-template-columns:1fr; }
  .card{ padding:1.7rem 1.3rem; gap:.75rem; }
  .card__top{ align-items:flex-start; }
  .card__price{ font-size:1.35rem; }
  .card__link{ min-height:var(--tap); display:flex; align-items:center; }

  /* Método */
  .steps{ grid-template-columns:1fr; gap:1.6rem; margin-top:2.4rem; }
  .step b{ font-size:2rem; }

  /* Sobre mí */
  .about__card{ padding:2.2rem 1.4rem; }
  .about__card img{ width:110px; margin-bottom:1.1rem; }
  .creds li{ font-size:.92rem; }

  /* Testimonios: carrusel deslizante en lugar de columnas */
  .quotes{
    display:grid; grid-auto-flow:column; grid-auto-columns:82%;
    gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:.6rem; margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .quotes::-webkit-scrollbar{ display:none; }
  .quote{ scroll-snap-align:center; padding:1.6rem 1.3rem; }
  .quote p{ font-size:1.12rem; }

  /* Formulario */
  .form{ padding:1.4rem 1.2rem; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .field{ margin-bottom:1rem; }
  .field input,.field select,.field textarea{
    font-size:16px;              /* impide el zoom automático de iOS */
    padding:.85rem .9rem; min-height:var(--tap);
  }
  .field textarea{ min-height:96px; }
  .slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:.5rem; }
  .slot{ min-height:var(--tap); font-size:.95rem; padding:.5rem; }
  .form__actions{ flex-direction:column; gap:.6rem; }
  .form__actions .btn{ width:100%; min-height:var(--tap); }
  .info-list{ gap:1.1rem; }
  .info-list a{ display:inline-block; padding:.15rem 0; }
  .consent{ font-size:.84rem; }
  .consent input{ width:20px; height:20px; }

  /* FAQ: objetivos táctiles amplios */
  .faq summary{ font-size:1.15rem; gap:1rem; padding:.35rem 0; }
  .faq details{ padding:1rem 0; }
  .faq details p{ font-size:.93rem; }
  .disclaimer{ padding:1.1rem 1.2rem; font-size:.84rem; }

  /* Footer */
  .ftr__grid{ grid-template-columns:1fr; gap:2rem; }
  .ftr ul li a{ display:inline-block; padding:.3rem 0; }
  .ftr__bottom{ flex-direction:column; gap:.6rem; margin-top:2.2rem; }

  /* Páginas de texto */
  .doc{ padding-top:calc(var(--hdr-h) + 2.2rem); }
  .doc h2{ font-size:1.5rem; margin-top:2rem; }

  /* --- Agenda: la tabla se convierte en fichas --- */
  .agenda{ padding-top:calc(var(--hdr-h) + 1.8rem); }
  .panel{ padding:1.3rem 1.1rem; }
  .toolbar{ flex-direction:column; align-items:stretch; gap:1rem; }
  .chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:.3rem; scrollbar-width:none; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ white-space:nowrap; min-height:40px; padding:.5rem 1rem; }
  .tbl thead{ display:none; }
  .tbl,.tbl tbody,.tbl tr,.tbl td{ display:block; width:100%; }
  .tbl tr{
    border:1px solid var(--line); border-radius:var(--radius);
    padding:.9rem 1rem; margin-bottom:.8rem; background:var(--bone);
  }
  .tbl td{ border:0; padding:.28rem 0; }
  .tbl td::before{
    content:attr(data-l); display:block;
    font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
  }
  .tbl td[data-l="Acciones"]{ display:flex; gap:.45rem; margin-top:.7rem; }
  .tbl td[data-l="Acciones"]::before{ display:none; }
  .tbl td[data-l="Acciones"] .chip{ flex:1; }
  .tbl td[data-l="Notas"]{ max-width:none !important; }
}

/* --- Teléfonos pequeños (≤380 px) --- */
@media (max-width:380px){
  :root{ --gutter:1rem; }
  h1{ font-size:2.15rem; }
  .hero__meta{ grid-template-columns:repeat(2,1fr); }
  .hero__meta div:last-child{ grid-column:1 / -1; }
  .brand span:last-child{ display:none; }
  .slots{ grid-template-columns:repeat(3,1fr); }
  .actionbar a{ font-size:.58rem; letter-spacing:.1em; }
}

/* --- Apaisado en móvil: menos aire vertical --- */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding-top:calc(var(--hdr-h) + 1.4rem); }
  section{ padding:2.6rem 0; }
  .nav{ max-height:calc(100dvh - var(--hdr-h)); }
}

/* --- Dispositivos táctiles: sin efectos hover pegajosos --- */
@media (hover:none){
  .btn:hover{ transform:none; }
  .card:hover{ background:var(--bone); }
  .tbl tr:hover td{ background:transparent; }
  .fab:hover{ transform:none; }
}

/* ===========================================================
   AGENDA — elementos nuevos
   =========================================================== */
.chip--accion{ background:var(--sage-deep); color:var(--bone); border-color:var(--sage-deep); }
.chip--accion:hover{ background:var(--sage); border-color:var(--sage); }

/* Separador de día dentro del listado ("cuaderno") */
.tbl__dia td{
  background:var(--bone-2) !important;
  font-family:"Cormorant Garamond",serif; font-size:1.1rem;
  letter-spacing:.02em;
  padding:.7rem .6rem !important; border-bottom:1px solid var(--line);
}

.nota-priv{ font-size:.78rem; color:var(--clay); }

/* Lista de bloqueos */
.bloqueo{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink);
}
.bloqueo:last-child{ border-bottom:0; }
.bloqueo em{ color:var(--clay); font-style:normal; }

/* Modal de historial */
.modal{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  background:rgba(20,23,15,.55); padding:var(--gutter);
}
.modal__caja{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  width:min(560px,100%); max-height:82vh; overflow-y:auto; padding:1.8rem;
  box-shadow:0 40px 80px -40px rgba(20,23,15,.6);
}

/* ---------- Avisar al paciente ---------- */
.modal__caja--estrecha{ width:min(420px,100%); }
.aviso__sin{ width:100%; justify-content:center; margin-top:.2rem; }

/* ---------- Filtros: en móvil, un botón que abre la lista ---------- */
.aviso__cita{
  margin:0 0 .4rem; padding:.9rem 1rem; background:var(--bone-2);
  border:1px solid var(--line); border-radius:10px; line-height:1.5; font-size:.95rem;
}
.aviso__ayuda{ margin:0 0 1.1rem; font-size:.82rem; color:var(--ink-mute); line-height:1.5; }
.aviso__botones{ display:grid; gap:.6rem; }
.aviso__botones .btn{
  display:flex; align-items:center; justify-content:flex-start; gap:.7rem;
  text-align:left; padding:.85rem 1.1rem; min-height:var(--tap);
}
.aviso__botones .btn svg{ width:20px; height:20px; fill:currentColor; flex:none; }
.aviso__botones .btn--ghost svg{ fill:none; }
.aviso__botones .btn small{
  display:block; font-size:.72rem; letter-spacing:.04em; text-transform:none;
  opacity:.75; margin-top:.15rem; font-weight:400; word-break:break-all;
}
.aviso__sinmail{ margin:0; font-size:.82rem; color:var(--ink-mute); text-align:center; }
/* Tres opciones iguales en una sola fila, también a 390 px */
.aviso__tipos{ display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin:.3rem 0 .9rem; }
.aviso__tipos .chip{ text-align:center; padding:.55rem .25rem; font-size:.74rem; min-width:0; }
.marca-aviso--pendiente{ color:var(--clay); background:rgba(176,112,82,.12); }
.banner-rec{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem 1rem; flex-wrap:wrap;
  margin:0 0 1.4rem; padding:.85rem 1.1rem; border:1px solid var(--clay);
  border-radius:var(--radius); background:rgba(176,112,82,.08); font-size:.92rem;
}
.marca-aviso{
  display:inline-block; margin-top:.25rem; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sage-deep);
  background:rgba(122,139,116,.14); border-radius:999px; padding:.1rem .45rem;
}
.modal__cab{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.hist__item{ border-top:1px solid var(--line); padding:.9rem 0; }
.hist__item:first-child{ border-top:0; }
.hist__cab{ display:flex; align-items:center; gap:.7rem; font-size:.85rem; }
.hist__cambios{ margin:.6rem 0 0; padding-left:1.1rem; font-size:.88rem; color:var(--ink-soft); }
.hist__cambios li{ margin:.25rem 0; }

@media (max-width:760px){
  /* El separador de día no debe parecer una ficha más */
  .tbl tr.tbl__dia{ border:0; background:transparent; padding:0; margin:1.2rem 0 .5rem; }
  .tbl tr.tbl__dia td{ padding:.5rem .2rem !important; }
  .tbl tr.tbl__dia td::before{ display:none; }
  .modal__caja{ padding:1.3rem; max-height:88vh; }
  .bloqueo{ flex-wrap:wrap; gap:.5rem; }
  .bloqueo .chip{ min-height:40px; }
}

@media (max-width:760px){
  /* Los 5 botones de acción deben poder bajar de línea */
  .tbl td[data-l="Acciones"]{ flex-wrap:wrap; }
  .tbl td[data-l="Acciones"] .chip{ flex:1 1 auto; min-width:calc(33% - .3rem); }
  /* La fecha ya la da la cabecera del día: no repetirla en cada ficha */
  .tbl td[data-l="Fecha"]{ display:none; }
}

/* Chip "Sin confirmar": destaca solo cuando hay algo que atender */
.chip--aviso.tiene-pendientes{
  border-color:var(--clay); color:var(--clay); font-weight:500;
}
.chip--aviso.tiene-pendientes.is-on{
  background:var(--clay); border-color:var(--clay); color:var(--bone);
}
#cuenta-pendientes:not(:empty){ margin-left:.15rem; }

/* ===========================================================
   SALUD GINECOLÓGICA
   =========================================================== */
.gine{ background:var(--bone-2); border-block:1px solid var(--line); }
.gine__cab{ max-width:66ch; }
.gine__cab h2{ max-width:26ch; }
.gine__cab .lead{ margin-top:1.1rem; max-width:none; }
.gine__entradilla{
  margin:2.6rem 0 1.6rem; font-family:"Cormorant Garamond",serif;
  font-size:1.3rem; color:var(--sage-deep);
}
.gine__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.gine__item{
  background:var(--bone); padding:1.7rem 1.6rem;
  display:flex; gap:1rem; align-items:flex-start;
  transition:background .35s var(--ease);
}
.gine__item:hover{ background:var(--paper); }
.gine__hoja{ width:20px; height:20px; flex:none; fill:var(--sage); margin-top:.2rem; }
.gine__item h3{ font-size:1.2rem; margin-bottom:.35rem; }
.gine__item p{ margin:0; font-size:.93rem; color:var(--ink-soft); }
.gine__toggle{
  margin-top:1.6rem; display:inline-flex; align-items:center; gap:.55rem;
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:.6rem 1.15rem; cursor:pointer; color:var(--sage-deep);
  font-family:inherit; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.gine__toggle:hover{ background:var(--paper); border-color:var(--sage); }
.gine__toggle svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
.gine__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

.gine__mas{ animation:gineAbrir .35s var(--ease) both; }
@keyframes gineAbrir{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.gine__resto{ margin-top:1.6rem; max-width:66ch; }

.gine__cierre{
  margin:2.4rem 0 0; max-width:70ch; font-size:1.02rem; color:var(--ink-soft);
  padding-left:1.2rem; border-left:2px solid var(--sage);
}

@media (max-width:760px){
  .gine__grid{ grid-template-columns:1fr; }
  .gine__item{ padding:1.3rem 1.2rem; gap:.85rem; }
  .gine__entradilla{ font-size:1.15rem; margin:2rem 0 1.2rem; }
  .gine__cierre{ font-size:.96rem; margin-top:1.8rem; }
}

/* ===========================================================
   SOBRE MÍ — trayectoria y formación
   =========================================================== */
.about__grid{ align-items:start; }
.about__intro h2{ max-width:22ch; }
.about__intro .lead{ margin-top:1.1rem; max-width:none; }
.about__card{ position:sticky; top:calc(var(--hdr-h) + 2rem); }

.form-bloque{ margin-top:clamp(3rem,6vw,5rem); }
.form-bloque__tit{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage); font-family:"Jost",sans-serif; font-weight:500;
  padding-bottom:1rem; border-bottom:1px solid var(--line); margin-bottom:0;
}

/* Línea de tiempo de la formación */
.linea{ list-style:none; margin:0; padding:0; }
.linea__item{
  display:grid; grid-template-columns:150px 1fr; gap:2rem;
  padding:1.7rem 0; border-bottom:1px solid var(--line);
}
.linea__anios{
  font-family:"Cormorant Garamond",serif; font-size:1.3rem;
  color:var(--sage-deep); white-space:nowrap; padding-top:.1rem;
}
.linea__cuerpo h4{
  margin:0 0 .25rem; font-family:"Cormorant Garamond",serif;
  font-size:1.35rem; font-weight:400;
}
.linea__centro{
  display:block; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}
.linea__cuerpo p{ margin:.7rem 0 0; font-size:.95rem; color:var(--ink-soft); max-width:62ch; }

/* Cierre: "Una formación que continúa" + "Mi objetivo" */
.about__cierre{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem);
  margin-top:clamp(3rem,6vw,4.5rem);
}
.cierre__bloque h3{
  font-size:1.7rem; margin-bottom:.9rem; color:var(--sage-deep);
}
.cierre__bloque p{ color:var(--ink-soft); font-size:.98rem; }
.cierre__bloque p:last-child{ margin-bottom:0; }
#sm-objetivo .cierre__bloque{
  background:var(--bone-2); border:1px solid var(--line);
  padding:1.8rem 1.7rem;
}

@media (max-width:1000px){
  .about__card{ position:static; }
}
@media (max-width:760px){
  .about__grid{ gap:2rem; }
  .linea__item{ grid-template-columns:1fr; gap:.4rem; padding:1.4rem 0; }
  .linea__anios{ font-size:1.1rem; }
  .linea__cuerpo h4{ font-size:1.2rem; }
  .about__cierre{ grid-template-columns:1fr; }
  .cierre__bloque h3{ font-size:1.5rem; }
  #sm-objetivo .cierre__bloque{ padding:1.4rem 1.2rem; }
}

.gine__nota{
  margin:1.1rem 0 0; font-size:.85rem; color:var(--ink-mute);
  letter-spacing:.02em;
}

/* Franja intermedia (tablet horizontal): con 5 enlaces + botón el menú
   no cabe a tamaño completo, pero aún no toca el menú hamburguesa. */
@media (min-width:761px) and (max-width:1080px){
  .hdr__in{ gap:1rem; }
  .brand img{ height:32px; }
  .brand b{ font-size:1.05rem; white-space:nowrap; }
  .brand span{ font-size:.54rem; letter-spacing:.14em; white-space:nowrap; }
  .nav{ gap:1.15rem; }
  .nav a{ font-size:.67rem; letter-spacing:.08em; white-space:nowrap; }
  .nav .btn{ padding:.62rem 1rem; font-size:.67rem; letter-spacing:.1em; }
}

/* Aguja de acupuntura junto al nombre */
.brand__sep{ width:1px; height:26px; background:var(--line); flex:none; }
.aguja{ width:25px; height:25px; color:var(--sage); flex:none; }
.ftr .aguja{ color:#8B9084; }
@media (max-width:900px){
  .brand__sep{ display:none; }           /* sin separador, pero la aguja se queda */
  .aguja{ width:21px; height:21px; margin-left:.15rem; }
}
@media (max-width:359px){
  .aguja{ display:none; }                /* móviles muy estrechos */
}