/* ENFFORMA PRO · sistema comercial de las landings de valoración (29 oct. 2026)
   Nació con /valoracion/individual/ («Tu agenda siempre se cruza») y lo comparten las demás landings rediseñadas.
   Va después de landing.css (que sigue dando el formulario, la FAQ, la barra y el pie).
   - Bandas: noche (marca) alternando con crema cálida y claro; composición asimétrica, sin rejillas de tarjetas.
   - Hero con video (.hero.ind, Individual): el video real es la pieza central (hero-video.js) y a su lado la agenda.
     Hero con foto (.hero.cf, DuoFit y siguientes): una foto real grande y su pieza propia (p. ej. «Dos agendas»).
     Las piezas entran desde la primera pintura y terminan en su estado completo; con movimiento reducido o sin
     animación, ese estado completo es lo único que se ve.
   - Movimiento: un sistema por nodo. CSS para entradas; ind-real.js para el marco del video y la línea de los pasos.
     Solo transform, opacity, clip-path y text-decoration-color. */
:root{--crema:#f4eee4;--crema2:#ebe3d5;--tierra:#5b4a37;--tinta3:#2a3640}

/* ---------- bandas ---------- */
.crema,.crema2{background:var(--crema);color:var(--tinta)}
.crema2{background:var(--crema2)}
.noche{background:var(--bg)}
.crema .eyebrow,.crema2 .eyebrow{color:#1f6b57}
.crema h2 em,.crema2 h2 em,.light h2 em{color:#1f6b57}
.crema p,.crema2 p{color:var(--tinta3)}
section h2{font-size:clamp(30px,7.4vw,52px)}

/* ---------- hero ---------- */
.hero.ind{min-height:auto;display:block;padding-bottom:12px}
.hero.ind .wrap{display:grid;gap:26px}
.hero.ind .tx{padding:22px 0 0;max-width:620px;gap:14px}
.hero.ind h1{font-size:clamp(34px,9.4vw,76px);line-height:1.03}
.hero.ind h1 em{display:block}
.hero.ind .escena{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:36px}
/* el marco del video: póster real del mismo clip; sin video, la foto 3:2 ocupa el marco (sin JS, movimiento reducido) */
.hero.ind .ph{position:relative;inset:auto;width:100%;max-width:none;aspect-ratio:4/5;max-height:none;border-radius:var(--r2);overflow:hidden;background:var(--ink);box-shadow:0 0 0 1px rgba(127,217,191,.22)}
.hero.ind .ph img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;animation:none}
.hero.ind .ph::after{display:none}
.hero-video .hero.ind .ph{aspect-ratio:9/16;width:min(100%,360px);justify-self:end;background:#0a1117 url(/landings/img/ind-video-poster.webp) center/cover no-repeat}
.hero-video .hero.ind .hv-video,.hero-video .hero.ind .ph img{object-fit:cover}
.hero.ind .hv-boton{top:auto;bottom:14px;right:14px}
/* «Un martes cualquiera» */
.agenda{margin:0;background:var(--crema);color:var(--tinta);border-radius:var(--r);padding:18px 18px 16px;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.agenda figcaption{font:700 15px var(--sora);margin-bottom:10px}
.agenda ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.agenda li{position:relative;display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:#fff;font-size:14.5px}
.agenda time{font:600 13px var(--mont);color:var(--tinta2)}
.agenda li.no span{color:#6b6257;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#b4553f}
.agenda li.si{background:var(--vd);color:#fff;font-weight:700}
.agenda li.si time{color:#dff6ee}
.agenda p{margin-top:10px;font-size:12.5px;color:#6b6257}
@media(min-width:900px){
  .hero.ind .wrap{grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:48px;align-items:center}
  .hero.ind .tx{padding:72px 0}
  .hero.ind h1{font-size:clamp(46px,4.3vw,62px)}
  .hero.ind .escena{grid-template-columns:minmax(0,1fr);padding:56px 0}
  .hero.ind .ph{aspect-ratio:4/5;width:100%}
  .hero-video .hero.ind .ph{width:340px;aspect-ratio:9/16;justify-self:end;margin-right:10px}
  /* la agenda se apoya sobre el borde izquierdo del video: la composición se lee como una sola escena */
  .hero-video .hero.ind .agenda{position:absolute;left:0;bottom:84px;width:300px;z-index:2}
}
@media(min-width:900px) and (max-width:1179px){.hero.ind .wrap{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:36px}.hero-video .hero.ind .ph{width:300px}.hero-video .hero.ind .agenda{width:260px}}
@media(max-width:899px){
  /* teléfono: el video a todo el ancho (4:5, sin cortar a la persona) y la agenda compacta sobre su franja inferior */
  .hero.ind .escena{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:28px}
  .hero-video .hero.ind .ph{width:100%;aspect-ratio:4/5;max-height:none;justify-self:stretch}
  .hero.ind .agenda{position:relative;z-index:2;width:calc(100% - 28px);justify-self:end;margin-top:-44px;padding:14px 14px 12px}
  .hero.ind .agenda ol{gap:6px}
  .hero.ind .agenda li{grid-template-columns:78px 1fr;gap:8px;padding:8px 10px;font-size:13.5px}
}

/* botón principal del hero: flecha que avanza al pasar o enfocar */
.hero.ind .cta .pill:not(.ghost)::after{content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease)}
.hero.ind .cta .pill:not(.ghost):focus-visible::after{transform:translateX(4px)}
@media(hover:hover) and (pointer:fine){.hero.ind .cta .pill:not(.ghost):hover::after{transform:translateX(4px)}}

/* ---------- «No te faltan ganas»: cinco cruces, el dolor tachado y la respuesta al lado ---------- */
.emp.crema{padding:72px 0}
.emp.crema .lead2{color:#1f6b57;font:700 17px var(--sora);margin-bottom:10px}
.emp.crema h2{color:var(--tinta);max-width:14ch}
.cruces{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}
.cruces li{display:grid;gap:6px;padding:20px 0;border-top:1px solid rgba(19,32,43,.14)}
.cruces b{font:800 20px var(--sora);color:var(--tinta)}
.cruces .dolor{color:#6b6257;font-size:16px}
.cruces .sol{color:var(--tinta);font-size:17px;font-weight:600;padding-left:22px;position:relative}
.cruces .sol::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:7px;border-radius:99px;background:var(--vd)}
@media(min-width:900px){
  .emp.crema .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
  .emp.crema .lead2,.emp.crema h2{grid-column:1}
  .emp.crema h2{position:sticky;top:96px}
  .cruces{grid-column:2;grid-row:1/span 2;margin:0}
  .cruces li{grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:24px 0}
  .cruces li:first-child{border-top:0}
}

/* ---------- comparación ---------- */
#comparar{padding:72px 0}
#comparar h2{color:var(--tinta);margin-top:14px;max-width:18ch}
.tabla{margin-top:32px;display:grid;border-radius:var(--r);overflow:hidden;background:#fff}
.tabla .fila{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tabla .fila>*{padding:14px 16px;font-size:15px}
.tabla .fila b{grid-column:1/-1;padding-bottom:0;font:700 14px var(--sora);color:#1f6b57}
.tabla .fila span:nth-of-type(1){color:#6b6257}
.tabla .fila span:nth-of-type(2),.tabla .fila>span[role=cell]:last-child{color:var(--tinta);font-weight:600;background:#eef7f3}
.tabla .fila+.fila{border-top:1px solid rgba(19,32,43,.08)}
.tabla .cab{display:none}
@media(min-width:760px){
  .tabla .fila{grid-template-columns:200px 1fr 1fr}
  .tabla .fila b{grid-column:auto;padding-bottom:14px}
  .tabla .fila>*{padding:18px 22px;font-size:16px}
  .tabla .cab{display:grid;background:var(--tinta);color:#fff}
  .tabla .cab>span{font:700 14px var(--sora);color:#fff!important;background:none!important}
  .tabla .cab>span:last-child{background:var(--vd)!important}
}

/* ---------- dónde entrenas: mosaico asimétrico de fotos reales ---------- */
#donde{padding:72px 0}
.donde-tx p{margin-top:16px;color:var(--tx2);font-size:var(--t-txt,17px);max-width:38em}
.donde-tx h2{margin-top:14px}
.mosaico{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:32px}
.mosaico figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.mosaico img{width:100%;height:100%;object-fit:cover}
.mosaico figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:99px;background:rgba(10,17,23,.78);color:#fff;font:600 13px var(--mont)}
.mosaico .m1{grid-column:1/-1;aspect-ratio:3/2}
.mosaico .m2{grid-column:1/4;aspect-ratio:1/1}
.mosaico .m3{grid-column:4/-1;aspect-ratio:1/1}
@media(min-width:900px){
  #donde .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:center}
  .mosaico{margin:0;grid-template-rows:240px 240px}
  .mosaico .m1{grid-column:1/5;grid-row:1/3;aspect-ratio:auto}
  .mosaico .m2{grid-column:5/7;grid-row:1;aspect-ratio:auto}
  .mosaico .m3{grid-column:5/7;grid-row:2;aspect-ratio:auto}
}

/* ---------- cómo funciona: cuatro pasos con línea de progreso (ind-real.js pone --t, --h y --p) ---------- */
.steps{--p:1;--t:17px;--h:0px}
.steps::before,.steps::after{content:"";position:absolute;left:27px;top:var(--t);height:var(--h);width:2px;border-radius:2px;pointer-events:none}
.steps::before{background:var(--lc)}
.steps::after{background:var(--vd);transform-origin:top;transform:scaleY(var(--p))}
.steps li{position:relative;z-index:1}
.steps b{transition:background-color .3s ease,color .3s ease}
.steps li.ok b{background:var(--vd);color:#fff}

/* ---------- lo que trabajamos ---------- */
#objetivos{padding:72px 0}
.obj-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.obj-tx h2{margin-top:14px}
.metas{margin:28px 0 0;display:grid;gap:0}
.metas div{padding:18px 0;border-top:1px solid var(--line)}
.metas dt{font:800 clamp(24px,5.6vw,34px) var(--sora);color:var(--txt)}
.metas dd{margin:6px 0 0;color:var(--tx2);font-size:16px}
.metas div:first-child dt{color:var(--mint)}
.obj-tx .nota{margin-top:18px;color:var(--mut);font-size:14px}
.obj-foto{margin:0;border-radius:var(--r2);overflow:hidden;aspect-ratio:4/5}
.obj-foto img{width:100%;height:100%;object-fit:cover}
.obj-foto figcaption{padding:12px 4px 0;color:var(--mut);font-size:14px}
.obj-foto{overflow:visible}.obj-foto img{border-radius:var(--r2)}
@media(min-width:900px){.obj-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}}

/* ---------- prueba: reseñas reales y el equipo ---------- */
#prueba{padding:72px 0}
.prueba-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.resena{margin:16px 0 0}
.resena .estrellas{color:#c98a1a;letter-spacing:2px;font-size:18px}
.resena blockquote{margin:10px 0 0;font:700 clamp(24px,5.4vw,36px)/1.22 var(--sora);color:var(--tinta);letter-spacing:-.01em}
.resena.peq blockquote{font-size:clamp(19px,4.2vw,24px)}
.resena figcaption{margin-top:12px;color:#6b6257;font-size:14px}
.resena figcaption b{color:var(--tinta)}
.resena+.resena{padding-top:24px;border-top:1px solid rgba(19,32,43,.14)}
.equipo figure{margin:0;border-radius:var(--r2);overflow:hidden;aspect-ratio:5/3}
.equipo img{width:100%;height:100%;object-fit:cover}
.equipo h3{margin-top:18px;font-size:24px;color:var(--tinta)}
.equipo h3 em{font-style:normal;color:#1f6b57}
.equipo p{margin-top:8px}
@media(min-width:900px){.prueba-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}}

/* ---------- objeciones antes del formulario ---------- */
#dudas{padding:72px 0}
#dudas h2{margin-top:14px;max-width:16ch}
.objeciones{margin-top:30px;display:grid;gap:0}
.objeciones>div{padding:20px 0;border-top:1px solid rgba(19,32,43,.14)}
.objeciones h3{font-size:19px;color:var(--tinta)}
.objeciones p{margin-top:8px;color:var(--tinta2);font-size:16px}
.objeciones a{color:#1f6b57;font-weight:700}
@media(min-width:900px){.objeciones{grid-template-columns:1fr 1fr;column-gap:56px}.objeciones>div:nth-child(2){border-top:1px solid rgba(19,32,43,.14)}}

/* ---------- entrada visible desde la primera pintura; con movimiento reducido no hay nada que esperar ---------- */
@media(prefers-reduced-motion:no-preference){
  .js .hero.ind .tx>*{animation:indSube .62s var(--ease) both}
  .js .hero.ind .tx>:nth-child(2){animation-delay:.06s}
  .js .hero.ind .tx>:nth-child(3){animation-delay:.12s}
  .js .hero.ind .tx>:nth-child(4){animation-delay:.18s}
  .js .hero.ind .tx>:nth-child(5){animation-delay:.24s}
  .js .hero.ind .ph{animation:indMarco .8s .1s var(--ease) both}
  .js .agenda{animation:indSube .6s .3s var(--ease) both}
  /* el día se cruza: cada compromiso se tacha y la sesión en casa entra al final */
  .js .agenda li.no span{animation:indTacha .35s var(--ease) both}
  .js .agenda li.no:nth-child(2) span{animation-delay:.9s}
  .js .agenda li.no:nth-child(3) span{animation-delay:1.1s}
  .js .agenda li.no:nth-child(4) span{animation-delay:1.3s}
  .js .agenda li.si{animation:indEncaja .6s 1.6s var(--ease) both}
  .js .im.rv-in img{transform:scale(1.06);transition:transform 1s var(--ease)}
  .js .im.rv-in.on img{transform:none}
}
@keyframes indSube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes indMarco{from{opacity:0;clip-path:inset(8% 0 0 0 round 28px)}to{opacity:1;clip-path:inset(0 round 0)}}
@keyframes indTacha{from{text-decoration-color:transparent;color:var(--tinta)}}
@keyframes indEncaja{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}

/* ======================= hero con foto (.hero.cf): DuoFit y siguientes ======================= */
.hero.cf{min-height:auto;display:block;padding-bottom:12px}
.hero.cf .wrap{display:grid;gap:26px}
.hero.cf .tx{margin:0;padding:22px 0 0;max-width:620px;gap:14px}
.hero.cf h1{font-size:clamp(34px,9.4vw,76px);line-height:1.03}
.hero.cf h1 em{display:block}
.hero.cf .escena{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end;padding-bottom:36px}
/* la foto real, grande y vertical; vida.js la asienta al recorrer (scale), la entrada es del marco (clip-path) */
.hero.cf .ph{position:relative;inset:auto;width:100%;aspect-ratio:4/5;max-height:none;border-radius:var(--r2);overflow:hidden;background:var(--ink)}
.hero.cf .ph::after{display:none}
.hero.cf .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;animation:none;transform-origin:50% 40%}
@media(min-width:900px){
  .hero.cf .wrap{grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:48px;align-items:center}
  .hero.cf .tx{padding:72px 0}
  .hero.cf h1{font-size:clamp(46px,4.3vw,62px)}
  .hero.cf .escena{display:block;padding:56px 0}
  .hero.cf .ph{width:380px;margin-left:auto}
  .hero.cf .agenda{position:absolute;left:0;bottom:84px;width:290px;z-index:2}
}
@media(min-width:900px) and (max-width:1179px){.hero.cf .wrap{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:36px}.hero.cf .ph{width:320px}.hero.cf .agenda{width:250px}}
@media(max-width:899px){
  .hero.cf .escena{grid-template-columns:minmax(0,1fr);gap:0}
  .hero.cf .ph{aspect-ratio:4/5}
  .hero.cf .agenda{position:relative;z-index:2;width:calc(100% - 28px);justify-self:end;margin-top:-44px}
}

/* «Dos agendas, una hora»: dos columnas que se tachan y la hora en común que encaja */
.agenda.dos .cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.agenda.dos ol{gap:6px}
.agenda.dos li{grid-template-columns:1fr;gap:2px;padding:8px 10px;font-size:13.5px}
.agenda.dos li.quien{background:none;padding:0 2px;font:700 12.5px var(--mont);color:var(--tinta2)}
.agenda .comun{margin-top:8px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--vd);color:#fff;font-weight:700;font-size:14.5px}
.agenda .comun time{font:600 13px var(--mont);color:#dff6ee}
.agenda .nota{margin-top:10px;font-size:12.5px;color:#6b6257}
@media(max-width:899px){.agenda.dos{padding:14px 12px 12px}.agenda .comun{grid-template-columns:auto 1fr}}

/* «Una sesión, dos planes» */
#dos-planes{padding:72px 0}
.dos-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.dos-tx h2{margin-top:14px}
.dos-tx>p{margin-top:16px;color:var(--tx2);font-size:var(--t-txt,17px);max-width:36em}
.planes-dos{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.planes-dos>div{display:grid;gap:6px;padding:18px;border-radius:var(--r);background:var(--bg2)}
.planes-dos>div:nth-child(2){background:var(--crema);color:var(--tinta)}
.planes-dos .quien{font:600 13px var(--mont);color:var(--mint)}
.planes-dos>div:nth-child(2) .quien{color:#1f6b57}
.planes-dos b{font:800 19px/1.15 var(--sora)}
.planes-dos span:last-child{font-size:15px;color:var(--tx2)}
.planes-dos>div:nth-child(2) span:last-child{color:var(--tinta3)}
.dos-tx .nota{margin-top:12px;color:var(--mut);font-size:13.5px}
.mosaico.dos-fotos{margin-top:0;grid-template-columns:repeat(6,minmax(0,1fr))}
.mosaico.dos-fotos .m1{grid-column:1/-1;aspect-ratio:3/2}
.mosaico.dos-fotos .m2{grid-column:3/-1;aspect-ratio:3/2;margin-top:-56px;border:6px solid var(--bg)}
@media(min-width:900px){.dos-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}.mosaico.dos-fotos{grid-template-rows:none}.mosaico.dos-fotos .m1{grid-row:auto}.mosaico.dos-fotos .m2{grid-row:auto}}

@media(prefers-reduced-motion:no-preference){
  .js .hero.cf .tx>*{animation:indSube .62s var(--ease) both}
  .js .hero.cf .tx>:nth-child(2){animation-delay:.06s}
  .js .hero.cf .tx>:nth-child(3){animation-delay:.12s}
  .js .hero.cf .tx>:nth-child(4){animation-delay:.18s}
  .js .hero.cf .tx>:nth-child(5){animation-delay:.24s}
  .js .hero.cf .ph{animation:indMarco .8s .1s var(--ease) both}
  .js .hero.cf .ph img{scale:1.05}
  .js .agenda .comun{animation:indEncaja .6s 1.6s var(--ease) both}
}
/* El texto y las fotos nunca quedan invisibles: en estas páginas la aparición al recorrer solo desplaza (landing.css
   también ocultaba con opacidad hasta que el observador marcara .on; si no lo marca, al volver atrás o con un fallo
   de JS, todo sigue a la vista). */
.js .rv-in{opacity:1}
@media(prefers-reduced-motion:no-preference){.js .rv-in:not(.on){transform:translateY(14px)}}

/* ======================= video propio con controles (DuoFit, Adulto mayor) =======================
   Sin reproducción automática ni sonido sin pedirlo: póster real, preload="none" y controles nativos. */
.vid-sec{padding:72px 0}
.vid-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.vid-real{margin:0}
.vid-real .marco{position:relative;aspect-ratio:9/16;width:min(100%,340px);margin-inline:auto;border-radius:var(--r2);overflow:hidden;background:var(--ink);box-shadow:0 30px 60px -32px rgba(0,0,0,.6)}
.vid-real video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid-real figcaption{margin-top:12px;text-align:center;font-size:13.5px;color:#6b6257}
.noche .vid-real figcaption{color:var(--mut)}
.vid-tx h2{margin-top:14px}
.vid-tx p{margin-top:14px;max-width:34em}
.vid-tx .pill{margin-top:22px}
.crema .vid-tx h2{color:var(--tinta)}
@media(min-width:900px){.vid-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}.vid-real .marco{width:360px}}

/* ======================= Adulto mayor ======================= */
/* «Lo que se practica en casa»: cuatro gestos que se marcan uno a uno */
.agenda.cotidiano li{grid-template-columns:24px 1fr;gap:10px;font-weight:600}
.agenda.cotidiano li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--vd) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3L15 7'/%3E%3C/svg%3E") center/14px no-repeat}
@media(max-width:899px){.agenda.cotidiano li{grid-template-columns:24px 1fr;font-size:14px}}
/* testimonio: placa de marca y botón al video publicado (sin incrustar nada de terceros) */
#testimonio-am{padding:72px 0}
.testi-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.testi-grid h2{margin-top:14px}
.testi-grid p{margin-top:14px;color:var(--tx2);max-width:34em}
.testi-grid .testi-ir{margin-top:22px}
.testi-grid .nota{font-size:13.5px;color:var(--mut)}
.vid-tx .nota{margin-top:12px;font-size:13.5px;color:var(--mut)}
.noche .vid-tx p{color:var(--tx2)}
.vid-tx .testi-ir{margin-top:18px}
.testi-placa{margin:0;position:relative;aspect-ratio:9/12;max-width:360px;border-radius:var(--r2);background:linear-gradient(160deg,var(--pt,#2d5754),var(--bg2));display:grid;place-items:center;align-content:center;gap:10px;overflow:hidden;isolation:isolate}
.testi-placa::before{content:"";position:absolute;z-index:-1;width:70%;height:18%;right:-12%;top:14%;border-radius:99px;background:var(--vd);transform:rotate(-14deg)}
.testi-placa .play{width:76px;height:76px;border-radius:50%;background:var(--crema);display:grid;place-items:center}
.testi-placa .play::before{content:"";border-left:22px solid var(--tinta);border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.testi-placa .t{font:800 22px var(--sora);color:#fff}
.testi-placa .d{font-size:14px;color:var(--tx2)}
@media(min-width:900px){.testi-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px}.testi-placa{justify-self:end;width:100%}}
@media(prefers-reduced-motion:no-preference){
  .js .agenda.cotidiano li{animation:indEncaja .5s var(--ease) both}
  .js .agenda.cotidiano li:nth-child(1){animation-delay:.7s}
  .js .agenda.cotidiano li:nth-child(2){animation-delay:.9s}
  .js .agenda.cotidiano li:nth-child(3){animation-delay:1.1s}
  .js .agenda.cotidiano li:nth-child(4){animation-delay:1.3s}
}
@media(min-width:900px){
  /* en Adulto mayor la persona está a la izquierda de la foto: la tarjeta va abajo a la derecha */
  .hero.am .ph{margin-left:0;margin-right:auto}
  .hero.cf.am .escena{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
  .hero.cf.am .agenda{position:relative;left:auto;right:auto;bottom:auto;width:300px;margin:-36px 0 0 220px}
  .cruces.dos-voces li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:8px}
  .cruces.dos-voces li b{grid-column:1/-1}
@media(min-width:900px){
  /* DuoFit: las caras están en la mitad inferior de la foto; la tarjeta va debajo y solo pisa el borde inferior */
  .hero.cf.duo .escena{display:grid;grid-template-columns:minmax(0,1fr);justify-items:end}
  .hero.cf.duo .agenda{position:relative;left:auto;right:auto;bottom:auto;width:320px;margin:-36px 24px 0 0}
}

/* ======================= Online (.hero.onl.cm) ======================= */
.hero.onl.cm .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.hero.onl.cm .tx{padding:22px 0 0;gap:14px}
.hero.onl.cm h1{font-size:clamp(34px,9.4vw,76px);line-height:1.03}
.hero.onl.cm h1 em{display:block}
.hero.onl.cm .foto{margin:0;max-width:none;position:relative}
.hero.onl.cm .foto img{aspect-ratio:3/4;border:0;border-radius:var(--r2)}
.hero.onl.cm .foto figcaption{position:absolute;left:12px;top:12px;margin:0;padding:6px 12px;border-radius:99px;background:rgba(10,17,23,.78);color:#fff;font:600 13px var(--mont);max-width:calc(100% - 24px)}
.llamada{position:relative;z-index:2;width:calc(100% - 28px);justify-self:end;margin:-56px 0 36px;background:var(--crema);color:var(--tinta);border-radius:var(--r);padding:16px 16px 12px;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.llamada .vivo{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--mont);color:#1f6b57}
.llamada .vivo::before{content:"";width:9px;height:9px;border-radius:50%;background:#d9443a;box-shadow:0 0 0 4px rgba(217,68,58,.18)}
.llamada ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.llamada li{display:grid;gap:2px;padding:9px 12px;border-radius:12px;background:#fff;font-size:14px}
.llamada li b{font:700 14px var(--sora)}
.llamada li span{color:var(--tinta2)}
.llamada .nota{margin-top:8px;font-size:12.5px;color:#6b6257}
@media(min-width:900px){
  .hero.onl.cm .wrap{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px;align-items:center}
  .hero.onl.cm .tx{padding:72px 0}
  .hero.onl.cm h1{font-size:clamp(46px,4.3vw,62px)}
  .hero.onl.cm .foto{grid-column:2;grid-row:1;width:380px;justify-self:end;margin:56px 0}
  .hero.onl.cm .foto{margin-right:40px}
  .hero.onl.cm .llamada{grid-column:2;grid-row:1;align-self:end;justify-self:end;width:270px;margin:0 0 16px}
}
@media(prefers-reduced-motion:no-preference){
  .js .hero.onl.cm .tx>*{animation:indSube .62s var(--ease) both}
  .js .hero.onl.cm .tx>:nth-child(2){animation-delay:.06s}
  .js .hero.onl.cm .tx>:nth-child(3){animation-delay:.12s}
  .js .hero.onl.cm .tx>:nth-child(4){animation-delay:.18s}
  .js .hero.onl.cm .foto img{animation:indMarco .8s .1s var(--ease) both}
  .js .llamada{animation:indSube .6s .3s var(--ease) both}
  .js .llamada li{animation:indEncaja .5s var(--ease) both}
  .js .llamada li:nth-child(1){animation-delay:.8s}.js .llamada li:nth-child(2){animation-delay:1.05s}.js .llamada li:nth-child(3){animation-delay:1.3s}
}
/* «Una persona, un coach» en la banda cálida */
.intro.crema{padding:64px 0}
.intro.crema h2{color:var(--tinta)}
.intro.crema .lead2{color:#1f6b57}
.intro.crema p,.intro.crema li{color:var(--tinta3)}
.intro.crema b{color:var(--tinta)}

/* ======================= Kids y Pre/posparto: imagen de apoyo ======================= */
.hero.cf .apoyo{position:absolute;left:12px;top:12px;z-index:2;padding:5px 11px;border-radius:99px;background:rgba(10,17,23,.72);color:#fff;font:600 12px var(--mont)}
.hero.cf.kids .ph{aspect-ratio:4/3}
.hero.cf.kids .ph img{object-position:52% 50%}
.hero.cf.pp .ph img{object-position:64% 50%}
@media(min-width:900px){.hero.cf.kids .ph{width:500px}.hero.cf.kids .wrap{grid-template-columns:minmax(0,1fr) minmax(0,520px)}}
.agenda.cotidiano li:only-child{grid-column:1/-1}
@media(min-width:900px){
  /* Kids y Pre/posparto: las personas llenan el cuadro; la tarjeta va debajo y solo pisa el borde inferior (el suelo) */
  .hero.cf.kids .escena,.hero.cf.pp .escena{display:grid;grid-template-columns:minmax(0,1fr);justify-items:end}
  .hero.cf.kids .agenda,.hero.cf.pp .agenda{position:relative;left:auto;right:auto;bottom:auto;width:300px;margin:-36px 24px 0 0}
  .hero.cf.pp .ph{width:360px}
}
/* «Lo que incluye» (Adulto mayor): bloque positivo en lugar de comparar con otras clases */
#incluye{padding:72px 0}
#incluye h2{margin-top:14px;color:var(--tinta);max-width:18ch}
.incluye{margin:30px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.incluye div{padding:20px;border-radius:var(--r);background:#fff}
.incluye dt{font:800 19px var(--sora);color:var(--tinta)}
.incluye dt::before{content:"";display:block;width:28px;height:10px;border-radius:99px;background:var(--vd);margin-bottom:12px}
.incluye dd{margin:8px 0 0;color:var(--tinta3);font-size:16px}
@media(min-width:760px){.incluye{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.incluye{grid-template-columns:repeat(4,minmax(0,1fr))}}