/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --ivory:#FBF8F3;
  --cream:#F4EDE2;
  --blush:#F1E2DB;
  --linen:#ECE2D3;
  --navy:#1F2A40;
  --navy-soft:#2E3B57;
  --navy-deep:#141B29;
  --rose:#A9717B;
  --rose-deep:#8C5863;
  --rose-light:#F2DEE2;
  --ink:#3B342E;
  --ink-soft:#6E655D;
  --ink-grey:#8C8880;
  --line:#E2D5C2;
  --line-dark:rgba(255,255,255,.14);
  --photo-tint:rgb(251,246,240);
  --radius-sm:4px;
  --radius:10px;
  --maxw:1200px;
  --gutter:clamp(20px,5vw,64px);
  --shadow:0 24px 60px -32px rgba(31,42,64,.28);
}
*{box-sizing:border-box;}
/* Reserva siempre el hueco de la barra de scroll, aunque no haga falta en ese momento: sin esto,
   pequeños cambios de altura (como el aviso de "Llamada" en el formulario) podían hacer aparecer/
   desaparecer la scrollbar y desplazar todo el contenido un instante hacia un lado. */
html{scroll-behavior:smooth;scrollbar-gutter:stable;}
/* Letra de género alternante: las dos letras se superponen en la misma celda de grid (misma línea base
   que el texto real) y se cruzan en opacidad, así nunca hay hueco en blanco entre una y otra. */
.gswap{position:relative;display:inline-grid;vertical-align:baseline;}
.gswap span{grid-row:1;grid-column:1;}
.gswap .a{animation:gswapA 6s ease-in-out infinite;}
.gswap .o{animation:gswapO 6s ease-in-out infinite;}
@keyframes gswapA{0%,25%{opacity:1;}50%,75%{opacity:.2;}100%{opacity:1;}}
@keyframes gswapO{0%,25%{opacity:.2;}50%,75%{opacity:1;}100%{opacity:.2;}}
.gswap-rose span{color:var(--rose-deep);}
.gswap-grey span{color:var(--ink-grey);}
.gswap-navy span{color:var(--navy);}
.gswap-ivory span{color:var(--ivory);}
/* Envuelve la palabra que termina en .gswap (p.ej. "escuchad" + a/o) para que el
   navegador nunca la parta justo antes del swap: sin esto, en líneas justas la
   palabra se corta y la a/o queda huérfana sola en la línea siguiente. */
.keep-word{white-space:nowrap;}
body{margin:0;font-family:'Work Sans',sans-serif;color:var(--ink);background:var(--ivory);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:'Fraunces',serif;color:var(--navy);margin:0;letter-spacing:-0.01em;font-weight:500;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
::selection{background:var(--rose-light);color:var(--navy);}
:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px;}

/* ---- siglas de modelos terapéuticos (TCC, ACT...): subrayado punteado sutil +
   tooltip con el nombre completo al hover/foco ---- */
.gloss{position:relative;border-bottom:1px dotted var(--rose-deep);cursor:help;}
.gloss .gloss-tip{position:absolute;left:50%;bottom:100%;transform:translateX(-50%) translateY(-4px);width:max-content;max-width:200px;white-space:normal;text-align:center;font-size:11px;font-weight:500;line-height:1.35;color:var(--navy);background:var(--ivory);padding:6px 10px;border-radius:8px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:5;}
.gloss:hover .gloss-tip,.gloss:focus .gloss-tip{opacity:1;transform:translateX(-50%) translateY(-8px);}

/* ---- eyebrow / structure devices ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Work Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:18px;line-height:normal;}
/* especificidad extra necesaria: .section-head h2 (clase+tipo) le gana a .eyebrow (solo clase)
   cuando el eyebrow es un h2 real (para SEO) — sin esto, hereda el tamaño de titular grande. */
.section-head h2.eyebrow{font-size:12px;font-family:'Work Sans',sans-serif;font-weight:600;line-height:normal;}
/* Guión unificado: se dibuja siempre a 2px y se reduce al 50% vía transform (en vez de depender
   de un height:1px en flujo) para que el navegador lo componga como una línea nítida constante,
   sin que el antialiasing varíe según la posición/ancho de cada eyebrow. flex:0 0 22px evita
   además que se comprima en ningún contexto. Un único valor para todos los guiones de la web. */
.eyebrow::before{content:"";flex:0 0 22px;width:22px;height:2px;background:var(--rose-deep);transform:scaleY(.5);transform-origin:center;}
.eyebrow-c{justify-content:center;}
.eyebrow.on-dark{color:#DCB9BF;}
.eyebrow.on-dark::before{background:#DCB9BF;}

.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:500;line-height:1.2;}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:16.5px;}
.section-head.left{margin:0 0 48px;text-align:left;}
.relaciones .section-head p{margin-top:32px;}

section{padding:112px 0;position:relative;}
.seam{position:relative;}
.seam::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(760px,70%);height:1px;background:linear-gradient(to right,transparent,var(--line) 30%,var(--line) 70%,transparent);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 30px;border-radius:999px;font-weight:600;font-size:14.5px;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;white-space:nowrap;font-family:'Work Sans',sans-serif;}
.btn svg{width:14px;height:14px;flex-shrink:0;transition:transform .25s ease;}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--navy);color:var(--ivory);box-shadow:0 16px 30px -16px rgba(31,42,64,.5);}
.btn-primary:hover{background:var(--navy-soft);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--navy);border-color:rgba(31,42,64,.28);}
.btn-ghost svg{width:0;opacity:0;margin-left:-9px;transition:width .25s ease,opacity .2s ease,margin-left .25s ease,transform .25s ease;}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy);color:var(--ivory);}
.btn-ghost:hover svg{width:14px;opacity:1;margin-left:0;}
.btn-ghost-rose{color:var(--rose-deep);border-color:rgba(140,88,99,.32);}
.btn-ghost-rose:hover{border-color:var(--rose-deep);background:var(--rose-deep);color:var(--ivory);}
.nav-cta .btn-primary:hover svg.btn-icon-arrow{transform:translateY(3px);}
.btn-rose{background:var(--rose-deep);color:var(--ivory);box-shadow:0 16px 30px -16px rgba(140,88,99,.45);}
.btn-rose:hover{background:#7a4b55;transform:translateY(-1px);}
.btn-line-light{background:transparent;color:#F1EAE2;border-color:rgba(241,234,226,.32);}
.btn-line-light:hover{border-color:#F1EAE2;background:rgba(255,255,255,.06);}

/* =========================================================
   NAV
   ========================================================= */
html{scroll-padding-top:92px;}
header{position:fixed;top:0;left:0;right:0;z-index:90;background:rgba(251,246,240,.4);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;}
/* Arriba, sobre la foto, casi transparente; al hacer scroll pasa a un beige translúcido para
   destacar sobre las secciones de contenido, sin llegar a ser una barra sólida. */
header.scrolled{background:rgba(240,228,214,.82);border-bottom-color:rgba(226,213,194,.55);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter);}
.brand{display:flex;align-items:center;gap:14px;}
.brand-logo-wrap{position:relative;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .4s ease;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(240,228,214,0) 70%);}
.brand-logo-wrap::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 2px 10px -4px rgba(31,42,64,.18),inset 0 0 0 1px rgba(31,42,64,.08);opacity:0;transition:opacity .4s ease,box-shadow .4s ease;}
.brand:hover .brand-logo-wrap{transform:scale(1.06);}
.brand:hover .brand-logo-wrap::before{opacity:1;box-shadow:0 8px 20px -8px rgba(140,88,99,.35),inset 0 0 0 1px rgba(140,88,99,.18);}
.brand-logo{width:44px;height:44px;object-fit:contain;flex-shrink:0;position:relative;transition:transform .4s ease;}
.brand:hover .brand-logo{transform:scale(1.04);}
/* Fraunces con el eje SOFT al máximo imita los remates redondeados de una serif "de lujo" tipo Canela */
.brand-name{font-family:'Playfair Display',serif;font-size:16.5px;color:var(--navy);font-weight:600;letter-spacing:.015em;}

nav.links{display:flex;align-items:center;gap:2px;}
.nav-item{position:relative;}
.nav-link{display:flex;align-items:center;gap:7px;background:none;border:none;color:var(--navy-soft);font-size:14px;font-weight:500;padding:12px 14px;cursor:pointer;border-radius:999px;transition:color .2s ease,background .2s ease;}
.nav-item > a.nav-link{display:inline-flex;}
.nav-link:hover{color:var(--rose-deep);background:rgba(169,113,123,.08);}
.nav-icowrap{position:relative;width:10px;height:10px;flex-shrink:0;}
.nav-ico{position:absolute;inset:0;transition:opacity .25s ease,transform .25s ease;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;}
.nav-ico.i-plus{opacity:1;transform:rotate(0deg);}
.nav-ico.i-chev{opacity:0;transform:rotate(-90deg);}
.nav-item:hover .i-plus,.nav-item:focus-within .i-plus{opacity:0;transform:rotate(90deg);}
.nav-item:hover .i-chev,.nav-item:focus-within .i-chev{opacity:1;transform:rotate(0deg);}

/* El .nav-drop empieza justo en top:100% (sin hueco) y es él mismo quien lleva el padding-top
   de separación visual, para que el área "hoverable" sea continua desde el link hasta el panel.
   Antes había una zona muerta de 10px entre el link y el panel donde no había ningún elemento,
   así que al cruzarla con el ratón se perdía el :hover y el menú se cerraba antes de llegar. */
.nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease;}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;pointer-events:auto;}
.nav-drop-panel{min-width:230px;background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow);transform:translateY(6px);transition:transform .18s ease;}
.nav-item:hover .nav-drop-panel,.nav-item:focus-within .nav-drop-panel{transform:translateY(0);}
.nav-drop a{display:block;padding:10px 14px;border-radius:8px;font-size:13.5px;color:var(--ink);transition:background .18s ease,color .18s ease;}
.nav-drop a:hover{background:var(--cream);color:var(--rose-deep);}

.nav-cta{display:flex;align-items:center;gap:18px;}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.burger span{width:22px;height:1.6px;background:var(--navy);border-radius:2px;}

/* ---- chip de usuario del club: sustituye "Cuéntame" en el menú cuando hay sesión activa
   (mismo componente fuera del club, con sesión, y dentro del espacio privado). Mismo tamaño
   que ocupaba el botón "Cuéntame" (clases .btn.btn-primary reales), con el avatar y el nombre
   completo dentro en vez del texto "Cuéntame" ---- */
.nav-user{position:relative;display:inline-flex;align-items:center;}
.nav-user-pill{padding:7px 22px 7px 7px;}
.nav-user-pill .g-avatar{width:28px;height:28px;font-size:12px;}
.nav-user-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-user-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:170px;z-index:60;}
.nav-user-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.nav-user-menu a:hover{background:var(--cream);color:var(--navy);}
.nav-user-menu a.nav-user-contact{color:var(--rose-deep);border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px;padding-bottom:12px;}

/* =========================================================
   MOBILE MENU
   ========================================================= */
#mobileMenu{position:fixed;inset:0;background:var(--ivory);z-index:100;display:none;flex-direction:column;padding:22px var(--gutter);overflow-y:auto;}
#mobileMenu.open{display:flex;}
#mobileMenu .mtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;}
#mobileMenu .mbrand{font-family:'Fraunces',serif;font-size:17px;color:var(--navy);}
.close-btn{background:none;border:none;font-size:24px;color:var(--navy);cursor:pointer;line-height:1;}
#mobileMenu > a{font-size:18px;font-family:'Fraunces',serif;color:var(--navy);padding:15px 0;border-bottom:1px solid var(--line);}
#mobileMenu details{border-bottom:1px solid var(--line);padding:6px 0;}
#mobileMenu summary{list-style:none;font-family:'Fraunces',serif;font-size:18px;color:var(--navy);padding:9px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
#mobileMenu summary::-webkit-details-marker{display:none;}
#mobileMenu details a{display:block;padding:9px 0 9px 14px;font-family:'Work Sans',sans-serif;font-size:15px;color:var(--ink-soft);}
#mobileMenu .btn{margin-top:20px;}
#mobileMenu a.cuentame-mobile{border-bottom:none;font-weight:400;color:var(--ivory);padding:16px 20px;}
.nav-user-mobile-row{display:flex;align-items:center;justify-content:center;margin-top:20px;padding:14px 20px;border-radius:999px;background:var(--navy);}
a.nav-user-mobile-row{cursor:pointer;}
.nav-user-mobile-row span{font-family:'Work Sans',sans-serif;font-size:15px;font-weight:600;color:var(--ivory);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-user-mobile-menu{display:flex;flex-direction:column;margin-top:4px;}
.nav-user-mobile-menu a{padding:10px 20px 10px 24px;font-family:'Work Sans',sans-serif;font-size:14px;color:var(--ink-soft);}
.nav-user-mobile-menu a.nav-user-contact{color:var(--rose-deep);font-weight:600;}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:0;overflow:visible;background:var(--photo-tint);}
.hero-grid{display:grid;grid-template-columns:70% 30%;align-items:stretch;min-height:700px;}
.hero-text{padding:156px var(--gutter) 0 0;padding-left:var(--gutter);display:flex;flex-direction:column;justify-content:flex-end;max-width:840px;}
/* El H1 se indenta para arrancar justo donde arranca el TEXTO del eyebrow (tras su rayita de 22px
   + 10px de gap), y el párrafo principal recibe una línea vertical a la izquierda a esa misma
   coordenada X que la rayita del eyebrow: no se dibuja una línea continua que las una, pero ambas
   comparten el mismo eje, así que se leen como relacionadas. */
.hero-text h1{margin-left:32px;font-size:clamp(28px,3.9vw,46px);line-height:1.15;font-weight:500;color:var(--navy);}
.hero-text h1 .hl{color:var(--navy);font-style:normal;}
/* H2 estático + palabra rotativa: "La relación con {contigo / tu cuerpo / la comida / tus emociones / los que te rodean}".
   El "con" fijo NUNCA se mueve ni se oculta: cuando la palabra rotativa es "contigo", en realidad solo escribe
   "tigo" pegado (sin espacio) al "con" fijo, para que se lean como una sola palabra sin costuras ni saltos.
   Para el resto de palabras, la rotativa se escribe con un espacio delante (" tu cuerpo", etc.).
   Mientras dura "contigo", el "con" fijo adopta el mismo color rosa que la palabra rotativa, y vuelve
   suavemente al azul cuando aparece cualquier otra palabra. */
.hero-h2{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(25px,3.1vw,34px);color:var(--navy-soft);margin:34px 0 0 8%;text-align:left;}
.con-word{color:var(--navy-soft);transition:color .7s ease;}
.con-word.is-contigo{color:var(--rose-deep);}
.cycle-word{color:var(--rose-deep);font-style:italic;display:inline-block;text-align:left;white-space:pre;transition:opacity .7s ease,transform .7s ease;}
.cycle-word.is-out{opacity:0;transform:translateY(-10px);}
.cycle-word.is-in{opacity:0;transform:translateY(10px);}
@media(prefers-reduced-motion:reduce){.cycle-word,.con-word{transition:none;}}
/* Todo el bloque de texto del hero (eyebrow, H1, H2, párrafos) queda alineado a la izquierda en un
   mismo eje vertical — antes el H2 y los párrafos se centraban mientras el H1 quedaba a la izquierda,
   lo que descompensaba visualmente el conjunto. */
/* Misma técnica de línea nítida que el guión de los eyebrows: un border-left de 1px se puede
   antialiasear con un tono/sombra distinto según en qué píxel exacto caiga; con un ::before de
   2px reducido al 50% por transform, el navegador la compone siempre igual de sólida y del
   mismo tono var(--rose-deep), sin variaciones. */
.hero-text p.lead:not(.lead-test){position:relative;margin:34px 0 0;padding-left:30px;font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:460px;text-align:left;}
.hero-text p.lead:not(.lead-test)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rose-deep);transform:scaleX(.5);transform-origin:left;}
/* La línea del test se separa claramente del párrafo principal (son dos ideas distintas) y se
   acerca al botón "Hacer el test", como microcopy de apoyo justo antes de la llamada a la acción. */
.hero-text p.lead-test{margin:56px 0 18px;text-align:left;font-size:14.5px;font-style:italic;font-weight:500;color:var(--ink);max-width:420px;}
.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.hero-microcopy{margin-top:10px;font-size:12.5px;color:var(--ink-soft);}

.hero-visual{position:relative;display:flex;flex-direction:column;}
.hero-photo-frame{position:relative;overflow:hidden;flex:1;}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:16% 10%;display:block;}
.plaque{position:relative;z-index:2;background:var(--navy);color:#F1EAE2;padding:16px 22px;border-top:2px solid var(--rose);display:flex;align-items:center;justify-content:space-between;gap:14px;text-decoration:none;transition:background .25s ease;}
.plaque:hover{background:var(--navy-soft);}
.plaque .p1{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.plaque .p2{font-size:11.5px;color:#C9C0B8;margin-top:6px;letter-spacing:.03em;}
.plaque-cta{font-size:12px;font-weight:600;color:var(--rose-light);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease;}
.plaque-cta svg{width:12px;height:12px;stroke:var(--rose-light);}
.plaque:hover .plaque-cta{opacity:1;transform:translateX(0);}
.hv-tint{position:absolute;inset:0;background:var(--photo-tint);mix-blend-mode:soft-light;opacity:.22;pointer-events:none;}
.hv-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,27,41,.08),transparent 20%);pointer-events:none;}
/* Viñeta sutil en todo el contorno. */
.hv-fade{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 40px 6px var(--photo-tint);opacity:.5;}
/* Fundido fuerte y controlado SOLO en el borde izquierdo (la costura con el fondo beige del texto):
   en el propio borde el color es idéntico al fondo (sin diferencia), y se disuelve a transparente
   antes de llegar a la cara, para que no la toque. Solo en escritorio: en móvil la foto va arriba
   a todo el ancho y ese borde ya no existe como costura visual. */
.hv-edge{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,var(--photo-tint) 0%,var(--photo-tint) 8%,transparent 34%);}
@media(max-width:980px){.hv-edge{display:none;}}

/* =========================================================
   DIVISOR VISUAL ENTRE SECCIONES ("pausa")
   Círculo que respira (SVG/CSS puro, sin fotos de stock) + frase corta.
   Reutiliza el mismo lenguaje de movimiento lento y sutil en toda la web.
   ========================================================= */
.pausa{background:var(--navy);padding:clamp(38px,5vw,56px) 0;text-align:center;overflow:hidden;}
.pausa-breath{width:78px;height:78px;margin:0 auto 18px;display:block;}
.pausa-breath circle{fill:none;stroke-width:1.3;transform-origin:52px 52px;animation:breathe 5.5s ease-in-out infinite;}
.pausa-breath circle.c1{stroke:var(--rose);opacity:.7;}
.pausa-breath circle.c2{stroke:#F2DEE2;opacity:.28;animation-delay:.7s;}
@keyframes breathe{0%,100%{transform:scale(.78);opacity:.2;}50%{transform:scale(1);opacity:.6;}}
.pausa-quote{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(17px,2vw,21px);color:#F1EAE2;font-weight:500;max-width:560px;margin:0 auto;line-height:1.5;}
.pausa-author{display:block;margin-top:10px;font-family:'Work Sans',sans-serif;font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-light);}
@media(prefers-reduced-motion:reduce){.pausa-breath circle{animation:none;opacity:.4;}}

/* ---- pausa-buda: franja corta, igual que la pausa de Frankl (misma .pausa-quote/.pausa-author,
   sin guión, comillas curvas), pero con un vídeo ambiental muy translúcido detrás y, abajo a la
   izquierda, botones + nota que aparecen con revelado escalonado (vídeo solo → cita → botones →
   nota) para que el usuario procese la cita antes de ver la invitación a actuar. El vídeo se
   carga y reproduce solo al entrar en pantalla (lazy), para no penalizar la carga inicial con
   un archivo de varios MB, y tanto su aparición como el punto de bucle se difuminan en vez de
   cortar en seco. ---- */
.pausa-buda{position:relative;overflow:hidden;padding:0;min-height:clamp(240px,30vw,320px);display:flex;transform:translateZ(0);}
/* mismo margen de seguridad que .paseo-video (ver comentario allí) contra la franja de
   redondeo del compositor de vídeo al reproducirse. */
.buda-video{position:absolute;inset:-1%;width:102%;height:102%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;}
.pausa-buda.is-visible .buda-video{opacity:.2;}
.buda-overlay{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.buda-quote{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,84%);text-align:center;opacity:0;transition:opacity 1.1s ease,transform 1.1s ease;transition-delay:.9s;}
.pausa-buda.is-visible .buda-quote{opacity:1;transform:translate(-50%,-58%);}
.buda-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(6px,1.2vw,12px);max-width:400px;text-align:left;}
.buda-actions{display:flex;gap:8px;flex-wrap:wrap;opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease;transition-delay:2.4s;}
.pausa-buda.is-visible .buda-actions{opacity:1;transform:translateY(0);}
.buda-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:rgba(241,234,226,.72);opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease;transition-delay:3.2s;}
.pausa-buda.is-visible .buda-note{opacity:1;transform:translateY(0);}
.buda-btn{padding:7px 13px;font-size:11.5px;gap:6px;}
.buda-btn svg:not(.sound-ico){width:11px;height:11px;}
.sound-icowrap{position:relative;width:12px;height:12px;flex-shrink:0;}
.sound-ico{position:absolute;inset:0;stroke:currentColor;fill:none;transition:opacity .2s ease;}
.sound-ico.i-mute{opacity:1;}
.sound-ico.i-wave{opacity:0;}
#budaSoundBtn.is-on .sound-ico.i-mute{opacity:0;}
#budaSoundBtn.is-on .sound-ico.i-wave{opacity:1;}
@media(max-width:760px){
  .buda-quote{width:88%;}
}
@media(prefers-reduced-motion:reduce){
  .buda-video,.buda-quote,.buda-note,.buda-actions{transition:none;}
  .pausa-buda.is-visible .buda-quote{transform:translate(-50%,-50%);}
}

