/* ============================================================
   NAWAL — Landing Pages de Servicios
   Estilos compartidos.
   Reutiliza la paleta de ../paleta.css y replica los componentes
   del sitio principal para mantener la identidad visual.
   ============================================================ */

/* ---- Fuentes auto-alojadas ---- */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-500i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-500i-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-600i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-600i-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/jost-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/jost-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/jost-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/jost-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Tokens (alias de paleta.css) ---- */
:root {
  --bg: var(--nw-bg);
  --surface: var(--nw-card);
  --surface-alt: var(--nw-surface-alt);
  --plum: var(--nw-plum);
  --text: var(--nw-text);
  --text-muted: var(--nw-text-muted);
  --text-faint: var(--nw-text-faint);
  --border: var(--nw-border);
  --primary: var(--nw-primary);
  --primary-strong: var(--nw-primary-strong);
  --primary-soft: var(--nw-primary-soft);
  --on-primary: var(--nw-on-primary);
  --brand-100: var(--nw-brand-100);
  --gradient: var(--nw-gradient);
  --glow: var(--nw-glow);
  --shadow-lift: var(--nw-shadow-lift);
  --shadow-deep: var(--nw-shadow-deep);
  --r-inner: 14px;
  --r-card: 20px;
  --r-lg: 28px;
  --r-petalo: var(--nw-radius-petalo);
  --ease: var(--nw-ease);
  --ease-soft: var(--nw-ease-soft);
  --maxw: 1240px;
  --alto-header: 69px;
  --pad: 40px;
  --z-petals: 0;
  --z-base: 1;
  --z-nav: 60;
  --z-grain: 70;
}

/* ---- Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{font-family:'Jost',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-strong)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

/* ---- Pétalos ---- */
.petals{position:fixed;inset:0;z-index:var(--z-petals);pointer-events:none;overflow:hidden}
.petals span{position:absolute;top:0;display:block;opacity:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffb3fd"><g transform="translate(12,12)"><ellipse cy="-5.6" rx="2.7" ry="5.6"/><ellipse cy="-5.6" rx="2.7" ry="5.6" transform="rotate(60)"/><ellipse cy="-5.6" rx="2.7" ry="5.6" transform="rotate(120)"/><ellipse cy="-5.6" rx="2.7" ry="5.6" transform="rotate(180)"/><ellipse cy="-5.6" rx="2.7" ry="5.6" transform="rotate(240)"/><ellipse cy="-5.6" rx="2.7" ry="5.6" transform="rotate(300)"/></g></svg>') center/contain no-repeat;animation-name:nw-fall;animation-timing-function:linear;animation-iteration-count:infinite}

@keyframes nw-fall{0%{transform:translate3d(0,-12vh,0) rotate(0deg);opacity:0}8%{opacity:var(--o,.45)}88%{opacity:var(--o,.45)}100%{transform:translate3d(var(--drift,20px),112vh,0) rotate(300deg);opacity:0}}

.petals span:nth-child(1){left:4%;width:14px;height:14px;animation-duration:27s;animation-delay:-3s;--drift:26px;--o:0.5}
.petals span:nth-child(2){left:21%;width:11px;height:11px;animation-duration:23s;animation-delay:-8s;--drift:18px;--o:0.55}
.petals span:nth-child(3){left:38%;width:13px;height:13px;animation-duration:25s;animation-delay:-1s;--drift:30px;--o:0.48}
.petals span:nth-child(4){left:56%;width:12px;height:12px;animation-duration:24s;animation-delay:-11s;--drift:22px;--o:0.52}
.petals span:nth-child(5){left:72%;width:10px;height:10px;animation-duration:21s;animation-delay:-17s;--drift:16px;--o:0.58}
.petals span:nth-child(6){left:88%;width:19px;height:19px;animation-duration:35s;animation-delay:-22s;--drift:34px;--o:0.36}

main,.footer{position:relative;z-index:var(--z-base)}

/* ---- Grano ---- */
body::after{content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>')}

.skip-link{position:absolute;left:50%;top:0;z-index:100;transform:translate(-50%,-100%);background:var(--primary);color:var(--on-primary);padding:12px 22px;border-radius:0 0 12px 12px;font-size:15px;font-weight:500;transition:transform .25s var(--ease)}
.skip-link:focus{transform:translate(-50%,0);color:var(--on-primary)}

/* ---- Tipografía ---- */
/* Acento del titular: misma serif, distinto color. Se probo con una
   negra (Archivo Black) y mezclar serif y palo seco en la misma linea
   partia el titular en dos voces. */
.em{color:var(--primary)}
.eyebrow{font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--primary);font-weight:600}
.eyebrow-line{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px}
.eyebrow-line i{display:block;width:26px;height:1px;background:var(--primary);opacity:.55}
.h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(31px,4.4vw,50px);line-height:1.08;letter-spacing:-.4px;color:var(--text);text-wrap:balance}
.lede{font-size:17px;line-height:1.7;color:var(--text-muted);font-weight:300;max-width:58ch}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-weight:500;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .16s var(--ease),box-shadow .25s var(--ease)}
.btn:active{transform:scale(.978)}
/* La flecha va suelta, sin caja: el contenedor con fondo translucido y
   esquinas redondeadas se leia como una forma pegada dentro de un boton
   que ya es una pildora. */
