/* The Hormonal Lab · maqueta LOOP · estilos del sitio */
@font-face{font-family:Kalnia;src:url(/fuentes/kalnia-normal.woff2) format("woff2");font-weight:100 700;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:Hanken;src:url(/fuentes/hanken-grotesk-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Hanken;src:url(/fuentes/hanken-grotesk-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --papel:#f7f3ec;--papel-2:#efe8dd;--crema:#efeae3;
  --tinta:#2b2320;--tinta-2:#5f534b;--tinta-3:#6b5f57;
  --linea:rgba(43,35,32,.16);--linea-2:rgba(43,35,32,.08);
  --terracota:#b36a44;--terracota-osc:#925337;--terracota-hondo:#7a4530;
  --oliva:#75684d;--oliva-osc:#4d4531;
  --sobre-oliva:rgba(247,243,236,.82);--linea-oliva:rgba(247,243,236,.2);
  --display:Kalnia,"Times New Roman",serif;
  --texto:Hanken,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:1320px;--margen:clamp(20px,5vw,72px);
  --lado:max(var(--margen),calc((100% - var(--ancho)) / 2));
  /* esquinas: una forma de hoja en varios tamaños + arco + píldora */
  --r-1:4px;--r-2:8px;--r-arco:32px 32px 4px 4px;
  --r-hoja-s:4px 30px 4px 4px;--r-hoja-m:4px 52px 4px 4px;--r-hoja-l:4px 86px 4px 4px;
  --r-hoja-xl:clamp(120px,12.5vw,180px);
  /* movimiento */
  --salida:cubic-bezier(.22,1,.36,1);--recorrido:cubic-bezier(.65,0,.35,1);--irse:cubic-bezier(.4,0,1,1);
  --t-toque:90ms;--t-estado:160ms;--t-corto:240ms;--t-medio:320ms;--t-largo:640ms;
  --d-2:14px;--d-3:26px;--escalon:70ms;
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .11 .1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--papel);-webkit-text-size-adjust:100%;scroll-padding-top:24px}
@media all{html{scroll-behavior:smooth}}
html:has(dialog[open]){overflow:hidden}
body{margin:0;color:var(--tinta);background:var(--grano),var(--papel);font:400 1.0625rem/1.65 var(--texto);-webkit-font-smoothing:antialiased;font-kerning:normal}
::selection{background:rgba(179,106,68,.22)}
:focus-visible{outline:2px solid var(--terracota-osc);outline-offset:3px}
img,svg,iframe{max-width:100%}
p{text-wrap:pretty}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:200}
h1,h2{font-family:var(--display);letter-spacing:-.012em;text-wrap:balance}
h2{font-size:clamp(2.25rem,1.45rem + 2.6vw,3.6rem);line-height:1.04}
h3{font-family:var(--display);font-weight:300;font-size:1.75rem;line-height:1.12}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;padding:10px 14px;background:var(--tinta);color:var(--papel);z-index:30;border-radius:999px}
.saltar:focus{top:12px}
.seccion{padding:clamp(80px,9vw,140px) var(--lado)}
.seccion--papel2{background:var(--grano),var(--papel-2)}
.bajada{color:var(--tinta-2);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;max-width:36em;margin:18px 0 0}
.cabeza-seccion{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.cabeza-seccion .bajada{margin:0}
.nota{color:var(--tinta-3);font-size:.875rem;line-height:1.55}

/* ── Botones y enlaces ── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--terracota-osc);color:var(--papel);font:600 .96875rem/1.1 var(--texto);text-decoration:none;cursor:pointer;transition:background-color var(--t-estado) ease,transform var(--t-toque) var(--salida)}
.boton svg{width:16px;height:16px;flex:none;transition:transform var(--t-corto) var(--salida)}
.boton:active{transform:scale(.97)}
.boton--chico{min-height:44px;padding:0 20px;font-size:.90625rem}
.boton--claro{background:var(--papel);color:var(--tinta)}
.boton--fantasma{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px rgba(43,35,32,.25)}
@media (hover:hover) and (pointer:fine){
  .boton:hover{background:var(--terracota-hondo)}
  .boton--claro:hover{background:#fff}
  .boton--fantasma:hover{background:rgba(43,35,32,.06)}
  .boton:hover svg{transform:translateX(3px)}
}
.enlace{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--tinta);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--linea);text-underline-offset:.32em;transition:text-decoration-color var(--t-estado)}
.enlace:hover{text-decoration-color:currentColor}
.enlace svg,.tarjeta-ig>svg{width:16px;height:16px;flex:none;transition:transform var(--t-corto) var(--salida)}
@media (hover:hover) and (pointer:fine){.enlace:hover svg,.tarjeta-ig:hover>svg{transform:translateX(3px)}}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.dato{margin:14px 0 0;color:var(--tinta-3);font-size:.875rem}

/* ── Cielo (portada y cabeceras) ── */
.cielo{position:relative;isolation:isolate;overflow:hidden;color:var(--txt);--txt:#2b2320;--txt2:rgba(43,35,32,.8);--punteo:rgba(43,35,32,.38);--sombra-txt:none;transition:color 1.2s var(--recorrido)}
[data-momento=noche] .cielo{--txt:#fbf7f1;--txt2:rgba(251,247,241,.84);--punteo:rgba(251,247,241,.52);--sombra-txt:0 1px 22px rgba(20,24,40,.28)}
.cielo--portada{min-height:max(640px,100svh);display:flex;flex-direction:column}
.cielo--corto{min-height:clamp(420px,58svh,600px);display:flex;flex-direction:column}
.cielo__lienzo{position:absolute;inset:0;width:100%;height:100%;z-index:-4;background:linear-gradient(#aebbd2,#e7cdc6 55%,#f6e4d4)}
[data-momento=mediodia] .cielo__lienzo{background:linear-gradient(#9fb6d4,#bccbde 55%,#dde2e8)}
[data-momento=noche] .cielo__lienzo{background:linear-gradient(#121426,#272241 55%,#57394a)}
.cielo__rama{position:absolute;z-index:-2;pointer-events:none;filter:blur(9px);opacity:.9;transform-origin:100% 100%}
.cielo__rama--der{right:-2vw;bottom:-4vh;width:min(46vw,620px);height:min(72vh,660px)}
.cielo__rama--izq{left:-3vw;bottom:-6vh;width:min(30vw,380px);height:min(46vh,420px);filter:blur(15px);opacity:.65;transform-origin:0 100%}
.cielo--corto .cielo__rama--der{height:min(60vh,520px);width:min(34vw,440px)}
.cielo--corto .cielo__rama--izq{display:none}
.cielo__aves{position:absolute;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.ave{position:absolute;left:0;top:0;width:22px;height:10px;opacity:0}
.ave svg{display:block;width:100%;height:100%;transform-origin:50% 60%}
.ave path{fill:none;stroke:rgba(58,46,52,.55);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[data-momento=noche] .ave path{stroke:rgba(240,232,222,.42)}
.ave:nth-child(2){--dy:22px;--dx:-30px;width:17px}
.ave:nth-child(3){--dy:-12px;--dx:-60px;width:14px}
@media all{
  .cielo__rama--der{animation:vaiven 11s ease-in-out infinite alternate}
  .cielo__rama--izq{animation:vaiven 13s ease-in-out infinite alternate-reverse}
  .ave{animation:cruzar 28s linear infinite}
  .ave svg{animation:aletear .5s ease-in-out infinite alternate}
  .ave:nth-child(2){animation-delay:.9s}.ave:nth-child(2) svg{animation-delay:-.2s}
  .ave:nth-child(3){animation-delay:1.7s}.ave:nth-child(3) svg{animation-delay:-.35s}
}
@keyframes vaiven{from{transform:rotate(-1.4deg)}to{transform:rotate(1.1deg) translateY(-6px)}}
@keyframes cruzar{0%{transform:translate(calc(-8vw + var(--dx,0px)),calc(30vh + var(--dy,0px)));opacity:0}4%{opacity:1}40%{transform:translate(calc(108vw + var(--dx,0px)),calc(14vh + var(--dy,0px)));opacity:1}41%,100%{opacity:0;transform:translate(110vw,14vh)}}
@keyframes aletear{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}

/* Cabecera (va dentro del cielo) */
.cab{display:flex;align-items:center;gap:32px;padding:20px var(--lado)}
.cab .marca{display:block;line-height:0;color:var(--txt);transition:color 1.2s var(--recorrido)}
.cab .logo{width:118px;height:auto}
.cab nav{margin-left:auto;display:flex;gap:26px}
.cab nav a{position:relative;color:var(--txt);text-decoration:none;font-size:.9375rem;opacity:.86;padding:10px 0}
.cab nav a[aria-current=page]{opacity:1}
.cab nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;opacity:.6}
.cab nav a:hover{opacity:1}
.cab__menu{display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--txt);cursor:pointer}
.cab__menu svg{width:22px;height:22px}

.cielo__centro{flex:1;display:grid;justify-items:center;align-content:center;text-align:center;padding:clamp(24px,6vh,80px) 20px clamp(96px,14vh,150px)}
.cielo--corto .cielo__centro{padding-bottom:clamp(56px,9vh,96px)}
.cielo__fecha{margin:0 0 20px;font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt2);text-shadow:var(--sombra-txt)}
.cielo h1{font-size:clamp(3rem,1.5rem + 5.2vw,6.2rem);line-height:.98;letter-spacing:-.015em;text-shadow:var(--sombra-txt)}
.cielo--corto h1{font-size:clamp(2.6rem,1.5rem + 3.8vw,4.8rem)}
.cielo h1 .l{display:block}
.cielo h1 .l+.l{padding-left:1.4em}
.cielo__entrada{margin:26px 0 0;max-width:34em;color:var(--txt2);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.55;text-shadow:var(--sombra-txt)}
.indice{list-style:none;margin:clamp(30px,5vh,52px) 0 0;padding:0;width:min(460px,100%);text-align:left;text-shadow:var(--sombra-txt)}
.indice a{display:flex;align-items:baseline;gap:8px;padding:8px 0;color:var(--txt);text-decoration:none;transition:opacity var(--t-estado)}
.indice .n{font-variant-numeric:tabular-nums;color:var(--txt2);font-size:.875rem}
.indice .p{flex:1;border-bottom:1.5px dotted var(--punteo);transform:translateY(-4px);transition:border-color var(--t-estado)}
.indice a:hover .p,.indice a[aria-current=page] .p{border-bottom-color:currentColor}
.cielo :focus-visible{outline-color:var(--txt)}
.cielo__cta{margin-top:30px;display:grid;justify-items:center;gap:10px}
.cielo__cta .dato{color:var(--txt2);margin:0;text-shadow:var(--sombra-txt)}
.cielo__pie{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--lado);border-top:1px solid color-mix(in srgb,var(--txt) 22%,transparent);font-size:.8125rem;color:var(--txt2)}
.momentos{display:flex;gap:0}
.momentos button{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.momentos button span{width:20px;height:20px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--txt) 45%,transparent);transition:box-shadow var(--t-estado)}
.momentos button[aria-pressed=true] span{box-shadow:0 0 0 2px color-mix(in srgb,var(--txt) 85%,transparent)}
.momentos [data-momento-btn=amanecer] span{background:linear-gradient(#aebbd2,#f6e4d4)}
.momentos [data-momento-btn=mediodia] span{background:linear-gradient(#9fb6d4,#dde2e8)}
.momentos [data-momento-btn=noche] span{background:linear-gradient(#121426,#57394a)}
@media all{
  .cielo__centro>*{animation:subir var(--t-largo) var(--salida) both}
  .cielo h1 .l{animation:subir 720ms var(--salida) both}
  .cielo h1 .l+.l{animation-delay:80ms}
  .cielo__centro>.cielo__entrada{animation-delay:160ms}
  .cielo__centro>.cielo__cta{animation-delay:240ms}
  .cielo__centro>.indice{animation-delay:320ms}
}
@keyframes subir{from{opacity:0;transform:translate3d(0,var(--sube,14px),0)}}

/* Menú en teléfono */
.menu-movil{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--grano),var(--papel);color:var(--tinta)}
.menu-movil[open]{display:flex;flex-direction:column}
.menu-movil::backdrop{background:transparent}
.menu-movil__cab{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.menu-movil .logo{width:104px}
.menu-movil .indice{margin:24px 20px 0;width:auto;font-size:1.25rem;text-shadow:none;--txt:var(--tinta);--txt2:var(--tinta-3);--punteo:rgba(43,35,32,.3)}
.menu-movil .indice a{padding:12px 0}
.menu-movil__pie{margin-top:auto;padding:20px}
.menu-movil__pie .boton{width:100%}
.cerrar{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--tinta-2);cursor:pointer}
.cerrar:hover{background:var(--linea-2);color:var(--tinta)}

/* ── Motivos ── */
.motivos{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px 72px;align-items:center}
.motivos__lista{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;border:0}
.motivo{position:relative}
.motivo input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.motivo span{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px 10px 14px;border-radius:999px;border:1px solid rgba(43,35,32,.2);background:rgba(255,255,255,.45);font-size:1rem;line-height:1.3;cursor:pointer;transition:background-color var(--t-estado),border-color var(--t-estado),color var(--t-estado),transform var(--t-toque) var(--salida)}
.motivo span svg{width:18px;height:18px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(43,35,32,.3);padding:3px;color:transparent;transition:color var(--t-estado),background-color var(--t-estado),box-shadow var(--t-estado)}
.motivo input:checked+span{background:var(--terracota-osc);border-color:var(--terracota-osc);color:var(--papel)}
.motivo input:checked+span svg{color:var(--terracota-osc);background:var(--papel);box-shadow:none}
.motivo input:focus-visible+span{outline:2px solid var(--terracota-osc);outline-offset:3px}
.motivo input:active+span{transform:scale(.97)}
.motivos__resumen{margin:22px 0 0;min-height:1.6em;color:var(--tinta-2);font-size:.9375rem}
.motivos__figura{justify-self:center;width:min(100%,380px)}
.roseton{display:block;width:100%;height:auto;overflow:visible}
.roseton .petalo{fill:rgba(179,106,68,0);stroke:rgba(43,35,32,.28);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill .5s var(--salida),stroke .5s var(--salida)}
.roseton .petalo.activo{fill:rgba(179,106,68,.22);stroke:var(--terracota-osc)}
.roseton__centro{fill:none;stroke:rgba(43,35,32,.25);vector-effect:non-scaling-stroke}
.mov .roseton .petalo{stroke-dasharray:1;stroke-dashoffset:1}
.mov .motivos__figura.visto .petalo{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--recorrido),fill .5s var(--salida),stroke .5s var(--salida)}
.mov .motivos__figura.visto .petalo:nth-child(3){transition-delay:.12s}.mov .motivos__figura.visto .petalo:nth-child(4){transition-delay:.24s}.mov .motivos__figura.visto .petalo:nth-child(5){transition-delay:.36s}.mov .motivos__figura.visto .petalo:nth-child(6){transition-delay:.48s}.mov .motivos__figura.visto .petalo:nth-child(7){transition-delay:.6s}.mov .motivos__figura.visto .petalo:nth-child(8){transition-delay:.72s}

/* ── Ciclo ── */
.ciclo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 72px;align-items:center}
.ciclo__figura{margin:0;position:relative;justify-self:center;width:min(100%,600px)}
.dial{display:block;width:100%;height:auto;overflow:visible;font-family:var(--texto);-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.dial[hidden]{display:none!important}
@media (hover:hover){.dial{cursor:pointer}}
.dial .base{fill:none;stroke:var(--linea-2);stroke-width:1;vector-effect:non-scaling-stroke}
.dial .fertil{fill:rgba(179,106,68,.2)}
.dial .sector{fill:rgba(43,35,32,.05)}
.dial .area{fill:var(--c);fill-opacity:.1}
.dial .linea{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dial--simple .linea{stroke-width:2.5}
.dial .etq-banda{fill:var(--tinta-2);font-size:calc(12px * var(--u,1.3));font-weight:500;letter-spacing:.03em}
.dial .marca{stroke:var(--linea);stroke-width:1;vector-effect:non-scaling-stroke}
.dial .arco-fase{fill:none;stroke:rgba(43,35,32,.26);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke var(--t-corto)}
.dial .arco-fase.activa{stroke:var(--tinta);stroke-width:2.5}
.dial .etq-fase{fill:var(--tinta-3);font-size:calc(13px * var(--u,1.3));letter-spacing:.02em;transition:fill var(--t-corto)}
.dial .etq-fase.activa{fill:var(--tinta)}
.dial .etq-origen{fill:var(--tinta-2);font-size:calc(12px * var(--u,1.3))}
.dial .flecha{fill:none;stroke:var(--tinta-2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dial .centro{fill:var(--papel);stroke:var(--linea);vector-effect:non-scaling-stroke}
.dial .c-dia{fill:var(--tinta-3);font-size:calc(12px * var(--u,1.3));letter-spacing:.14em}
.dial .c-num{fill:var(--tinta);font-family:var(--display);font-weight:200;font-size:88px}
.dial--simple .c-num{font-size:110px}
.dial .c-fase{fill:var(--tinta-2);font-size:calc(14px * var(--u,1.3));font-style:italic}
.dial .punto{fill:var(--c);stroke:var(--papel);stroke-width:2;vector-effect:non-scaling-stroke}
.dial .perilla{fill:var(--tinta);transform-box:fill-box;transform-origin:center}
.dial .perilla.pulso{animation:pulso .6s var(--salida)}
@keyframes pulso{50%{transform:scale(1.6)}}
.mov .ciclo__figura{opacity:0;transform:scale(.97);transition:opacity .7s var(--salida),transform .7s var(--salida)}
.mov .ciclo__figura.visto{opacity:1;transform:none}
.mov .ciclo__figura .linea{stroke-dasharray:1;stroke-dashoffset:1}
.mov .ciclo__figura.visto .linea{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--recorrido) .2s}
.mov .ciclo__figura .area{opacity:0}
.mov .ciclo__figura.visto .area{opacity:1;transition:opacity 1s ease 1.2s}
.ciclo__pie{margin:10px 0 0;text-align:center;color:var(--tinta-3);font-size:.875rem}
.fases{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.fases button{min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid rgba(43,35,32,.2);background:rgba(255,255,255,.4);color:var(--tinta);font:500 .9375rem/1.2 var(--texto);cursor:pointer;transition:background-color var(--t-estado),color var(--t-estado),border-color var(--t-estado),transform var(--t-toque) var(--salida)}
.fases button small{display:block;font-weight:400;font-size:.75rem;color:var(--tinta-3)}
.fases button[aria-pressed=true]{background:var(--oliva-osc);border-color:var(--oliva-osc);color:var(--papel)}
.fases button[aria-pressed=true] small{color:rgba(247,243,236,.8)}
.fases button:active{transform:scale(.97)}
.lectura__num{margin:0;color:var(--tinta-3);font-size:.9375rem;font-variant-numeric:tabular-nums}
.lectura__fase{margin:2px 0 0;font:200 clamp(2.2rem,1.6rem + 1.6vw,3rem)/1.05 var(--display)}
.lectura__medico{margin:6px 0 0;color:var(--tinta-3);font-size:.875rem;min-height:1.4em}
.lectura__bloque{margin-top:22px}
.lectura__bloque h3{font:600 .8125rem/1.3 var(--texto);letter-spacing:.02em;color:var(--tinta-3);margin:0 0 6px}
.lectura__bloque p{margin:0;min-height:4.8em}
.lectura__fertil{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:4px 12px 4px 8px;border-radius:999px;background:rgba(179,106,68,.14);color:var(--terracota-hondo);font-size:.8125rem;font-weight:600}
.lectura__fertil::before{content:"";width:10px;height:10px;border-radius:50%;background:rgba(179,106,68,.55)}
.rango{display:block;position:relative;margin:26px 0 0;padding-bottom:22px}
.rango input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:0;background:transparent;cursor:pointer}
.rango input::-webkit-slider-runnable-track{height:1px;background:var(--tinta-3)}
.rango input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8.5px;border-radius:50%;background:var(--tinta);border:4px solid var(--papel);box-shadow:0 0 0 1px var(--tinta)}
.rango input::-moz-range-track{height:1px;background:var(--tinta-3)}
.rango input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--tinta);border:4px solid var(--papel);box-shadow:0 0 0 1px var(--tinta)}
@media (pointer:coarse){.rango input{height:44px}.rango input::-webkit-slider-thumb{width:28px;height:28px;margin-top:-13.5px}.rango input::-moz-range-thumb{width:18px;height:18px}}
.escala{position:absolute;left:9px;right:9px;bottom:0;height:16px;color:var(--tinta-3);font-size:.75rem;font-variant-numeric:tabular-nums}
.escala span{position:absolute;transform:translateX(-50%)}
.pista{margin:8px 0 0;color:var(--tinta-3);font-size:.8125rem}
.pista--cursor{display:none}
@media (hover:hover) and (pointer:fine){.pista--cursor{display:inline}.pista--toque{display:none}}
.hormonas{margin-top:22px;border-top:1px solid var(--linea)}
.hormonas summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none;color:var(--tinta-2);font-size:.9375rem}
.hormonas summary::-webkit-details-marker{display:none}
.hormonas summary svg{width:14px;height:14px;transition:transform var(--t-corto) var(--salida)}
.hormonas[open] summary svg{transform:rotate(45deg)}
.hormonas ul{list-style:none;margin:0;padding:0}
.hormonas li{display:grid;grid-template-columns:18px 1fr auto;gap:4px 12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--linea-2);font-size:.9375rem}
.hormonas li .clave{align-self:center;height:3px;border-radius:2px;background:var(--c)}
.hormonas li small{grid-column:2 / -1;color:var(--tinta-3);font-size:.8125rem;line-height:1.4}
.hormonas li b{font-weight:600}
.hormonas .nota{margin:10px 0 4px}
.mov .hormonas[open] ul{animation:subir var(--t-corto) var(--salida)}
.leyenda{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:12px 0 0;padding:0;list-style:none;color:var(--tinta-2);font-size:.875rem}
.leyenda li{display:inline-flex;align-items:center;gap:8px}
.leyenda i{display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--c)}
.leyenda .f{width:12px;height:12px;border-radius:50%;background:rgba(179,106,68,.3)}

/* Etapas del ciclo en texto (página Tu ciclo) */
.etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.etapa{padding:28px 26px 30px;border-radius:var(--r-hoja-s);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--linea-2)}
.etapa .dias{color:var(--terracota-osc);font-size:.8125rem;font-weight:600}
.etapa h3{margin:6px 0 12px}
.etapa h4{margin:16px 0 4px;font-size:.8125rem;color:var(--tinta-3);font-weight:600}
.etapa p{margin:0;font-size:.96875rem;line-height:1.6;color:var(--tinta-2)}

/* ── Consultas (tarjetas hoja con foto) ── */
.consultas{position:relative;overflow:hidden;background:var(--grano),var(--oliva-osc);color:var(--papel)}
.consultas::after{content:"";position:absolute;top:-140px;right:6%;width:420px;height:420px;border:1px solid rgba(247,243,236,.12);border-radius:50%;pointer-events:none}
.consultas .bajada{color:var(--sobre-oliva)}
.tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.tarjeta{position:relative;display:grid;grid-template-columns:42% 58%;min-height:520px;overflow:hidden;background:var(--papel);color:var(--tinta);border-radius:var(--r-hoja-xl) 8px 8px 8px;transition:translate var(--t-corto) var(--salida)}
.tarjeta--b{grid-template-columns:58% 42%;border-radius:8px 8px var(--r-hoja-xl) 8px}
.tarjeta--b .tarjeta__foto{order:2}
.tarjeta__foto{position:relative;overflow:hidden;background:var(--crema)}
.tarjeta__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--salida)}
.tarjeta--a .tarjeta__foto img{object-position:50% 55%}
.tarjeta--b .tarjeta__foto img{object-position:84% 50%}
.tarjeta__num{position:absolute;top:22px;right:22px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(247,243,236,.92);color:var(--tinta);font-size:.75rem;font-weight:600}
.tarjeta__cuerpo{display:flex;flex-direction:column;padding:34px 34px 30px}
.tarjeta__meta{display:flex;align-items:center;gap:8px;margin:0;color:var(--oliva-osc);font-size:.875rem;font-weight:500}
.tarjeta__meta i{width:4px;height:4px;border-radius:50%;background:var(--terracota)}
.tarjeta h3{margin:14px 0 0;font-size:clamp(1.75rem,1.4rem + .8vw,2.25rem)}
.tarjeta__para{margin:6px 0 0;color:var(--terracota-osc);font-size:.9375rem;font-weight:600}
.tarjeta__texto{margin:16px 0 0;color:var(--tinta-2);font-size:.96875rem;line-height:1.6}
.tarjeta__pie{margin-top:auto;padding-top:22px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.tarjeta__pie small{display:block;color:var(--tinta-3);font-size:.8125rem}
.tarjeta__pie strong{display:block;font:300 1.875rem/1.1 var(--texto);letter-spacing:-.015em;margin:2px 0 4px}
.tarjeta__pie em{display:block;font-style:normal;color:var(--terracota-osc);font-size:.8125rem;font-weight:600}
.agendar{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0;border:0;background:none;color:var(--terracota-osc);font:600 .9375rem/1.2 var(--texto);cursor:pointer;text-align:right}
.agendar i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--terracota);color:#fff;transition:transform var(--t-corto) var(--salida),background-color var(--t-estado)}
.agendar i svg{width:18px;height:18px}
.agendar:active i{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .tarjeta:hover{translate:0 -4px}
  .tarjeta:hover .tarjeta__foto img{transform:scale(1.03)}
  .agendar:hover i{transform:translateX(3px);background:var(--terracota-osc)}
}
.ten-a-mano{margin-top:22px;padding:26px 30px;border-radius:var(--r-hoja-m);background:rgba(247,243,236,.07);box-shadow:inset 0 0 0 1px var(--linea-oliva);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:12px 32px}
.ten-a-mano h3{font:600 1rem/1.4 var(--texto)}
.ten-a-mano ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;color:var(--sobre-oliva);font-size:.9375rem}
.consultas .enlace{color:var(--papel);text-decoration-color:var(--linea-oliva)}

/* ── Así funciona ── */
.pasos{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px;margin-top:8px}
.pasos .onda{position:absolute;left:4%;right:4%;top:6px;width:92%;height:90px;z-index:0;pointer-events:none;overflow:visible}
.pasos .onda path{fill:none;stroke:var(--terracota);stroke-width:1.5;opacity:.55;vector-effect:non-scaling-stroke}
.mov .pasos .onda path{stroke-dasharray:1;stroke-dashoffset:1}
.mov .pasos.visto .onda path{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--recorrido)}
.paso{position:relative;z-index:1}
.paso__n{display:grid;place-items:center;width:58px;height:68px;border-radius:var(--r-arco);background:var(--papel);box-shadow:inset 0 0 0 1px rgba(43,35,32,.2);font:300 1.75rem/1 var(--display)}
.paso h3{margin:22px 0 8px;font-size:1.5rem}
.paso p{margin:0;color:var(--tinta-2);font-size:.96875rem;max-width:26em}

/* ── Conóceme ── */
.conoce{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px 80px;align-items:start}
.retrato{position:relative;margin:0;aspect-ratio:4/5;border-radius:999px 999px var(--r-2) var(--r-2);overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#f3e6dc,#e9ddd0 60%,#e2d3c4)}
.retrato .huella{position:absolute;inset:8% 6% auto;width:88%;height:auto}
.huella path{fill:none;stroke:var(--c);stroke-width:1.1;opacity:.5;vector-effect:non-scaling-stroke}
.mov .retrato .huella path{stroke-dasharray:1;stroke-dashoffset:1}
.mov .retrato.visto .huella path{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--recorrido);transition-delay:calc(var(--k) * 45ms)}
.retrato figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 24px;color:var(--tinta-2);font-size:.8125rem;text-align:center}
.conoce__nombre{margin:0;color:var(--terracota-osc);font-size:.9375rem;font-weight:600}
.credenciales{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.credenciales li{padding:6px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(43,35,32,.18);font-size:.875rem;color:var(--tinta-2)}
.conoce__texto p{color:var(--tinta-2);max-width:36em}
.conoce__texto .destacado{color:var(--tinta);font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:300;line-height:1.5}
.conoce__texto .compromiso{margin:28px 0 0;padding:30px 34px;border-radius:var(--r-hoja-m);background:var(--grano),var(--oliva-osc);color:rgba(247,243,236,.94);font:300 1.3125rem/1.5 var(--display)}
.firma{margin:26px 0 0;font:200 2.25rem/1 var(--display);color:var(--tinta)}
.cita{margin:0;padding:clamp(80px,10vw,150px) var(--lado);text-align:center;background:var(--grano),var(--papel-2)}
.cita__marca{display:block;height:60px;font:300 110px/1 var(--display);color:var(--terracota)}
.cita p{max-width:17em;margin:20px auto 0;font:200 clamp(2rem,1.2rem + 3vw,3.6rem)/1.12 var(--display);letter-spacing:-.01em;text-wrap:balance}
.cita footer{margin-top:24px;color:var(--tinta-3);font-size:.875rem}

/* ── Experiencias ── */
.experiencias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.experiencia{position:relative;display:flex;flex-direction:column;gap:18px;padding:30px 28px;border-radius:var(--r-hoja-m);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--linea-2)}
.experiencia .sello{width:52px;height:52px}
.sello path{fill:rgba(179,106,68,.12);stroke:var(--terracota);stroke-width:1.2;vector-effect:non-scaling-stroke}
.experiencia blockquote{margin:0;font:300 1.25rem/1.45 var(--display)}
.experiencia footer{margin-top:auto;color:var(--tinta-3);font-size:.875rem}
.ejemplo{position:absolute;top:18px;right:20px;padding:3px 10px;border-radius:999px;background:var(--papel-2);color:var(--tinta-2);font-size:.75rem;font-weight:600}
.experiencia--vacia{align-items:flex-start;justify-content:center;background:transparent;box-shadow:inset 0 0 0 1px dashed}
.formulario{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;max-width:760px}
.formulario .ancho{grid-column:1 / -1}
.campo{display:grid;gap:6px;color:var(--tinta-2);font-size:.875rem;font-weight:500}
.campo em{font-style:normal;font-weight:400;color:var(--tinta-3)}
.campo input,.campo textarea,.campo select{width:100%;min-height:48px;padding:12px 14px;border:1px solid rgba(77,69,49,.24);border-radius:var(--r-1);background:rgba(255,255,255,.6);color:var(--tinta);font:400 1rem/1.4 var(--texto);transition:border-color var(--t-estado),box-shadow var(--t-estado),background-color var(--t-estado)}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--terracota-osc);background:#fff;box-shadow:0 0 0 3px rgba(179,106,68,.12)}
.campo .error{margin:0;color:var(--terracota-hondo);font-size:.8125rem;font-weight:500}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;color:var(--tinta-2);cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--terracota-osc);flex:none}
.aviso-maqueta{margin:12px 0 0;color:var(--tinta-3);font-size:.8125rem}
.gracias{padding:30px 34px;border-radius:var(--r-hoja-m);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--linea-2);max-width:760px}