/* ---- pausa-paseo: misma estructura que .pausa-buda (vídeo ambiental + cita + botones con
   revelado escalonado), aplicada en paseoterapia.html con el vídeo del bosque y el sonido de
   pasos+pájaros en vez del agua. ---- */
.pausa-paseo{position:relative;overflow:hidden;padding:0;min-height:clamp(240px,30vw,320px);display:flex;transform:translateZ(0);}
/* inset/width/height ligeramente por encima del 100% (en vez de encajar exacto): al reproducirse,
   el redondeo de subpíxel del compositor de vídeo escalado puede dejar una franja fina del fondo
   navy visible en un borde; con .paseo-video "sobrando" un poco y .pausa-paseo con overflow:hidden,
   ese margen queda siempre recortado y la franja no puede aparecer.
   El transform:translateZ(0) en .pausa-paseo/.pausa-buda fuerza a que la sección forme su propia
   capa de composición estable: sin él, en algunos móviles el vídeo absolutamente posicionado deja
   una franja "residual" (una imagen fantasma pegada en su posición antigua) al hacer scroll,
   porque el navegador no siempre repinta esa capa a tiempo mientras se desplaza. */
.paseo-video{position:absolute;inset:-1%;width:102%;height:102%;object-fit:cover;object-position:10% center;opacity:0;transition:opacity 1.4s ease;}
.pausa-paseo.is-visible .paseo-video{opacity:.2;}
.paseo-overlay{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.paseo-quote{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,84%);text-align:center;opacity:0;transition:opacity 1.1s ease,transform 1.1s ease;transition-delay:.9s;}
.pausa-paseo.is-visible .paseo-quote{opacity:1;transform:translate(-50%,-58%);}
.paseo-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(6px,1.2vw,12px);max-width:400px;text-align:left;}
.paseo-actions{display:flex;gap:8px;flex-wrap:wrap;opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease;transition-delay:2.4s;}
.pausa-paseo.is-visible .paseo-actions{opacity:1;transform:translateY(0);}
.paseo-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:rgba(241,234,226,.72);opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease;transition-delay:3.2s;}
.pausa-paseo.is-visible .paseo-note{opacity:1;transform:translateY(0);}
.paseo-btn{padding:7px 13px;font-size:11.5px;gap:6px;}
.paseo-btn svg:not(.sound-ico){width:11px;height:11px;}
#pasosSoundBtn.is-on .sound-ico.i-mute{opacity:0;}
#pasosSoundBtn.is-on .sound-ico.i-wave{opacity:1;}
@media(max-width:760px){
  .paseo-quote{width:88%;}
}
@media(prefers-reduced-motion:reduce){
  .paseo-video,.paseo-quote,.paseo-note,.paseo-actions{transition:none;}
  .pausa-paseo.is-visible .paseo-quote{transform:translate(-50%,-50%);}
}

/* =========================================================
   TEST TEASER
   ========================================================= */
.descubre{background:var(--ivory);}
.test-panel{max-width:760px;margin:0 auto;border:1px solid var(--line);border-radius:16px;background:var(--cream);padding:52px 48px;text-align:center;}
.test-panel .test-ico{width:52px;height:52px;border-radius:50%;border:1px solid rgba(31,42,64,.18);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
.test-panel .test-ico svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.5;}
.test-panel h3{font-size:23px;margin-bottom:12px;font-weight:500;}
.test-panel p{font-size:15px;color:var(--ink-soft);max-width:440px;margin:0 auto 28px;}
.test-panel small{display:block;margin-top:16px;font-size:12px;color:var(--ink-soft);letter-spacing:.03em;}
.rel-note{text-align:center;max-width:520px;margin:44px auto 0;font-size:15.5px;color:var(--navy-soft);}
.rel-note strong{color:var(--rose-deep);font-weight:600;}

/* =========================================================
   RELACIONES (tabs)
   ========================================================= */
.relaciones{background:#FFFFFF;}
.rel-interactive{max-width:none;margin:0 auto;}
.rel-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:32px;flex-wrap:wrap;}
.rel-tab{display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:16px 10px;cursor:pointer;width:108px;transition:all .28s ease;font-family:'Work Sans',sans-serif;box-shadow:0 6px 16px -12px rgba(31,42,64,.18);}
.rel-tab .ic{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--rose-light) 0%,#fff 100%);box-shadow:0 4px 10px -4px rgba(140,88,99,.35),inset 0 0 0 1px rgba(140,88,99,.12);display:flex;align-items:center;justify-content:center;transition:all .28s ease;}
.rel-tab .ic svg{width:18px;height:18px;stroke:var(--rose-deep);fill:none;stroke-width:1.6;}
.rel-tab .ic img{width:auto;height:auto;max-width:31px;max-height:31px;}
.rel-tab .ic svg.conmigo-ic{width:26px;height:26px;stroke-width:.55;}
.rel-tab .ic svg.rel-ic{width:30px;height:30px;}
.rel-tab span{font-size:12px;font-weight:600;color:var(--navy-soft);}
.rel-tab:hover{border-color:var(--rose);transform:translateY(-4px);box-shadow:0 12px 22px -12px rgba(140,88,99,.3);}
.rel-tab.active{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-soft) 100%);border-color:var(--navy);box-shadow:0 14px 28px -14px rgba(31,42,64,.5);}
.rel-tab.active .ic{background:linear-gradient(150deg,rgba(255,255,255,.3),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.rel-tab.active .ic svg{stroke:#F2DEE2;}
.rel-tab.active .ic img{filter:brightness(0) invert(1);opacity:.92;}
.rel-tab.active span{color:#fff;}
.rel-panel{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,var(--ivory) 65%,var(--rose-light) 220%);border:1px solid var(--line);border-radius:18px;padding:40px 44px;display:flex;gap:26px;align-items:stretch;min-height:170px;box-shadow:var(--shadow);transition:opacity .32s ease,transform .32s ease;}
.rel-panel::before{content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(169,113,123,.14) 0%,transparent 70%);pointer-events:none;}
.rel-panel.fade{opacity:0;transform:translateY(6px);}
.rel-panel>div:not(.ic-big){display:flex;flex-direction:column;flex:1 1 auto;min-width:0;}
.ic-big{position:relative;width:56px;height:56px;border-radius:50%;background:linear-gradient(150deg,var(--rose-light) 0%,#fff 100%);box-shadow:0 8px 18px -8px rgba(140,88,99,.35),inset 0 0 0 1px rgba(140,88,99,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ic-big svg{width:24px;height:24px;stroke:var(--rose-deep);fill:none;stroke-width:1.6;}
.ic-big img{width:auto;height:auto;max-width:42px;max-height:42px;}
.ic-big svg.conmigo-ic{width:36px;height:36px;stroke-width:.55;}
.ic-big svg.rel-ic{width:42px;height:42px;}
.rel-panel h3{font-size:21px;margin-bottom:10px;font-weight:500;}
.rel-panel p{font-size:15px;color:var(--ink-soft);margin:0 0 14px;}
.rel-panel .rel-info{font-style:italic;}
.rel-panel .rel-info .rel-diff{font-style:italic;font-weight:400;color:var(--navy);}
@media(min-width:761px){.rel-panel .rel-info .rel-diff{display:block;margin-top:6px;}}
.rel-panel .rel-quote{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--ink-soft);margin:22px 0 20px;}
.rel-panel .rel-explore{display:inline-flex;align-items:center;gap:8px;font-family:'Corinthia',cursive;font-weight:700;font-size:26px;line-height:1;color:var(--rose-deep);text-decoration:none;white-space:nowrap;cursor:pointer;margin-top:auto;padding-top:28px;}
.rel-panel .rel-explore svg{width:14px;height:14px;stroke:var(--rose-deep);fill:none;stroke-width:2;flex-shrink:0;position:relative;top:2px;}
.rel-link{font-size:13px;font-weight:600;color:var(--rose-deep);display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.rel-link svg{width:13px;height:13px;stroke:var(--rose-deep);fill:none;stroke-width:2;}

/* =========================================================
   METODO / SERVICIOS
   ========================================================= */
.metodo{background:var(--linen);}
.met-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.met-card{background:var(--cream);padding:38px 36px;transition:background .25s ease;}
.met-card:hover{background:var(--ivory);}
.met-card.open{background:var(--ivory);}
.met-card.feat{grid-column:span 2;padding:44px 40px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:flex-start;}
.met-card.strip{grid-column:1/-1;padding:22px 36px;}
.met-card.strip .met-ico{margin-bottom:12px;}
.met-hint{margin:0 0 20px;font-size:12.5px;color:var(--ink-soft);}
.met-ico{width:46px;height:46px;border-radius:50%;border:1px solid rgba(31,42,64,.2);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0;background:none;padding:0;cursor:pointer;transition:background .35s ease,border-color .35s ease,transform .18s ease;}
.met-card.feat .met-ico{margin-bottom:0;}
.met-ico svg{width:19px;height:19px;stroke:var(--navy);fill:none;stroke-width:1.6;transition:stroke .35s ease;}
.met-ico:hover,.met-ico:focus-visible{transform:translateY(-1px);border-color:var(--rose);}
/* Estado "demo" (aviso automático antes de cualquier interacción): tono rosa suave + un pequeño
   pulso de escala para que se note como animación, no solo como cambio de color. */
.met-ico.demo{border-color:var(--rose);background:var(--rose-light);transition-duration:.9s;animation:metDemoPulse 1.1s ease-in-out 2;}
.met-card.feat{position:relative;}
.met-hint{position:absolute;top:44px;right:40px;font-size:10.5px;font-style:italic;color:var(--ink-grey);pointer-events:none;}
.met-ico.demo svg{stroke:var(--rose-deep);}
@keyframes metDemoPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.09);}}
@media(prefers-reduced-motion:reduce){.met-ico.demo{animation:none;}}
/* Estado "done" (tras un clic real): rosa, algo más marcado que el demo pero sin llegar al tono
   saturado de --rose-deep — y nunca blanco. */
.met-ico.done{border-color:var(--rose);background:var(--rose);}
.met-ico.done svg{stroke:#fff;}
.met-example{margin:10px 0 0;font-size:13px;font-style:italic;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease;}
.met-card p.met-example{color:var(--rose-deep);}
.met-example.show{opacity:1;max-height:240px;}
.met-author{display:block;margin-top:6px;font-style:normal;font-size:11.5px;color:var(--ink-soft);}
.met-card h3{font-size:16.5px;font-weight:600;margin-bottom:9px;color:var(--navy);font-family:'Work Sans',sans-serif;}
.met-card.feat h3{font-size:19px;}
.met-card p{font-size:14px;color:var(--ink-soft);margin:0;}
.met-card:not(.feat){display:flex;flex-direction:column;}
.met-card:not(.feat) .more-link{margin-top:auto;padding-top:16px;}
.more-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--rose-deep);}
.more-link svg{width:11px;height:11px;stroke:var(--rose-deep);fill:none;stroke-width:2.4;}
/* =========================================================
   MI ENFOQUE — sección de apertura tras el hero
   ========================================================= */
.enfoque-top{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
@media(max-width:900px){.enfoque-top{grid-template-columns:1fr;gap:44px;}}
.enfoque-text.met-card{background:none;padding:0;transition:none;}
.enfoque-text.met-card:hover,.enfoque-text.met-card.open{background:none;}
.enfoque-text h3{font-size:clamp(24px,2.6vw,30px);margin-bottom:20px;}
.enfoque-text p{font-size:16.5px;line-height:1.75;color:var(--ink-soft);max-width:480px;margin:0 0 16px;}
.enfoque-text p:first-of-type{position:relative;padding-left:20px;}
.enfoque-text p:first-of-type::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:2px;background:var(--rose-deep);opacity:.55;}
.met-ico-row{display:flex;align-items:center;gap:12px;margin-top:6px;}
.met-ico-row .met-ico{margin-bottom:0;}
.met-ico-label{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--rose-deep);}

.venn-wrap{margin-top:0;}
.venn-caption{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:15px;color:var(--ink-soft);text-align:center;margin:0 0 12px;}
.venn-hint{font-size:12.5px;color:var(--ink-soft);opacity:.75;text-align:center;margin:2px 0 0;}
.venn-svg{display:block;width:100%;max-width:360px;height:auto;margin:0 auto;overflow:visible;}
.venn-circle{transform-box:fill-box;transform-origin:center;opacity:0;transition:opacity .35s ease;}
.venn-glow-c{stroke:none;}
.venn-outline-c{fill:none;stroke-width:1.1;}
.venn-outline-c.venn-c1{stroke:rgba(31,42,64,.5);}
.venn-outline-c.venn-c2{stroke:rgba(140,88,99,.55);}
.venn-outline-c.venn-c3{stroke:rgba(169,138,63,.6);}
.venn-glow{mix-blend-mode:multiply;}
/* entrada escalonada al hacer scroll (misma familia que [data-reveal]) + respiración
   continua después, igual de sutil que .pausa-breath, para que el diagrama no quede plano */
.venn-wrap.is-visible .venn-c1{animation:vennGrow 1.1s cubic-bezier(.22,1,.36,1) .05s forwards,vennBreathe 7s ease-in-out 1.2s infinite;}
.venn-wrap.is-visible .venn-c2{animation:vennGrow 1.1s cubic-bezier(.22,1,.36,1) .22s forwards,vennBreathe 7s ease-in-out 1.4s infinite;}
.venn-wrap.is-visible .venn-c3{animation:vennGrow 1.1s cubic-bezier(.22,1,.36,1) .39s forwards,vennBreathe 7s ease-in-out 1.6s infinite;}
@keyframes vennGrow{0%{opacity:0;transform:scale(.6);}100%{opacity:1;transform:scale(1);}}
@keyframes vennBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.02);}}
@media(prefers-reduced-motion:reduce){.venn-circle{animation:none !important;opacity:1;transform:none;}}
/* punto de convergencia: el mismo lenguaje de respiración que ya usan las pausas
   Frankl/Buda y los separadores sep-icon, en el centro exacto donde se solapan los tres */