.btn-ico{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease)}
.btn-primary{background:var(--primary);color:var(--on-primary);padding:11px 12px 11px 26px;font-size:16px;box-shadow:0 16px 34px -18px var(--primary)}
.btn-primary:hover{background:var(--primary-strong);color:var(--on-primary)}
.btn-primary:active{transform:scale(.978)}
.btn-ghost{background:transparent;color:var(--text);padding:15px 26px;font-size:16px;border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-light{background:var(--surface);color:var(--primary-strong);padding:11px 12px 11px 28px;font-size:16.5px;font-weight:600;box-shadow:0 22px 50px -20px rgb(0 0 0/.38)}
.btn-light:hover{color:var(--primary-strong)}
.btn-light .btn-ico{color:var(--primary-strong)}
.btn-sm{background:var(--primary);color:var(--on-primary);padding:11px 20px;min-height:44px;font-size:14.5px;box-shadow:0 10px 22px -12px var(--primary)}
.btn-sm:hover{background:var(--primary-strong);color:var(--on-primary)}
.btn-wa{background:transparent;color:var(--primary);border:1px solid var(--border);padding:14px 24px;font-size:15px}
.btn-wa:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-strong)}

/* ---- Animaciones ---- */
@keyframes nw-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Recorrido mas corto: nw-rise en el hero contaba como CLS porque se
   mide en la carga inicial (a diferencia de los .reveal, que disparan
   despues via scroll). Un keyframe propio para no tocar nw-rise, que
   reutilizan las demas animaciones de entrada del sitio. */
@keyframes nw-rise-sm{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* El menu cuelga de la barra: sus opciones entran cayendo, no subiendo. */
@keyframes nw-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes nw-fade{from{opacity:0}to{opacity:1}}
@keyframes nw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.anim-float{animation:nw-float 6s var(--ease-soft) infinite}
.reveal{opacity:0}
/* Una sola regla: antes eran dos .reveal.is-visible seguidas, y la segunda
   solo repetia lo que `backwards` ya garantiza. */
.reveal.is-visible{opacity:1;animation:nw-rise .5s var(--ease) backwards}

/* ---- Logo / Brand ---- */
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{display:block;width:40.6px;height:35px;overflow:hidden;flex-shrink:0}
.brand-mark img{width:100%;height:100%;object-fit:cover;object-position:top center}
.brand-word{font-family:'Jost',sans-serif;font-size:23px;font-weight:300;letter-spacing:1.5px;color:var(--text);line-height:1;transform-origin:left center;transition:transform .4s var(--ease)}

/* ---- Nav ---- */
/* Barra a todo el ancho, no una pildora flotante. El fondo va en
   .header para que llegue de borde a borde, y el contenido se limita a
   --maxw dentro para que el logo quede alineado con el resto de la
   pagina. pointer-events vuelve a auto: siendo una barra solida ya no
   hay hueco lateral por el que deban pasar los clics. */
.header{position:sticky;top:0;z-index:var(--z-nav);padding:0;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.nav-sentinel{position:absolute;top:0;height:1px;width:1px;pointer-events:none}
.header-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;padding:0 var(--pad)}
.header.is-stuck{background:color-mix(in srgb,var(--surface) 96%,transparent);border-bottom-color:var(--border);box-shadow:0 10px 30px -22px oklch(0.35 0.08 327.5/.55)}
.header.is-stuck .brand-word{transform:scale(.94)}
.header-inner>*{animation:nw-rise .7s var(--ease) backwards}
.nav>*{animation:nw-rise .7s var(--ease) backwards}
.nav>*:nth-child(1){animation-delay:.06s}
.nav>*:nth-child(2){animation-delay:.12s}
.nav>*:nth-child(3){animation-delay:.18s}
.nav>*:nth-child(4){animation-delay:.24s}
.nav>*:nth-child(5){animation-delay:.30s}
.nav{display:flex;align-items:center;gap:28px}
.navlink{position:relative;color:var(--text-muted);font-size:15px;font-weight:400;transition:color .25s var(--ease)}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.navlink:hover{color:var(--primary)}
.navlink:hover::after,.navlink.is-current::after{transform:scaleX(1)}
.navlink.is-current{color:var(--primary)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text);align-items:center;justify-content:center;cursor:pointer;transition:background .25s var(--ease)}
.nav-toggle:active{transform:scale(.95)}
.nav-toggle span{position:relative;display:block;width:17px;height:1.4px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease-soft),opacity .3s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:17px;height:1.4px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease-soft)}
.nav-toggle span::before{top:-5.5px}
.nav-toggle span::after{top:5.5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

/* ---- Hero de servicio ---- */
/* ---- Hero (mismo formato que la portada) ----
   Foto a sangre detras del texto y velo en degradado encima. El margen
   negativo mete la foto por debajo de la barra translucida; va atado a
   --alto-header porque con un numero suelto se desincroniza en cuanto
   cambia el alto de la barra y el titular queda escondido detras. */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(560px,84vh,760px);overflow:hidden;margin-top:calc(var(--alto-header) * -1);padding-top:var(--alto-header)}