/* ── Redes ── */
.redes{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px;align-items:start}
.fb-tarjeta{display:grid;gap:14px;padding:0 0 4px;text-decoration:none;color:var(--tinta)}
.fb-tarjeta__portada{display:grid;place-items:center;height:150px;border-radius:var(--r-hoja-s);background:var(--grano),var(--terracota);color:var(--papel)}
.fb-tarjeta__portada .logo{width:150px}
.fb-tarjeta__texto strong{display:block;font:400 1.25rem/1.3 var(--display)}
.fb-tarjeta__texto small{color:var(--tinta-3);font-size:.875rem}
.fb-tarjeta .boton{justify-self:start}
.red{padding:26px;border-radius:var(--r-hoja-m);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--linea-2)}
.red__cab{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.red__icono{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--terracota-osc);color:var(--papel);flex:none}
.red__icono svg{width:22px;height:22px}
.red__cab h3{font-size:1.5rem}
.red__cab p{margin:0;color:var(--tinta-3);font-size:.875rem}
.red__cab .enlace{margin-left:auto}
.red iframe{display:block;width:100%;border:0;border-radius:var(--r-2);background:#fff}
.red--ig{container-type:inline-size}
.red--ig iframe{height:560px;height:calc(66.7cqi + 230px)}
.red--fb iframe{height:640px}
.substack{display:grid;gap:12px}
.articulo{display:block;padding:18px 20px;border-radius:var(--r-hoja-s);background:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px var(--linea-2);transition:translate var(--t-corto) var(--salida)}
.articulo:hover{translate:0 -2px}
.articulo small{color:var(--tinta-3);font-size:.8125rem}
.articulo strong{display:block;margin:4px 0;font:400 1.25rem/1.3 var(--display)}
.articulo p{margin:0;color:var(--tinta-2);font-size:.9375rem}
.substack__vacio{padding:26px;border-radius:var(--r-hoja-s);background:var(--papel-2);color:var(--tinta-2)}
.substack__vacio p{margin:0 0 14px}
.redes__lado{display:grid;gap:22px;align-content:start}

/* ── Preguntas ── */
.preguntas{max-width:880px}
.pregunta{border-top:1px solid var(--linea)}
.pregunta:last-child{border-bottom:1px solid var(--linea)}
.pregunta summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none;font:300 1.25rem/1.35 var(--display)}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary svg{width:16px;height:16px;flex:none;color:var(--terracota-osc);transition:transform var(--t-corto) var(--salida)}
.pregunta[open] summary svg{transform:rotate(45deg)}
.pregunta p{margin:0 0 20px;max-width:44em;color:var(--tinta-2)}
.mov .pregunta[open] p{animation:subir var(--t-corto) var(--salida);--sube:-4px}