.venn-core-outer{fill:none;stroke:var(--rose);stroke-width:1.1;opacity:0;transform-box:fill-box;transform-origin:center;}
.venn-core-inner{fill:var(--rose-deep);opacity:0;transform-box:fill-box;transform-origin:center;}
.venn-wrap.is-visible .venn-core-outer{opacity:.7;animation:sepBreatheOuter 5.5s ease-in-out 1.8s infinite;}
.venn-wrap.is-visible .venn-core-inner{opacity:1;animation:sepBreatheInner 5.5s ease-in-out 1.8s infinite;}
@media(prefers-reduced-motion:reduce){.venn-core-outer,.venn-core-inner{animation:none !important;opacity:.85;}}
.venn-leader{stroke:var(--line);stroke-width:1;opacity:0;transition:opacity .5s ease .55s;}
.venn-label{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:16px;letter-spacing:.005em;opacity:0;transition:opacity .5s ease .6s;}
.venn-wrap.is-visible .venn-leader,.venn-wrap.is-visible .venn-label{opacity:1;}
@media(prefers-reduced-motion:reduce){.venn-leader,.venn-label{opacity:1;transition:none;}}
.venn-label.l1{fill:var(--navy);}
.venn-label.l2{fill:var(--rose-deep);}
.venn-label.l3{fill:#8A6E2F;}

/* explicación de las tres piezas del enfoque: tarjetas reales, no una leyenda diminuta.
   Pasar el ratón, el teclado o el dedo por una resalta su círculo en el diagrama. */
.venn-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;padding-top:36px;border-top:1px solid var(--line);}
@media(max-width:760px){.venn-legend{grid-template-columns:1fr;gap:18px;}}
.venn-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 22px 22px;border-radius:14px;cursor:pointer;transition:background .25s ease,transform .2s ease,box-shadow .25s ease;}
.venn-item:hover,.venn-item:focus-visible{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow);}
.venn-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;transition:transform .25s ease;}
.venn-dot.c1{background:var(--navy);}
.venn-dot.c2{background:var(--rose);}
.venn-dot.c3{background:#A98A3F;}
.venn-item b{display:block;font-size:16px;font-weight:600;color:var(--navy);font-family:'Fraunces',serif;font-style:italic;}
.venn-item span{font-size:14px;line-height:1.6;color:var(--ink-soft);}
.venn-wrap[data-active] .venn-circle{opacity:.28;}
.venn-wrap[data-active] .venn-label{opacity:.4;}
.venn-wrap[data-active="c1"] .venn-c1,.venn-wrap[data-active="c1"] .venn-label.l1{opacity:1;}
.venn-wrap[data-active="c2"] .venn-c2,.venn-wrap[data-active="c2"] .venn-label.l2{opacity:1;}
.venn-wrap[data-active="c3"] .venn-c3,.venn-wrap[data-active="c3"] .venn-label.l3{opacity:1;}
.venn-item:hover .venn-dot,.venn-item:focus-visible .venn-dot{transform:scale(1.35);}

/* ejemplo del análisis funcional repartido en las tres cajas ABC, en rosa, en vez de
   un párrafo aparte que repite lo que el propio diagrama ya explica */
.abc-step span.abc-example{display:block;margin-top:8px;font-size:12.5px;font-style:italic;color:var(--rose-deep);opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease;}
.abc-step span.abc-example.show{opacity:1;max-height:60px;}

@media(max-width:760px){.met-grid{grid-template-columns:1fr;}.met-card.feat{grid-template-columns:1fr;grid-column:span 1;}}

/* tarjetas de modelos terapéuticos como desplegables: mismo <details>/<summary>
   ya usado en .faq-item, para bajar la densidad visual sin quitar contenido */
/* colapsadas, las 9 tarjetas de modelos quedaban como una cuadrícula de casillas
   idénticas (el mismo aspecto "plano" que ya corregimos en el Venn). Aquí el hover
   da profundidad real -sombra, tinte rosa- en vez de depender solo del color de fondo. */
.met-card-toggle{cursor:default;background:var(--cream);transition:background .3s ease,box-shadow .3s ease;}
.met-card-toggle:hover{background:#fff;}
.met-card-toggle[open]{background:#fff;box-shadow:inset 0 0 0 1px rgba(140,88,99,.14);}
.met-card-toggle summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;}
.met-card-toggle summary::-webkit-details-marker{display:none;}
.met-card-toggle summary h3{margin:0;flex:1;transition:color .25s ease;}
.met-card-toggle:hover summary h3{color:var(--rose-deep);}
.met-ico-deco{width:46px;height:46px;border-radius:50%;border:1px solid rgba(31,42,64,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--ivory);box-shadow:0 4px 12px -7px rgba(31,42,64,.3);transition:border-color .25s ease;}
.met-card-toggle:hover .met-ico-deco{border-color:var(--rose);}
.met-ico-deco svg{width:19px;height:19px;stroke:var(--navy);fill:none;stroke-width:1.6;}
.met-toggle{width:24px;height:24px;border-radius:50%;background:var(--rose-light);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .25s;}
.met-toggle::before,.met-toggle::after{content:"";position:absolute;background:var(--rose-deep);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%);}
.met-toggle::before{width:10px;height:2px;}
.met-toggle::after{width:2px;height:10px;transition:transform .25s;}
.met-card-toggle[open] .met-toggle::after{transform:translate(-50%,-50%) scaleY(0);}
.met-card-toggle[open]{background:var(--ivory);}
.met-card-body{margin-top:14px;}
.met-card-toggle .met-example{opacity:1;max-height:none;overflow:visible;margin:10px 0 0;}

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.testi{background:var(--cream);}
.testi-carousel{position:relative;}
/* Carrusel: misma anchura por tarjeta que antes (100%-gaps)/3 vía flex-basis calculado),
   ahora en una pista horizontal deslizable con scroll-snap en vez de una cuadrícula fija.
   Esto reduce la altura total en móvil (antes apilaba 3 tarjetas) y deja preparado el
   carrusel para cuando se añadan más testimonios reales. */
.testi-grid{display:flex;align-items:flex-start;gap:24px;overflow-x:auto;overflow-anchor:none;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
.testi-grid::-webkit-scrollbar{display:none;}
.testi-card{background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:30px 28px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;}
.testi-card:hover{transform:translateY(-4px);box-shadow:0 22px 42px -18px rgba(31,42,64,.3);}
.testi-top{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.g-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(150deg,var(--rose-light) 0%,var(--rose) 100%);color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.g-avatar.navy{background:linear-gradient(150deg,var(--navy-soft),var(--navy));}
.g-meta{flex:1;}
.g-meta b{display:block;font-size:13.5px;color:var(--navy);font-weight:600;}
.g-meta span{font-size:11.5px;color:var(--ink-soft);}
.g-logo{width:18px;height:18px;flex-shrink:0;}
.testi-card p.ttext{font-size:14.5px;color:var(--ink);margin:0;font-family:'Fraunces',serif;font-style:italic;line-height:1.55;min-height:88px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;}
.testi-card p.ttext.is-expanded{-webkit-line-clamp:unset;display:block;overflow:visible;}
.testi-more{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--rose-deep);background:none;border:none;padding:0;cursor:pointer;font-family:'Work Sans',sans-serif;}
.testi-more svg{width:10px;height:10px;stroke:var(--rose-deep);fill:none;stroke-width:2.4;transition:transform .2s ease;}
.testi-more.is-open svg{transform:rotate(180deg);}
.testi-clone{pointer-events:none;}
.stars{color:var(--rose-deep);font-size:12px;letter-spacing:2px;margin-bottom:10px;}
.testi-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px;}
.testi-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--ivory);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease;flex-shrink:0;padding:0;}
.testi-arrow svg{width:15px;height:15px;stroke:var(--navy-soft);}
.testi-arrow:hover{border-color:var(--rose);background:var(--rose-light);transform:translateY(-1px);}
.testi-dots{display:flex;align-items:center;gap:7px;}
.testi-dots button{width:7px;height:7px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:background .2s ease,transform .2s ease;}
.testi-dots button.active{background:var(--rose-deep);transform:scale(1.35);}
@media(max-width:900px){.testi-card{flex:0 0 min(460px,84vw);scroll-snap-align:center;}}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:var(--ivory);}
.faq-list{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.faq-item{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:4px 22px;}
.faq-item summary{list-style:none;cursor:pointer;padding:19px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:'Work Sans',sans-serif;font-weight:600;font-size:16.5px;color:var(--navy);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-toggle{width:24px;height:24px;border-radius:50%;background:var(--rose-light);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .25s;}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;background:var(--rose-deep);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-toggle::before{width:10px;height:2px;}
.faq-toggle::after{width:2px;height:10px;transition:transform .25s;}
details[open] .faq-toggle::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{font-size:15.5px;color:var(--ink-soft);padding:0 0 20px;max-width:none;}
.faq-a a{color:var(--rose-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.faq-a .faq-whatsapp{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--rose-deep);text-decoration:none;}
.faq-a .faq-whatsapp svg{width:12px;height:12px;stroke:var(--rose-deep);fill:none;stroke-width:2.4;}
.faq-item-more{background:var(--rose-light);border-color:transparent;}
.faq-item-more .faq-toggle{background:var(--rose-deep);}
.faq-item-more .faq-toggle::before,.faq-item-more .faq-toggle::after{background:var(--ivory);}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{background:var(--navy);color:#EFE7DE;}
.contacto-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:start;}
.contacto h2{color:#FBF6F0;font-size:clamp(26px,3.2vw,34px);font-weight:500;}
.contacto p.lead{color:#C9C0B8;font-size:15px;margin:16px 0 30px;max-width:400px;}
.contact-item{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.contact-item .ic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-item .ic svg{width:15px;height:15px;stroke:#EFD2D8;fill:none;stroke-width:1.6;}
.contact-item .label{font-size:14px;color:#F1EAE2;}
.social-row{display:flex;gap:10px;margin-top:26px;}
.social-row a{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;}
.social-row a svg{width:14px;height:14px;stroke:#EFE7DE;fill:none;stroke-width:1.6;}
.social-row a:hover{background:rgba(255,255,255,.08);}
.social-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ivory);color:var(--navy);font-family:'Work Sans',sans-serif;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
.social-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ivory);}
.social-row a:hover .social-tip,.social-row a:focus .social-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.vmark{position:absolute;right:-10px;bottom:-40px;font-family:'Fraunces',serif;font-style:italic;font-size:280px;color:rgba(255,255,255,.035);user-select:none;pointer-events:none;line-height:1;}
.form-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:30px;}
.consent-row{display:flex;align-items:center;gap:9px;margin:8px 0 18px;cursor:pointer;}
.consent-row input{margin:0;flex-shrink:0;width:16px;height:16px;}
.consent-row span{font-size:12.5px;line-height:1.5;color:#C7CFDB;}
.consent-row a{color:var(--rose);text-decoration:underline;}
.form-hint{font-size:12px;color:#9AA1B2;line-height:1.5;margin:0 0 14px;min-height:36px;}
.form-feedback{font-size:13px;margin-top:14px;padding:11px 14px;border-radius:9px;line-height:1.5;}
.form-feedback.ok{background:rgba(120,190,140,.12);color:#B7E0C2;border:1px solid rgba(120,190,140,.28);}
.form-feedback.error{background:rgba(220,90,90,.12);color:#F2B8B8;border:1px solid rgba(220,90,90,.28);}
.btn-rose:disabled{opacity:.7;cursor:default;transform:none;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
input,textarea,select{width:100%;padding:13px 15px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#F4EFE9;font-family:'Work Sans',sans-serif;font-size:14px;}
input::placeholder,textarea::placeholder{color:#8B93A5;}
textarea{min-height:104px;resize:vertical;margin-bottom:20px;}
.form-label{display:block;font-size:12.5px;font-weight:600;color:#C7CFDB;letter-spacing:.02em;margin-bottom:7px;}
select.form-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7CFDB' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;cursor:pointer;}
select.form-select option{background:#27324A;color:#F4EFE9;}
input:focus,textarea:focus{outline:2px solid var(--rose);outline-offset:2px;}
@media(max-width:900px){.contacto-grid{grid-template-columns:1fr;}.vmark{display:none;}}

/* =========================================================
   FOOTER / COOKIES / WHATSAPP
   ========================================================= */
footer{background:#0F1521;color:#9AA1B2;padding:28px 0 22px;text-align:left;font-size:13px;}
footer strong{color:#D9CFC4;font-family:'Fraunces',serif;font-weight:500;}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.footer-grid p{margin:0;}
.footer-grid p+p{margin-top:3px;color:#7F8699;font-size:.92em;}
.footer-col-addr{display:inline-flex;flex-direction:column;justify-self:start;}
.footer-phone{text-align:center;}
.footer-col-links{text-align:center;}
footer .legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;border:0;max-width:none;}
footer .legal-links a{color:#9AA1B2;white-space:nowrap;}
footer .legal-links a:not(:first-child)::before{content:"·";margin-right:8px;color:rgba(255,255,255,.32);}
footer .legal-links a:hover{color:#D9CFC4;}
.footer-copy{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:#7F8699;font-size:.92em;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:14px;}.footer-col-addr{display:block;justify-self:auto;}.footer-phone{text-align:left;}.footer-col-links{text-align:left;}footer .legal-links{justify-content:flex-start;}.footer-copy{text-align:left;}}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--navy-deep);color:#EFE7DE;padding:18px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;box-shadow:0 -8px 24px rgba(0,0,0,.18);}
.cookie-banner p{margin:0;font-size:13.5px;max-width:560px;color:#D9CFC4;}
.cookie-banner p a{color:var(--rose);text-decoration:underline;}
.cookie-banner .cookie-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-banner button{border:none;border-radius:999px;padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Work Sans',sans-serif;}
.cookie-banner .cb-accept{background:var(--rose-deep);color:#fff;}
.cookie-banner .cb-reject{background:transparent;color:#EFE7DE;border:1px solid rgba(255,255,255,.3) !important;}

.wa-float{position:fixed;bottom:28px;right:28px;z-index:99;width:54px;height:54px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px rgba(37,211,102,.55);transition:transform .2s ease;}
.wa-float:hover{transform:translateY(-2px);}
.wa-float svg{width:24px;height:24px;fill:#fff;}
.wa-tooltip{position:absolute;right:64px;top:50%;transform:translateY(-50%);background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;}
.wa-float:hover .wa-tooltip{opacity:1;}

/* =========================================================
   SUBPÁGINAS — componentes reutilizables (Conóceme y futuras
   páginas internas migradas a este mismo sistema de estilo)
   ========================================================= */
.page-hero{padding:118px 0 96px;background:var(--photo-tint);}
.hero-editorial{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,58fr);gap:60px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);align-items:start;}

.hero-photo-wrap{position:relative;}
.hero-photo-mini{position:relative;z-index:1;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:linear-gradient(155deg,var(--blush),var(--linen) 60%,var(--rose-light) 140%);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);filter:grayscale(1);transition:filter .8s ease;}
.hero-photo-mini.is-color{filter:grayscale(0);}
.hero-photo-mini img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;display:block;}
.hero-photo-mini .ph-placeholder{font-family:'Fraunces',serif;font-style:italic;color:var(--rose-deep);font-size:13px;text-align:center;padding:0 16px;line-height:1.3;}

.page-hero h1.eyebrow{font-family:'Work Sans',sans-serif;font-size:12px;font-weight:600;color:var(--rose-deep);margin-bottom:34px;}

/* ---- bloques del hero: los dos primeros son prosa corrida sin adorno;
   el último lleva la línea horizontal + barra vertical + firma manuscrita ---- */
.hero-block{padding:20px 0;}
.hero-block:first-of-type{padding-top:0;}
.hero-block p{font-family:'Fraunces',serif;font-weight:400;color:var(--ink-soft);font-size:17px;line-height:1.75;margin:0;max-width:56ch;}

.hero-block-closing{position:relative;margin-top:6px;padding:30px 0 0 26px;border-top:1px solid var(--line);}
.hero-block-closing::before{content:"";position:absolute;left:0;top:30px;bottom:2px;width:3px;background:var(--rose-deep);}
.hero-block-closing p{font-family:'Fraunces',serif;font-weight:400;font-size:17px;line-height:1.7;color:var(--navy);margin:0 0 16px;max-width:56ch;}
.hero-signature-wrap{text-align:center;margin-top:4px;}
.hero-signature{display:inline-block;font-family:'Corinthia',cursive;font-weight:700;font-size:34px;line-height:1.3;color:var(--rose-deep);white-space:nowrap;}
.hero-signature-underline{display:block;width:200px;height:14px;margin:2px auto 0;}
.hero-signature-underline path{stroke:var(--rose-deep);}

@media(prefers-reduced-motion:reduce){.hero-photo-mini{transition:none;}}
@media(max-width:800px){.hero-editorial{grid-template-columns:minmax(0,1fr);}.hero-photo-wrap{max-width:280px;margin:0 auto;}}
/* Sin minmax(0,...) el track de grid no se encoge por debajo del contenido:
   el h1.eyebrow (frase larga en una sola línea de flex nowrap) empujaba
   la columna a ~440px y desbordaba el viewport en móvil. */
@media(max-width:600px){.hero-signature{white-space:normal;}}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.chip{background:var(--cream);color:var(--navy-soft);font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.chip:hover{transform:translateY(-3px);border-color:var(--rose);box-shadow:0 10px 20px -12px rgba(140,88,99,.35);}
.chip-ico{display:inline-flex;align-items:center;gap:8px;}
.chip-ico svg{width:14px;height:14px;stroke:var(--rose-deep);fill:none;stroke-width:2;flex-shrink:0;}

/* ---- formación: dos columnas — línea de tiempo | desplegable de investigación ---- */
.formacion-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:8px;}
.tl-stat{display:block;font-size:15.5px;color:var(--navy-soft);margin:6px 0 0;}
.tl-stat strong{color:var(--rose-deep);font-weight:700;}
@media(max-width:800px){.formacion-grid{grid-template-columns:1fr;gap:36px;}}

/* ---- línea de tiempo de formación: retoma la idea de los círculos que recorren ---- */
.timeline{position:relative;margin-top:28px;padding-left:34px;max-width:600px;}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line);}
.tl-item{position:relative;padding-bottom:26px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-34px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--ivory);border:2px solid var(--rose-deep);}
.tl-item.is-progress::before{border-style:dashed;}
.tl-item .t-name{font-family:'Fraunces',serif;font-weight:500;font-size:19px;color:var(--navy);display:block;}
.tl-item .t-inst{font-size:14.5px;color:var(--ink-soft);font-style:italic;display:block;margin-top:3px;}
.tl-item .t-year{font-size:12.5px;color:var(--rose-deep);font-weight:700;letter-spacing:.04em;display:block;margin-top:5px;}
.tl-item .t-desc{display:block;font-size:14px;color:var(--ink-soft);font-style:normal;line-height:1.55;max-width:340px;margin-top:6px;}

/* ---- cómo planteo las sesiones: etapa (evaluación/intervención) + agrupación
   de las técnicas bajo "terapia integradora", con un separador para las
   perspectivas que solo complementan (no llevan el mismo peso de evidencia) ---- */
.stage-tag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--rose-deep);background:var(--rose-light);padding:4px 10px;border-radius:999px;margin-bottom:12px;}
.met-group-label{grid-column:1/-1;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rose-deep);margin:6px 0 -6px;}
#modelos-evidencia,#fisiologia-neurociencia,#psiconutricion{scroll-margin-top:110px;}
.met-group-sep{grid-column:1/-1;margin:22px 0 -6px;padding-top:26px;border-top:1px solid var(--line);}
.met-group-sep .msg-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rose-deep);margin-bottom:8px;}
.met-group-sep p{font-size:14.5px;color:var(--ink-soft);margin:0;max-width:680px;line-height:1.6;}

/* ---- "antes de tener consulta propia": rejilla simple de tarjetas ---- */
.lugares-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;}
.lugar-card{background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:22px 20px;}
@media(max-width:980px){.lugares-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.lugares-grid{grid-template-columns:1fr;}}
.lugar-card .tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--rose-deep);background:var(--rose-light);padding:4px 10px;border-radius:999px;margin-bottom:12px;}
.lugar-card .ic{width:38px;height:38px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden;}
.lugar-card .ic svg{width:17px;height:17px;stroke:var(--rose-deep);fill:none;stroke-width:1.6;}
.lugar-card .ic img{width:100%;height:100%;object-fit:contain;}
.lugar-card h4{font-size:14.5px;font-weight:600;color:var(--navy);margin:0 0 6px;font-family:'Work Sans',sans-serif;}
.lugar-card p{font-size:13px;color:var(--ink-soft);margin:0;max-width:none;}

/* ---- bloque de contacto (mismo que el CTA final de test-relaciones.html) ---- */
.cta-block{background:var(--navy);color:var(--ivory);border-radius:20px;padding:40px 36px;max-width:560px;}
.cta-block .cta-title{font-family:'Fraunces',serif;font-style:normal;font-weight:500;font-size:clamp(22px,3.4vw,28px);line-height:1.3;color:var(--ivory);margin:0 0 14px;}
.cta-block .cta-text{font-family:'Work Sans',sans-serif;font-weight:400;font-size:16px;line-height:1.65;color:#D6DCE6;max-width:56ch;margin:0 0 26px;}
.cta-block .btn-primary{background:var(--rose-deep);display:flex;width:fit-content;margin:0 auto;}
.cta-block .btn-primary:hover{background:#7a4b55;}

/* ---- esquema real del análisis funcional: antecedente / conducta / consecuencia ---- */
.abc-steps{display:flex;align-items:stretch;gap:8px;margin-top:18px;flex-wrap:wrap;}
.abc-step{flex:1;min-width:110px;background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;}
.abc-letter{display:block;font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--rose-deep);line-height:1;}
.abc-step b{display:block;font-size:12.5px;color:var(--navy);font-weight:600;margin:6px 0 2px;}
.abc-step span{font-size:12px;color:var(--ink-soft);}
.abc-arrow{display:flex;align-items:center;color:var(--line);font-size:18px;flex:0 0 auto;}
@media(max-width:600px){.abc-steps{flex-direction:column;}.abc-arrow{transform:rotate(90deg);align-self:center;}}

/* ---- rail: índice sutil y flotante (puntos, no caja fija con etiquetas) ---- */
.camino-rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;z-index:40;}
.camino-rail::before{content:"";position:absolute;left:50%;top:-20px;bottom:-20px;width:1px;background:var(--line);transform:translateX(-50%);z-index:-1;}
.cr-dot{width:8px;height:8px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;position:relative;transition:background .25s ease,transform .25s ease;}
.cr-dot .cr-tip{position:absolute;left:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--navy);background:var(--ivory);padding:5px 12px;border-radius:20px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease;}
.cr-dot:hover .cr-tip{opacity:1;}
.cr-dot.is-active{background:var(--rose-deep);transform:scale(1.5);}
@media(max-width:1150px){.camino-rail{display:none;}}

/* ---- paradas: ya no viven en una rejilla con sidebar, son secciones normales ---- */
.parada h2{font-size:clamp(23px,2.6vw,29px);font-weight:500;margin-bottom:16px;}
.parada h3{font-size:17.5px;font-weight:600;color:var(--navy);margin:30px 0 10px;}
.parada h3:first-of-type{margin-top:24px;}
.parada p{color:var(--ink-soft);font-size:16px;max-width:640px;}
.parada p+p{margin-top:14px;}
.parada ul.plain{display:flex;flex-direction:column;gap:12px;margin-top:10px;max-width:640px;}
.parada ul.plain li{font-size:15.5px;color:var(--ink-soft);padding-left:20px;position:relative;}
.parada ul.plain li::before{content:"·";position:absolute;left:0;color:var(--rose-deep);font-size:20px;line-height:1.1;}
.parada ul.plain li strong{color:var(--navy);font-weight:600;}

.sec-enfoque{background:var(--cream);}
.sec-formacion{background:var(--ivory);}
.sec-trabajado{background:var(--cream);}
.sec-como-trabajo{background:var(--linen);}

/* ---- vídeo de presentación (bloque propio, distinto del vídeo de Buda) ---- */
.video-teaser{max-width:var(--maxw);margin:0 auto;padding:100px var(--gutter);}
.vt-card{background:var(--linen);border-radius:22px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.vt-text h2{font-size:clamp(21px,2.4vw,27px);}
.vt-text p{margin-top:14px;color:var(--ink-soft);font-size:15.5px;max-width:46ch;}
.vt-media{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;cursor:pointer;background:var(--navy);box-shadow:var(--shadow);}
.vt-media .vt-thumb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-soft) 100%);}
.vt-media .vt-play{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;transition:transform .2s ease;}
.vt-media:hover .vt-play{transform:scale(1.08);}
.vt-media .vt-play::after{content:"";border-left:16px solid var(--navy);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px;}
.vt-media .vt-cap{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);color:#fff;font-size:12.5px;font-weight:600;}
@media(max-width:760px){.vt-card{grid-template-columns:1fr;padding:28px;}}

/* ---- CTA de cierre: mismo panel del test que en el hero del index + pasos animados ---- */
.cta-final{padding:100px 0;}
.cta-final-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1.1fr 0.9fr;gap:52px;align-items:center;}
.cta-final .test-panel{margin:0;}
.cta-final-wa{margin-top:28px;font-size:14px;}
.proceso-mini{display:flex;flex-direction:column;gap:24px;}
.proceso-mini .pm-step{display:flex;gap:14px;align-items:flex-start;opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.proceso-mini.is-visible .pm-step{opacity:1;transform:translateY(0);}
.proceso-mini.is-visible .pm-step:nth-child(1){transition-delay:.1s;}
.proceso-mini.is-visible .pm-step:nth-child(2){transition-delay:.4s;}
.proceso-mini.is-visible .pm-step:nth-child(3){transition-delay:.7s;}
.proceso-mini.is-visible .pm-step:nth-child(4){transition-delay:1s;}
.proceso-mini.is-visible .pm-step:nth-child(5){transition-delay:1.3s;}
.proceso-mini.is-visible .pm-step:nth-child(6){transition-delay:1.6s;}
.pm-num{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pm-num-roselight{color:var(--rose-light);}
.pm-num-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);box-sizing:border-box;}
.pm-step b{display:block;font-size:14.5px;color:var(--navy);font-weight:600;margin-bottom:2px;}
.pm-step div span{font-size:13px;color:var(--ink-soft);}
@media(max-width:760px){.cta-final-grid{grid-template-columns:1fr;}}

/* ---- bibliografía / referencias APA ---- */
.biblio{background:var(--navy);color:#EFE7DE;padding:64px 0;}
.biblio h2{color:#FBF8F3;font-size:22px;margin-bottom:8px;}
.biblio .biblio-intro{font-size:13px;color:#9AA1B2;margin-bottom:26px;max-width:640px;}
.biblio-list{display:flex;flex-direction:column;gap:14px;}
.biblio-item{font-size:13px;color:#C9C0B8;line-height:1.65;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);}
.biblio-item:last-child{border-bottom:none;padding-bottom:0;}
.biblio-item em{color:#EFD2D8;font-style:italic;}
.biblio-extra{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .4s ease;}
.biblio-extra.show{max-height:6000px;opacity:1;}
.biblio-toggle{margin-top:18px;background:none;border:1px solid rgba(255,255,255,.22);color:#EFD2D8;font-size:12.5px;font-weight:600;padding:9px 18px;border-radius:999px;cursor:pointer;font-family:inherit;transition:border-color .2s ease,background .2s ease;}
.biblio-toggle:hover{border-color:var(--rose);background:rgba(255,255,255,.06);}

/* =========================================================
   REVEAL / MOTION
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease;}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;min-height:auto;}
  /* En móvil/tablet el texto ("Psicóloga en Utrera y online", título y botones del test) va
     primero, en su orden natural del HTML; la foto pasa a mostrarse después de los botones,
     en vez de encabezar la página como ocurría antes con order:-1. */
  .hero-visual{height:auto;}
  .hero-photo-frame{height:300px;flex:none;}
  /* El recorte de escritorio (16% 10%) está pensado para el marco alto y estrecho de esa
     columna; en el marco corto y ancho de móvil deja media cabeza de foto vacía arriba y
     empuja la cara al borde inferior. Recentramos solo aquí, sin tocar el de escritorio. */
  .hero-photo-frame img{object-position:50% 40%;}
  .hv-fade{box-shadow:inset 0 -40px 50px -10px var(--photo-tint),inset 40px 0 40px -20px var(--photo-tint),inset -40px 0 40px -20px var(--photo-tint);}
  /* padding-top cubre la altura del header fijo (~81px) más aire, si no el eyebrow y el
     arranque del H1 quedan tapados detrás del menú. */
  .hero-text{padding:104px var(--gutter) 44px;max-width:none;}
  .hero-actions{gap:20px;}
  /* En móvil no hay hover, así que el "Conóceme →" de la placa bajo la foto se queda
     siempre visible (si no, nada indica que la placa es un enlace). */
  .plaque-cta{opacity:1;transform:none;}
  .contacto-grid{grid-template-columns:1fr;}
  /* El nav completo (Inicio/Terapias/Relaciones/Recursos + CTA) no cabe entre 760 y 980px:
     se pasa al menú hamburguesa en el mismo punto en el que ya colapsa el resto del layout,
     en vez de a partir de 760px, que dejaba el botón "Cuéntame"/chip de usuario cortado
     contra el borde derecho en ese rango. */
  nav.links{display:none;}
  .nav-cta .btn.btn-primary{display:none;}
  /* el círculo con la inicial del club sí se queda junto a la hamburguesa en móvil (a
     diferencia de "Cuéntame"), solo sin la píldora ni el nombre, para que quepa sin saturar */
  .nav-cta .nav-user-pill.btn-primary{display:inline-flex;padding:0;background:none;box-shadow:none;}
  .nav-cta .nav-user-pill .nav-user-name{display:none;}
  .burger{display:flex;}
  /* El JS reserva en #cycleWord el ancho de la palabra rotativa más larga ("los que te
     rodean") para que "La relación con" no se desplace al cambiar de palabra. En móvil ese
     ancho reservado no cabe junto a "con" y el conjunto salta de línea partiendo "contigo"
     en dos. Anulamos la reserva aquí: se acepta un pequeño salto de ancho al rotar, mejor
     que partir la palabra. */
  #cycleWord{min-width:0 !important;}
}
@media(max-width:760px){
  section{padding:88px 0;}
  .identidad blockquote{font-size:26px;}
  .test-panel{padding:36px 26px;}
  .rel-tabs{gap:12px;margin-bottom:40px;}
  .rel-tab{width:104px;padding:14px 8px;}
  .rel-panel{flex-direction:column;padding:28px 24px;}
  .form-row{grid-template-columns:1fr;}
  .met-grid{border-radius:14px;}
  .hero-photo-frame{height:240px;flex:none;}
}

/* =========================================================
   PASEOTERAPIA (página interna) — hero partido, vídeo vertical,
   estadísticas animadas, tarjetas de beneficios con icono degradado
   ========================================================= */
#inicio.page-hero{padding-bottom:40px;}
.hero-split-grid{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:end;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
@media(max-width:980px){.hero-split-grid{grid-template-columns:1fr;}.hero-split-grid .indic-card{max-width:480px;}}

/* ---- collage de fotos del hero: 3 fotos en distribución fija (sin rotación),
   bordes ligeramente redondeados igual que en conoceme.html. Sin foto suelta y
   sin repetir el mismo recuadro único de otras páginas. ---- */
.hero-collage{position:relative;justify-self:end;width:100%;max-width:320px;height:370px;}
.hc-tile{position:absolute;border-radius:10px;overflow:hidden;box-shadow:0 16px 32px -18px rgba(31,42,64,.28);background:var(--ivory);}
.hc-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94);}
.hc-1{width:47%;height:150px;top:0;left:24%;z-index:1;}
.hc-2{width:47%;height:195px;top:57px;left:0;z-index:2;}
.hc-3{width:61%;height:143px;top:221px;right:0;z-index:3;}
.hc-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--ivory) 0%,var(--rose-light) 220%);border:1.5px dashed var(--line);}
.hc-placeholder span{font-family:'Fraunces',serif;font-style:italic;font-size:12.5px;line-height:1.3;color:var(--ink-soft);text-align:center;padding:0 10px;}
@media(max-width:980px){
  .hero-collage{max-width:270px;height:320px;margin:16px auto 0;justify-self:center;}
  .hc-1{height:130px;}
  .hc-2{height:170px;top:50px;}
  .hc-3{height:125px;top:192px;}
}
@media(max-width:480px){.hero-collage{max-width:230px;height:280px;}
  .hc-1{height:115px;}
  .hc-2{height:150px;top:44px;}
  .hc-3{height:110px;top:170px;}
}

/* ---- hero: H1 grande a dos tintas + H2 en cursiva serif (misma jerarquía que el home) ---- */
.paseo-h1{font-size:clamp(52px,8vw,92px);line-height:.98;font-weight:600;margin:0;}
.paseo-h1 .p1{color:var(--navy);}
.paseo-h1 .p2{color:var(--rose-deep);}
.paseo-sub{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(18px,2.1vw,23px);color:var(--navy-soft);margin:22px 0 20px;}

/* ---- párrafo del hero: misma barra vertical + tipografía que el lead del home ---- */
.paseo-lead{position:relative;margin:20px 0 0;padding-left:30px;font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:460px;}
.paseo-lead::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rose-deep);transform:scaleX(.5);transform-origin:left;}

/* ---- terapia-utrera.html: 2 beneficios + 1 explicación breve de la paseoterapia,
   reutilizados de paseoterapia.html, a modo de lista esquemática ---- */
.paseo-mini-points{display:flex;flex-direction:column;gap:18px;list-style:none;margin:0;padding:0;max-width:460px;}
.paseo-mini-points li{padding-left:16px;border-left:2px solid var(--rose-deep);}
.paseo-mini-points b{display:block;font-size:15.5px;font-weight:600;color:var(--navy);margin-bottom:3px;}
.paseo-mini-points span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.5;}
.paseo-video-col{display:flex;flex-direction:column;align-items:center;}
.paseo-video-col .lugar-photo{width:100%;margin-bottom:0;}
.paseo-cta{margin-top:20px;width:fit-content;padding:12px 24px;font-size:13.5px;}

/* flecha visible solo al hover, reutilizable en cualquier .btn (no solo .btn-ghost) */
.btn-arrow-hover svg{width:0;opacity:0;margin-left:-9px;transition:width .25s ease,opacity .2s ease,margin-left .25s ease,transform .25s ease;}
.btn-arrow-hover:hover svg{width:14px;opacity:1;margin-left:0;}

/* la tarjeta se ancla al final de la columna (align-items:end), quedando más abajo, a la par que los botones */
.indic-card{position:relative;overflow:hidden;background:linear-gradient(150deg,#fff 0%,var(--ivory) 55%,var(--rose-light) 220%);border:1px solid var(--line);border-radius:20px;padding:32px 28px;box-shadow:var(--shadow);}
.indic-card::before{content:"";position:absolute;top:-50px;right:-50px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(169,113,123,.16) 0%,transparent 70%);pointer-events:none;}
.indic-card h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--rose-deep);font-family:'Work Sans',sans-serif;margin:0 0 20px;position:relative;z-index:1;}
.indic-list{display:flex;flex-direction:column;gap:18px;position:relative;z-index:1;}
.indic-list li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;color:var(--ink);line-height:1.45;}
.indic-list .ic{width:28px;height:28px;border-radius:50%;background:linear-gradient(150deg,var(--rose-light) 0%,#fff 100%);box-shadow:inset 0 0 0 1px rgba(140,88,99,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.indic-list .ic svg{width:12px;height:12px;stroke:var(--rose-deep);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* ---- vídeo + texto editorial (por qué la ofrezco) — mismo lenguaje que el hero-editorial de Conóceme, sin caja de fondo ---- */
.explico-editorial{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:56px;align-items:center;}
.ve-media-wrap{position:relative;}
.ve-media{position:relative;width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;cursor:pointer;background:var(--navy);box-shadow:var(--shadow);}
.explico-editorial h2{font-size:clamp(24px,2.8vw,32px);margin:0 0 16px;}
.ve-text p{color:var(--ink-soft);font-size:16.5px;line-height:1.8;max-width:56ch;margin:0;}
@media(max-width:800px){.explico-editorial{grid-template-columns:1fr;}.ve-media-wrap{max-width:320px;margin:0 auto;}}

/* ---- tira de estadísticas animadas (conteo lento + flecha) ---- */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0 8px;}
.stat-box{text-align:center;background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:28px 18px;}
.stat-box .num{font-family:'Fraunces',serif;font-size:clamp(32px,4vw,42px);font-weight:600;color:var(--rose-deep);line-height:1;display:flex;align-items:center;justify-content:center;gap:6px;}
.stat-box .num svg{width:24px;height:24px;stroke:var(--rose-deep);stroke-width:2.6;animation:statArrow 1.6s ease-in-out infinite;}
.stat-box .lbl{margin-top:12px;font-size:13px;color:var(--ink-soft);line-height:1.5;}
@keyframes statArrow{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@media(prefers-reduced-motion:reduce){.stat-box .num svg{animation:none;}}
@media(max-width:760px){.stat-strip{grid-template-columns:1fr;}}

/* ---- beneficios: tarjeta con icono degradado (mismo lenguaje que .ic-big) ---- */
.benef-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
.benef-card{background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:26px 22px;box-shadow:0 14px 30px -22px rgba(31,42,64,.22);transition:transform .25s ease,box-shadow .25s ease;}
.benef-card:hover{transform:translateY(-5px);box-shadow:0 20px 36px -20px rgba(31,42,64,.3);}
.benef-card .ic-big{width:48px;height:48px;margin-bottom:16px;background:none;padding:0;border:none;cursor:pointer;transition:transform .2s ease;}
.benef-card .ic-big:hover,.benef-card .ic-big:focus-visible{transform:scale(1.08);}
.benef-card .ic-big svg{width:20px;height:20px;}
.benef-card h4{font-size:15px;font-weight:600;color:var(--navy);margin:0 0 6px;font-family:'Work Sans',sans-serif;}
.benef-card p{font-size:13.5px;color:var(--ink-soft);margin:0;}
.benef-cite{margin:10px 0 0;font-size:12px;font-style:italic;color:var(--rose-deep);opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease;}
.benef-cite.show{opacity:1;max-height:60px;}
.benef-hint{display:block;margin-top:10px;font-size:11px;font-style:italic;color:var(--ink-grey);}
@media(max-width:980px){.benef-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.benef-grid{grid-template-columns:1fr;}}

/* ---- situaciones: tarjeta con borde lateral de color, degradado cálido cream→rose-light ---- */
/* "otras situaciones": carrusel de tarjetas grandes, mismo mecanismo que .metodo-gallery */
.situ-gallery{position:relative;margin:24px 0;}
.situ-track{position:relative;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.situ-track::-webkit-scrollbar{display:none;}
.situ-gallery.no-scroll .situ-nav{display:none;}
.situ-card{scroll-snap-align:start;flex:0 0 min(82vw,320px);background:linear-gradient(155deg,var(--cream) 0%,var(--rose-light) 220%);border-radius:14px;padding:26px 24px;}
.situ-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;}
.situ-card h4{font-size:19px;font-weight:600;color:var(--navy);margin:0 0 10px;font-family:'Fraunces',serif;line-height:1.32;}
.situ-card p{font-size:15px;color:var(--ink-soft);margin:0;line-height:1.6;}
.situ-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
.situ-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--ivory);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .2s ease;}
.situ-arrow:hover,.situ-arrow:focus-visible{border-color:var(--rose);background:var(--rose-light);}
.situ-arrow svg{width:15px;height:15px;stroke:var(--rose-deep);}
@media(max-width:600px){.situ-card{flex:0 0 82vw;}}


/* ---- sesión: pasos numerados a la izquierda + qué necesitas (con icono) a la derecha ---- */
.sesion-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;max-width:900px;margin:0 auto;}
.sesion-split .proceso-mini{gap:22px;}
/* en paseoterapia, la columna "qué necesitas" queda un poco más a la derecha que el resto de páginas con sesion-split */
#como-funciona .sesion-split{grid-template-columns:1.1fr .9fr;}
.needs-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--rose-deep);font-weight:700;font-family:'Work Sans',sans-serif;margin:0 0 16px;}
.chips-vertical{display:flex;flex-direction:column;gap:12px;}
.chips-vertical .chip{width:fit-content;}
@media(max-width:760px){
  .sesion-split,#como-funciona .sesion-split{grid-template-columns:1fr;gap:32px;}
}