.hero-fondo,.hero-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(98deg,color-mix(in srgb,var(--bg) 94%,transparent) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 40%,color-mix(in srgb,var(--bg) 46%,transparent) 72%,color-mix(in srgb,var(--bg) 24%,transparent) 100%)}
.hero-inner{position:relative;z-index:var(--z-base);max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--pad);animation:nw-rise-sm .8s var(--ease) both}
.hero h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(38px,4.9vw,62px);line-height:1.05;letter-spacing:-1.2px;color:var(--text);text-wrap:balance;margin-top:18px;max-width:20ch}
.hero-lead{margin-top:22px;font-size:18px;line-height:1.68;color:var(--text-muted);max-width:46ch;font-weight:300}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
/* Sobre una foto el boton fantasma se diluye: se le da fondo propio */
.hero .btn-ghost{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero .crumbs{margin-bottom:18px}
.stars{display:flex;gap:2px;color:var(--primary)}

/* ---- Sección "Qué es" ---- */
.about-service{max-width:var(--maxw);margin:0 auto;padding:100px var(--pad)}
.about-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-service-body .h2{margin-bottom:24px}
.about-service-body p{font-size:16.5px;line-height:1.72;color:var(--text-muted);font-weight:300;max-width:54ch}
.about-service-body p+p{margin-top:16px}

/* ---- Retrato ----
   La foto de "sobre esta terapia" y la de "Mi historia" de la portada.

   Antes iba en un arco -radio 200-250px en las esquinas de arriba- montado
   sobre una bandeja translucida con borde y sombra propia. Eran dos formas
   que no se repetian en ningun otro sitio: el resto de las imagenes del
   sitio -hero, CTA, tarjetas de terapia, portadas del blog- son el mismo
   rectangulo de radio --r-lg. Ahora esta usa ese mismo rectangulo y la
   misma sombra de elevacion de las tarjetas, sin marco propio. La forma
   deja de llamar la atencion sobre si misma y la foto se ve completa: el
   arco recortaba las dos esquinas superiores de cada imagen.

   Sin borde a proposito: las tarjetas lo llevan porque su fondo es del
   mismo color que la pagina, y una foto ya se delimita sola.

   La forma es un petalo: las esquinas superior-izquierda e inferior-derecha
   muy redondeadas y las otras dos al radio de las tarjetas. Es el petalo del
   isotipo, insinuado, asi que el guino a la marca es real y no hace falta
   agregarle ningun adorno encima.

   Los radios grandes van en % y no en px para que la proporcion del petalo
   sea la misma en cualquier tamano: con un valor fijo, la misma esquina que
   se ve elegante a 460px se come la foto a 380px. Como la caja siempre es
   4/5, 28% del ancho y 22.4% del alto dan la misma medida en pixeles, o sea
   una esquina circular, a cualquier escala. */
.retrato{display:flex;justify-content:center}
.retrato-foto{width:100%;max-width:460px;aspect-ratio:4/5;overflow:hidden;background:var(--surface-alt);box-shadow:var(--shadow-lift);
  border-radius:28% var(--r-lg) 28% var(--r-lg) / 22.4% var(--r-lg) 22.4% var(--r-lg)}
.retrato-foto img{width:100%;height:100%;object-fit:cover}

/* ---- Beneficios ---- */
.benefits{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 100px}
.benefits-head{max-width:640px;margin-bottom:52px}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.benefit-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:32px 28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.benefit-icon{width:52px;height:52px;border-radius:16px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.benefit-card h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:23px;color:var(--text);line-height:1.15}
.benefit-card p{font-size:14.5px;line-height:1.62;color:var(--text-muted);font-weight:300}

/* ---- Para quién ---- */
.for-whom{background:var(--surface-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.for-whom-inner{max-width:var(--maxw);margin:0 auto;padding:100px var(--pad)}
.for-whom-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:center}
.for-whom-body .h2{margin-bottom:20px}
.for-whom-body p{font-size:16.5px;line-height:1.72;color:var(--text-muted);font-weight:300;max-width:50ch;margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;background:var(--primary-soft);color:var(--primary-strong);padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500}
.for-whom-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}

/* ---- Proceso / Cómo es una sesión ---- */
.process{background:var(--surface-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.process-inner{max-width:1080px;margin:0 auto;padding:110px var(--pad)}
.process-head{max-width:600px;margin-bottom:16px}
/* ---- Tu proceso: tres tarjetas en fila ----
   Antes era un riel vertical con numeros grandes y relleno animado. Se
   cambio por tarjetas con icono, del mismo tipo que beneficios y pilares:
   tres pasos no necesitan una linea de tiempo para entenderse, y en fila
   ocupan un tercio del alto. */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px}
/* El icono va AL LADO del titular, no encima. El icono en su propia caja
   centrado sobre un h3 es la plantilla de tarjeta de caracteristica que
   produce cualquier generador; al lado, el paso se lee de un vistazo y la
   forma de petalo del icono queda a la altura del texto, donde se ve. */
/* Sin caja: en esta pagina el filete y el espacio agrupan. Tres pasos
   separados por una linea vertical se leen como una secuencia; tres
   tarjetas identicas se leen como tres opciones equivalentes. */
/* Icono colgado a la izquierda y el cuerpo alineado con el titular,
   no con el icono: antes el titulo iba indentado y el parrafo no, y
   el borde de color del icono dejaba ese desajuste a la vista. El
   aire lateral sube de 32 a 52px: con un icono con fondo propio, 32
   contra el filete se lee como margen nulo. */
/* El cuerpo vuelve a ocupar la columna entera: con el icono colgado y
   52px de aire lateral, el texto se quedaba en 210px y «Elegimos el
   camino» caia en seis lineas de tres palabras. El aire que faltaba
   era vertical, no horizontal: 26px entre el icono y el parrafo, y
   un icono algo menor para que no aplaste al titular. */
.paso{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico titulo" "texto texto";gap:26px 18px;align-items:center;align-content:start;padding:6px 40px;background:none;border:0;border-left:1px solid var(--border);border-radius:0;transition:none}
.pasos>.paso:first-child{border-left:0;padding-left:0}
.pasos>.paso:last-child{padding-right:0}
.paso-ico{grid-area:ico}
.paso h3{grid-area:titulo}
.paso p{grid-area:texto}
.paso-ico{width:44px;height:44px;border-radius:var(--r-petalo);background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.paso h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:25px;line-height:1.15;color:var(--text)}
.paso p{font-size:15px;line-height:1.68;color:var(--text-muted);font-weight:300}
@media(max-width:900px){
  .pasos{grid-template-columns:1fr;gap:0}
  .paso{border-left:0;border-top:1px solid var(--border);padding:26px 0}
  .pasos>.paso:first-child{border-top:0;padding-top:0}
  .pasos>.paso:last-child{padding-right:0;padding-bottom:0}
}

/* ---- Desfile de reseñas de Google ----
   La pista lleva la tanda dos veces y se desplaza un 50 % exacto: al llegar
   al final, la copia esta justo donde estaba el original y el bucle no
   tiene costura. Por eso la separacion va en margin-right de cada tarjeta
   y no en gap del flex; con gap el 50 % cae desviado media separacion.
   La duracion la fija el JS segun el ancho real, para que la velocidad no
   dependa de cuantas reseñas haya. */
.resenas{max-width:var(--maxw);margin:0 auto;padding:110px var(--pad)}
.resenas-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px}
.resenas-btn{width:44px;height:44px;flex-shrink:0;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease)}
.resenas-btn:hover{color:var(--primary);border-color:var(--primary)}
.resenas-btn[hidden]{display:none}
.resenas-desfile{overflow:hidden;margin:0 calc(var(--pad) * -1);padding:6px 0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.resenas-pista{display:flex;align-items:flex-start;width:max-content;animation:desfile var(--desfile-dur,150s) linear infinite}
.resenas-copia{display:flex;align-items:flex-start}
.resenas-pista .resena{flex:0 0 min(380px,80vw);margin:0 22px 0 0;max-width:none}
@keyframes desfile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Pausa al pasar el raton, al enfocar con teclado y con el boton: contenido
   en movimiento que arranca solo necesita una forma de detenerlo. */
.resenas-desfile:hover .resenas-pista,
.resenas-desfile:focus-within .resenas-pista,
.resenas-desfile[data-pausa="si"] .resenas-pista{animation-play-state:paused}
.resenas-desfile :focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.resenas-rail blockquote,.resenas-pista blockquote{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.resenas-pista .avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.resenas-pie{margin-top:26px;font-size:14px;color:var(--text-faint);font-weight:300}
@media(prefers-reduced-motion:reduce){
.resenas-pista{animation:none}
.resenas-desfile{overflow-x:auto;scroll-snap-type:x mandatory}
.resenas-pista .resena{scroll-snap-align:start}
}
@media(max-width:760px){.resenas{padding:84px var(--pad)}.resenas-head{align-items:flex-start;flex-direction:column}}

/* ---- Testimonio ---- */
.testimonial{max-width:var(--maxw);margin:0 auto;padding:118px var(--pad)}
.testimonial .h2{text-align:center;margin:0 auto 58px}
.quote{position:relative;display:flex;flex-direction:column;padding:30px 28px 26px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);max-width:680px;margin:0 auto;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.quote .stars{margin-bottom:14px}
/* Las resenas son las palabras de una persona, no una cita decorativa:
   van en la sans del cuerpo. En Cormorant cursiva a 21px, que era lo
   anterior, cuatro a seis lineas seguidas cansaban la lectura; la
   cursiva esta pensada para enfasis y citas breves, no para parrafos. */
.quote blockquote{font-family:'Jost',sans-serif;font-size:16.5px;line-height:1.68;color:var(--text-muted);font-weight:300;text-wrap:pretty;flex:1}
/* Avatar al estilo de Google: circulo de color solido con la inicial,
   un color fijo por persona, como muestra Google a quien no tiene foto.
   Junto al logo y las estrellas amarillas completa el reconocimiento de
   resena real, y al variar el color entre tarjetas evita que las tres se
   vean identicas.
   Naranjo y turquesa van en su version oscura: los tonos vivos de Google
   (#E8710A y #12B5CB) daban 3,09 y 2,47 de contraste con letra blanca,
   bajo el minimo de 4,5. */
.avatar{width:42px;height:42px;border-radius:999px;background:#5F6368;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Jost',sans-serif;font-size:17px;font-weight:500;flex-shrink:0}
.avatar-azul{background:#1A73E8}
.avatar-naranjo{background:#B85C00}
.avatar-verde{background:#0D652D}
.avatar-morado{background:#9334E6}
.avatar-rojo{background:#C5221F}
.avatar-turquesa{background:#00707C}
.q-who b{display:flex;align-items:center;gap:7px;font-weight:500;font-size:14.5px;color:var(--text)}
/* Logo de Google junto al nombre: deja claro de un vistazo que la
   resena viene de la ficha y no es un testimonio escrito en casa. */
.g-logo{flex-shrink:0;display:inline-flex;width:15px;height:15px}
/* Amarillo de Google (#FBBC04), no el ciruela de la marca: son sus
   estrellas y se leen como tales. La calificacion tambien va en el
   aria-label, asi que no depende solo del color. */
.quote .stars{color:#FBBC04}
.q-who span{display:block;font-size:13px;color:var(--text-faint)}

/* ---- FAQ ---- */
/* ---- Preguntas frecuentes ----
   Tarjetas en dos columnas: con cinco o siete preguntas, la lista en una
   sola columna obligaba a bajar media pantalla para ver la ultima. El
   indicador es un signo mas de CSS que gira 135 grados al abrir: no hay
   SVG que descargar y el estado se ve de un vistazo. */
.faq{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 120px}
.faq-head{max-width:640px;margin-bottom:42px}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}}
/* Cada columna es un contenedor propio: al desplegar una pregunta crece
   solo su columna y la de al lado no se mueve. */
.faq-col{display:flex;flex-direction:column;gap:18px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:0 26px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.faq-item[open]{border-color:color-mix(in srgb,var(--primary) 40%,var(--border));box-shadow:var(--shadow-lift)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 0;cursor:pointer;list-style:none;font-size:16.5px;line-height:1.4;font-weight:500;color:var(--text);transition:color .2s var(--ease)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--primary)}
.faq-mas{position:relative;flex-shrink:0;width:26px;height:26px;border-radius:999px;background:var(--primary-soft);transition:transform .35s var(--ease)}
.faq-mas::before,.faq-mas::after{content:"";position:absolute;left:50%;top:50%;background:var(--primary);border-radius:2px}
.faq-mas::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.faq-mas::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.faq-item[open] .faq-mas{transform:rotate(135deg)}
.faq-a{padding:0 0 26px;max-width:60ch}
.faq-a p{font-size:15.5px;line-height:1.7;color:var(--text-muted);font-weight:300}
.faq-pie{margin-top:34px;font-size:15.5px;color:var(--text-muted);font-weight:300}
@supports(interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .38s var(--ease),content-visibility .38s allow-discrete}.faq-item[open]::details-content{block-size:auto}}

/* ---- CTA final ---- */
.cta{max-width:var(--maxw);margin:0 auto 120px;padding:0 var(--pad)}
.cta-inner{position:relative;overflow:hidden;border-radius:34px;padding:86px 40px;text-align:center;isolation:isolate;background:oklch(0.44 0.150 327.5)}
/* La foto va debajo del mesh (-2), el mesh en ::after (-1) y el texto encima.
   Un hijo sin z-index negativo taparia el fondo del contenedor en vez de
   quedar por debajo del degradado. El mesh se queda en torno al 70 % para
   que la foto se vea; el contraste del texto blanco lo sostiene el velo
   eliptico central, que solo oscurece donde hay letras. */
.cta-foto,.cta-foto img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.cta-inner::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(52% 66% at 50% 48%,oklch(0.30 0.100 322/.58),transparent 78%),radial-gradient(120% 90% at 12% 8%,oklch(0.68 0.150 340/.58),transparent 60%),radial-gradient(100% 100% at 88% 18%,oklch(0.58 0.170 318/.66),transparent 58%),radial-gradient(140% 120% at 50% 110%,oklch(0.38 0.130 322/.78),transparent 70%),oklch(0.50 0.160 327.5/.70)}
.cta h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(30px,4.6vw,54px);line-height:1.06;color:#fff;text-wrap:balance}
.cta p{margin:18px auto 0;max-width:46ch;font-size:17.5px;line-height:1.62;color:rgb(255 255 255/.9);font-weight:300}
.cta .btn-light{margin-top:34px}

/* ---- Footer ---- */
.footer{background:var(--plum);color:rgb(255 255 255/.72)}
.footer-grid{max-width:var(--maxw);margin:0 auto;padding:76px var(--pad) 44px;display:grid;grid-template-columns:1.5fr 1fr 1.1fr;gap:48px}
.footer .brand{margin-bottom:16px}
.footer .brand-word{color:#fff}
.footer p{font-size:14.5px;line-height:1.7;max-width:34ch;font-weight:300}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:44px;height:44px;border-radius:999px;border:1px solid rgb(255 255 255/.22);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .25s var(--ease),border-color .25s var(--ease)}
.socials a:hover{background:rgb(255 255 255/.12);border-color:rgb(255 255 255/.4);color:#fff}
.socials a:active{transform:scale(.94)}
/* h3, no h4: los encabezados de las columnas del pie son el ultimo nivel
   de la pagina (el ultimo heading de contenido es el h2 del CTA), saltar
   a h4 rompia el orden secuencial de encabezados (Lighthouse: heading-order) */
.footer h3{font-size:11.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgb(255 255 255/.5);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:11px;font-size:14.5px}
.footer-links a{color:rgb(255 255 255/.72);transition:color .25s var(--ease)}
.footer-links a:hover{color:#fff}
.footer-loc{margin-top:0;font-size:14px;line-height:1.6;color:rgb(255 255 255/.68);font-weight:300}
.footer-loc b{display:block;color:#fff;font-weight:400}
.footer-tel{display:block;color:#fff;font-weight:400;margin-top:6px;transition:color .25s var(--ease)}
.footer-tel:hover{color:var(--brand-100)}
.footer-dir{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:9px;color:rgb(255 255 255/.7);font-size:14px;transition:color .25s var(--ease)}
.footer-dir svg{transition:transform .25s var(--ease)}
.footer-dir:hover{color:#fff}
.footer-dir:hover svg{transform:translateX(3px)}
.footer-bottom{border-top:1px solid rgb(255 255 255/.12)}
.footer-bottom div{max-width:var(--maxw);margin:0 auto;padding:22px var(--pad);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13px;color:rgb(255 255 255/.5)}

/* ---- Migas de pan ----
   Quien llega desde Google cae directo aqui, sin pasar por la portada:
   las migas le dicen donde esta parado y dan la ruta de vuelta. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;font-size:13px;color:var(--text-faint)}
.crumbs a{color:var(--text-muted);transition:color .25s var(--ease)}
.crumbs a:hover{color:var(--primary)}
.crumbs span[aria-hidden]{opacity:.5}

/* ---- Otras terapias ----
   Va despues de las preguntas frecuentes: si alguien llego hasta ahi y
   no reservo, lo mas probable es que esta terapia no fuera la suya. En
   vez de dejarlo salir del sitio, se le ofrecen las otras cinco. */
.related{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 100px}
.related-head{margin-bottom:38px}
.related-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
/* Misma tarjeta que la grilla de la portada: foto arriba, texto abajo.
   Reutiliza las card_* que ya sirve la home, asi que quien llega desde
   alli las tiene en cache. */
.related-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.related-media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--surface-alt)}
.related-media img{width:100%;height:100%;object-fit:cover}
.related-body{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px}
.related-card b{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:20px;color:var(--text);line-height:1.15}
.related-card span span,.related-card .related-body span{font-size:13.5px;line-height:1.55;color:var(--text-muted);font-weight:300}

/* ---- Tarjeta de articulo ----
   Vive aqui y no en blog.css porque la usan tres sitios y solo uno de ellos
   carga blog.css: el listado del blog, el "Seguir leyendo" de cada articulo
   y la seccion "Del blog" de las seis landings. Una sola definicion para que
   la tarjeta sea identica en los tres, que es justamente lo que se pidio.
   La pinta herramientas/blog.py; no se escribe a mano en ningun HTML. */
/* minmax(0,1fr) y min-width:0 en vez de 1fr a secas: los items de grid traen
   min-width:auto, asi que un titulo o una foto larga podrian ensanchar la
   tarjeta por encima de su columna. Hoy ninguna lo hace; es precaucion.

   En fila y no en rejilla de tres: el blog arranca con uno o dos articulos
   por terapia, y una tarjeta vertical suelta dejaba dos tercios de la fila
   vacios, como si faltara contenido. Apaisada llena el ancho con cualquier
   cantidad y sigue funcionando cuando haya diez. */
.posts-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.post-card{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
/* Portada: la misma imagen destacada del articulo.
   La <picture> va absoluta para que .post-media no tenga contenido en flujo:
   asi su alto lo fija la fila del grid -o sea el texto- y nunca la foto.
   Con la foto en flujo pasaban las dos cosas que habia que evitar: con
   aspect-ratio:3/2 quedaba mas baja que la tarjeta y dejaba una banda vacia
   debajo, y sin el heredaba la proporcion del archivo, de modo que una foto
   cuadrada estiraba la tarjeta entera. El recorte lo hace object-fit:cover.
   En movil, apilada, si necesita alto propio: ver el breakpoint de 760. */
.post-media{position:relative;overflow:hidden;background:var(--surface-alt)}
.post-media picture{position:absolute;inset:0;display:block}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.post-card:hover .post-media img{transform:scale(1.03)}
.post-body{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px 30px;min-width:0}
/* El enlace del titulo cubre la tarjeta entera: area de toque comoda en
   movil sin anidar un <a> dentro de otro ni repetir el destino. */
.post-card h3 a::after{content:"";position:absolute;inset:0}
.post-card h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:25px;line-height:1.15;color:var(--text);text-wrap:balance}
.post-card h3 a{color:inherit;text-decoration:none}
.post-card p{font-size:14.5px;line-height:1.65;color:var(--text-muted);font-weight:300;max-width:62ch}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--text-faint)}
.post-meta span[aria-hidden]{opacity:.5}

/* ---- Seccion "Del blog" ----
   La misma caja que "Otras terapias": va en las landings, despues del FAQ,
   y en el pie de cada articulo como "Seguir leyendo". */
.del-blog{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 100px}

/* ---- Sticky CTA mobile ----
   Solo existe bajo 980px. La visibilidad la controla .is-visible desde
   el IntersectionObserver: antes el JS escribia style.display inline y
   eso ganaba por especificidad a la media query, asi que la barra
   tambien salia a lo ancho en escritorio. */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;padding:14px var(--pad);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);animation:nw-rise .5s var(--ease) both}
.sticky-cta .btn{width:100%}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1120px){
  :root{--pad:28px}
  .about-service-grid{gap:48px}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  .post-card{grid-template-columns:220px minmax(0,1fr)}
  .for-whom-grid{gap:40px}
  .footer-grid{grid-template-columns:1.3fr 1fr 1.05fr;gap:34px}
}

@media(max-width:980px){
  /* Aire entre la barra y el eyebrow: pegados, el titular parecia colgar
     del menu. El velo sube en la franja del texto porque en vertical la
     foto queda justo detras del titular, no a un lado. */
  .hero{min-height:auto;padding-top:calc(var(--alto-header) + 40px);padding-bottom:76px}
  .hero::after{background:linear-gradient(178deg,color-mix(in srgb,var(--bg) 96%,transparent) 0%,color-mix(in srgb,var(--bg) 93%,transparent) 40%,color-mix(in srgb,var(--bg) 86%,transparent) 62%,color-mix(in srgb,var(--bg) 46%,transparent) 100%)}
  .hero h1{max-width:none}

  .hero-lead{max-width:none;margin-top:26px}
  .about-service-grid{grid-template-columns:1fr;gap:40px}
  .for-whom-grid{grid-template-columns:1fr;gap:36px}
  .process-inner{padding:84px var(--pad)}
  .step p{grid-column:2}
  .testimonial{padding:86px var(--pad)}
  .faq{padding-bottom:92px}
  .cta-inner{padding:66px 28px}
  .cta{margin-bottom:92px}
  .sticky-cta.is-visible{display:block}
  /* Hueco al pie del documento: la barra es fixed y sin esto tapaba los
     ultimos 81px del footer (la linea de copyright y la direccion). */
  body{padding-bottom:81px}
}

@media(max-width:900px){

  /* El desplegable cuelga pegado a la barra: el 'top: calc(100% + 10px)'
   y el borde redondeado arriba venian de cuando el header era una
   pildora flotante, y dejaban 9px de aire entre barra y menu. Tampoco
   lleva borde lateral, para que sea la misma pieza que la barra. */
.nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px var(--pad) 18px;border-radius:0 0 20px 20px;background:color-mix(in srgb,var(--surface) 99%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-top:0;box-shadow:0 22px 44px -26px oklch(0.35 0.08 327.5/.5);display:none}
  .nav.is-open{display:flex}
  .nav.is-open>*{animation:nw-drop .4s var(--ease) both}
  .nav.is-open>*:nth-child(1){animation-delay:.04s}
  .nav.is-open>*:nth-child(2){animation-delay:.08s}
  .nav.is-open>*:nth-child(3){animation-delay:.12s}
  .nav.is-open>*:nth-child(4){animation-delay:.16s}
  .nav.is-open>*:nth-child(5){animation-delay:.2s}
  .nav.is-open>*:nth-child(6){animation-delay:.24s}
  .nav.is-open>*:nth-child(7){animation-delay:.28s}
  .nav.is-open>*:nth-child(8){animation-delay:.32s}
  .navlink{padding:13px 2px;font-size:16.5px;border-bottom:1px solid var(--border)}
  .navlink::after{display:none}
  .nav .btn-sm{margin-top:16px;padding:14px 22px;font-size:15.5px;align-self:flex-start}
  .nav-toggle{display:flex}
  .header-inner{position:relative}
}

@media(max-width:760px){
  .benefits-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  /* Apilada: la foto ya no tiene una columna que le de altura, asi que aqui
     si lleva la suya. 3:2, el mismo recorte que las tarjetas de la portada. */
  .post-card{grid-template-columns:minmax(0,1fr)}
  .post-media{aspect-ratio:3/2}
  .post-body{padding:22px 24px 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 26px;padding:60px var(--pad) 36px}
  .footer-brand-col{grid-column:1/-1}
  .footer-loc-col{grid-column:1/-1}
  .footer p{max-width:none}
}

@media(max-width:560px){
  :root{--pad:20px}
  .related-grid{grid-template-columns:1fr}
  .hero .eyebrow{letter-spacing:1.7px;font-size:11px}
  .hero .eyebrow-line{margin-bottom:20px}
  .header-inner{height:60px}
  :root{--alto-header:61px}
  .hero-actions{gap:10px}
  .hero-actions .btn{width:100%}
  .quote blockquote{font-size:16px}
  .step h3{font-size:23px}
  .faq-item summary{font-size:19px;padding:19px 0;gap:14px}
  .faq-a{padding-bottom:20px}
  .faq-a p{font-size:15px}
  .cta-inner{padding:52px 22px;border-radius:26px}
  .cta .btn-light{width:100%}
  .benefit-card{padding:26px 22px}
  .about-service{padding:72px var(--pad)}
  .benefits{padding:0 var(--pad) 72px}
  .for-whom-inner{padding:72px var(--pad)}
  .for-whom-cta .btn{width:100%}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom div{justify-content:center;text-align:center;gap:6px}
}

/* ---- Elevacion al pasar el raton ----
   Solo para punteros finos: en tactil el :hover se dispara al tocar y la
   tarjeta se queda levantada hasta que se toca otra cosa. La sombra y el
   borde si viven en la regla base; lo que se separa aqui es el movimiento. */
@media(hover:hover) and (pointer:fine){
  .btn:hover .btn-ico{transform:translate(2px,-1px) scale(1.06)}
  .btn-primary:hover,.btn-light:hover{transform:translateY(-2px)}
  .benefit-card:hover{transform:translateY(-5px)}
  .quote:hover,.related-card:hover,.post-card:hover{transform:translateY(-4px)}
  /* .paso queda fuera: ya no es una tarjeta, y una sombra sin caja detras
     dibuja un rectangulo fantasma pegado al texto, sin margen ninguno. */
  .benefit-card:hover,.quote:hover,
  .related-card:hover,.post-card:hover{box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
  .post-card:hover h3 a{color:var(--primary-strong)}
}

/* ---- Movimiento reducido ----
   Menos movimiento, no ninguna respuesta. Se apaga el desplazamiento y el
   bucle; el color, la opacidad y el foco siguen transicionando, porque no
   producen mareo y son la unica senal de que la interfaz acuso el toque. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.is-visible{opacity:1;transform:none;animation:none}
  .petals{display:none}
  .resenas-pista{animation:none}
  .header-inner>*,.nav>*{animation:none}
  .hero-inner{animation:none}
  .sticky-cta{animation:none}
  .btn:active,.btn-primary:active,.nav-toggle:active,.socials a:active{transform:none}
  .btn:hover .btn-ico,.btn-primary:hover,.btn-light:hover,
  .benefit-card:hover,.quote:hover,
  .related-card:hover,.post-card:hover{transform:none}
}

@media(prefers-reduced-transparency:reduce){
  .header-inner,.nav,.sticky-cta{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}
}