/* ── Cierre ── */
.cierre{padding:clamp(40px,6vw,80px) var(--lado) clamp(80px,9vw,130px)}
.cierre__hoja{position:relative;overflow:hidden;padding:clamp(40px,6vw,80px);border-radius:4px 120px 4px 4px;background:var(--grano),var(--terracota-osc);color:var(--papel)}
.cierre__hoja .trazo{display:block;width:100%;height:clamp(70px,9vw,110px);margin-bottom:clamp(28px,4vw,48px)}
.trazo path{fill:none;stroke:rgba(247,243,236,.6);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.trazo path+path{stroke:rgba(247,243,236,.35)}
.mov .trazo path{stroke-dasharray:1;stroke-dashoffset:1}
.mov .visto .trazo path,.mov .trazo.visto path{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--recorrido)}
.cierre h2{max-width:14em}
.cierre p{max-width:34em;color:var(--papel)}
.cierre .acciones{margin-top:28px}
.tarjeta-ig{display:grid;grid-template-columns:52px 1fr 20px;gap:14px;align-items:center;max-width:430px;padding:14px 18px;border-radius:var(--r-hoja-s);background:rgba(0,0,0,.12);box-shadow:inset 0 0 0 1px rgba(247,243,236,.3);color:var(--papel);text-decoration:none;transition:translate var(--t-corto) var(--salida)}
.tarjeta-ig .red__icono{background:var(--papel);color:var(--terracota-osc)}
.tarjeta-ig small{display:block;font-size:.8125rem}
.tarjeta-ig strong{font:400 1.25rem/1.2 var(--display)}
.tarjeta-ig:hover{translate:0 -3px}
.lunas{display:block;width:min(272px,70%);height:auto;margin:0 auto}
.lunas .luna circle{fill:none;stroke:rgba(43,35,32,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.lunas .luz{fill:rgba(43,35,32,.2)}
.lunas .luna.hoy circle{stroke:var(--terracota-osc)}
.lunas .luna.hoy .luz{fill:var(--terracota)}
.separador{padding:26px var(--lado) 0;text-align:center}
.separador p{margin:8px 0 0;color:var(--tinta-3);font-size:.8125rem}

/* ── Pie ── */
.pie{display:grid;grid-template-columns:auto 1fr auto;gap:28px 64px;align-items:start;padding:44px var(--lado) 36px;border-top:1px solid var(--linea);color:var(--tinta-2);font-size:.9375rem}
.pie .logo{width:104px;color:var(--tinta)}
.pie p{margin:0 0 4px}
.pie nav{display:grid;grid-template-columns:repeat(2,auto);column-gap:40px;justify-items:start}
.pie nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta-2);text-decoration:none}
.pie nav a:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:.3em}
.pie__legal{grid-column:1 / -1;margin:8px 0 0!important;padding-top:20px;border-top:1px solid var(--linea-2);color:var(--tinta-3);font-size:.8125rem}