/* ---- hueco de foto en las tarjetas de lugares (algunas enlazan a Google Maps) ---- */
.lugares-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:980px){.lugares-grid.cols-3{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.lugares-grid.cols-3{grid-template-columns:1fr;}}
.lugar-card-lg{padding:24px 22px;}
.lugar-photo{position:relative;aspect-ratio:4/3;border-radius:10px;background:linear-gradient(155deg,var(--blush),var(--linen) 60%,var(--rose-light) 140%);display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;}
a.lugar-photo{cursor:pointer;}
a.lugar-photo:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(31,42,64,.3);}
.lugar-photo span{position:absolute;left:0;right:0;bottom:0;font-size:11.5px;color:#fff;font-family:'Fraunces',serif;font-style:italic;text-align:center;padding:20px 14px 10px;display:flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(180deg,transparent,rgba(31,42,64,.65));opacity:0;transition:opacity .25s ease;}
a.lugar-photo:hover span{opacity:1;}
.lugar-photo span svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;flex-shrink:0;}
.lugar-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---- disclaimer: tarjeta bitono — panel navy con icono + lista sobre marfil (versión grande) ---- */
.disclaimer-box{position:relative;display:grid;grid-template-columns:auto 1fr;background:var(--ivory);border:1px solid var(--line);border-radius:24px;overflow:hidden;max-width:920px;margin:8px auto 0;box-shadow:var(--shadow);}
.disclaimer-icon-panel{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--navy) 0%,var(--navy-soft) 100%);display:flex;align-items:center;justify-content:center;padding:0 44px;}
.disclaimer-icon-panel::before{content:"";position:absolute;top:-30px;left:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(242,222,226,.14) 0%,transparent 70%);pointer-events:none;}
.disclaimer-icon-panel svg{position:relative;z-index:1;width:40px;height:40px;color:var(--rose-light);stroke:var(--rose-light);fill:none;stroke-width:1.5;}
.disclaimer-box ul{padding:46px 50px;display:flex;flex-direction:column;gap:16px;}
.disclaimer-box li{font-size:15.5px;color:var(--ink-soft);line-height:1.65;}
.disclaimer-box li strong{color:var(--navy);font-weight:600;}
@media(max-width:600px){.disclaimer-box{grid-template-columns:1fr;}.disclaimer-icon-panel{padding:30px 0;}.disclaimer-box ul{padding:32px 28px;}}

.sec-explico{background:var(--ivory);}
.sec-evidencia{background:var(--cream);}
.sec-beneficios{background:var(--linen);}
.sec-sesion{background:var(--ivory);}
.sec-lugares{background:var(--cream);}
.sec-disclaimer{background:var(--linen);}

/* =========================================================
   TERAPIA ONLINE (página interna) — problemáticas interactivas
   Mismo lenguaje visual que .rel-tabs/.rel-panel del home, pero
   como componente independiente: aquí cada panel muestra una
   lista (no un único párrafo) y son 6 pestañas, no 5. Se mantiene
   separado de .rel-tab a propósito para no interferir con el
   script de Relaciones del home (misma clase = mismo listener).
   ========================================================= */
/* ---- "Con qué puedo ayudarte": franja de descanso navy, colores invertidos respecto al home
   (pestañas en negativo por defecto, se vuelven rosadas/beige al seleccionarlas) ---- */
.sec-problematicas{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-soft) 100%);}
.sec-problematicas .eyebrow{color:var(--rose-light);}
.sec-problematicas .eyebrow::before{background:var(--rose-light);}
.sec-problematicas .section-head h2.eyebrow{font-size:16px;letter-spacing:.12em;}
.sec-problematicas .section-head p{color:#C9D2E0;}
.sec-por-que-yo{background:var(--cream);}
.porque-grid{align-items:center;}
.credential-tag{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px;}

/* ---- retrato circular (terapia-utrera.html): misma foto de conoceme-hero.jpg que
   ya se usa en el collage del hero de terapia-online.html, aquí sola como firma ---- */
.avatar-photo{display:block;width:132px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;margin:0 auto 20px;box-shadow:var(--shadow);transition:transform .25s ease;}
.avatar-photo:hover{transform:scale(1.04);}
.avatar-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;}

/* ---- sello de credencial (terapia-utrera.html): icono de línea en vez de la foto
   del premio, que en miniatura siempre lee como recorte de móvil, no como algo elegante ---- */
.credential-badge{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px;}
.credential-badge .credential-tag{margin:0;}
.credential-seal{display:flex;flex:0 0 auto;width:20px;height:20px;color:var(--rose-deep);}
.credential-seal svg{width:100%;height:100%;}

/* ---- terapia-utrera.html: foto única de la consulta (no collage, es un espacio real) ---- */
.hero-photo-card{position:relative;justify-self:end;width:100%;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
.hero-photo-card img{width:100%;height:auto;object-fit:cover;display:block;aspect-ratio:4/3;}
.hpc-label{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(3px);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--navy);}

/* ---- mapa de ubicación (terapia-utrera.html) ---- */
.map-wrap{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:24px;}
.map-wrap iframe{width:100%;height:340px;border:0;display:block;}

/* ---- terapia-utrera.html: lista de categorías sobre fondo navy, con frase + enlace
   orgánico a su detalle en terapia-online.html (en vez de un enlace suelto sin contenido) ---- */
.navy-rel-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;}
.navy-rel-item{position:relative;display:flex;gap:18px;padding:30px 4px 56px;border-bottom:1px solid rgba(255,255,255,.12);align-items:flex-start;}
.navy-rel-item:first-child{padding-top:8px;}
.navy-rel-item:last-child{border-bottom:none;}
.nri-ic{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.nri-ic svg{width:18px;height:18px;stroke:#F2DEE2;fill:none;stroke-width:1.6;}
.nri-ic svg.conmigo-ic{width:26px;height:26px;stroke-width:.55;}
.nri-ic svg.rel-ic{width:30px;height:30px;}
.navy-rel-item b{display:block;color:#fff;font-size:14.5px;font-weight:600;margin-bottom:6px;}
.navy-rel-item .nri-phrase{margin:0 0 8px;font-size:16px;font-style:italic;color:#C9D2E0;line-height:1.6;transition:opacity .15s ease;}
/* ancla independiente de la frase: posición fija en la esquina inferior derecha
   de la fila, no forma parte del flujo de texto ni se mueve al cambiar de chip */
.navy-rel-item .nri-more{position:absolute;right:4px;bottom:20px;margin:0;}
.navy-rel-item .nri-more a{font-style:normal;font-size:13.5px;font-weight:700;color:var(--rose-light);white-space:nowrap;}
.navy-rel-item .nri-more a:hover{color:#fff;}
.nri-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.nri-tag{font-family:'Work Sans',sans-serif;font-size:13px;font-weight:600;color:#F2DEE2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);padding:7px 15px;border-radius:99px;cursor:pointer;transition:all .2s ease;}
.nri-tag:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);}
.nri-tag.active{background:var(--rose-light);color:var(--navy);border-color:var(--rose-light);}

/* ---- bloque de texto sin tarjeta (sustituye al patrón indic-card cuando se quiere
   algo más sobrio: solo credencial + párrafo + enlace) ---- */
.porque-prose{max-width:640px;margin:0 auto;}

/* ---- variante del grid con la foto a la izquierda (para "poner cara"), reutilizando
   el mismo collage de 3 fotos del hero de terapia-online.html ---- */
.porque-grid-rev{grid-template-columns:360px 1fr;}
.porque-grid-rev .porque-lines{max-width:none;margin:0;}
@media(max-width:980px){.porque-grid-rev{grid-template-columns:1fr;}}

/* ---- varias líneas cortas y escaneables, sin caja ni checklist — para "qué puedes
   esperar de mí": cada punto es su propia línea, separadas por un filete sutil ---- */
.porque-lines{max-width:640px;margin:0 auto;}
.porque-lines p{padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-soft);margin:0;line-height:1.55;}
.porque-lines p:last-of-type{border-bottom:none;}

/* ---- "por qué yo": párrafo breve + tarjeta editorial con un único ejemplo concreto
   (mismo lenguaje que .cp-focus de conoceme.html), en vez de checklist o líneas con
   filete. Sin numerar, sin iconos de check. ---- */
.porque-copy{max-width:520px;}
.porque-copy p{margin:0;}
.porque-copy .more-link{margin-top:18px;}
.porque-note{margin-top:18px;font-size:15px;color:var(--ink-soft);line-height:1.6;}
.porque-highlight{position:relative;overflow:hidden;background:linear-gradient(150deg,#fff 0%,var(--ivory) 55%,var(--rose-light) 220%);border:1px solid var(--line);border-radius:20px;padding:30px 32px;box-shadow:var(--shadow);}
.porque-highlight::before{content:"";position:absolute;top:-50px;right:-50px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(169,113,123,.16) 0%,transparent 70%);pointer-events:none;}
.porque-highlight .tag{position:relative;z-index:1;display:flex;align-items:center;gap:9px;font-family:'Work Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:14px;}
.porque-highlight .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose);flex-shrink:0;}
.porque-highlight p{position:relative;z-index:1;font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:17.5px;color:var(--navy-soft);line-height:1.6;margin:0;}
.porque-grid-rev .porque-highlight{max-width:520px;}

/* ---- "por qué yo": título en negrita + 2-3 líneas, sin caja ni numeración
   (sustituye a .porque-highlight/.porque-copy en terapia-online.html).
   En filas (no columnas): cada punto ocupa el ancho completo, para que no
   se apelotone tanto párrafo lado a lado. Icono pequeño a modo de guion
   delante de cada punto para que no lea como un bloque de puro párrafo. ---- */
.porque-points{display:flex;flex-direction:column;gap:30px;margin-top:8px;max-width:1040px;margin-left:auto;margin-right:auto;}
.porque-point h3{font-family:'Fraunces',serif;font-weight:500;font-size:21px;color:var(--navy);margin:0 0 8px;}
.porque-point p{font-size:16.5px;color:var(--ink-soft);line-height:1.7;margin:0;}

/* ---- hueco reservado para un vídeo aún no grabado (mismo lenguaje que .hc-placeholder) ---- */
.video-placeholder{aspect-ratio:16/9;border-radius:14px;background:linear-gradient(150deg,var(--ivory) 0%,var(--rose-light) 220%);border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;}
.video-placeholder span{font-family:'Fraunces',serif;font-style:italic;font-size:13px;line-height:1.3;color:var(--ink-soft);text-align:center;}

/* ---- "¿Es para mí?": galería horizontal de tarjetas grandes, una frase por tarjeta ---- */
.sec-identifica{background:var(--ivory);}
.identifica-gallery{position:relative;}
.identifica-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.identifica-track::-webkit-scrollbar{display:none;}
.identifica-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
.identifica-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--ivory);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0;}
.identifica-arrow:hover,.identifica-arrow:focus-visible{border-color:var(--rose);background:var(--rose-light);}
.identifica-arrow svg{width:16px;height:16px;stroke:var(--rose-deep);}
.identifica-card{scroll-snap-align:start;flex:0 0 auto;width:min(78vw,300px);min-height:210px;background:linear-gradient(150deg,#fff 0%,var(--ivory) 60%,var(--rose-light) 220%);border:1px solid var(--line);border-radius:20px;padding:30px 24px 24px;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:18px;box-shadow:0 14px 30px -22px rgba(31,42,64,.22);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;font-family:'Work Sans',sans-serif;}
.identifica-card:hover,.identifica-card:focus-visible{transform:translateY(-5px);box-shadow:0 18px 34px -18px rgba(140,88,99,.32);border-color:var(--rose);}
.identifica-card p{position:relative;margin:0;font-family:'Fraunces',serif;font-style:italic;font-size:16.5px;line-height:1.5;color:var(--navy-soft);padding-top:22px;}
.identifica-card p::before{content:"“";position:absolute;top:-10px;left:-4px;font-size:36px;color:var(--rose-deep);opacity:.55;line-height:1;}
.identifica-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-deep);background:rgba(169,113,123,.1);padding:6px 12px;border-radius:99px;}
.identifica-card.identifica-more{align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-soft) 100%);gap:10px;}
.identifica-card.identifica-more .identifica-q{color:#fff;font-family:'Fraunces',serif;font-style:italic;font-size:16.5px;line-height:1.5;}
.identifica-card.identifica-more .identifica-cta{display:inline-flex;align-items:center;gap:6px;color:var(--rose-light);font-family:'Work Sans',sans-serif;font-weight:700;font-size:13px;}
.identifica-card.identifica-more .identifica-cta svg{width:14px;height:14px;stroke:var(--rose-light);}
.identifica-card.identifica-more .identifica-micro{color:#9AA1B2;font-size:11.5px;}

.probl-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:32px;flex-wrap:wrap;}
.probl-tab{display:flex;flex-direction:column;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:16px 10px;cursor:pointer;width:120px;transition:all .28s ease;font-family:'Work Sans',sans-serif;}
.probl-tab .ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;transition:all .28s ease;}
.probl-tab .ic svg{width:18px;height:18px;stroke:#F2DEE2;fill:none;stroke-width:1.6;}
.probl-tab .ic svg.conmigo-ic{width:26px;height:26px;stroke-width:.55;}
.probl-tab .ic svg.rel-ic{width:30px;height:30px;}
.probl-tab span{font-size:12px;font-weight:600;color:#E7ECF4;text-align:center;line-height:1.25;}
.probl-tab:hover{border-color:var(--rose-light);transform:translateY(-4px);box-shadow:0 12px 22px -12px rgba(0,0,0,.35);}
.probl-tab.active{background:linear-gradient(160deg,var(--rose-light) 0%,#fff 100%);border-color:var(--rose-light);box-shadow:0 14px 28px -14px rgba(0,0,0,.4);}
.probl-tab.active .ic{background:linear-gradient(150deg,#fff 0%,var(--rose-light) 100%);box-shadow:inset 0 0 0 1px rgba(140,88,99,.15);}
.probl-tab.active .ic svg{stroke:var(--rose-deep);}
.probl-tab.active span{color:var(--navy);}
.probl-panel{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,var(--ivory) 65%,var(--rose-light) 220%);border:1px solid var(--line);border-radius:18px;padding:40px 44px;display:flex;gap:26px;align-items:flex-start;min-height:170px;box-shadow:var(--shadow);transition:opacity .32s ease,transform .32s ease;}
.probl-panel::before{content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(169,113,123,.14) 0%,transparent 70%);pointer-events:none;}
.probl-panel.fade{opacity:0;transform:translateY(6px);}
.probl-panel h3{font-size:21px;margin-bottom:10px;font-weight:500;}
.probl-panel .probl-intro{font-size:14.5px;color:var(--ink-soft);font-style:italic;margin:0 0 16px;}
.probl-list{display:flex;flex-direction:column;max-width:620px;}
.probl-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);}
.probl-row:last-child{border-bottom:none;}
.probl-row-label{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.4;}
.probl-row-example{font-size:13.5px;font-style:italic;color:var(--rose-deep);line-height:1.5;}
.probl-list+.rel-link{margin-top:18px;}
@media(max-width:600px){.probl-row{grid-template-columns:1fr;gap:10px;}}
.probl-details{margin-top:18px;padding:2px 18px;}
.probl-details .faq-a{font-size:14px;padding-bottom:18px;}
.probl-details .faq-a p{margin:0 0 12px;}
.probl-details .faq-a .probl-list{margin-bottom:14px;max-width:none;}
.probl-details .faq-a a{color:var(--rose-deep);font-weight:600;}
@media(max-width:760px){
  .probl-tabs{gap:8px;}
  .probl-tab{width:94px;padding:12px 6px;}
  .probl-panel{flex-direction:column;padding:28px 24px;}
}

/* ---- hero de página interna sin foto (título + aside), variante genérica reutilizada por terapia-online.html ---- */
.terapia-h1{font-size:clamp(40px,5.6vw,66px);font-weight:500;line-height:1.12;color:var(--navy);}
.terapia-h1 .hl{color:var(--rose-deep);font-style:normal;}
.hero-terapia .eyebrow,.hero-utrera .eyebrow,.hero-paseo .eyebrow{margin-bottom:24px;}
.hero-terapia .paseo-lead,.hero-utrera .paseo-lead,.hero-paseo .paseo-lead{margin-top:36px;}
.hero-paseo .paseo-sub{margin-top:28px;}
.prose{max-width:700px;color:var(--ink-soft);font-size:16px;line-height:1.75;}
.prose+.prose{margin-top:16px;}

/* =========================================================
   RELACIÓN (páginas largas: comida, cuerpo, conmigo, demás, emociones)
   Componentes reutilizables para todas las páginas relacion-*.html
   ========================================================= */

/* el .wrap de estas secciones usa la anchura estándar del sitio (--maxw, igual que el
   index) para que las cajas/tablas tengan la misma presencia visual que en el resto del
   sitio; el texto corrido se limita aparte (.parada p / ul.plain) para mantener una
   línea de lectura cómoda sin dejar huecos raros en pantallas anchas. */
.sec-relacion-real{background:var(--ivory);padding-bottom:64px;}
.sec-relacion-real .parada{margin-left:auto;margin-right:auto;}
.sec-como-trabajo{padding-bottom:64px;}
#relacion-real .parada p.relacion-real-lead{font-size:clamp(17px,2vw,19px);line-height:1.6;}
.sec-patrones{background:var(--cream);}
.sec-atracones{background:var(--ivory);}
.sec-perspectiva{background:var(--cream);}
.sec-relacion-real .parada,.sec-patrones .parada,.sec-atracones .parada,.sec-perspectiva .parada{max-width:920px;}
/* "cómo trabajo" no lleva párrafos largos (solo título + galería + cierre), así que su
   .parada no se limita a 920px: así la galería de tarjetas usa todo el ancho de .wrap
   y no hace falta recortar ni desplazar tanto para ver las tarjetas de más a la derecha. */
.sec-como-trabajo .parada{max-width:none;}
.sec-relacion-real .parada p,.sec-patrones .parada p,.sec-atracones .parada p,.sec-perspectiva .parada p,.sec-como-trabajo .parada p,
.sec-relacion-real .parada ul.plain,.sec-patrones .parada ul.plain,.sec-atracones .parada ul.plain,.sec-perspectiva .parada ul.plain,.sec-como-trabajo .parada ul.plain{max-width:none;}

/* en las páginas relacion-*.html, todo el contenido usa el ancho completo de .wrap
   (como "cómo trabajo esto" y las FAQ), sin la columna de lectura recortada a 920px */
body.pagina-relacion .sec-relacion-real .parada,
body.pagina-relacion .sec-patrones .parada,
body.pagina-relacion .sec-atracones .parada,
body.pagina-relacion .sec-perspectiva .parada,
body.pagina-relacion .topic-band-inner .parada{max-width:none;}

/* cita destacada dentro del texto */
.pull-quote{margin:32px 0;padding:26px 30px;border-left:3px solid var(--rose);background:linear-gradient(to right,var(--rose-light),transparent 85%);border-radius:0 14px 14px 0;}
.pull-quote p{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(17px,2vw,20px);color:var(--rose-deep);line-height:1.5;margin:0;}

/* "te puede sonar si..." */
.tps,.tps-cream,.tps-navy{border-radius:14px;padding:18px 22px;margin:24px 0;display:flex;gap:14px;align-items:center;}
.tps{background:#fff;border:1px solid var(--line);}
.tps-cream{background:#fff;border:1px solid var(--line);}
.tps-navy{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);}
.tps-ic{width:36px;height:36px;border-radius:50%;background:linear-gradient(150deg,var(--rose-light) 0%,#fff 100%);box-shadow:0 4px 10px -4px rgba(140,88,99,.35),inset 0 0 0 1px rgba(140,88,99,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tps-ic svg{width:16px;height:16px;stroke:var(--rose-deep);fill:none;}
.tps-ic.tps-check{font-size:16px;font-weight:700;color:var(--rose-deep);line-height:1;}
.tps-label{font-family:'Work Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:5px;}
.tps-navy .tps-label{color:var(--rose-light);}
.tps p,.tps-cream p,.tps-navy p{font-size:14.5px;color:var(--ink-soft);margin:0;font-style:italic;}
.tps-navy p{color:#C9C0B8;}

/* sec-tca: bloque de TCA, tono más sobrio (menos color, más aire), pero cada trastorno
   es una tarjeta propia (borde + eyebrow + pie de "abordaje") para que se distingan entre
   sí a simple vista, no solo por el texto corrido. */
.sec-tca .tca-block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(26px,4vw,38px);margin:0 0 26px;}
.sec-tca .tca-block:last-of-type{margin-bottom:0;}
.sec-tca .tca-block h3{margin:0 0 20px;}
.sec-tca .pull-quote{margin:28px 0;}
.tca-eyebrow{display:flex;align-items:center;gap:9px;font-family:'Work Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px;}
.tca-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose);flex-shrink:0;}
/* bloque de texto corrido, no flex: con display:flex + flex-wrap, cada span (como los
   .gloss de las siglas) fuerza a la frase siguiente a saltar de línea entera en vez de
   fluir de forma normal, porque cada nodo de texto se convierte en un flex item que solo
   se coloca en la fila si cabe entero sin encoger primero */
.tca-evidence{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink-soft);}
.tca-evidence strong{color:var(--navy-soft);font-weight:600;}
.sec-tca .tca-block.tca-block-featured{border-color:var(--rose);box-shadow:0 22px 46px -32px rgba(140,88,99,.4);}
.tca-block-featured .tca-eyebrow{color:var(--rose-deep);}
.tca-bridge{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--rose-deep);margin:18px 0 0;}
.tca-cta{text-align:center;margin:60px 0 4px;padding:44px 0 0;border-top:1px solid var(--line);}
.tca-cta-text{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(19px,2.4vw,23px);color:var(--navy-soft);margin:0 0 22px;}
.tca-derivacion{max-width:600px;margin:30px auto 0;padding-left:18px;border-left:2px solid var(--line);text-align:left;}
.tca-derivacion p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.65;}

.como-trabajo-cierre{margin:28px 0 0;}
.como-trabajo-cierre a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--rose-deep);}
.como-trabajo-cierre a svg{width:13px;height:13px;transition:transform .2s ease;}
.como-trabajo-cierre a:hover svg{transform:translateX(3px);}

/* franja interna de color para separar sub-temas dentro de una misma sección */
.topic-band{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:clamp(60px,8vw,88px) 0;position:relative;}
/* cuando la topic-band cierra la sección, el padding-bottom genérico de section (72-112px)
   se sumaba al suyo propio y dejaba una franja del color de fondo del body sin motivo antes
   del siguiente bloque (navy o mini-respiro): el espaciado final lo pone solo la banda */
section:has(>.topic-band:last-child){padding-bottom:0;}
.topic-band-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.topic-band-inner .parada{max-width:920px;}
.topic-band-inner .parada p{max-width:none;}

/* separadores de respiro dentro del texto: el círculo entero (aro + punto central)
   se expande y se contrae, en miniatura, el mismo lenguaje visual que la pausa grande.
   Se posicionan sobre el borde real de la sección o topic-band (position:relative en ambas)
   para caer exactamente en el punto donde cambia el color de fondo, no en mitad del padding. */
.sep-icon{display:flex;align-items:center;gap:12px;position:absolute;left:50%;width:min(920px,86%);margin:0;}
.sep-icon.sep-icon-end{bottom:0;transform:translate(-50%,50%);}
.sep-icon.sep-icon-start{top:0;transform:translate(-50%,-50%);}
.sep-icon::before,.sep-icon::after{content:"";flex:1;height:1px;background:var(--line);}
.sep-icon-inner{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow);}
.sep-icon-inner svg{width:16px;height:16px;stroke:var(--rose);fill:none;overflow:visible;}
.sep-icon-inner svg circle:first-child{animation:sepBreatheOuter 5.5s ease-in-out infinite;transform-origin:12px 12px;}
.sep-icon-inner svg circle:last-child{animation:sepBreatheInner 5.5s ease-in-out infinite;transform-origin:12px 12px;}
@keyframes sepBreatheOuter{0%,100%{transform:scale(.8);opacity:.45;}50%{transform:scale(1.15);opacity:1;}}
@keyframes sepBreatheInner{0%,100%{transform:scale(.55);opacity:.4;}50%{transform:scale(1.3);opacity:1;}}
@media(prefers-reduced-motion:reduce){.sep-icon-inner svg circle{animation:none;}}
.sep-question{display:flex;align-items:center;gap:14px;margin:36px 0;}
.sep-question::before,.sep-question::after{content:"";flex:1;height:1px;background:var(--line);}
.sep-question span{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--rose);white-space:nowrap;}