/* ── Barra fija (teléfono) ── */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(247,243,236,.97);box-shadow:0 -1px 0 var(--linea),0 -10px 30px -12px rgba(43,35,32,.25);transform:translateY(calc(100% + 8px));visibility:hidden;transition:transform 200ms var(--irse),visibility 0s linear 200ms}
.barra.ver{transform:none;visibility:visible;transition:transform 280ms var(--salida),visibility 0s}
.barra p{margin:0;font-size:.8125rem;line-height:1.35;color:var(--tinta-2)}
.barra b{display:block;font-size:.875rem;white-space:nowrap;color:var(--tinta)}
.barra .boton{min-height:48px;padding:0 20px;flex:none}

/* ── Agenda ── */
.agenda{width:min(1120px,calc(100% - 48px));height:min(780px,calc(100dvh - 48px));max-height:none;padding:0;border:0;border-radius:var(--r-hoja-l);overflow:hidden;background:var(--papel);color:var(--tinta);box-shadow:0 35px 100px rgba(22,18,12,.34)}
.agenda[open]{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr)}
.agenda::backdrop{background:rgba(37,32,25,.62)}
@media all{
  .agenda[open]{animation:agenda-entra 320ms var(--salida)}
  .agenda[open]::backdrop{animation:velo 240ms ease}
  .agenda.cerrando{animation:agenda-sale 180ms var(--irse) forwards}
}
@keyframes agenda-entra{from{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes agenda-sale{to{opacity:0;transform:translateY(8px)}}
@keyframes velo{from{opacity:0}}
.agenda__resumen{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#fff;background:var(--oliva-osc)}
.agenda__resumen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
.agenda__resumen::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(30,26,20,.3),rgba(30,26,20,.82) 55%)}
.agenda__resumen>*:not(img){position:relative;z-index:1}
.agenda__resumen .logo{position:absolute;top:26px;left:26px;width:88px;color:#fff}
.agenda__resumen small{font-size:.8125rem;opacity:.9}
.agenda__resumen h3{margin:4px 0 10px;font-size:2rem;color:#fff}
.agenda__resumen dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.3);font-size:.875rem}
.agenda__resumen dt{opacity:.8}
.agenda__resumen dd{margin:0;text-align:right;font-weight:600}
.agenda__contenido{position:relative;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.agenda__form{display:grid;gap:26px;padding:30px 38px 0}
.agenda__cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.agenda__cabeza h2{font-size:2.25rem}
.agenda__cabeza p{margin:6px 0 0;color:var(--tinta-2);font-size:.9375rem}
.agenda fieldset{min-width:0;margin:0;padding:0;border:0}
.agenda legend{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0;font:400 1.25rem/1.2 var(--display)}
.agenda legend .n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(77,69,49,.35);font:600 .75rem/1 var(--texto);color:var(--oliva-osc);transition:background-color var(--t-estado),color var(--t-estado)}
.agenda fieldset.completo legend .n{background:var(--oliva-osc);color:var(--papel);box-shadow:none}
.agenda legend small{font:400 .875rem/1 var(--texto);color:var(--tinta-3)}
.eleccion{position:relative;display:block;cursor:pointer}
.eleccion input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.eleccion>span{display:block;border:1px solid rgba(77,69,49,.22);background:rgba(255,255,255,.5);transition:background-color var(--t-estado),border-color var(--t-estado),color var(--t-estado),transform var(--t-toque) var(--salida)}
.eleccion input:focus-visible+span{outline:2px solid var(--terracota-osc);outline-offset:2px}
.eleccion:active>span{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.eleccion:hover>span{border-color:rgba(43,35,32,.45)}}
.sesiones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sesiones .eleccion>span{padding:14px 16px;border-radius:var(--r-hoja-s)}
.sesiones b{display:block;font-weight:600}
.sesiones small{display:block;color:var(--tinta-3);font-size:.8125rem;margin-top:2px}
.sesiones input:checked+span{background:var(--oliva-osc);border-color:var(--oliva-osc);color:var(--papel)}
.sesiones input:checked+span small{color:rgba(247,243,236,.8)}
.dias{display:grid;grid-auto-flow:column;grid-auto-columns:76px;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.dias .eleccion{scroll-snap-align:start}
.dias .eleccion>span{display:flex;flex-direction:column;align-items:center;justify-content:center;height:84px;border-radius:var(--r-arco);line-height:1.15;font-size:.75rem;font-weight:500}
.dias b{display:block;margin:3px 0;font:300 1.5rem/1 var(--texto)}
.dias input:checked+span{background:var(--oliva-osc);border-color:var(--oliva-osc);color:var(--papel)}
.horas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.horas .eleccion>span{display:grid;place-items:center;min-height:44px;border-radius:999px;font:500 .9375rem/1 var(--texto);font-variant-numeric:tabular-nums}
.horas input:checked+span{background:var(--terracota-osc);border-color:var(--terracota-osc);color:var(--papel)}
.horas__grupo{margin:0 0 6px;color:var(--tinta-3);font-size:.8125rem}
.horas__grupo+.horas{margin-bottom:14px}
.agenda .campos{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.agenda .campos .ancho{grid-column:1 / -1}
.agenda .motivos__lista{margin:0}
.agenda .motivo span{min-height:44px;font-size:.875rem}
.agenda__pie{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:26px;padding:16px 38px calc(16px + env(safe-area-inset-bottom));background:rgba(247,243,236,.97);box-shadow:0 -1px 0 var(--linea)}
.agenda__pago small{display:block;color:var(--tinta-3);font-size:.8125rem}
.agenda__pago strong{font:400 1.75rem/1.1 var(--texto);letter-spacing:-.015em;color:var(--terracota-osc)}
.agenda__aviso{margin:0;width:100%;color:var(--tinta-3);font-size:.75rem}
.agenda__falta{margin:0;color:var(--terracota-hondo);font-size:.875rem;font-weight:500}
.agenda__hecho{display:grid;gap:18px;align-content:start;padding:38px}
.agenda__hecho h2{font-size:2.25rem}
.agenda__hecho p{margin:0;max-width:34em;color:var(--tinta-2)}
.agenda__hecho .sello-ok{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--oliva-osc);color:var(--papel)}
.agenda__hecho .sello-ok svg{width:28px;height:28px}
.mov .agenda__hecho:not([hidden]) .sello-ok{animation:sello .28s var(--salida) .08s both}
@keyframes sello{from{opacity:0;transform:scale(.85)}}
.agenda .cerrar--flotante{position:absolute;top:18px;right:18px;z-index:3;background:rgba(247,243,236,.94)}

/* ── Apariciones al hacer scroll (solo con .mov, que pone el script del <head>) ── */
.mov [data-aparece]{opacity:0;transform:translate3d(0,var(--d-2),0);transition:opacity var(--t-largo) var(--salida),transform var(--t-largo) var(--salida);transition-delay:calc(min(var(--i,0),6) * var(--escalon))}
.mov [data-aparece=lejos]{transform:translate3d(0,var(--d-3),0)}
.mov [data-aparece].visto{opacity:1;transform:none}
.mov .tarjeta[data-aparece]{transition-property:opacity,transform,translate;transition-duration:var(--t-largo),var(--t-largo),var(--t-corto)}
.mov .tarjeta .tarjeta__foto img{transform:scale(1.06)}
.mov .tarjeta.visto .tarjeta__foto img{transform:scale(1)}

/* ── Adaptación ── */
@media (max-width:1100px){
  .cab nav{gap:18px}
  .etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tarjeta,.tarjeta--b{grid-template-columns:1fr;min-height:0}
  .tarjeta__foto{aspect-ratio:16/10}
  .tarjeta--b .tarjeta__foto{order:0}
  .tarjeta--b{border-radius:8px var(--r-hoja-xl) 8px 8px}
  .experiencias{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .cab nav{display:none}
  .cab__menu{display:grid;place-items:center}
  .cab>.boton{display:none}
  .motivos,.ciclo,.conoce,.redes,.cabeza-seccion{grid-template-columns:1fr}
  .motivos__figura{width:min(70%,300px);order:-1}
  .ciclo__figura{width:min(100%,520px)}
  .pasos{grid-template-columns:1fr;gap:28px}
  .pasos .onda{display:none}
  .paso{display:grid;grid-template-columns:58px 1fr;gap:4px 18px}
  .paso__n{grid-row:span 2}
  .paso h3{margin:4px 0 2px}
  .tarjetas{grid-template-columns:1fr}
  .ten-a-mano{grid-template-columns:1fr}
  .ten-a-mano ul{grid-template-columns:1fr}
  .retrato{max-width:420px}
  .barra{display:flex}
  body.con-barra{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .pie{grid-template-columns:1fr 1fr}
  .pie .marca{grid-column:1 / -1}
  .agenda[open]{display:block;overflow-y:auto}
  .agenda{width:100%;max-width:none;height:calc(100dvh - 10px);margin:10px 0 0;border-radius:4px 40px 0 0;overscroll-behavior:contain;scroll-padding-bottom:210px}
  html{scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .agenda__contenido{overflow:visible;position:static}
  .agenda .cerrar--flotante{top:14px;right:14px}
  .agenda__resumen{min-height:clamp(200px,28vh,260px);padding:22px 20px 50px}
  .agenda__resumen .logo{top:18px;left:18px;width:72px}
  .agenda__resumen h3{font-size:1.75rem}
  .agenda__resumen dl{display:none}
  .agenda__form{position:relative;margin-top:-28px;padding:24px 20px 0;border-radius:4px 40px 0 0;background:var(--papel)}
  @media all{.agenda[open]{animation:agenda-entra-movil 300ms var(--salida)}}
  .agenda__pie{padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
  .agenda__pie .boton{width:100%}
  .horas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .agenda .campos,.sesiones{grid-template-columns:1fr}
}
@keyframes agenda-entra-movil{from{opacity:0;transform:translateY(40px)}}
@media (max-width:700px){
  .cielo__fecha{letter-spacing:.14em}
  .cielo__fecha .sep{display:none}.cielo__fecha .bloque{display:block;margin-top:4px}
  .cielo h1{font-size:min(3.1rem,calc((100vw - 2 * var(--margen)) / 6.4))}
  .cielo h1 .l+.l{padding-left:.7em}
  .cielo__rama--der{width:80vw;height:52vh;opacity:.55}
  .cielo--portada .cielo__centro{padding-top:118px}
  .cielo--corto .cielo__centro{padding-top:70px}
  .cielo__cta .boton{width:100%}
  .cielo__cta{width:100%}
  .cielo__pie{font-size:.75rem}
  .etapas,.experiencias{grid-template-columns:1fr}
  .formulario{grid-template-columns:1fr}
  .red__cab{flex-wrap:wrap}
  .red__cab .enlace{margin-left:0}
  .cierre__hoja{border-radius:4px 64px 4px 4px;padding:36px 24px}
  .cierre .acciones .boton{width:100%}
  .tarjeta{border-radius:120px 8px 8px 8px}
  .tarjeta--b{border-radius:8px 120px 8px 8px}
  .tarjeta__cuerpo{padding:26px 22px 22px}
  .dial .etq-banda,.dial .etq-origen,.dial .flecha{display:none}
  .dial--simple .c-num{font-size:120px}
  h2{font-weight:300}
  .seccion{padding:64px var(--lado)}
  .pie{grid-template-columns:1fr}
}
@media not all{
  .boton,.boton svg,.tarjeta,.agendar i,.eleccion>span,.motivo span{transition-duration:.01ms}
}
@media (max-width:420px){
  .tarjeta-ig{grid-template-columns:40px minmax(0,1fr) 16px;gap:10px;padding:12px 14px}
  .tarjeta-ig .red__icono{width:40px;height:40px}
  .tarjeta-ig strong{font-size:min(1.25rem,4.6vw)}
}
@media (max-width:380px){.barra .boton{padding:0 16px}}
/* Al imprimir o guardar en PDF, todo visible aunque no se haya recorrido la página */
@media print{
  .mov [data-aparece],.mov .ciclo__figura{opacity:1!important;transform:none!important}
  .mov .ciclo__figura .area{opacity:1!important}
  .mov .linea,.mov .petalo,.mov .trazo path,.mov .onda path,.mov .huella path{stroke-dashoffset:0!important}
  .barra,.cielo__aves,.cielo__rama{display:none!important}
}

/* ══ Fondo de la marca (27-09): pared de lino con luz de tarde, sombra de olivo y anillos del ciclo.
   Misma portada de antes; solo cambia el fondo (sin luna, estrellas ni pájaros). ══ */
.cielo__lienzo{background:linear-gradient(#f3e7da,#eed6c2 55%,#e2b597)}
[data-momento=mediodia] .cielo__lienzo{background:linear-gradient(#f0dcc6,#e5b893 55%,#cf8d69)}
[data-momento=noche] .cielo__lienzo{background:linear-gradient(#26221a,#3a3223 55%,#554230)}
.momentos [data-momento-btn=amanecer] span{background:linear-gradient(#f3e7da,#e2b597)}
.momentos [data-momento-btn=mediodia] span{background:linear-gradient(#f0dcc6,#cf8d69)}
.momentos [data-momento-btn=noche] span{background:linear-gradient(#26221a,#554230)}
.cielo__sombra{position:absolute;z-index:-2;right:-4vw;top:-6vh;width:min(62vw,860px);height:min(96vh,900px);pointer-events:none;filter:blur(6px);opacity:.2;mix-blend-mode:multiply;transform-origin:100% 0}
[data-momento=noche] .cielo__sombra{opacity:.35}
.cielo--corto .cielo__sombra{width:min(44vw,600px);height:100%}
.cielo__anillos{position:absolute;z-index:-3;left:50%;bottom:-38%;width:min(1100px,120vw);transform:translateX(-50%);pointer-events:none}
.cielo--corto .cielo__anillos{bottom:-70%;width:min(900px,130vw)}
.cielo__anillos .huella{display:block;width:100%;height:auto}
.cielo__anillos .huella path{stroke:rgba(255,249,240,.9);opacity:.5}
[data-momento=noche] .cielo__anillos .huella path{stroke:rgba(230,190,150,.5)}
.mov .cielo__anillos .huella path{stroke-dasharray:1;stroke-dashoffset:1}
.mov .cielo__anillos.visto .huella path{stroke-dashoffset:0;transition:stroke-dashoffset 2.8s var(--recorrido);transition-delay:calc(var(--k) * 50ms)}
@media all{.cielo__sombra{animation:sombra-olivo 12s ease-in-out infinite alternate}}
@keyframes sombra-olivo{from{transform:rotate(-1.2deg)}to{transform:rotate(1.1deg) translate(-12px,8px)}}
@media (max-width:700px){.cielo__sombra{width:110vw;height:70vh;opacity:.16}.cielo__anillos{bottom:-18%;width:170vw}}
@media (max-width:700px){.cielo--portada .cielo__centro{padding-top:40px}.cielo--corto .cielo__centro{padding-top:32px}}

/* ══ Escala única de tamaños (27-09) ══
   Todo crece de forma continua de 360 a 1440 px: los mismos saltos en teléfono y en PC. */
:root{
  --s-seccion:clamp(64px,3rem + 4.5vw,112px);   /* aire arriba y abajo de cada sección */
  --s-cabeza:clamp(28px,1rem + 2.4vw,56px);     /* del título de la sección a su contenido */
  --s-bloque:clamp(18px,.9rem + 1vw,32px);      /* entre bloques dentro de una sección */
  --s-grilla:clamp(16px,.8rem + .6vw,24px);     /* entre tarjetas */
  --t-h2:clamp(2rem,1.5rem + 2vw,3.25rem);
  --t-h3:clamp(1.375rem,1.2rem + .55vw,1.75rem);
  --t-grande:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --t-cuerpo:clamp(1rem,.96rem + .15vw,1.0625rem);
  --t-cita:clamp(1.75rem,1.2rem + 2.2vw,3.1rem);
}
body{font-size:var(--t-cuerpo)}
h2,.agenda__cabeza h2,.agenda__hecho h2{font-size:var(--t-h2)}
.seccion,.cita{padding:var(--s-seccion) var(--lado)}
.cabeza-seccion{margin-bottom:var(--s-cabeza);gap:var(--s-bloque) clamp(24px,4vw,56px)}
.bajada,.cielo__entrada,.conoce__texto .destacado{font-size:var(--t-grande)}
.bajada{margin-top:var(--s-bloque)}
.cabeza-seccion .bajada{margin-top:0}
/* un solo tamaño de subtítulo en tarjetas, pasos, etapas, redes y experiencias */
h3,.tarjeta h3,.paso h3,.etapa h3,.red__cab h3,.agenda__resumen h3,.gracias h3{font-size:var(--t-h3)}
.experiencia blockquote,.compromiso,.conoce__texto .compromiso{font-size:var(--t-grande)}
.lectura__fase{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.75rem)}
.firma,.conoce__texto .firma{font-size:calc(var(--t-h3) * 1.2)}
.cita p{font-size:var(--t-cita)}
.cita__marca{height:clamp(40px,3vw,60px);font-size:clamp(72px,6vw,110px)}
.tarjeta__pie strong{font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem)}
/* mismo espacio entre tarjetas en todas las grillas */
.tarjetas,.experiencias,.redes,.etapas,.redes__lado{gap:var(--s-grilla)}
.pasos{gap:var(--s-bloque) clamp(24px,3vw,40px)}
.ciclo,.motivos,.conoce{gap:var(--s-cabeza) clamp(32px,5vw,80px)}
.motivos__lista{margin-top:var(--s-bloque)}
.ten-a-mano,.motivos .acciones,.cierre .acciones{margin-top:var(--s-bloque)}
.tarjeta__cuerpo{padding:clamp(22px,1rem + 1.4vw,34px)}
.etapa,.experiencia,.red{padding:clamp(22px,1rem + 1vw,30px)}
/* el cierre y la fila de lunas usan la misma escala */
.separador{padding:var(--s-bloque) var(--lado) 0}
.cierre{padding:var(--s-bloque) var(--lado) var(--s-seccion)}
.cierre__hoja{padding:clamp(32px,1rem + 4vw,80px)}
.cierre__hoja .trazo{margin-bottom:var(--s-bloque)}
.cierre h2{margin-bottom:0}
.cierre p{margin:var(--s-bloque) 0 0}
.pie{padding:var(--s-cabeza) var(--lado) 32px}

/* ══ Portada que cabe en la pantalla (27-09) ══
   En PC la portada completa (título, botón, índice y la barra de abajo) entra en el alto de la ventana:
   los tamaños se limitan también por el alto, no solo por el ancho (portátiles con escala 125 %). */
@media (min-width:701px){
  .cielo--portada{height:100svh;min-height:600px;max-height:1100px}
  .cielo--portada .cielo__centro{padding:clamp(8px,2vh,40px) 20px clamp(64px,9vh,110px);min-height:0}
  .cielo h1{font-size:min(clamp(3rem,1.5rem + 5.2vw,6.2rem),11.5vh)}
  .cielo__entrada{margin-top:min(26px,2.6vh)}
  .cielo__cta{margin-top:min(32px,3.4vh)}
  .cielo--portada .indice{margin-top:min(52px,4vh)}
  .cielo--portada .indice a{padding:min(8px,.75vh) 0}
}
@media (min-width:701px) and (max-height:760px){
  .cielo__entrada{font-size:1.0625rem;line-height:1.45}
  .cielo--portada .indice{font-size:.9375rem}
}
@media (min-width:701px){
  .cielo h1{font-size:min(clamp(3rem,1.5rem + 5.2vw,6.2rem),10vh)}
  .cielo--portada .cielo__centro{padding-bottom:84px}
  .cielo--portada .indice a{padding:min(8px,.45vh) 0}
  .cielo--portada .indice{margin-top:min(52px,3.2vh)}
}
@media (min-width:701px) and (max-height:700px){
  .cielo--portada .cielo__fecha{display:none}
  .cielo__entrada{font-size:1rem}
  .cielo--portada .indice{font-size:.875rem}
}

/* ══ Fotos de la Dra. Valerie (27-09) ══
   Arco que se abre de abajo hacia arriba al llegar, la foto se asienta despacio y los anillos del ciclo
   se dibujan alrededor. La mini (Conóceme) entra después, como una segunda mirada. */
.retratos{position:relative;isolation:isolate;max-width:520px}
.retratos>.huella{position:absolute;z-index:-1;inset:-7% -9% auto;width:118%;height:auto;opacity:.55;pointer-events:none}
.retrato--foto{background:#e9ddd0}
.retrato--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.retrato-mini{position:absolute;right:-6%;bottom:-8%;width:38%;aspect-ratio:4/5;margin:0;border-radius:999px 999px 999px 999px/60% 60% 40% 40%;overflow:hidden;box-shadow:0 0 0 6px var(--papel),0 18px 40px -18px rgba(43,35,32,.45)}
.retrato-mini img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.mov .retratos .retrato--foto{clip-path:inset(100% 0 0 0 round 999px 999px 0 0);transition:clip-path 1.5s var(--recorrido)}
.mov .retratos .retrato--foto img{transform:scale(1.09);transition:transform 2.6s var(--recorrido)}
.mov .retratos.visto .retrato--foto{clip-path:inset(0 0 0 0 round 999px 999px 0 0)}
.mov .retratos.visto .retrato--foto img{transform:none}
.mov .retrato-mini{opacity:0;transform:translateY(24px) scale(.94);transition:opacity .9s var(--salida) 1s,transform 1.2s var(--salida) 1s}
.mov .retratos.visto .retrato-mini{opacity:1;transform:none}
.mov .retratos .huella path{stroke-dasharray:1;stroke-dashoffset:1}
.mov .retratos.visto .huella path{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--recorrido);transition-delay:calc(.5s + var(--k) * 45ms)}
.quien{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-cabeza) clamp(40px,7vw,112px);align-items:center}
.quien h2{margin:14px 0 0}
.quien .credenciales{margin-top:var(--s-bloque)}
@media not all{.mov .retratos .retrato--foto,.mov .retratos .retrato--foto img,.mov .retrato-mini{transition:none}}
@media (max-width:900px){
  .quien{grid-template-columns:1fr}
  .retratos{width:min(78vw,380px);margin-inline:auto}
  .retratos--inicio{width:min(66vw,320px)}
  .retrato-mini{right:-10%;width:40%}
}
.retrato-mini{border-radius:999px 999px var(--r-2) var(--r-2)}
@media (max-width:900px){.retrato-mini{right:-4%;bottom:-6%;width:36%}}

/* ══ Centrado y tarjetas de consulta nuevas (27-09) ══ */
/* Todo el contenido vive en una columna centrada; los títulos de sección van al centro con su bajada debajo */
.seccion>*{max-width:1240px;margin-inline:auto}
.cabeza-seccion{display:block;text-align:center;max-width:44rem;margin-inline:auto}
.cabeza-seccion .bajada{margin:clamp(12px,1.4vw,18px) auto 0;max-width:36em}
.seccion>p:has(>.enlace){text-align:center}
.preguntas{margin-inline:auto}
.etapas__pestanas{display:none}

/* Tarjetas: qué incluye, el precio que cuenta y el reparto del 20 % */
.tarjeta{min-height:0}
.tarjeta__incluye{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.tarjeta__incluye li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;color:var(--tinta-2);font-size:.96875rem;line-height:1.5}
.tarjeta__incluye svg{width:22px;height:22px;padding:5px;border-radius:50%;background:rgba(179,106,68,.14);color:var(--terracota-osc);margin-top:1px}
.tarjeta__nota{margin:14px 0 0;color:var(--tinta-3);font-size:.875rem}
.tarjeta__precio{margin-top:auto;padding-top:24px}
.precio{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding-top:20px;border-top:1px solid var(--linea)}
.precio small{color:var(--tinta-3);font-size:.8125rem}
.precio strong{font:300 clamp(1.9rem,1.5rem + 1vw,2.4rem)/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.reparto{position:relative;height:8px;margin:16px 0 10px;border-radius:999px;background:rgba(77,69,49,.12);overflow:hidden}
.reparto span{position:absolute;inset:0 80% 0 0;border-radius:999px;background:var(--terracota)}
.mov .reparto span{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--recorrido) .4s}
.mov .visto .reparto span{transform:none}
.reparto__etq{display:flex;justify-content:space-between;gap:12px;margin:0;font-size:.8125rem;color:var(--tinta-3)}
.reparto__etq b{color:var(--terracota-osc);font-weight:600}
.boton--bloque{width:100%;margin-top:22px}
.tarjeta .boton svg{width:18px;height:18px;transition:transform var(--t-corto) var(--salida)}
@media (hover:hover) and (pointer:fine){.tarjeta .boton:hover svg{transform:translateX(3px)}}

/* La hora de consulta: reloj de tres arcos */
.hora{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-cabeza) clamp(40px,7vw,112px);align-items:center}
.hora__reloj{margin:0;max-width:440px;justify-self:center;width:100%}
.reloj{display:block;width:100%;height:auto;overflow:visible}
.reloj__base{fill:none;stroke:var(--linea-2);stroke-width:1}
.reloj__marcas line{stroke:rgba(43,35,32,.2);stroke-width:1;stroke-linecap:round}
.reloj__marcas line.cinco{stroke:rgba(43,35,32,.42)}
.reloj__arco{fill:none;stroke-width:9;stroke-linecap:round}
.reloj__arco--1{stroke:var(--terracota)}
.reloj__arco--2{stroke:#8a8455}
.reloj__arco--3{stroke:var(--oliva-osc)}
.reloj__n circle{fill:var(--papel);stroke:var(--linea)}
.reloj__n text{text-anchor:middle;font:600 13px var(--texto);fill:var(--tinta)}
.reloj__num{text-anchor:middle;font:200 92px var(--display);fill:var(--tinta)}
.reloj__etq{text-anchor:middle;font:500 13px var(--texto);letter-spacing:.16em;text-transform:uppercase;fill:var(--tinta-3)}
.reloj__vuelta circle{fill:var(--terracota-osc);stroke:var(--papel);stroke-width:3}
.reloj__vuelta{transform-origin:200px 200px}
.mov .reloj__arco{stroke-dasharray:1;stroke-dashoffset:1}
.mov .visto .reloj__arco{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--recorrido);transition-delay:calc(.3s + var(--k) * 1s)}
.mov .reloj__n{opacity:0;transition:opacity .6s var(--salida);transition-delay:calc(.9s + var(--k) * 1s)}
.mov .visto .reloj__n{opacity:1}
.mov .reloj__vuelta{opacity:0;transition:opacity .8s 3.4s}
.mov .visto .reloj__vuelta{opacity:1}
@media all{.visto .reloj__vuelta{animation:vuelta 60s linear 3.4s infinite}}
@keyframes vuelta{to{transform:rotate(360deg)}}
.hora__texto h2{margin:0}
.tramos{list-style:none;margin:var(--s-bloque) 0 0;padding:0;display:grid;gap:4px}
.tramos li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linea)}
.tramos li:last-child{border-bottom:0}
.tramos__n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-weight:600}
.tramos li:nth-child(1) .tramos__n{background:var(--terracota)}
.tramos li:nth-child(2) .tramos__n{background:#8a8455}
.tramos li:nth-child(3) .tramos__n{background:var(--oliva-osc)}
.tramos h3{margin:0}
.tramos p{margin:4px 0 0;color:var(--tinta-2)}
.hora .nota{margin-top:14px}

/* Ten a mano: tres tarjetas con ícono de trazo fino */
.mano{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-grilla)}
.mano__item{padding:clamp(24px,1rem + 1.2vw,34px);border-radius:var(--r-hoja-s);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--linea-2);text-align:center}
.mano__icono{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50% 50% 14px 14px;background:rgba(179,106,68,.12);color:var(--terracota-osc)}
.mano__icono svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mano__item h3{margin:0}
.mano__item p{margin:8px auto 0;max-width:22em;color:var(--tinta-2);font-size:.96875rem}

/* Agenda: los días en arco crecen uno tras otro al abrir */
@media all{
  .agenda[open] .dias .eleccion>span{animation:arco-sube .7s var(--salida) both;animation-delay:calc(.12s + var(--i,0) * 45ms)}
}
@keyframes arco-sube{from{clip-path:inset(100% 0 0 0 round 999px 999px 0 0);opacity:.2}to{clip-path:inset(0 0 0 0 round 999px 999px 0 0);opacity:1}}

@media (max-width:1100px){
  .tarjetas{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:900px){
  .hora{grid-template-columns:1fr}
  .hora__reloj{max-width:320px}
  .hora__texto h2{text-align:center}
  .mano{grid-template-columns:1fr;max-width:520px}
  .mano__item{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;text-align:left;align-items:start}
  .mano__icono{grid-row:span 2;width:56px;height:56px;margin:0}
  .mano__icono svg{width:30px;height:30px}
  .mano__item p{margin:2px 0 0}
}
@media (max-width:700px){
  .tarjeta__cuerpo{padding:24px 22px 24px}
  .reparto__etq{flex-direction:column;gap:2px}
  /* Guía del ciclo: pestañas en vez de cuatro tarjetas largas */
  .etapas__pestanas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 16px}
  .etapas__pestanas button{min-height:56px;padding:8px 12px;border:0;border-radius:var(--r-hoja-s);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--linea-2);color:var(--tinta);font:500 .9375rem/1.2 var(--texto);text-align:left;cursor:pointer;transition:background-color var(--t-estado),color var(--t-estado)}
  .etapas__pestanas small{display:block;margin-top:2px;color:var(--tinta-3);font-size:.75rem;font-weight:400}
  .etapas__pestanas [aria-selected=true]{background:var(--oliva-osc);color:var(--papel);box-shadow:none}
  .etapas__pestanas [aria-selected=true] small{color:rgba(247,243,236,.75)}
  .etapas[data-pestanas] .etapa:not(.activa){display:none}
  .etapas[data-pestanas] .etapa.activa{animation:entra-etapa .45s var(--salida)}
}
@keyframes entra-etapa{from{opacity:0;transform:translateY(8px)}}

/* ══ Paleta cálida en todo el sitio (27-09) ══
   El oliva oscuro se veía impuesto junto al lino y el terracota: los acentos oscuros pasan a un cacao
   cálido y la sección de consultas a un rosa arena claro, del mismo tono que la portada de la tarde. */
:root{--oliva-osc:#5b4034;--rosa-arena:#d69c80;--sobre-oliva:rgba(247,243,236,.84)}
.consultas{background:var(--grano),radial-gradient(90% 70% at 85% 0%,rgba(214,156,128,.28),transparent 60%),linear-gradient(180deg,#f5e9df 0%,#efdccf 100%);color:var(--tinta)}
.consultas::after{border-color:rgba(179,106,68,.18)}
.consultas .bajada{color:var(--tinta-2)}
.consultas .enlace{color:var(--tinta);text-decoration-color:rgba(146,83,55,.4)}
.consultas h2{color:var(--tinta)}
.tarjeta{background:#fbf8f3;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 50px -30px rgba(122,69,48,.45),0 0 0 1px rgba(146,83,55,.1)}
.tarjeta__meta{color:var(--terracota-hondo)}
.reparto{background:rgba(179,106,68,.14)}
.reloj__arco--2{stroke:var(--rosa-arena)}
.tramos li:nth-child(2) .tramos__n{background:var(--rosa-arena)}
.precio strong{font:300 clamp(1.9rem,1.5rem + 1vw,2.4rem)/1 var(--texto);letter-spacing:-.02em}

/* ══ Rama de olivo de los motivos (27-09): reemplaza el rosetón; cada hoja es un motivo ══ */
.rama-motivos .petalo{fill:rgba(179,106,68,0);stroke:rgba(91,64,52,.42);stroke-width:1.3;stroke-linejoin:round}
.rama-motivos .petalo.activo{fill:rgba(179,106,68,.3);stroke:var(--terracota-osc)}
.rama__tallo{fill:none;stroke:rgba(91,64,52,.5);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rama__nervios path{fill:none;stroke:rgba(91,64,52,.3);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none}
.rama__frutos ellipse{fill:none;stroke:rgba(91,64,52,.35);stroke-width:1.1;vector-effect:non-scaling-stroke}
.roseton__centro{display:none}
.mov .rama__tallo,.mov .rama__nervios path{stroke-dasharray:1;stroke-dashoffset:1}
.mov .motivos__figura.visto .rama__tallo{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--recorrido)}
.mov .motivos__figura.visto .rama-motivos .petalo{transition:stroke-dashoffset 1.3s var(--recorrido),fill .5s var(--salida),stroke .5s var(--salida);transition-delay:calc(.35s + var(--k) * .12s),0s,0s}
.mov .motivos__figura.visto .rama__nervios path{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--recorrido) calc(.9s + var(--k) * .12s)}
.mov .rama__frutos{opacity:0;transition:opacity 1s 1.6s}
.mov .motivos__figura.visto .rama__frutos{opacity:1}
@media all{.motivos__figura.visto .rama-motivos{animation:mece 9s ease-in-out 2.4s infinite alternate;transform-origin:14% 92%}}
@keyframes mece{from{transform:rotate(-1.2deg)}to{transform:rotate(1.4deg)}}
.mov .rama__tallo,.mov .rama__nervios path{}
@media not all{.mov .rama__tallo,.mov .rama__nervios path{stroke-dashoffset:0!important}}
/* Fotos reales en las tarjetas: la cara siempre a la vista */
.tarjeta--a .tarjeta__foto img{object-position:50% 62%}
.tarjeta--b .tarjeta__foto img{object-position:30% 18%}
@media (max-width:1100px){.tarjeta--a .tarjeta__foto img{object-position:50% 58%}.tarjeta--b .tarjeta__foto img{object-position:50% 16%}}
.rama-motivos .petalo{fill:rgba(214,156,128,.1)}
.rama-motivos .petalo.activo{fill:rgba(179,106,68,.34)}
@media (min-width:901px){.motivos__figura{width:min(100%,440px)}}

/* ══ Figuras de las tarjetas de consulta (27-09): dibujos hechos con código en vez de fotos ══
   Primera = un ciclo completo (anillo con las cuatro hormonas). Seguimiento = espiral de tres meses. */
.tarjeta__foto .figura{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform 1.2s var(--salida)}
.tarjeta--a .tarjeta__foto{background:var(--grano),radial-gradient(90% 70% at 25% 15%,rgba(214,156,128,.4),transparent 70%),linear-gradient(165deg,#f4e8dd,#e7d2c2)}
.tarjeta--b .tarjeta__foto{background:var(--grano),radial-gradient(90% 70% at 75% 85%,rgba(179,106,68,.3),transparent 70%),linear-gradient(200deg,#f2e4d8,#e2cbb8)}
.figura__fondo circle{fill:none;stroke:rgba(91,64,52,.09);stroke-width:1;vector-effect:non-scaling-stroke}
.figura__anillo{fill:none;stroke:rgba(91,64,52,.45);stroke-width:1;vector-effect:non-scaling-stroke}
.figura__marcas line{stroke:rgba(91,64,52,.4);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.figura__fertil{fill:rgba(214,156,128,.3)}
.figura__fertil-tramo{fill:none;stroke:rgba(214,156,128,.55);stroke-width:9;stroke-linecap:round}
.figura__curva{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.figura__curva--e2{stroke:var(--terracota);stroke-width:2.2}
.figura__curva--p4{stroke:var(--terracota-hondo);stroke-width:1.7}
.figura__curva--lh{stroke:#c08a70;stroke-width:1.2}
.figura__curva--fsh{stroke:#9d7b6a;stroke-width:1.2}
.figura__dia1{fill:var(--papel);stroke:var(--terracota-hondo);stroke-width:1.5;vector-effect:non-scaling-stroke}
.figura__dia1--hoy{fill:var(--terracota);stroke:var(--papel);stroke-width:2.5}
.figura__giro{transform-origin:200px 200px}
/* al llegar: las curvas se trazan una tras otra, luego aparecen los días fértiles y el día 1 */
.mov .tarjeta .figura__curva{stroke-dasharray:1;stroke-dashoffset:1}
.mov .tarjeta.visto .figura__curva{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--recorrido);transition-delay:calc(.3s + var(--k,0) * .4s)}
.mov .tarjeta.visto .figura--meses .figura__curva{transition-duration:3.6s}
.mov .tarjeta .figura__fertil,.mov .tarjeta .figura__fertil-tramo,.mov .tarjeta .figura__dia1{opacity:0;transition:opacity 1s ease}
.mov .tarjeta.visto .figura__fertil,.mov .tarjeta.visto .figura__fertil-tramo{opacity:1;transition-delay:2s}
.mov .tarjeta.visto .figura__dia1{opacity:1;transition-delay:calc(2.2s + var(--k,0) * .25s)}
.mov .tarjeta.visto .figura--meses .figura__fertil-tramo{transition-delay:3.2s}
.mov .tarjeta.visto .figura--meses .figura__dia1{transition-delay:calc(3.4s + var(--k,0) * .25s)}
/* después, todo gira muy despacio (dos minutos por vuelta) */
@media all{
  .tarjeta.visto .figura__giro{animation:figura-gira 120s linear 3s infinite}
  .tarjeta.visto .figura--meses .figura__giro{animation-duration:170s;animation-direction:reverse}
  .agenda[open] .figura__giro{animation:figura-gira 140s linear infinite}
}
@keyframes figura-gira{to{transform:rotate(360deg)}}
@media (hover:hover) and (pointer:fine){.tarjeta:hover .tarjeta__foto .figura{transform:scale(1.04)}}
/* en la ventana de agendar, la misma figura en claro sobre el cacao */
.agenda__resumen>[data-foto]{position:absolute;inset:0;z-index:0;transition:opacity .4s ease}
.agenda__figura .figura{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.agenda__figura .figura__fondo circle{stroke:rgba(247,243,236,.1)}
.agenda__figura .figura__anillo,.agenda__figura .figura__marcas line{stroke:rgba(247,243,236,.4)}
.agenda__figura .figura__curva--e2{stroke:#e6a988}
.agenda__figura .figura__curva--p4{stroke:rgba(247,243,236,.85)}
.agenda__figura .figura__curva--lh{stroke:rgba(230,169,136,.6)}
.agenda__figura .figura__curva--fsh{stroke:rgba(247,243,236,.5)}
.agenda__figura .figura__fertil{fill:rgba(230,169,136,.22)}
.agenda__figura .figura__fertil-tramo{stroke:rgba(230,169,136,.4)}
.agenda__figura .figura__dia1{fill:#5b4034;stroke:#e6a988}
.agenda__figura .figura__dia1--hoy{fill:#e6a988;stroke:#5b4034}
/* collar de perlas (primera consulta) */
.figura__perla--e2{fill:var(--papel);stroke:var(--terracota-hondo);stroke-width:1.2;vector-effect:non-scaling-stroke}
.figura__perla--e2.figura__perla--fertil{fill:var(--terracota);stroke:var(--terracota-hondo)}
.figura__perla--e2.figura__perla--dia1{fill:var(--terracota-hondo)}
.figura__perla--p4{fill:rgba(91,64,52,.55);stroke:none}
.figura__perla--p4.figura__perla--fertil{fill:rgba(179,106,68,.7)}
.figura__perla--p4.figura__perla--dia1{fill:var(--terracota-hondo)}
.figura--ciclo .figura__anillo{stroke:rgba(91,64,52,.3)}
.mov .tarjeta .figura__perla{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease,transform .8s var(--salida)}
.mov .tarjeta.visto .figura__perla{opacity:1;transform:none;transition-delay:calc(.2s + var(--k,0) * 45ms)}
.figura--meses .figura__curva--p4{stroke-width:1.2;opacity:.55}
.figura--meses .figura__dia1{r:5}
.agenda__figura .figura__perla--e2{fill:#5b4034;stroke:#e6a988}
.agenda__figura .figura__perla--e2.figura__perla--fertil{fill:#e6a988}
.agenda__figura .figura__perla--e2.figura__perla--dia1{fill:#f7f3ec;stroke:#f7f3ec}
.agenda__figura .figura__perla--p4{fill:rgba(247,243,236,.5)}
.agenda__figura .figura__perla--p4.figura__perla--fertil{fill:rgba(230,169,136,.8)}

/* ══ Bodegón a una línea en las tarjetas de precios (28-09): reemplaza el collar y la espiral ══ */
/* The Hormonal Lab · figuras de las tarjetas de consulta · "bodegón"
   Bodegón a una sola línea fina (mesa con mantel de lino, florero con rama de olivo, taza de loza)
   dentro de la luz de una ventana en arco que cae en la pared; sombras cálidas, nunca grises. */

/* el hueco de la figura se vuelve contenedor: así la escena se encuadra distinto si es alto o ancho */
.tarjeta__foto:has(> .c-bodegon),.agenda__figura:has(> .c-bodegon){container:bodegon / size}
/* en la ventana de agendar la caja de la figura es el panel cacao: se recorta ahí (si no, la mesa y sus
   prolongaciones cruzan por encima del formulario) */
.agenda__figura:has(> .c-bodegon){overflow:hidden}
.tarjeta--a .tarjeta__foto:has(> .c-bodegon){background:var(--grano),linear-gradient(172deg,#f5e9df 0%,#efdccf 100%)}
.tarjeta--b .tarjeta__foto:has(> .c-bodegon){background:var(--grano),linear-gradient(188deg,#f5e9df 0%,#efdccf 100%)}
/* el aro decorativo de la sección (.consultas::after) no cruza la ventana */
.tarjeta--a .tarjeta__foto:has(> .c-bodegon),.tarjeta--b .tarjeta__foto:has(> .c-bodegon){z-index:1}

/* caja del dibujo: 1 unidad = --k px; la línea de la mesa cae en --y y el centro de la escena en --x.
   El viewBox es el encuadre alto de PC (176 x 414, mesa en la unidad 298 desde arriba).
   --tr = grosor de la línea (en unidades): fino, como la rama del sitio. */
.tarjeta__foto .figura.c-bodegon,.agenda__figura .figura.c-bodegon{
  --k:min(100cqw / 176,72cqh / 290);--y:72cqh;--x:50cqw;--w:176;--tr:.7;
  inset:auto;left:calc(var(--x) - var(--w) / 2 * var(--k));top:calc(var(--y) - 298 * var(--k));
  width:calc(var(--w) * var(--k));height:calc(414 * var(--k));transform-origin:50% 64%}
/* tableta (640 x 400): la escena más grande, con aire sobre la punta de la rama; la luz se sale por
   arriba y se abre en un arco ancho y bajo (angosta y entera se leía como una columna o una cápsula) */
@container bodegon (aspect-ratio > 1){
  .tarjeta__foto .figura.c-bodegon{--k:76cqh / 264;--y:82cqh;--tr:1}
  .tarjeta__foto .c-bodegon .bd-arco{transform-box:fill-box;transform-origin:50% 100%;transform:scale(1.35,.9)}
}
/* teléfono (350 x 219 y 320 x 200) */
@container bodegon (aspect-ratio > 1) and (max-height:300px){
  .tarjeta__foto .figura.c-bodegon{--k:min(73cqh / 264,100cqw / 300);--y:78cqh;--tr:1.85}
  /* la luz, más ancha y más alta: la punta redonda queda fuera del cuadro, como en la tableta */
  .tarjeta__foto .c-bodegon .bd-arco{transform:scale(1.6,1.3)}
  /* la boca del florero queda en dos líneas: sin el grosor del labio */
  .c-bodegon .bd-labio{display:none}
}

/* tinta, luz y color (los rellenos con fill-opacity: la opacidad queda para la entrada).
   Lo que se pinta con degradado lo trae como atributo en el SVG (con color de respaldo): aquí no se
   le pisa el trazo o el relleno (.bd-joven, los tallos de la ramita joven, .bd-arco, .bd-hilo). */
.c-bodegon{--bd-tinta:#925337}
.c-bodegon .bd-l{fill:none;stroke-width:calc(var(--tr) * var(--gr,1) * 1px);stroke-linecap:round;stroke-linejoin:round}
.c-bodegon .bd-l:not(.bd-joven){stroke:var(--bd-tinta)}
/* el peso de la mano: la media luna se rellena y se contornea con el mismo grosor de la línea */
.c-bodegon .bd-peso{fill:var(--bd-tinta);stroke:var(--bd-tinta);stroke-width:calc(var(--tr) * 1px);stroke-linejoin:round}
.c-bodegon .bd-tallos{fill:var(--bd-tinta)}
.c-bodegon .bd-canto{--gr:.8;stroke-opacity:.6}
.c-bodegon .bd-mesa{fill:#efe8dd;fill-opacity:.85}
.c-bodegon .bd-mantel{fill:#efe8dd;fill-opacity:.42}
.c-bodegon .bd-hilo{fill:none;stroke-opacity:.4;stroke-width:calc(var(--tr) * .7px)}
.c-bodegon .bd-arco{fill-opacity:.72}
.c-bodegon .bd-apoyo{fill:#7a4530;opacity:.2}
.c-bodegon .bd-barro{fill:#d69c80;fill-opacity:.38}
.c-bodegon .bd-taza{fill:#f7f3ec}
.c-bodegon .bd-taza--otra{fill:#efdccf}
.c-bodegon .bd-hojas{fill:#d69c80;fill-opacity:.42}
.c-bodegon .bd-brote{fill-opacity:.24}
.c-bodegon .bd-nervio{fill:none;stroke:var(--bd-tinta);stroke-opacity:.55;stroke-width:calc(var(--tr) * .6px);stroke-linecap:round}
.c-bodegon .bd-frutos{fill:#925337}
.c-bodegon .bd-brillo{fill:none;stroke:#d69c80;stroke-opacity:.45;stroke-width:calc(var(--tr) * .6px);stroke-linecap:round}

/* al llegar: la luz de la ventana se enciende despacio, la línea se dibuja de corrido y el color
   (y el peso de la mano) entra justo detrás de la pluma (--f = en qué punto del dibujo queda cada pieza).
   Las sombras en la pared salen de las mismas piezas (filtro), así que llegan con ellas. */
.mov .tarjeta .c-bodegon .bd-luz{opacity:0}
.mov .tarjeta.visto .c-bodegon .bd-luz{opacity:1;transition:opacity 2.4s ease .1s}
/* (el hueco del guion es más largo que el trazo: mientras espera su turno no asoma ni la punta) */
.mov .tarjeta .c-bodegon .bd-l{stroke-dasharray:1 2;stroke-dashoffset:1.02}
.mov .tarjeta.visto .c-bodegon .bd-l{stroke-dashoffset:0;transition:stroke-dashoffset calc(var(--l) * 3.6s) linear calc(.3s + var(--i) * 3.6s)}
.mov .tarjeta .c-bodegon :is(.bd-f,.bd-suelo,.bd-apoyo){opacity:0}
.mov .tarjeta.visto .c-bodegon .bd-f{opacity:1;transition:opacity .8s ease calc(.35s + var(--f) * 3.6s)}
.mov .tarjeta.visto .c-bodegon .bd-suelo{opacity:1;transition:opacity 1.2s ease .1s}
.mov .tarjeta.visto .c-bodegon .bd-apoyo{opacity:.2;transition:opacity 1.6s ease 3.2s}

/* después, la rama (y su sombra) se mece muy despacio, anclada en la boca del florero: seis vaivenes
   (unos 72 s) y se queda quieta; el número es par, así que termina en rotate(0), sin salto */
@media all{
  .tarjeta.visto .c-bodegon .bd-rama{animation:bd-mece 12s ease-in-out 5s 6 alternate}
  .agenda[open] .c-bodegon .bd-rama{animation:bd-mece 12s ease-in-out 2.4s 6 alternate}
}
@keyframes bd-mece{0%{transform:rotate(0)}45%{transform:rotate(-1.5deg)}100%{transform:rotate(.8deg)}}
/* al imprimir o guardar en PDF, todo visible aunque no se haya recorrido la página */
@media print{
  .mov .tarjeta .c-bodegon :is(.bd-f,.bd-suelo,.bd-luz){opacity:1!important}
  .mov .tarjeta .c-bodegon .bd-apoyo{opacity:.2!important}
  .mov .tarjeta .c-bodegon .bd-l{stroke-dashoffset:0!important}
}

/* ── ventana de agendar: el mismo dibujo en claro sobre el cacao, arriba, lejos del texto.
   Sin el arco (sobre oscuro se leía como una lápida): un resplandor cálido sin bordes. ── */
.agenda__resumen:has(.c-bodegon){background:var(--grano),#5b4034}
.agenda__resumen:has(.c-bodegon)::after{background:linear-gradient(rgba(30,26,20,0) 0%,rgba(30,26,20,0) 50%,rgba(30,26,20,.45) 68%,rgba(30,26,20,.6) 100%)}
/* PC: la mesa se ancla al espacio que deja el texto de abajo (unos 290 px fijos) y la escena no sube
   más allá del logo; en portátiles bajos (1366 x 768) se achica en vez de meterse entre las líneas */
.agenda__figura .figura.c-bodegon{--k:min(100cqw / 190,41cqh / 264,(100cqh - 430px) / 264);--y:min(54cqh,100cqh - 340px);--tr:.9}
.agenda__figura:has(> .c-bodegon){background:radial-gradient(56% 34% at 52% 40%,rgba(214,156,128,.2),rgba(214,156,128,.07) 55%,rgba(214,156,128,0))}
@container bodegon (aspect-ratio > 1){
  /* teléfono: arriba a la derecha, pasado el final del título (a 360 px "Consulta de seguimiento" llega
     casi al borde), bajo el botón de cerrar, más tenue y apagándose hacia el texto */
  .agenda__figura .figura.c-bodegon{--k:58cqh / 264;--y:80cqh;--x:87cqw;--w:520;--tr:2;opacity:.5;
    -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 38%,#000 75%,transparent 95%);mask-image:linear-gradient(90deg,transparent 22%,#000 38%,#000 75%,transparent 95%)}
  /* la rama crecida es más alta: más chica, para que la punta quede libre del botón de cerrar */
  .agenda__figura .figura.c-bodegon.bd-s{--k:52cqh / 264}
}
/* (el contenedor no puede consultarse a sí mismo: su resplandor va por el ancho de la ventana) */
@media (max-width:900px){
  .agenda__figura:has(> .c-bodegon){background:radial-gradient(22% 42% at 89% 52%,rgba(214,156,128,.16),rgba(214,156,128,0))}
}
.agenda__figura .c-bodegon{--bd-tinta:#d69c80}
.agenda__figura .c-bodegon .bd-joven{stroke:var(--bd-tinta)}
.agenda__figura .c-bodegon .bd-tallos path{fill:var(--bd-tinta)}
.agenda__figura .c-bodegon .bd-mesa{fill:#d69c80;fill-opacity:.08}
.agenda__figura .c-bodegon .bd-mantel{fill:#2b2320;fill-opacity:.16}
.agenda__figura .c-bodegon .bd-hilo{display:none}
.agenda__figura .c-bodegon .bd-canto{stroke-opacity:.5}
.agenda__figura .c-bodegon .bd-luz{display:none}
.agenda__figura .c-bodegon .bd-apoyo{fill:#2b2320;opacity:.3}
.agenda__figura .c-bodegon .bd-barro{fill:#b36a44;fill-opacity:.5}
.agenda__figura .c-bodegon .bd-taza{fill:#f7f3ec;fill-opacity:.12}
.agenda__figura .c-bodegon .bd-taza--otra{fill:#d69c80;fill-opacity:.2}
.agenda__figura .c-bodegon .bd-hojas{fill:#d69c80;fill-opacity:.3}
.agenda__figura .c-bodegon .bd-frutos{fill:#b36a44}
.agenda__figura .c-bodegon .bd-brillo{stroke:#f5e9df;stroke-opacity:.6}
/* la sombra es el filtro SVG de cada copia (funciona igual en WebKit y se corta en la mesa): solo
   cambia de color sobre el cacao */
.agenda__figura .c-bodegon feDropShadow{flood-color:#2b2320;flood-opacity:.35}
@media all{
  .agenda[open] .c-bodegon .bd-l{animation:bd-traza calc(var(--l) * 1.5s) linear calc(.15s + var(--i) * 1.5s) both}
  .agenda[open] .c-bodegon .bd-f{animation:bd-aparece .6s ease calc(.2s + var(--f) * 1.5s) both}
  .agenda[open] .c-bodegon .bd-apoyo{animation:bd-aparece 1s ease 1.2s both}
}
@keyframes bd-traza{from{stroke-dasharray:1 2;stroke-dashoffset:1.02}to{stroke-dasharray:1 2;stroke-dashoffset:0}}
@keyframes bd-aparece{from{opacity:0}}

/* ── Agenda real (citas que se confirman por WhatsApp), "Mi cita", privacidad y la página de cada cita ── */
.boton .ico-ini{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.boton:hover .ico-ini{transform:none}}
.agenda__estado{margin:10px 0 0;color:var(--tinta-2);font-size:.9375rem}
.agenda__estado .enlace{min-height:0;padding:0;border:0;background:none;font:inherit;color:var(--tinta);cursor:pointer}
.dias input:disabled+span{opacity:.38;text-decoration:line-through;text-decoration-color:var(--linea)}
.eleccion:has(input:disabled){cursor:default}
.eleccion:has(input:disabled):active>span{transform:none}
@media (hover:hover) and (pointer:fine){.eleccion:has(input:disabled):hover>span{border-color:rgba(77,69,49,.22)}}
.horas__vacio{margin:0;padding:14px 16px;border:1px dashed rgba(77,69,49,.26);border-radius:var(--r-hoja-s);color:var(--tinta-3);font-size:.9375rem}
.agenda__autoriza{display:grid;gap:8px}
.agenda__autoriza .check{font-size:.875rem;line-height:1.5}
.agenda__autoriza a{color:var(--tinta);text-underline-offset:.25em}
.agenda__aviso--error{color:var(--terracota-hondo);font-size:.875rem;font-weight:500}
.agenda__ultimo{display:grid;gap:16px;justify-items:start;padding:22px 24px;border-radius:var(--r-hoja-m);background:var(--grano),var(--papel-2)}
.agenda__ultimo p{margin:0;color:var(--tinta)}
.agenda__hecho .acciones{gap:10px 22px}
@media (max-width:760px){.agenda__ultimo .boton{width:100%}}

.mi-cita__acciones{margin-top:clamp(40px,5vw,64px)}

.legal{max-width:46em}
.legal h2{margin-bottom:12px}
.legal h3{margin:clamp(30px,3vw,40px) 0 10px;font-size:var(--t-h3)}
.legal p,.legal li{color:var(--tinta-2)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal li+li{margin-top:6px}
.legal a{color:var(--tinta)}

.ficha{max-width:780px;padding:clamp(26px,4vw,52px);border-radius:var(--r-hoja-l);background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px var(--linea-2)}
.ficha__estado{display:inline-block;margin:0 0 18px;padding:5px 12px;border-radius:999px;background:var(--papel-2);color:var(--tinta-2);font-size:.8125rem;font-weight:600}
.ficha--pendiente .ficha__estado{background:rgba(179,106,68,.14);color:var(--terracota-hondo)}
.ficha--confirmada .ficha__estado{background:var(--oliva-osc);color:var(--papel)}
.ficha__cuando span{display:block;font:300 var(--t-h3)/1.2 var(--display)}
.ficha__cuando b{display:block;margin-top:6px;font:200 clamp(3.4rem,2.2rem + 4.5vw,5.6rem)/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ficha--vencida .ficha__cuando,.ficha--cancelada .ficha__cuando,.ficha--pasada .ficha__cuando{color:var(--tinta-3)}
.ficha--vencida .ficha__cuando b,.ficha--cancelada .ficha__cuando b{text-decoration:line-through;text-decoration-thickness:1px}
.ficha__meta{margin:12px 0 0;color:var(--tinta-3);font-size:.9375rem}
.ficha__texto{margin:22px 0 0;max-width:36em;color:var(--tinta-2);font-size:var(--t-grande)}
.ficha .acciones{margin-top:28px;gap:12px 22px}
.ficha__cambio{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:28px 0 0;padding-top:16px;border-top:1px solid var(--linea-2);color:var(--tinta-2);font-size:.9375rem}
.ficha--vacia h2{font-size:var(--t-h2)}
@media (max-width:760px){.ficha .acciones .boton{width:100%}}

/* ── Teléfono con las mismas animaciones que el PC ── */
/* "Así agendas": en el teléfono los pasos van uno debajo del otro y la línea que los une (en PC, la
   onda) se dibuja hacia abajo, de un número al siguiente. */
@media (max-width:900px){
  .paso:not(:last-child)::after{content:"";position:absolute;left:28.25px;top:68px;width:1.5px;height:calc(100% - 68px + var(--s-bloque));background:var(--terracota);opacity:.55;transform-origin:50% 0;pointer-events:none}
  .mov .paso:not(:last-child)::after{transform:scaleY(0)}
  .mov .pasos.visto .paso:not(:last-child)::after{transform:scaleY(1);transition:transform 1s var(--recorrido) calc(.35s + var(--i,0) * .9s)}
}
/* Sin mouse no hay "hover": lo que en PC pasa al pasar el mouse, en el teléfono pasa al tocar. */
@media (hover:none){
  .boton:active{background:var(--terracota-hondo)}
  .boton--claro:active{background:#fff}
  .boton--fantasma:active{background:rgba(43,35,32,.06)}
  .boton:active svg:not(.ico-ini),.enlace:active svg,.tarjeta-ig:active>svg{transform:translateX(3px)}
  .tarjeta:active{translate:0 -4px}
  .tarjeta:active .tarjeta__foto img{transform:scale(1.03)}
  .tarjeta:active .tarjeta__foto .figura{transform:scale(1.04)}
  .agendar:active i{transform:translateX(3px);background:var(--terracota-osc)}
  /* la flecha de los botones principales invita a tocar, como en PC cuando el mouse pasa encima */
  .cielo__cta .boton svg,.barra .boton svg,.cierre .boton svg{animation:empuja 3.6s var(--salida) 2.4s infinite}
}
@keyframes empuja{0%,72%,100%{transform:none}80%{transform:translateX(5px)}88%{transform:translateX(1px)}94%{transform:translateX(3px)}}
@media (max-width:900px){.agenda__hecho{gap:16px;padding:28px 20px calc(28px + env(safe-area-inset-bottom))}.agenda__hecho .sello-ok{width:52px;height:52px}}