/* tabla mito / realidad */
.contraste{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:24px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.c-head{padding:11px 16px;font-family:'Work Sans',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.c-head-izq{background:var(--cream);color:var(--ink-soft);border-right:1px solid var(--line);}
.c-head-der{background:var(--rose-light);color:var(--rose-deep);}
.c-row{padding:11px 16px;font-size:13.5px;border-top:1px solid var(--line);}
.c-row-izq{background:#fff;color:var(--ink-soft);font-style:italic;border-right:1px solid var(--line);}
.c-row-der{background:var(--cream);color:var(--ink);}
@media(max-width:600px){.contraste{grid-template-columns:1fr;}.c-row-izq,.c-head-izq{border-right:none;border-bottom:1px solid var(--line);}}

/* lo que te dices / lo que pasa en realidad — tarjetas con revelación */
.reveal-list{display:flex;flex-direction:column;gap:12px;margin:24px 0;}
.reveal-item{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 24px -18px rgba(31,42,64,.35);}
.reveal-said{padding:16px 20px;background:linear-gradient(180deg,var(--rose-light) 0%,var(--ivory) 100%);display:flex;flex-direction:column;justify-content:center;}
.reveal-real{padding:16px 20px;background:linear-gradient(180deg,var(--ivory) 0,var(--navy) 15px);display:flex;flex-direction:column;justify-content:center;}
.reveal-said p{margin:5px 0 0;font-style:italic;color:var(--ink-soft);font-size:14px;line-height:1.5;}
.reveal-real p{margin:5px 0 0;color:#F1EAE2;font-size:14px;line-height:1.5;font-weight:500;}
.reveal-tag{font-family:'Work Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.reveal-said .reveal-tag{color:var(--rose-deep);}
.reveal-real .reveal-tag{color:#C9D2E0;}
.reveal-arrow{display:flex;align-items:center;justify-content:center;width:40px;background:var(--ivory);flex-shrink:0;}
.reveal-arrow svg{width:15px;height:15px;stroke:var(--rose-deep);}
@media(max-width:680px){
  .reveal-item{grid-template-columns:1fr;}
  .reveal-arrow{width:100%;height:28px;}
  .reveal-arrow svg{transform:rotate(90deg);}
}

/* resumen gráfico de método, en tarjetas · carrusel horizontal con dos flechas debajo
   (mismo patrón que .identifica-gallery/.identifica-nav en terapia-online.html, en vez
   de una flecha superpuesta que tapaba la última tarjeta) */
.metodo-gallery{position:relative;margin:28px 0;}
.metodo-track{position:relative;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.metodo-track::-webkit-scrollbar{display:none;}
/* difumina el borde de la tarjeta cuando queda cortada por el contenedor, en vez de un
   corte seco; se oculta del todo cuando no hay más que desplazar hacia ese lado.
   Va en .metodo-track (no en .metodo-gallery) para no invadir la fila de flechas de abajo. */
.metodo-track::before,.metodo-track::after{content:"";position:absolute;top:0;bottom:0;width:40px;pointer-events:none;z-index:1;opacity:1;transition:opacity .25s ease;}
.metodo-track::before{left:0;background:linear-gradient(to right,var(--linen),rgba(236,226,211,0));}
.metodo-track::after{right:0;background:linear-gradient(to left,var(--linen),rgba(236,226,211,0));}
.metodo-gallery.at-start .metodo-track::before{opacity:0;}
.metodo-gallery.at-end .metodo-track::after{opacity:0;}
/* en escritorio las tarjetas ya caben sin desplazar (ver comentario debajo), así que el
   difuminado no pinta nada real que ocultar; se quita del todo para que no aparezca. */
@media(min-width:981px){.metodo-track::before,.metodo-track::after{display:none;}}
/* con .sec-como-trabajo .parada a ancho completo, 5 tarjetas de ~190px caben enteras en
   pantallas de escritorio sin necesidad de desplazar; en pantallas más estrechas siguen
   funcionando como carrusel (por eso flex-shrink:0, para que no se aplasten en vez de
   desplazarse). Si no hace falta desplazar, el JS oculta las flechas (.no-scroll). */
.metodo-gallery.no-scroll .metodo-nav{display:none;}
.metodo-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 18px;flex:0 0 clamp(155px,19vw,190px);scroll-snap-align:start;}
.metodo-card .tps-ic{margin-bottom:14px;}
.metodo-card h4{font-family:'Fraunces',serif;font-size:15px;font-weight:600;color:var(--navy-soft);margin:0 0 8px;line-height:1.35;}
.metodo-card p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.55;}
.metodo-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
.metodo-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--ivory);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .2s ease;}
.metodo-arrow:hover,.metodo-arrow:focus-visible{border-color:var(--rose);background:var(--rose-light);}
.metodo-arrow svg{width:15px;height:15px;stroke:var(--rose-deep);}

/* cita destacada más sobria, para insights clínicos dentro de sec-tca */
.insight-quote{margin:32px 0;padding:24px 28px;border:1px solid var(--line);border-left:3px solid var(--navy-soft);border-radius:0 12px 12px 0;background:var(--ivory);}
.insight-quote p{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(16px,1.9vw,19px);color:var(--navy-soft);line-height:1.55;margin:0;}

/* bloque con ilustración */
.illus-block,.illus-block-white{display:flex;align-items:center;gap:24px;margin:28px 0;}
.illus-block svg,.illus-block-white svg{flex-shrink:0;}
.illus-text h4{font-family:'Fraunces',serif;font-size:16px;color:var(--navy);margin:0 0 6px;font-weight:500;}
.illus-text p{font-size:14px;color:var(--ink-soft);margin:0;}
@media(max-width:560px){.illus-block,.illus-block-white{flex-direction:column;align-items:flex-start;}}

/* CTA en línea, dentro del texto */
.inline-cta,.inline-cta-cream{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin:32px 0;gap:16px;flex-wrap:wrap;}
.inline-cta{background:#fff;}
/* iba a fondo cream, pero casi siempre vive dentro de una sección ya cream (o una
   variante muy próxima): sin contraste, se leía plana. Blanco funciona sobre cream
   e ivory por igual. */
.inline-cta-cream{background:#fff;}
.inline-cta p,.inline-cta-cream p{font-size:16px;color:var(--ink-soft);margin:0;flex:1;min-width:180px;}
.inline-cta a,.inline-cta-cream a{font-size:13.5px;font-weight:600;color:var(--rose-deep);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;border:1px solid var(--rose);border-radius:999px;padding:8px 16px;transition:background .15s;}
.inline-cta a:hover,.inline-cta-cream a:hover{background:var(--rose-light);}
@media(max-width:560px){.inline-cta,.inline-cta-cream{flex-direction:column;align-items:flex-start;}}

/* aviso informativo */
.info-box{background:var(--ivory);border-left:3px solid var(--navy-soft);border-radius:0 10px 10px 0;padding:16px 20px;margin:22px 0;}
.info-box p{font-size:14.5px;color:var(--navy-soft);margin:0;}

/* tabla comparativa (relacion-emociones: anhedonia vs alexitimia). envuelta en un
   contenedor con scroll horizontal propio para que nunca desborde la página en móvil. */
.compare-wrap{margin:28px 0;border-radius:16px;border:1px solid var(--line);overflow:auto;box-shadow:var(--shadow);}
.compare-table{width:100%;border-collapse:collapse;min-width:520px;background:#fff;}
.compare-table th,.compare-table td{padding:16px 20px;text-align:left;vertical-align:top;font-size:14.5px;line-height:1.55;border-bottom:1px solid var(--line);}
.compare-table th{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:#fff;background:var(--navy);}
.compare-table th:first-child,.compare-table td:first-child{width:150px;font-weight:600;color:var(--navy);font-family:'Work Sans',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.03em;background:var(--ivory);}
.compare-table td{color:var(--ink-soft);}
.compare-table tr:last-child td{border-bottom:none;}
/* la tabla se revela con el mismo botón .met-ico de conoceme.html (Ver más a fondo), pero
   .met-example asume una frase corta en cursiva con un tope de 240px: aquí el contenido es
   una tabla más alta, así que se anula el itálico y se sube el límite */
.met-example.compare-example{font-style:normal;}
/* límite generoso en vez de calcular la altura exacta de la tabla: en móvil las filas
   pueden ocupar más alto y un tope ajustado (los 240px por defecto de .met-example, o
   incluso 480px) la recortaba a media tabla */
.met-example.compare-example.show{max-height:2000px;}
/* en móvil el padding de .met-card (36px) le comía la mitad del ancho de scroll a la
   tabla, dejando visible solo una franja estrecha dentro de otra caja (la del propio
   .compare-wrap): se saca del padding de la tarjeta para que use todo su ancho */
@media(max-width:600px){
  .met-example.compare-example{margin-left:-36px;margin-right:-36px;}
}

/* franjas de una sola línea entre secciones */
.franja-navy{background:var(--navy);padding:40px 0;text-align:center;}
.franja-navy p{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(17px,2.2vw,22px);color:#FBF8F3;line-height:1.5;max-width:640px;margin:0 auto;padding:0 var(--gutter);}
.franja-navy-cta{display:flex;flex-direction:column;align-items:center;gap:22px;}
.franja-navy-cta p{margin:0;}

/* nota clínica sobria: sin fondo de color, coherente con el tono de sec-tca */
.nota-clinica{border-left:2px solid var(--line);padding:2px 0 2px 20px;margin:24px 0;}
.nota-clinica p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.65;}
.franja-rose{background:var(--rose-deep);padding:28px 0;}
.franja-rose-inner{max-width:720px;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.franja-rose-inner p{font-size:15px;color:#fff;font-weight:500;margin:0;}
@media(max-width:600px){.franja-rose-inner{flex-direction:column;align-items:flex-start;}}

/* acciones bajo la cita de una .pausa (además del componente ya compartido) */
.pausa-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

/* mini-test navy con preguntas rápidas de sí/no */
.mini-test{background:var(--navy);padding:48px var(--gutter);}
.mini-test-inner{max-width:780px;margin:0 auto;}
.mini-test h3{color:#FBF8F3;font-size:19px;margin:0 0 6px;}
.mini-test .mt-sub{font-family:'Work Sans',sans-serif;font-size:13.5px;color:#9AA1B2;margin:0 0 24px;}
.mt-q{background:rgba(255,255,255,.07);border-radius:10px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:14px;}
.mt-q p{font-size:14.5px;color:#EFE7DE;margin:0;flex:1;}
.mt-btns{display:flex;gap:8px;flex-shrink:0;}
.mt-btn{padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid rgba(255,255,255,.2);background:transparent;color:#EFE7DE;cursor:pointer;font-family:'Work Sans',sans-serif;transition:all .15s;}
.mt-btn:hover,.mt-btn.sel{background:var(--rose);border-color:var(--rose);color:#fff;}
.mt-result{margin-top:20px;padding:18px;background:rgba(255,255,255,.08);border-radius:12px;font-size:14px;color:#EFE7DE;display:none;}
.mt-result.show{display:block;}
.mt-result a{color:var(--rose-light);font-weight:600;text-decoration:underline;}

/* caja de recursos gratuitos */
.recurso-box{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);border-radius:18px;padding:32px;margin:32px 0;display:flex;gap:20px;align-items:center;}
.recurso-box .rec-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.recurso-box .rec-icon svg{width:24px;height:24px;stroke:var(--rose-light);fill:none;}
.recurso-box h4{font-family:'Fraunces',serif;font-size:17px;color:#FBF8F3;margin:0 0 6px;font-weight:500;}
.recurso-box p{font-size:13.5px;color:#C9C0B8;margin:0 0 14px;}
.recurso-box a{display:inline-flex;align-items:center;gap:6px;background:var(--rose);color:#fff;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;transition:background .15s;}
.recurso-box a:hover{background:var(--rose-deep);}
.recurso-box a svg{width:13px;height:13px;stroke:#fff;fill:none;}
@media(max-width:580px){.recurso-box{flex-direction:column;text-align:left;}}

/* tabla de contenido, al inicio de página: gran tarjeta destacada, mismo lenguaje
   visual que .rel-panel del index (degradado + sombra), a la anchura completa del sitio */
.toc-section{background:#fff;padding:clamp(24px,4vw,40px) 0;}
.toc-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,var(--ivory) 55%,var(--rose-light) 220%);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:clamp(30px,5vw,52px);}
.toc-card::before{content:"";position:absolute;top:-70px;right:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(169,113,123,.14) 0%,transparent 70%);pointer-events:none;}
.toc-card-head{margin-bottom:30px;position:relative;}
.toc-card-head h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:8px;}
.toc-sub{font-size:14.5px;color:var(--ink-soft);margin:0;}
.toc-grid{display:grid;grid-template-columns:1fr;gap:10px 28px;position:relative;}
.toc-item{display:flex;align-items:flex-start;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink);line-height:1.4;transition:transform .15s;}
.toc-item:hover{transform:translateX(4px);}
.toc-item .pm-num{margin-top:1px;}
/* el pensamiento se lee como si lo dijera la persona: cursiva + comilla decorativa, sin comillas reales */
.toc-text{position:relative;font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--navy-soft);line-height:1.45;padding-left:2px;}
.toc-text::before{content:"\201C";position:absolute;left:-13px;top:-8px;font-size:26px;color:var(--rose);opacity:.5;line-height:1;}
.toc-grid.no-quote .toc-text::before{content:none;}
@media(max-width:680px){.toc-grid{grid-template-columns:1fr;}}
.prose.center{margin:0 auto;text-align:center;}

/* relacion-comida: hero con diagrama del ciclo de la relación con la comida, animado.
   .cycle-ring es el contenedor de posicionamiento de los nodos (antes eran % del bloque
   entero, incluida la leyenda, por eso los nodos 4/5 quedaban descolocados). */
#inicio.page-hero.hero-comida{padding-bottom:56px;}
.hero-comida-grid{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:44px;align-items:end;}
@media(max-width:900px){.hero-comida-grid{grid-template-columns:1fr;gap:40px;align-items:stretch;}}
/* el pie del anillo (no de la leyenda) es lo que se alinea con el final de la columna
   izquierda (botones); por eso la leyenda "la salida..." va fuera del flujo, colgando
   debajo, y no cuenta para esa alineación */
.cycle-visual{position:relative;width:100%;max-width:440px;margin:0 auto;top:48px;}
@media(max-width:900px){.cycle-visual{top:0;}}
.cycle-caption-top{text-align:center;}
.cycle-caption-title{margin:0 0 8px;font-family:'Work Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rose);}
.cycle-refuerza{margin:0;font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--rose-deep);}
.cycle-ring{position:relative;width:100%;aspect-ratio:1;margin-top:10px;}
.cycle-track{position:absolute;inset:0;width:100%;height:100%;display:block;}
.cycle-runner{animation:cycleFade 12s ease-in-out infinite;}
@keyframes cycleFade{0%,100%{opacity:.55;}50%{opacity:1;}}
.cycle-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;text-align:center;}
.cycle-node .pm-num{width:24px;height:24px;font-size:10px;}
.cycle-label{font-family:'Work Sans',sans-serif;font-size:11px;font-weight:600;color:var(--navy-soft);line-height:1.25;}
.cycle-tagline{position:absolute;left:0;right:0;top:100%;margin-top:18px;text-align:center;font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--rose-deep);line-height:1.4;}
@media(max-width:900px){.cycle-tagline{position:static;margin-top:18px;}}
@media(prefers-reduced-motion:reduce){.cycle-runner{animation:none;opacity:.85;}}

/* relacion-cuerpo: hero con H1 largo (necesita más ancho que el resto de .terapia-h1,
   por eso los modificadores --roomy/h1-long solo se aplican en esta página) y tarjeta
   "no es" / "sí es" de aceptación corporal. Toggle de dos pestañas con franja
   arrastrable (.at-pill): cada lado muestra sus 3 frases enteras a ancho completo, una
   sola columna, nunca partidas ni recortadas. Arrastrar o tocar la franja cambia de
   lado (JS, ver relacion-cuerpo.html); el contenido se intercambia en el momento en
   que la franja cruza el centro, no hay estado intermedio con texto a medias.
   margin-top en .aceptacion-visual alinea la tarjeta con el final del H1 (grid en
   align-items:start en vez de end). */
@media(min-width:901px){.hero-comida-grid--roomy{grid-template-columns:minmax(0,60fr) minmax(0,40fr);align-items:start;}}
.terapia-h1.h1-long{font-size:clamp(30px,4.3vw,44px);}

.aceptacion-visual{position:relative;width:100%;max-width:400px;margin:0 auto;}
@media(min-width:901px){.aceptacion-visual{margin-top:141px;}}
.aceptacion-caption-top{text-align:center;}
.aceptacion-caption-title{margin:0 0 8px;font-family:'Work Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rose);}
.aceptacion-refuerza{margin:0;font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--rose-deep);}
.aceptacion-toggle{position:relative;display:flex;width:100%;margin:18px auto 0;background:var(--linen);border-radius:999px;padding:4px;box-sizing:border-box;touch-action:pan-y;cursor:grab;}
.aceptacion-toggle.is-dragging{cursor:grabbing;}
.at-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#fff;border-radius:999px;box-shadow:0 4px 12px -4px rgba(31,42,64,.25);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0;pointer-events:none;}
.aceptacion-toggle.is-dragging .at-pill{transition:none;}
.at-pill.is-si{transform:translateX(100%);}
.at-tab{position:relative;z-index:1;flex:1;border:none;background:none;padding:11px 0;font-family:'Work Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;}
.at-tab.is-active{color:var(--rose-deep);}
.aceptacion-panel{width:100%;margin-top:16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(165deg,var(--rose-light),#fff 85%);box-shadow:var(--shadow);padding:20px 22px;box-sizing:border-box;}
.as-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.as-list[hidden]{display:none;}
.as-list li{display:flex;gap:9px;align-items:flex-start;font-family:'Work Sans',sans-serif;font-size:14px;line-height:1.48;color:var(--navy);}
.as-list-no li{color:var(--ink-soft);}
.as-ico{width:14px;height:14px;flex-shrink:0;margin-top:2px;stroke:var(--rose-deep);}
.as-list li div{display:flex;flex-direction:column;gap:3px;}
.as-note{font-size:11.5px;font-style:italic;color:var(--ink-grey);line-height:1.4;}
.as-list-no .as-ico{stroke:var(--ink-soft);}

/* relacion-cuerpo: gráfico interactivo de hormonas del ciclo menstrual */
.mc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 24px 22px;margin:24px auto;max-width:940px;}
.mc-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:16px;}
.mc-eyebrow{font-family:'Work Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);margin:0;}
.mc-hint{font-family:'Work Sans',sans-serif;font-size:12px;color:var(--ink-soft);margin:0;}
.mc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;}
.mc-canvas{width:100%;}
.mc-svg{display:block;width:100%;height:auto;}
.mc-band{fill:var(--rose-light);opacity:0;transition:opacity .35s ease;}
.mc-band.active{opacity:.6;}
.mc-axis{stroke:var(--line);stroke-width:1;}
.mc-tick{stroke:var(--line);stroke-width:1;}
.mc-tick-label,.mc-ylabel{font-family:'Work Sans',sans-serif;font-size:13px;fill:var(--ink-grey);}
.mc-axis-title{font-weight:600;}
.mc-curve{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.mc-curve-fsh{stroke:var(--rose);}
.mc-curve-lh{stroke:var(--navy);}
.mc-curve-est{stroke:#6B2A3D;}
.mc-curve-prog{stroke:#A98A3F;}
.mc-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;}
.mc-leg{display:flex;align-items:center;gap:6px;font-family:'Work Sans',sans-serif;font-size:11.5px;font-weight:600;color:var(--navy-soft);}
.mc-leg::before{content:'';width:16px;flex-shrink:0;}
.mc-leg-fsh::before{height:0;border-top:2.4px dashed var(--rose);}
.mc-leg-lh::before{height:0;border-top:2.4px dashed var(--navy);}
.mc-leg-est::before{height:2.4px;border-radius:2px;background:#6B2A3D;}
.mc-leg-prog::before{height:2.4px;border-radius:2px;background:#A98A3F;}
.mc-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.mc-tab{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;transition:background .2s ease,border-color .2s ease;font-family:inherit;}
.mc-tab-days{display:block;font-family:'Work Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rose);margin-bottom:3px;}
.mc-tab-name{display:block;font-family:'Fraunces',serif;font-size:13px;font-weight:600;color:var(--navy);}
.mc-tab:hover{border-color:var(--rose);}
.mc-tab.active{background:var(--navy);border-color:var(--navy);}
.mc-tab.active .mc-tab-days{color:var(--rose-light);}
.mc-tab.active .mc-tab-name{color:#fff;}
.mc-panels{position:relative;margin-top:16px;}
.mc-panel{display:none;font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:0;padding:14px 16px;background:var(--cream);border-radius:10px;border-left:3px solid var(--rose);}
.mc-panel.active{display:block;}
.mc-source{margin:14px 0 0;}
.mc-source summary{cursor:pointer;list-style:none;font-family:'Work Sans',sans-serif;font-size:11.5px;font-weight:600;color:var(--ink-grey);}
.mc-source summary::-webkit-details-marker{display:none;}
.mc-source summary::before{content:'+ ';}
.mc-source[open] summary::before{content:'\2212 ';}
.mc-source .as-note{margin-top:8px;}
@media(max-width:760px){.mc-grid{grid-template-columns:1fr;gap:0;}.mc-legend{margin-bottom:18px;}}
@media(max-width:600px){.mc{padding:20px 16px 18px;}}

/* resalte incrustado en el texto: no es un bloque aparte, se lee dentro del propio
   párrafo pero "sale" con una sombra suave, como una nota pegada encima de la página */
.pop-highlight{background:var(--rose-light);padding:1px 6px;border-radius:6px;box-shadow:0 8px 18px -11px rgba(140,88,99,.65);box-decoration-break:clone;-webkit-box-decoration-break:clone;}

/* ancla de lectura: 1-2 palabras/frase corta por párrafo largo (+3 líneas), color rosa
   de marca y peso 500 (sin cursiva), sin fondo ni subrayado, para que el ojo tenga un punto
   de apoyo sin leer como enlace */
.kw{color:var(--rose-deep);font-weight:500;}

/* .kw aplicado a un <a> real: aquí sí debe leerse como enlace, por eso se subraya */
.kw-underline{text-decoration:underline;text-underline-offset:2px;}

/* mini-sección de respiro en blanco, entre el índice y el primer bloque de contenido */
.mini-respiro{background:#fff;padding:clamp(36px,6vw,60px) 0;text-align:center;}
.mini-respiro .sep-icon-inner{margin:0 auto 18px;width:42px;height:42px;}
.mini-respiro .sep-icon-inner svg{width:19px;height:19px;}
.mini-respiro-quote{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(20px,2.8vw,28px);color:var(--rose-deep);margin:0;line-height:1.4;}

/* relacion-emociones: hero con termómetro interactivo de activación emocional. 5 niveles
   clicables (.termo-seg) con color estable al activarse; el degradado de calma a
   desbordamiento vive en el panel de texto (.termo-panel.termo-lvl-N), que cambia de
   contenido y de fondo al clicar (JS, ver relacion-emociones.html). margin-top en desktop
   alinea el widget con el final del H1, mismo criterio que .aceptacion-visual en
   relacion-cuerpo. */
.termo-visual{position:relative;width:100%;max-width:400px;margin:0 auto;}
@media(min-width:901px){.termo-visual{margin-top:96px;}}
.termo-caption-top{text-align:center;}
.termo-caption-title{margin:0 0 8px;font-family:'Work Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rose);}
.termo-refuerza{margin:0;font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--rose-deep);}
.termo-scale{display:flex;gap:8px;margin-top:18px;}
.termo-seg{flex:1;height:52px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;padding:0;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;}
.termo-seg:hover{border-color:var(--rose);}
.termo-seg.is-active{background:var(--rose-deep);color:#fff;border-color:transparent;transform:translateY(-3px);box-shadow:0 10px 20px -10px rgba(31,42,64,.35);}
.termo-panel{margin-top:18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(165deg,var(--rose-light),#fff 85%);box-shadow:var(--shadow);padding:20px 22px;min-height:108px;box-sizing:border-box;transition:background .3s ease;}
.termo-panel.termo-lvl-1{background:linear-gradient(165deg,#F8ECEE,#F2DEE2);}
.termo-panel.termo-lvl-2{background:linear-gradient(165deg,#EAC5CD,#E3AFB9);}
.termo-panel.termo-lvl-3{background:linear-gradient(165deg,#D28F9D,#C97D8C);}
.termo-panel.termo-lvl-4{background:linear-gradient(165deg,#9C6B76,var(--rose-deep));}
.termo-panel.termo-lvl-5{background:linear-gradient(165deg,var(--navy-soft),var(--navy));}
.termo-panel.termo-lvl-3 .termo-level-name,.termo-panel.termo-lvl-4 .termo-level-name,.termo-panel.termo-lvl-5 .termo-level-name{color:#fff;}
.termo-panel.termo-lvl-3 .termo-level-desc,.termo-panel.termo-lvl-4 .termo-level-desc,.termo-panel.termo-lvl-5 .termo-level-desc{color:#F1EAE2;}
.termo-level-name{margin:0 0 6px;font-family:'Fraunces',serif;font-weight:600;font-size:17px;color:var(--navy);transition:color .3s ease;}
.termo-level-desc{margin:0;font-family:'Work Sans',sans-serif;font-size:14px;line-height:1.55;color:var(--ink-soft);transition:color .3s ease;}
.termo-tagline{margin:16px 0 0;text-align:center;font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--rose-deep);line-height:1.4;}
@media(max-width:900px){.termo-visual{max-width:440px;}}
@media(max-width:420px){.termo-scale{gap:6px;}.termo-seg{height:46px;font-size:14px;}}

/* Slider de 5 paradas arrastrable: comparte layout/panel con .termo-visual, pero la
   interacción central (arrastrar un mando por una barra) es distinta a la rejilla de
   botones del termómetro, para no repetir la misma mecánica en páginas seguidas. */
.voz-track{position:relative;height:6px;border-radius:999px;background:var(--line);margin:38px 6px 24px;}
.voz-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--rose-light),var(--rose-deep));transition:width .25s ease;}
.voz-stops{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;}
.voz-stop{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s;}
.voz-stop.is-active{border-color:var(--rose-deep);background:var(--rose-deep);}
.voz-thumb{position:absolute;top:50%;left:0%;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--rose-deep);box-shadow:var(--shadow);transform:translate(-50%,-50%);cursor:grab;transition:left .25s ease;touch-action:none;padding:0;}
.voz-thumb:active{cursor:grabbing;}
.voz-endlabels{display:flex;justify-content:space-between;font-family:'Work Sans',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin:0 4px;}

/* Brújula de aprobación: aguja arrastrable en un dial semicircular. La interacción de
   arrastre reutiliza la misma lógica horizontal que .voz-track (mover el dedo/ratón de
   lado a lado), pero el resultado se representa como una rotación, para dar una
   variante visual distinta en la página de "los demás". Comparte .termo-panel/
   .termo-tagline/.voz-endlabels/.termo-caption-* con el resto de heros interactivos. */
.brujula-visual{position:relative;width:100%;max-width:400px;margin:0 auto;}
@media(min-width:901px){.brujula-visual{margin-top:96px;}}
.brujula-dial{position:relative;width:100%;height:150px;margin:22px auto 0;touch-action:none;cursor:grab;}
.brujula-dial.is-dragging{cursor:grabbing;}
.brujula-arc-bg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.brujula-ticks{position:absolute;inset:0;}
.brujula-tick{position:absolute;left:50%;bottom:6px;width:0;height:0;}
.brujula-tick-dot{position:absolute;left:-5px;top:-128px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--line);display:block;cursor:pointer;transition:border-color .2s,background .2s;}
.brujula-tick-dot.is-active{border-color:var(--rose-deep);background:var(--rose-deep);}
.brujula-pivot{position:absolute;left:50%;bottom:6px;width:12px;height:12px;margin-left:-6px;margin-bottom:-6px;border-radius:50%;background:var(--navy);z-index:2;pointer-events:none;}
.brujula-needle{position:absolute;left:50%;bottom:6px;width:4px;height:128px;margin-left:-2px;background:linear-gradient(to top,var(--rose-deep),var(--rose-light));border-radius:4px;transform-origin:50% 100%;cursor:grab;z-index:3;padding:0;border:none;touch-action:none;}
.brujula-needle::after{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--rose-deep);box-shadow:var(--shadow);}
.brujula-needle:active{cursor:grabbing;}
@media(max-width:900px){.brujula-visual{max-width:440px;}}

/* =========================================================
   CLUB DE LECTURA — acceso y espacio privado
   ========================================================= */

/* ---- acceso (login/verificar): pantalla centrada, sin nav completa, fondo claro ---- */
.auth-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;background:var(--photo-tint);}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:36px;}
.auth-brand img{width:38px;height:38px;border-radius:50%;}
.auth-brand span{font-family:'Fraunces',serif;font-size:15.5px;color:var(--navy);font-weight:500;}
.auth-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:40px 36px;}
.auth-card .eyebrow{margin-bottom:14px;}
.auth-card h1{font-size:23px;font-weight:500;margin-bottom:10px;line-height:1.25;}
.auth-lead{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 26px;}
/* Inputs propios de fondo claro: los input{} globales del CSS están pensados para la sección
   de contacto sobre navy, aquí necesitan su propia paleta clara. */
.auth-card input{background:var(--cream);border:1.5px solid var(--line);color:var(--ink);padding:14px 16px;}
.auth-card input::placeholder{color:var(--ink-grey);}
.auth-card input:focus{outline:2px solid var(--rose);outline-offset:2px;border-color:var(--rose-deep);}
.form-label-light{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;margin-bottom:7px;}
.form-hint-light{font-size:12px;color:var(--ink-grey);line-height:1.5;margin:8px 0 0;}
.auth-foot{margin-top:22px;text-align:center;font-size:13px;color:var(--ink-soft);}
.auth-foot a{color:var(--rose-deep);font-weight:600;cursor:pointer;}
.auth-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);margin-top:30px;}
.auth-back svg{width:13px;height:13px;stroke:var(--ink-soft);}
.auth-back:hover{color:var(--navy);}
.auth-back:hover svg{stroke:var(--navy);}
.auth-feedback{font-size:13px;margin-top:14px;padding:11px 14px;border-radius:9px;line-height:1.5;display:none;}
.auth-feedback.show{display:block;}
.auth-feedback.error{background:rgba(140,88,99,.09);color:var(--rose-deep);border:1px solid rgba(140,88,99,.22);}

/* ---- selector de color del perfil (pantalla de bienvenida) ---- */
.color-swatch-row{display:flex;gap:16px;margin:4px 0 4px;}
.color-swatch{all:unset;width:44px;height:44px;border-radius:50%;cursor:pointer;position:relative;box-sizing:border-box;}
.color-swatch.rosa{background:linear-gradient(150deg,var(--rose-light) 0%,var(--rose) 100%);}
.color-swatch.navy{background:linear-gradient(150deg,var(--navy-soft),var(--navy));}
.color-swatch.is-selected::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--ink);}

/* ---- código OTP de 6 cifras ---- */
.otp-row{display:flex;gap:9px;justify-content:center;margin:6px 0 22px;}
.otp-digit{width:46px;height:56px;text-align:center;font-size:22px;font-family:'Fraunces',serif;font-weight:600;border-radius:10px;padding:0;box-sizing:border-box;}
.auth-card .otp-digit{padding:0;}
@media(max-width:400px){.otp-digit{width:39px;height:50px;font-size:19px;}.otp-row{gap:6px;}}

/* ---- barra superior de sesión (espacio privado) ---- */
.club-topbar{background:var(--navy-deep);color:#9AA1B2;font-size:12.5px;padding:9px 0;text-align:center;}
.club-topbar b{color:#EFE7DE;font-weight:600;}
.club-topbar a{color:var(--rose-light);text-decoration:underline;text-underline-offset:2px;margin-left:12px;cursor:pointer;}

/* ---- espacio privado: contenedor y cabecera del libro en curso ---- */
.club-shell{background:var(--ivory);padding:56px 0 100px;min-height:60vh;}
.club-wrap{max-width:640px;margin:0 auto;padding:0 var(--gutter);}
.club-head-card{background:linear-gradient(165deg,var(--rose-light),var(--ivory) 72%);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);margin-bottom:36px;display:flex;gap:20px;}
.club-head-cover{width:70px;flex-shrink:0;}
.club-head-cover img{width:100%;height:auto;border-radius:6px;aspect-ratio:2/3;object-fit:cover;display:block;box-shadow:0 8px 18px -8px rgba(31,42,64,.35);}
.club-head-cover a{display:block;}
.club-head-info{flex:1;min-width:0;}
.club-head-info h2{font-size:18.5px;font-weight:500;margin-bottom:2px;}
.club-head-info .autor{font-size:12.5px;color:var(--ink-soft);margin-bottom:14px;}
.club-progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);margin-bottom:6px;}
.club-progress-track{height:5px;border-radius:999px;background:rgba(31,42,64,.1);overflow:hidden;}
.club-progress-fill{height:100%;border-radius:999px;background:var(--rose-deep);}
.club-cal-btn{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12px;font-weight:600;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:#fff;cursor:pointer;}
.club-cal-btn:hover{border-color:var(--rose);color:var(--rose-deep);}
@media(max-width:480px){.club-head-card{flex-direction:column;}.club-head-cover{width:56px;}}

/* ---- modal "Añadir al calendario" ---- */
.cal-modal-overlay{position:fixed;inset:0;background:rgba(31,42,64,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.cal-modal-overlay[hidden]{display:none;}
.cal-modal{position:relative;background:#fff;border-radius:18px;box-shadow:var(--shadow);max-width:420px;width:100%;padding:30px 28px 28px;max-height:88vh;overflow-y:auto;}
.cal-modal-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.cal-modal-close:hover{border-color:var(--rose);color:var(--rose-deep);}
.cal-modal h3{font-family:'Fraunces',serif;font-size:19px;font-weight:500;color:var(--navy);margin:0 30px 12px 0;}
.cal-modal-lead{font-size:14px;color:var(--ink-soft);margin-bottom:20px;}
.cal-modal-how{background:var(--cream);border-radius:12px;padding:16px 18px;margin-bottom:22px;}
.cal-modal-how-h{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:10px;}
.cal-modal-how p{font-size:13px;color:var(--ink-soft);margin:0 0 10px;}
.cal-modal-how p:last-child{margin-bottom:0;}
.cal-modal-how b{color:var(--ink);font-weight:600;}
.cal-modal-download{width:100%;justify-content:center;}

/* ---- publicaciones semanales del feed editorial ---- */
.post-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;margin-bottom:20px;}
.post-kicker{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:10px;}
.post-kicker .kicker-ico{flex-shrink:0;}
.post-card h3{font-size:17.5px;font-weight:500;margin-bottom:3px;}
.post-sub{font-size:12.5px;color:var(--ink-soft);margin-bottom:14px;}
.post-card p{font-size:14.5px;line-height:1.65;color:var(--ink);margin:0;}
.post-card p+p{margin-top:12px;}
.post-card .btn{margin-top:18px;}
.post-embed{margin-top:16px;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--cream);border:1px solid var(--line);}
.post-embed iframe{width:100%;height:100%;border:0;display:block;}

/* ---- encuesta: sin resultados agregados, solo confirmación de la propia respuesta ---- */
.poll-q{font-size:15px;font-weight:500;color:var(--navy);margin-bottom:14px;font-family:'Fraunces',serif;}
.poll-opt{display:block;width:100%;text-align:left;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--cream);margin-bottom:8px;font-size:14px;color:var(--ink);cursor:pointer;transition:border-color .2s ease,background .2s ease;font-family:'Work Sans',sans-serif;}
.poll-opt:hover{border-color:var(--rose);}
.poll-opt.is-selected{border-color:var(--rose-deep);background:var(--rose-light);font-weight:600;color:var(--navy);}
.poll-done{font-size:13px;color:var(--rose-deep);margin-top:8px;display:none;}
.poll-done.show{display:block;}

/* ---- reacciones: reutiliza el slider .voz-track/.voz-thumb (ver relacion-conmigo.html), solo estado propio ---- */
.react-scale-done{font-size:13px;color:var(--rose-deep);margin-top:14px;display:none;}
.react-scale-done.show{display:block;}

.cpt-ico{vertical-align:-2px;margin-right:6px;flex-shrink:0;}

/* ---- bienvenida de entrada al club: solo titular, centrado y con aire (el icono vive ya únicamente en el riel lateral, mismo patrón .gswap que en club-lectura.html) ---- */
.club-welcome{text-align:center;margin:12px 0 40px;}
.club-welcome-title{font-size:clamp(26px,4.4vw,42px);line-height:1.25;margin:0 auto;max-width:640px;}
.club-welcome-title .cwt-rose{color:var(--rose-deep);}

/* ---- tarjetas de enlace a conversación / biblioteca: icono con la misma profundidad degradada que .ic-big en #relaciones ---- */
.club-link-card{display:flex;align-items:center;gap:16px;background:var(--navy);color:#EFE7DE;border-radius:18px;padding:22px 24px;margin-bottom:14px;transition:transform .2s ease;}
.club-link-card:hover{transform:translateY(-2px);}
.club-link-card .clc-ic{width:48px;height:48px;border-radius:50%;background:linear-gradient(150deg,var(--rose-light) 0%,#fff 100%);box-shadow:0 8px 18px -8px rgba(0,0,0,.4),inset 0 0 0 1px rgba(140,88,99,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.club-link-card .clc-ic svg{width:24px;height:24px;fill:var(--rose-deep);}
.club-link-card .clc-text{min-width:0;flex:1;}
.club-link-card .clc-text b{display:block;font-size:14.5px;font-weight:600;}
.club-link-card .clc-text span{font-size:12.5px;color:#C9C0B8;}
.club-link-card svg{width:16px;height:16px;stroke:#EFE7DE;flex-shrink:0;fill:none;stroke-width:2;}
.club-link-card.is-rose{background:var(--rose-deep);}
.club-link-card.is-rose .clc-text span{color:#F0DCE0;}

/* ---- mi biblioteca ---- */
.bib-year{font-family:'Fraunces',serif;font-size:15px;color:var(--ink-soft);margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.bib-year:first-child{margin-top:0;}
.bib-cover{width:42px;flex-shrink:0;}
.bib-cover img{width:100%;height:auto;border-radius:4px;aspect-ratio:2/3;object-fit:cover;display:block;}
.bib-info{flex:1;min-width:0;}
.bib-info b{display:block;font-size:14.5px;font-weight:500;color:var(--navy);}
.bib-info span{font-size:12px;color:var(--ink-soft);}

/* ---- nota de valoración dentro de "Mi biblioteca": misma proporción de estrella rellena en %
   que .rating-stars-fill (ver club/libro.html), en miniatura y sin interacción, solo lectura ---- */
.bib-rating{display:flex;align-items:center;gap:7px;margin-top:6px;}
.bib-rating-stars{position:relative;width:62px;height:11px;flex-shrink:0;}
.bib-rating-stars-bg,.bib-rating-stars-fill{position:absolute;top:0;left:0;display:flex;gap:2px;}
.bib-rating-stars-fill{overflow:hidden;white-space:nowrap;}
.bib-rating-stars svg{width:10px;height:10px;flex-shrink:0;}
.bib-rating-stars-bg svg{fill:none;stroke:var(--line);stroke-width:1.3;}
.bib-rating-stars-fill svg{fill:var(--rose-deep);stroke:none;}
.bib-rating-num{font-size:11.5px;color:var(--ink-soft);}

/* ---- página del libro y conversaciones (nivel 3) ---- */
.conv-hero{display:grid;grid-template-columns:170px 1fr;gap:36px;align-items:start;}
.conv-cover img{width:100%;height:auto;border-radius:10px;aspect-ratio:2/3;object-fit:cover;display:block;box-shadow:var(--shadow);}
.conv-cal{display:flex;flex-direction:column;gap:8px;margin-top:20px;}
.conv-cal-item{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:11px 14px;border-radius:10px;background:var(--cream);border:1px solid var(--line);color:var(--ink);}
.conv-cal-item span.cw{color:var(--ink-soft);}
.conv-cal-item.is-current{border-color:var(--rose-deep);background:var(--rose-light);font-weight:600;}
@media(max-width:640px){.conv-hero{grid-template-columns:1fr;}.conv-cover{max-width:150px;}}

.conv-topic{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;margin-bottom:22px;}
.conv-topic h3{font-size:16.5px;font-weight:500;margin-bottom:8px;}
.conv-topic .conv-q{font-family:'Fraunces',serif;font-style:italic;color:var(--rose-deep);font-size:15.5px;margin-bottom:20px;}
.conv-comment{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.conv-comment .g-avatar{width:32px;height:32px;font-size:12px;}
.conv-comment-body{flex:1;background:var(--cream);border-radius:12px;padding:10px 14px;min-width:0;}
.conv-comment-body b{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--navy);margin-bottom:2px;}
.conv-comment-body p{font-size:13.5px;color:var(--ink);margin:0;line-height:1.55;}
.conv-comment.is-victoria .g-avatar{background:linear-gradient(150deg,var(--navy-soft),var(--navy));}
.conv-comment.is-victoria .conv-comment-body{background:var(--rose-light);}
.cc-verified{color:var(--rose-deep);flex-shrink:0;}
.conv-write{display:flex;gap:12px;margin-top:16px;align-items:flex-start;}
.conv-write .g-avatar{width:32px;height:32px;font-size:12px;flex-shrink:0;}
.conv-write-box{flex:1;}
.conv-write-box textarea{margin:0 0 10px;min-height:44px;background:var(--cream);color:var(--ink);border-color:var(--line);}
.conv-write-box textarea::placeholder{color:var(--ink-soft);}
.conv-topic-soon{opacity:.55;filter:grayscale(.3);}
.conv-write.is-closed{opacity:.55;filter:grayscale(.3);pointer-events:none;}
.conv-closed-banner{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--ink-soft);margin:0 0 20px;}
.conv-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
.conv-chip{font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--cream);color:var(--ink-soft);}
.conv-chip.is-active{border-color:var(--rose-deep);background:var(--rose-light);color:var(--navy);}
.conv-chip.is-soon{cursor:default;}

/* ---- puente sutil hacia autoconocimiento / terapia ---- */
.bridge-card{background:linear-gradient(165deg,var(--blush),var(--ivory) 78%);border:1px solid var(--line);border-radius:18px;padding:28px;margin-top:8px;}
.bridge-card h3{font-size:17px;font-weight:500;margin-bottom:8px;}
.bridge-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 18px;}

/* =========================================================
   AGRANDADO EN MOVIL (<=760px): mismo diseno, solo texto/
   elementos pequenos mas grandes para lectura comoda sin
   zoom manual. No toca estilos de escritorio (min-width:761px
   sigue igual). Genera mas scroll a proposito.

   Reglas de font-size: SOLO tocan font-size (nunca otras
   propiedades) para no pisar otros ajustes de la misma clase
   ya definidos en @media mas arriba en el archivo (p.ej. la
   visibilidad de .plaque-cta en movil).
   ========================================================= */

/* Reordena "Sin registro" entre los dos botones del hero (index.html):
   en el HTML el <p class="hero-microcopy"> ahora vive DENTRO de
   .hero-actions, entre los dos <a>. Con order se mantiene el
   aspecto de escritorio (botones en fila + texto debajo a ancho
   completo) y solo en movil cambia a la fila de lectura pedida. */
.hero-actions .btn-primary{order:1;}
.hero-actions .btn-ghost-rose{order:2;}
.hero-actions .hero-microcopy{order:3;flex-basis:100%;margin:10px 0 0;}

@media(max-width:760px){
.gloss .gloss-tip{font-size:14px;}
.eyebrow{font-size:14.5px;}
.section-head h2.eyebrow{font-size:14.5px;}
.section-head p{font-size:18px;}
.relaciones .section-head p{margin-top:28px;}
.btn{font-size:17px;}
.brand-name{font-size:18px;}
.nav-link{font-size:16.5px;}
.nav-drop a{font-size:16px;}
.nav-user-menu a{font-size:15.5px;}
#mobileMenu .mbrand{font-size:18.5px;}
#mobileMenu > a{font-size:19px;}
#mobileMenu summary{font-size:19px;}
#mobileMenu details a{font-size:16.5px;}
.nav-user-mobile-row span{font-size:16.5px;}
.nav-user-mobile-menu a{font-size:16.5px;}
.hero-text h1{font-size:40px;}
.hero-h2{font-size:30px;}
.hero-text p.lead:not(.lead-test){font-size:19px;}
.hero-text p.lead-test{font-size:17px;}
.hero-microcopy{font-size:15px;}
.plaque .p1{font-size:14.5px;}
.plaque .p2{font-size:14.5px;}
.plaque-cta{font-size:14.5px;}
.pausa-author{font-size:15px;}
.buda-note{font-size:14.5px;}
.buda-btn{font-size:14.5px;}
.paseo-note{font-size:14.5px;}
.paseo-btn{font-size:14.5px;}
.test-panel p{font-size:16.5px;}
.test-panel small{font-size:14.5px;}
.rel-note{font-size:17px;}
.rel-tab span{font-size:13px;}
.rel-panel p{font-size:16.5px;}
.rel-panel .rel-quote{font-size:17.5px;}
.rel-link{font-size:15.5px;}
.met-example{font-size:15.5px;}
/* .met-example.show tiene un tope de max-height (240px) pensado para el ancho de
   escritorio; con el font-size mayor de móvil, el ejemplo largo de "Integrar" en
   conoceme.html se quedaba cortado por el overflow:hidden. */
.met-example.show{max-height:420px;}
.met-author{font-size:14.5px;}
.met-card h3{font-size:18px;}
.met-card.feat h3{font-size:20px;}
.met-card p{font-size:16.5px;}
.more-link{font-size:15px;}
.enfoque-text p{font-size:18px;}
.met-ico-label{font-size:15px;}
.venn-caption{font-size:16.5px;}
.venn-hint{font-size:15px;}
.venn-label{font-size:17.5px;}
.venn-item b{font-size:17.5px;}
.venn-item span{font-size:16.5px;}
.abc-step span.abc-example{font-size:15px;}
.g-meta b{font-size:16px;}
.g-meta span{font-size:14.5px;}
.testi-card p.ttext{font-size:17px;}
.testi-more{font-size:15px;}
.stars{font-size:14.5px;}
.faq-item summary{font-size:18px;}
.faq-a{font-size:17px;}
.contacto p.lead{font-size:16.5px;}
.contact-item .label{font-size:16.5px;}
.consent-row span{font-size:15px;}
.form-hint{font-size:14.5px;}
.form-feedback{font-size:15.5px;}
input,textarea,select{font-size:16.5px;}
.form-label{font-size:15px;}
footer{font-size:15.5px;}
.cookie-banner p{font-size:16px;}
.cookie-banner button{font-size:15.5px;}
.wa-tooltip{font-size:15px;}
.hero-photo-mini .ph-placeholder{font-size:15.5px;}
.page-hero h1.eyebrow{font-size:14.5px;}
.hero-block p{font-size:18.5px;}
.hero-block-closing p{font-size:18.5px;}
.chip{font-size:16.5px;}
.tl-stat{font-size:17px;}
.tl-item .t-name{font-size:20px;}
.tl-item .t-inst{font-size:17px;}
.tl-item .t-year{font-size:15px;}
.tl-item .t-desc{font-size:16.5px;}
.stage-tag{font-size:13.5px;}
.met-group-label{font-size:14.5px;}
.met-group-sep .msg-label{font-size:14.5px;}
.met-group-sep p{font-size:17px;}
.lugar-card .tag{font-size:13px;}
.lugar-card h4{font-size:17px;}
.lugar-card p{font-size:15.5px;}
.cta-block .cta-text{font-size:17.5px;}
.abc-step b{font-size:15px;}
.abc-step span{font-size:14.5px;}
.abc-arrow{font-size:19px;}
.cr-dot .cr-tip{font-size:14.5px;}
.parada h3{font-size:19px;}
.parada p{font-size:17.5px;}
.parada ul.plain li{font-size:17px;}
.vt-text p{font-size:17px;}
.vt-media .vt-cap{font-size:15px;}
.cta-final-wa{font-size:16.5px;}
.pm-step b{font-size:17px;}
.pm-step div span{font-size:15.5px;}
.proceso-mini,.sesion-split .proceso-mini{gap:34px;}
.biblio .biblio-intro{font-size:15.5px;}
.biblio-item{font-size:15.5px;}
.biblio-toggle{font-size:15px;}
.hc-placeholder span{font-size:15px;}
.paseo-lead{font-size:19px;}
.paseo-mini-points b{font-size:17px;}
.paseo-mini-points span{font-size:16.5px;}
.paseo-cta{font-size:16px;}
.indic-card h3{font-size:15px;}
.indic-list li{font-size:18px;}
.ve-text p{font-size:18px;}
.stat-box .lbl{font-size:15.5px;}
.benef-card h4{font-size:16.5px;}
.benef-card p{font-size:16px;}
.benef-cite{font-size:14.5px;}
.benef-hint{font-size:14px;}
.situ-eyebrow{font-size:14px;}
.situ-card h4{font-size:20px;}
.situ-card p{font-size:16.5px;}
.needs-col h4{font-size:15.5px;}
.lugar-photo span{font-size:14.5px;}
.disclaimer-box li{font-size:17px;}
.sec-problematicas .section-head h2.eyebrow{font-size:17.5px;}
.credential-tag{font-size:14.5px;}
.hpc-label{font-size:13px;}
.navy-rel-item b{font-size:17px;}
.navy-rel-item .nri-phrase{font-size:17.5px;}
.navy-rel-item .nri-more a{font-size:16px;}
.nri-tag{font-size:15.5px;}
.porque-lines p{font-size:17px;}
.porque-note{font-size:16.5px;}
.porque-highlight .tag{font-size:14px;}
.porque-highlight p{font-size:19px;}
.porque-points{gap:84px;}
.porque-point h3{font-size:25px;margin-bottom:14px;}
.porque-point p{font-size:19.5px;line-height:1.75;}
.video-placeholder span{font-size:15.5px;}
.identifica-card p{font-size:18px;}
.identifica-tag{font-size:14px;}
.identifica-card.identifica-more .identifica-q{font-size:18px;}
.identifica-card.identifica-more .identifica-cta{font-size:15.5px;}
.identifica-card.identifica-more .identifica-micro{font-size:14.5px;}
.probl-tab span{font-size:14.5px;}
.probl-panel .probl-intro{font-size:17px;}
.probl-row-label{font-size:17px;}
.probl-row-example{font-size:16px;}
.probl-details .faq-a{font-size:16.5px;}
.prose{font-size:17.5px;}
.tps-ic.tps-check{font-size:17.5px;}
.tps-label{font-size:13.5px;}
.tps p,.tps-cream p,.tps-navy p{font-size:17px;}
.tca-eyebrow{font-size:14px;}
.tca-evidence{font-size:15.5px;}
.tca-bridge{font-size:16.5px;}
.tca-derivacion p{font-size:16px;}
.como-trabajo-cierre a{font-size:16.5px;}
.sep-question span{font-size:16.5px;}
.c-head{font-size:14.5px;}
.c-row{font-size:16px;}
.reveal-said p{font-size:16.5px;}
.reveal-real p{font-size:16.5px;}
.reveal-tag{font-size:13px;}
/* móvil: tarjeta ancha tipo .testi-card (icono+título en fila, párrafo debajo a todo
   el ancho) en vez de apilar icono→título→párrafo en una columna estrecha, que
   forzaba muchas líneas y hacía la lectura pesada; una tarjeta grande por pantalla,
   centrada al deslizar con el dedo. */
.metodo-card{flex:0 0 min(480px,86vw);scroll-snap-align:center;padding:24px 22px;display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:10px;}
.metodo-card .tps-ic{margin-bottom:0;flex-shrink:0;}
.metodo-card h4{flex:1 1 0%;font-size:17px;margin:0;}
.metodo-card p{flex:0 0 100%;font-size:16px;}
.illus-text h4{font-size:17.5px;}
.illus-text p{font-size:16.5px;}
.inline-cta p,.inline-cta-cream p{font-size:17.5px;}
.inline-cta a,.inline-cta-cream a{font-size:16px;}
.info-box p{font-size:17px;}
.compare-table th,.compare-table td{font-size:17px;}
.compare-table th{font-size:17.5px;}
.compare-table th:first-child,.compare-table td:first-child{font-size:15.5px;}
.nota-clinica p{font-size:16px;}
.franja-rose-inner p{font-size:16.5px;}
.mini-test h3{font-size:20px;}
.mini-test .mt-sub{font-size:16px;}
.mt-q p{font-size:17px;}
.mt-btn{font-size:15px;}
.mt-result{font-size:16.5px;}
.recurso-box h4{font-size:18.5px;}
.recurso-box p{font-size:16px;}
.recurso-box a{font-size:15.5px;}
.toc-sub{font-size:17px;}
.toc-item{font-size:16.5px;}
.toc-text{font-size:16.5px;}
.cycle-caption-title{font-size:14px;}
.cycle-refuerza{font-size:16.5px;}
.cycle-label{font-size:14px;}
.cycle-tagline{font-size:17.5px;}
.aceptacion-caption-title{font-size:14px;}
.aceptacion-refuerza{font-size:16.5px;}
.at-tab{font-size:14.5px;}
.as-list li{font-size:16.5px;}
.as-note{font-size:14.5px;}
.mc-eyebrow{font-size:14px;}
.mc-hint{font-size:14.5px;}
.mc-leg{font-size:14.5px;}
.mc-tab-days{font-size:13px;}
.mc-tab-name{font-size:15.5px;}
.mc-panel{font-size:16px;}
.mc-source summary{font-size:14.5px;}
.termo-caption-title{font-size:14px;}
.termo-refuerza{font-size:16.5px;}
.termo-seg{font-size:16.5px;}
.termo-level-name{font-size:18.5px;}
.termo-level-desc{font-size:16.5px;}
.termo-tagline{font-size:16.5px;}
.voz-endlabels{font-size:13.5px;}
.auth-brand span{font-size:17px;}
.auth-lead{font-size:17px;}
.form-label-light{font-size:15px;}
.form-hint-light{font-size:14.5px;}
.auth-foot{font-size:15.5px;}
.auth-back{font-size:15.5px;}
.auth-feedback{font-size:15.5px;}
.club-topbar{font-size:15px;}
.club-head-info h2{font-size:19.5px;}
.club-head-info .autor{font-size:15px;}
.club-progress-label{font-size:14.5px;}
.club-cal-btn{font-size:14.5px;}
.cal-modal-overlay{padding:14px;}
.cal-modal{padding:34px 22px 26px;border-radius:22px;}
.cal-modal-close{width:34px;height:34px;top:18px;right:18px;}
.cal-modal h3{font-size:22.5px;margin-right:36px;}
.cal-modal-lead{font-size:16px;margin-bottom:24px;}
.cal-modal-how{padding:18px 20px;}
.cal-modal-how-h{font-size:12.5px;}
.cal-modal-how p{font-size:15px;}
.post-kicker{font-size:14.5px;}
.post-card h3{font-size:19px;}
.post-sub{font-size:15px;}
.post-card p{font-size:17px;}
.poll-q{font-size:16.5px;}
.poll-opt{font-size:16.5px;}
.poll-done{font-size:15.5px;}
.react-scale-done{font-size:15.5px;}
.club-link-card .clc-text b{font-size:17px;}
.club-link-card .clc-text span{font-size:15px;}
.bib-year{font-size:16.5px;}
.bib-info b{font-size:17px;}
.bib-info span{font-size:14.5px;}
.bib-rating-num{font-size:14.5px;}
.conv-cal-item{font-size:16px;}
.conv-topic h3{font-size:18px;}
.conv-topic .conv-q{font-size:17px;}
.conv-comment-body b{font-size:15px;}
.conv-comment-body p{font-size:16px;}
.conv-closed-banner{font-size:15.5px;}
.conv-chip{font-size:14.5px;}
.bridge-card h3{font-size:18.5px;}
.bridge-card p{font-size:17px;}

/* ---- correcciones de maquetación tras el agrandado ---- */

/* "Toca el icono para ver un ejemplo": en escritorio es una nota
   absoluta en la esquina; en movil (tarjeta a 1 columna) el texto
   más grande ya no cabe ahi sin pisar el icono. La devolvemos al
   flujo normal, como primera linea de la tarjeta. */
.met-hint{position:static;display:block;margin:0 0 14px;font-size:13px;}

/* Chips "Conmigo/Mi cuerpo/..." un poco más anchos para que el
   texto (ya más grande) no se apriete, y más aire antes del panel. */

/* Botones/chips pequeños: el padding original se quedó corto para
   el texto agrandado y se veían apretados. */
.buda-btn,.paseo-btn{padding:9px 16px;}
.mt-btn{padding:8px 16px;}
/* "Explorarme a través de este libro": con el texto agrandado y el nowrap general de .btn,
   el botón se salía del bridge-card en pantallas estrechas. Aquí sí puede partir en dos líneas. */
.bridge-card .btn{white-space:normal;text-align:center;}
.club-cal-btn{padding:9px 16px;}
.nri-tag{padding:8px 17px;}
.recurso-box a{padding:10px 20px;}
.inline-cta a,.inline-cta-cream a{padding:9px 18px;}
.conv-chip{padding:8px 16px;}
.biblio-toggle{padding:10px 20px;}
.cookie-banner button{padding:12px 22px;}

/* Más aire entre titulo/intro de sección y el contenido. */
.section-head{margin-bottom:44px;}
.section-head.left{margin-bottom:40px;}
.section-head p{margin-top:20px;}

/* Pausa con CTA a práctica (relacion-*.html): el enlace al final
   ("Descúbrelo en la práctica de...") es texto largo y .btn fuerza
   una sola línea (white-space:nowrap para el icono flecha), así que
   en movil se salía por los dos lados de la pantalla. Le damos aire
   lateral a la sección y dejamos que el texto del botón envuelva. */
.pausa-actions{padding:0 20px;}
.pausa-actions .btn{white-space:normal;text-align:center;}
/* .pausa no tiene padding lateral propio (solo vertical), así que en movil
   la cita quedaba pegada a ambos bordes de la pantalla sin aire, mientras
   .pausa-actions ya lo tenía arreglado justo debajo. Mismo aire lateral. */
.pausa-quote{padding:0 20px;}

/* Hero (index.html): "Sin registro" pasa a estar debajo de "Hacer
   el test", y el botón "Primera consulta gratuita" gana más aire. */
.hero-actions{flex-direction:column;align-items:flex-start;gap:14px;}
.hero-actions .hero-microcopy{order:2;flex-basis:auto;margin:0;}
.hero-actions .btn-ghost-rose{order:3;margin-top:14px;}
/* "Primera consulta gratuita" se centra; "Hacer el test" y el texto
   "Sin registro" se quedan alineados a la izquierda como el resto. */
.hero-actions .btn-ghost-rose{align-self:center;}

/* Hero (index.html), 1ª pantalla sin scroll: eyebrow + H1 + frase rotativa +
   párrafo "Sea cual sea...". El párrafo "Si no sabes por dónde empezar..."
   se empuja fuera de esa primera pantalla para que aparezca ya al hacer scroll,
   junto a los botones y la foto (2ª pantalla), no asomando desde la primera. */
.hero-text p.lead-test{margin-top:150px;margin-bottom:32px;}
/* La palabra rotativa del H2 ("contigo" = 1 línea; el resto = 2 líneas) hacía
   que todo lo de abajo (párrafo, botones) saltara verticalmente cada vez que
   cambiaba de palabra. Reservamos siempre la altura de 2 líneas. */
.hero-h2{min-height:99px;}

/* Pausas "Buda" (index.html, "Escuchar el agua") y "Paseo" (paseoterapia.html,
   "Escuchar los pasos"): la cita y los botones son dos bloques con position:absolute
   independientes dentro de una caja de alto fijo. Con los botones y la cita ya más
   grandes, dejaban de caber en ese alto y se pisaban. Apilamos los botones (en vez
   de ponerlos en fila) y damos más alto a la caja para que quepa todo sin chocar. */
.pausa-buda,.pausa-paseo{min-height:440px;}
.buda-actions,.paseo-actions{flex-direction:column;align-items:flex-start;gap:10px;}
.buda-note{text-align:center;}

/* terapia-online.html (móvil): tarjetas "¿Es esto para mí?" un poco más grandes y con
   más interlineado; símbolo de colegiación centrado debajo del texto en vez de al lado;
   y en "¿Cómo será la sesión online?" más espacio entre pasos y antes de "Qué
   necesitas para conectar". (La sección "¿Por qué hacer terapia conmigo?" se probó
   con más aire forzado para separar los puntos, pero el hueco en blanco quedaba feo
   y poco funcional; se revirtió a su tamaño y espaciado original.) */
body.page-terapia-online .identifica-card p{font-size:19.5px;line-height:1.62;}
/* símbolo de colegiación centrado debajo del texto: mismo componente en
   terapia-online.html y terapia-utrera.html, así que no se limita a una página */
.credential-badge{flex-direction:column-reverse;gap:6px;}
body.page-terapia-online .proceso-mini,body.page-terapia-online .sesion-split .proceso-mini{gap:44px;}
body.page-terapia-online .pm-step b{font-size:19px;}
body.page-terapia-online .pm-step div span{font-size:17px;}
body.page-terapia-online .sesion-split{gap:56px;}
body.page-terapia-online .needs-col h4{font-size:17px;}
body.page-terapia-online .chips-vertical{gap:16px;}
body.page-terapia-online .chip{font-size:17.5px;padding:11px 18px;}

/* paseoterapia.html (móvil): mismo aumento de tamaño y aire que terapia-online.html
   en "¿Cómo serán las sesiones?" y "Qué necesitas para venir" (mismos componentes,
   .proceso-mini/.sesion-split/.needs-col/.chips-vertical). Además, "A tener en
   cuenta" (.disclaimer-box) es exclusivo de esta página: sus 5 puntos iban muy
   pegados unos a otros, así que se les da más aire vertical entre sí. */
body.page-paseoterapia .proceso-mini,body.page-paseoterapia .sesion-split .proceso-mini{gap:44px;}
body.page-paseoterapia .pm-step b{font-size:19px;}
body.page-paseoterapia .pm-step div span{font-size:17px;}
body.page-paseoterapia #como-funciona .sesion-split{gap:56px;}
body.page-paseoterapia .needs-col h4{font-size:17px;}
body.page-paseoterapia .chips-vertical{gap:16px;}
body.page-paseoterapia .chip{font-size:17.5px;padding:11px 18px;}
body.page-paseoterapia .disclaimer-box ul{gap:40px;padding:40px 26px;}
body.page-paseoterapia .disclaimer-box li{font-size:19.5px;line-height:1.8;}
body.page-paseoterapia .disclaimer-icon-panel{padding:34px 0;}
body.page-paseoterapia .disclaimer-icon-panel svg{width:48px;height:48px;}

/* paseoterapia.html hero (móvil): "Misma calidad, distinto escenario." iba muy
   pequeño comparado con el H1 y el párrafo de debajo, casi ilegible como subtítulo,
   así que se agranda. (Se probó también a recortar el aire de alrededor para que
   "Beneficios" cupiera justo en la primera pantalla sin scroll, pero el resultado
   quedaba saturado/pegado — Victoria prefiere que se pueda hacer un poco de scroll
   antes que sentir el hero apretado, así que el resto del hero mantiene el mismo
   aire generoso que terapia-online.html/terapia-utrera.html.) */
body.page-paseoterapia .paseo-sub{font-size:25px;line-height:1.35;margin:22px 0 22px;}

/* "Puedo ayudarte si..." / "¿Con qué puedo ayudarte?": mismo aumento de tamaño y aire
   que "¿Por qué hacer terapia conmigo?" (.porque-point), aplicado a los dos componentes
   distintos que usa cada página para esta sección. */
.navy-rel-item{padding:46px 4px 128px;}
.navy-rel-item:first-child{padding-top:8px;}
.navy-rel-item b{font-size:19px;}
.nri-tags{margin-bottom:26px;}
.navy-rel-item .nri-phrase{font-size:19.5px;line-height:1.65;}
/* el enlace "Saber más..." es más largo en algunas relaciones (comida/demás/emociones)
   y con el texto ya más grande, forzarlo a una sola línea (nowrap del desktop) lo
   sacaba por el borde derecho de la pantalla y quedaba cortado/invisible. En móvil
   dejamos que envuelva en 1-2 líneas, alineado a la derecha igual que antes. */
.navy-rel-item .nri-more{bottom:18px;}
.navy-rel-item .nri-more a{font-size:17.5px;white-space:normal;text-align:right;line-height:1.4;}
.nri-tag{font-size:17px;padding:8px 16px;}
.probl-panel{padding:40px 28px;}
.probl-panel h3{font-size:24px;}
.probl-panel .probl-intro{font-size:18.5px;}
.probl-row{padding:28px 0;}
.probl-row-label{font-size:19px;}
.probl-row-example{font-size:17.5px;}

/* club/inicio.html (móvil): este espacio privado tiene su propio bloque <style> dentro del
   HTML (no vive en este archivo), pensado solo para escritorio, así que ninguno de sus
   componentes propios (tarjetas de libro, muro semanal, capítulos de la novela, etc.)
   había recibido el pase "estilo Pulso" todavía. Mismo criterio que el resto de este bloque:
   agrandar texto para lectura cómoda sin tocar escritorio (min-width:761px intacto).
   El título "Bienvenida al club..." usa clamp(26px,4.4vw,42px): a 375px el 4.4vw da ~16.5px,
   por debajo del propio mínimo de 26px, así que colapsa siempre a ese suelo de 26px, muy
   por debajo del peso que tienen los H1 de portada en el resto del sitio tras el pase
   (ver .hero-text h1 más arriba, 40px) — se corrige igual, con un valor fijo en móvil. */
body.club-inicio .club-welcome-title{font-size:34px;}
body.club-inicio .club-zone-label{font-size:18px;}
body.club-inicio .club-note{font-size:18px;max-width:340px;}
body.club-inicio .club-note-sign{font-size:13.5px;}
body.club-inicio .club-heart-count{font-size:14px;}
body.club-inicio .camino-card h2{font-size:23px;}
body.club-inicio .camino-card .autor{font-size:14.5px;}
body.club-inicio .camino-tag{font-size:12.5px;}
body.club-inicio .camino-reading-btn{font-size:13px;padding:8px 16px 8px 11px;}
body.club-inicio .camino-practice-cta{font-size:14.5px;}
body.club-inicio .camino-practice-soon{font-size:14px;}
body.club-inicio .muro-tag span{font-size:13.5px;}
body.club-inicio .cw-week{font-size:12.5px;}
body.club-inicio .cw-title{font-size:17px;}
body.club-inicio .novela-entry-title{font-size:17px;}
body.club-inicio .novela-q{font-size:16.5px;line-height:1.7;}
/* El texto narrativo de cada semana ("Neff empieza distinguiendo...", explicación de los
   capítulos de la novela) se quedó fuera del pase anterior: son <p> sueltos sin clase propia
   dentro de .club-week-body, así que heredaban el tamaño base sin ningún bump. 17px iguala el
   mismo valor moderado ya usado para .post-card p en este bloque. :not([class]) es necesario
   para no pisar los <p> con clase propia que sí viven dentro de .club-week-body (.post-sub,
   .club-week-exercise), cada uno con su propio tamaño ya bumpeado. */
body.club-inicio .club-week-body p:not([class]){font-size:17px;}
body.club-inicio .club-source-tag,body.club-inicio .club-private-tag{font-size:12px;}
body.club-inicio .exercise-select-label{font-size:13.5px;}
body.club-inicio .exercise-select{font-size:15.5px;}
body.club-inicio .exercise-add-btn{font-size:14.5px;}
body.club-inicio .muro-empty{font-size:15.5px;}
body.club-inicio .novela-locked{font-size:14.5px;}
/* botón "Guardar" de cada caja de escritura privada (uno por semana/capítulo, antes
   inline a 13px en cada uno, ahora una sola clase .club-save-btn): en escritorio se deja
   pequeño a propósito (acción secundaria dentro de la caja), pero en móvil 13px queda por
   debajo del suelo táctil cómodo del resto de botones del sitio (17px). */
body.club-inicio .club-save-btn{font-size:15px;padding:12px 22px;}

/* club/libro.html (móvil): mismo caso, <style> propio de la página sin pase móvil.
   El título del libro/novela (antes font-size:26px inline en el propio <h1>, ahora
   .conv-hero-title) es la cabecera real de la página de conversación, con el mismo
   problema de peso insuficiente frente al resto de H1 de portada del sitio. */
body.page-club-libro .conv-hero-title{font-size:30px;}
body.page-club-libro .conv-hero-meta{font-size:15.5px;}
body.page-club-libro .conv-hero-desc{font-size:16.5px;}
body.page-club-libro .rating-head h3{font-size:17px;}
body.page-club-libro .rating-hint{font-size:14px;}
body.page-club-libro .rating-label{font-size:15px;}
body.page-club-libro .conv-week-toggle{font-size:16.5px;}
body.page-club-libro .cwt-text span{font-size:13px;}
body.page-club-libro .conv-week-empty{font-size:15px;}
body.page-club-libro .conv-week-intro{font-size:15px;}
body.page-club-libro .club-save-btn{font-size:15px;padding:12px 22px;}

/* club/biblioteca.html (móvil): mismo caso. El propio ".bib-rating-num" que ya se
   agranda arriba para el resto del sitio (14.5px) se quedaba pisado por la regla sin
   media query de esta misma página (13→12.5px, sin comprobar viewport), porque al ser
   igual de específica gana la que carga después en el documento — el <style> propio de
   la página va después del <link> a este archivo. Repetirla aquí, ya con el selector de
   body más específico, es lo que la hace ganar de verdad en móvil. */
body.page-club-biblioteca .bib-intro{font-size:16.5px;}
body.page-club-biblioteca .bib-week-label{font-size:12.5px;}
body.page-club-biblioteca .bib-week-poll{font-size:16px;}
body.page-club-biblioteca .bib-week .voz-endlabels{font-size:11.5px;}
body.page-club-biblioteca .bib-exercise b{font-size:14.5px;}
body.page-club-biblioteca .bib-exercise p{font-size:15.5px;}
body.page-club-biblioteca .bib-rating-num{font-size:14.5px;}
body.page-club-biblioteca .bib-heart-item p{font-size:15.5px;}
body.page-club-biblioteca .bib-heart-date{font-size:12.5px;}

/* tarifas.html (móvil): pase "estilo Pulso" completo, igual que el resto de páginas
   de contenido. El párrafo de introducción del hero pasa de 18px (tamaño de un
   .section-head p normal) a un tamaño más protagonista, y las tarjetas de precio
   ganan aire interior para que cada bloque respire en pantalla estrecha. */
body.page-tarifas .tarifas-lead{font-size:20px;}
body.page-tarifas .tarifa-card{padding:30px 24px;}
body.page-tarifas .tarifa-top{flex-direction:column;align-items:flex-start;gap:10px;}
body.page-tarifas .tarifa-card h3{font-size:23px;}
body.page-tarifas .tarifa-precio{font-size:30px;}
body.page-tarifas .tarifa-sub{font-size:15px;}
body.page-tarifas .tarifa-line{font-size:16px;}
body.page-tarifas .tarifa-example{font-size:14.5px;}
body.page-tarifas .tarifa-nota{font-size:14px;}
body.page-tarifas .tarifas-cta p{font-size:17px;}

/* conoceme.html (móvil): el H1 del hero usa la clase .eyebrow (formato carta editorial),
   y se leía diminuto (12px→14.5px) frente al resto de la página. Solo se agranda el
   tamaño en móvil; se mantiene el mismo estilo (mayúsculas, Work Sans, color rosa) que
   ya tenía, sin cambiar la tipografía ni el tono visual. */
body.page-conoceme .page-hero h1.eyebrow{
  font-size:16px;
  line-height:1.5;
}
}