/* Landing The EasyWay · Nutriólogos EasyEats
   Celular primero. Marca: manual v1.2 y guía «Interfaz digital premium» v1.0 (Rafael).
   Referencia de estilo y movimiento: Feast Fit (DISEÑADOR GRAFICO PRO/referencias/). */

@font-face{font-family:'Instrument Sans';src:url('fuentes/InstrumentSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fuentes/InstrumentSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fuentes/InstrumentSans-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fuentes/InstrumentSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --papel:#FBFAF5;
  --blanco:#FFFFFF;
  --tinta:#04302A;
  --tinta-2:#3E5A54;
  --verde:#00806A;
  --verde-hover:#006E5B;
  --lima:#C6F24A;
  --neutro:#6B807B;
  --linea:rgba(4,48,42,.08);
  --sombra:0 1px 2px rgba(4,48,42,.04),0 12px 32px rgba(4,48,42,.07);
  --sombra-alta:0 2px 4px rgba(4,48,42,.05),0 24px 56px rgba(4,48,42,.12);
  --radio:24px;
  --margen:20px;
  --curva:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.6 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
b,strong{font-weight:600}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:6px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--tinta);color:var(--papel);text-decoration:none;font-weight:600}
.saltar:focus{top:12px}

/* ---------- Tipografía base ---------- */
.etiqueta{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--verde)}
h1{font-size:clamp(40px,10.6vw,68px);line-height:1.02;letter-spacing:-.035em;font-weight:700}
h2{font-size:clamp(30px,7.6vw,46px);line-height:1.08;letter-spacing:-.025em;font-weight:700}
h3{font-size:20px;line-height:1.25;letter-spacing:-.01em;font-weight:700}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;font-family:inherit;font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;text-align:center;transition:background .2s,transform .2s var(--curva),box-shadow .2s;-webkit-tap-highlight-color:transparent}
.boton:active{transform:scale(.98)}
.boton-principal{position:relative;background:var(--verde);color:#fff;box-shadow:0 10px 28px rgba(0,128,106,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.boton-principal:hover{background:var(--verde-hover)}
.boton-secundario{background:var(--blanco);color:var(--tinta);border:1px solid rgba(4,48,42,.14)}
.boton-secundario:hover{border-color:rgba(4,48,42,.32)}
.boton-claro{background:var(--papel);color:var(--tinta)}
.boton-chico{min-height:40px;padding:0 16px;font-size:14px;background:var(--blanco);border:1px solid rgba(4,48,42,.14)}
.icono{width:20px;height:20px;flex:none}
.acciones{display:flex;flex-direction:column;gap:12px}
.acciones .boton{width:100%}

/* ---------- Barra superior: píldora flotante ---------- */
.barra{position:fixed;z-index:50;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 10px 0 16px;border-radius:999px;background:rgba(251,250,245,.72);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid transparent;transition:box-shadow .3s,border-color .3s,background .3s}
.barra.con-sombra{background:rgba(255,255,255,.82);border-color:rgba(4,48,42,.06);box-shadow:0 2px 4px rgba(4,48,42,.03),0 12px 36px rgba(4,48,42,.08)}
.barra-marca{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.barra-marca img{width:104px;height:auto}
.barra-producto{display:none;padding-left:12px;border-left:1px solid rgba(4,48,42,.14);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.barra-nav{display:none}

/* ---------- Portada ---------- */
.portada{position:relative;display:grid;gap:40px;padding:108px var(--margen) 24px;overflow:hidden}
.portada-brillo{position:absolute;inset:auto -30% -10% -30%;height:70%;background:radial-gradient(closest-side,rgba(198,242,74,.24),rgba(198,242,74,0) 70%),radial-gradient(closest-side at 70% 60%,rgba(0,128,106,.12),rgba(0,128,106,0) 70%);filter:blur(20px);pointer-events:none}
.portada-texto{position:relative;display:grid;gap:18px}
.portada-texto h1{max-width:13ch}
.portada-sub{font-size:18px;line-height:1.55;color:var(--tinta-2);max-width:40ch}
.portada .acciones{margin-top:8px}
.datos-rapidos{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.datos-rapidos li{padding:7px 14px;border-radius:999px;background:var(--blanco);border:1px solid var(--linea);font-size:14px;color:var(--tinta-2)}
.datos-rapidos b{color:var(--tinta);font-weight:700}

.portada-visual{--wp:min(264px,70vw);--fuera:36px;position:relative;display:flex;justify-content:center;padding:6px 0 10px}
.portada-visual .telefono-portada{--w:var(--wp)}
.flotante{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra-alta);font-size:12.5px;line-height:1.3;max-width:230px}
.flotante b{display:block;font-weight:700;white-space:nowrap}
.flotante small{display:block;color:var(--tinta-2);font-size:12px}
.flotante-punto{flex:none;width:28px;height:28px;border-radius:9px;background:var(--verde);position:relative}
.flotante-punto::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700}
.flotante-izq{left:calc(50% - var(--wp)/2 - var(--fuera));bottom:17%}
.flotante-der{right:calc(50% - var(--wp)/2 - var(--fuera));bottom:3%;flex-direction:column;align-items:flex-start;gap:4px;min-width:140px}
.mini-barra{display:block;width:100%;height:6px;border-radius:6px;background:rgba(4,48,42,.08);overflow:hidden}
.mini-barra i{display:block;height:100%;border-radius:6px;background:var(--verde)}

/* ---------- Teléfono (pantallas hechas en HTML, se escalan con --w) ---------- */
.telefono{--w:240px;position:relative;display:block;flex:none;width:var(--w);aspect-ratio:390/844;padding:calc(var(--w)*.03);border-radius:calc(var(--w)*.16);background:#0E1715;box-shadow:inset 0 0 0 1.5px #2C3A37,0 28px 60px rgba(4,48,42,.2),0 8px 18px rgba(4,48,42,.08);text-decoration:none;color:var(--tinta)}
.telefono::before{content:'';position:absolute;z-index:3;top:calc(var(--w)*.05);left:50%;width:calc(var(--w)*.29);height:calc(var(--w)*.083);border-radius:999px;background:#0E1715;transform:translateX(-50%)}
.pantalla{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--w)*.13);background:var(--papel);font-size:calc(var(--w)*18/390);line-height:1.35;padding:0 1em}
.estado{display:flex;justify-content:space-between;align-items:center;height:3.3em;padding:0 .9em;font-size:.85em;font-weight:700}
.estado i{width:2.4em;height:.85em;border-radius:.25em;border:1.5px solid currentColor;opacity:.8}
.app-cabeza{display:flex;justify-content:space-between;align-items:center;margin:.3em 0 .8em}
.app-cabeza img{width:6.4em}
.avatar{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--verde);color:#fff;font-size:.9em;font-weight:700}
.app-pestanas{display:flex;gap:.25em;padding:.25em;margin-bottom:1em;border:1px solid rgba(4,48,42,.12);border-radius:999px;font-size:.82em}
.app-pestanas b,.app-pestanas span{flex:1;padding:.55em 0;border-radius:999px;text-align:center}
.app-pestanas b{background:var(--tinta);color:var(--papel)}
.app-eyebrow{font-size:.66em;font-weight:700;letter-spacing:.14em;color:var(--verde)}
.app-eyebrow.lima{color:var(--lima)}
.app-titulo{margin:.25em 0 .35em;font-size:1.5em;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.app-texto{font-size:.85em;color:var(--tinta-2)}
.app-grande{margin:.2em 0;font-size:1.3em;font-weight:700;letter-spacing:-.01em}
.app-sub{margin:.2em 0 .4em;font-size:1.05em;font-weight:700}
.app-volver{margin:.4em 0 1em;font-size:.8em;font-weight:600;color:var(--tinta-2)}
.app-tarjeta{margin-top:.8em;padding:1em 1.05em;border-radius:1.15em;background:var(--blanco);border:1px solid var(--linea);box-shadow:0 .5em 1.4em rgba(4,48,42,.06)}
.app-tarjeta-tinta{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.app-tarjeta-tinta .app-texto{color:rgba(251,250,245,.78)}
.app-lista li{display:flex;align-items:center;gap:.6em;padding:.5em 0;border-top:1px solid var(--linea);font-size:.82em}
.app-lista i{flex:none;display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:.4em;border:1.5px solid #8fa89b;font-style:normal;font-size:.85em;color:#fff}
.app-lista .hecho{color:var(--neutro);text-decoration:line-through}
.app-lista .hecho i{background:var(--verde);border-color:var(--verde)}
.app-boton-linea{display:flex;justify-content:space-between;gap:.6em;padding:.7em .9em;border-radius:.8em;background:var(--papel);font-size:.8em;font-weight:600}
.app-boton-linea b{color:var(--verde)}

.matriz{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.cuadrante{display:flex;flex-direction:column;gap:.35em;min-height:6.6em;padding:.75em;border-radius:1em;background:var(--blanco);border:1px solid var(--linea)}
.cuadrante small{font-size:.66em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.cuadrante span{align-self:flex-start;padding:.3em .6em;border-radius:999px;background:var(--papel);font-size:.72em;font-weight:600;line-height:1.25}
.cuadrante.q0{background:var(--tinta);border-color:var(--tinta)}
.cuadrante.q0 small{color:var(--lima)}
.cuadrante.q0 span{background:rgba(251,250,245,.12);color:var(--papel)}
.tramos li{display:flex;align-items:center;gap:.7em;padding:.45em 0;font-size:.85em;font-weight:600;line-height:1.25}
.tramos small{display:block;font-weight:500;font-size:.85em;color:var(--tinta-2)}
.tramos b{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:var(--papel);border:1px solid var(--linea);font-size:.85em}

.avance{display:flex;align-items:center;gap:.7em;margin:.2em 0 1em}
.avance span{flex:1;height:.5em;border-radius:1em;background:rgba(4,48,42,.08);overflow:hidden}
.avance i{display:block;height:100%;border-radius:1em;background:var(--verde)}
.avance small{font-size:.75em;font-weight:700}
.ruta li{display:flex;align-items:center;gap:.7em;padding:.62em .7em;margin-bottom:.35em;border-radius:.9em;font-size:.82em;font-weight:600;background:var(--blanco);border:1px solid var(--linea)}
.ruta b{flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;border:1px dashed var(--neutro);font-size:.85em;color:var(--tinta-2)}
.ruta .hecha{opacity:.55}
.ruta .hecha b{background:var(--verde);border:0;color:#fff}
.ruta .siguiente{border:1.5px solid var(--verde);box-shadow:0 .4em 1.2em rgba(0,128,106,.14)}
.ruta .siguiente b{background:var(--lima);border:0;color:var(--tinta)}
.ruta .siguiente small{display:block;font-size:.85em;font-weight:500;color:var(--verde)}
.comentario{margin-top:.8em;padding:.8em .9em;border-radius:1em 1em 1em .3em;background:#EAF3EE;font-size:.8em;line-height:1.4}
.comentario small{display:block;font-size:.8em;font-weight:700;color:var(--verde)}


.cuerpo-datos{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.cuerpo-datos div{padding:.75em .85em;border-radius:1em;background:var(--blanco);border:1px solid var(--linea)}
.cuerpo-datos small{display:block;font-size:.66em;color:var(--tinta-2)}
.cuerpo-datos b{font-size:1.15em;font-variant-numeric:tabular-nums}

/* Barras izquierda/derecha de calidad muscular (Skulpt). --izq y --der van de 0 a 1. */
.calidad{display:grid;gap:.55em;margin-top:.5em}
.calidad div{display:grid;grid-template-columns:5.6em 1fr 3.4em;align-items:center;gap:.5em;font-size:.78em}
.calidad span{font-weight:600}
.calidad small{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.calidad i,.barras-mini i{position:relative;display:block;height:.55em;border-radius:1em;background:rgba(4,48,42,.07)}
.calidad i::before,.calidad i::after,.barras-mini i::before,.barras-mini i::after{content:'';position:absolute;top:0;bottom:0;border-radius:1em;transition:transform 1s var(--curva)}
.calidad i::before,.barras-mini i::before{right:50%;width:calc(var(--izq)*50%);background:var(--verde);transform-origin:right}
.calidad i::after,.barras-mini i::after{left:50%;width:calc(var(--der)*50%);background:#58A896;transform-origin:left}
.calidad .asimetria span::after{content:' •';color:#B88A00}
.calidad .asimetria i{box-shadow:0 0 0 2px rgba(198,242,74,.9)}
html.js .tarjeta:not(.visible) .barras-mini i::before,html.js .tarjeta:not(.visible) .barras-mini i::after{transform:scaleX(0)}

.pantalla-avena{display:flex;flex-direction:column;background:linear-gradient(180deg,#F3F1EA,#ECEAE2)}

/* ---------- Secciones ---------- */
.seccion{padding:72px var(--margen)}
.seccion-cabeza{display:grid;gap:12px;margin-bottom:36px;max-width:640px}
.seccion-cabeza>p:not(.etiqueta){font-size:18px;color:var(--tinta-2)}

/* Cómo funciona */
.pasos{position:relative;display:grid;gap:14px;counter-reset:paso}
.pasos::before{content:'';position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px;background:rgba(4,48,42,.08)}
.pasos::after{content:'';position:absolute;left:21px;top:22px;width:2px;height:calc((100% - 44px)*var(--avance,0));border-radius:2px;background:var(--verde);transition:height .2s linear}
.paso{position:relative;z-index:1;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.paso-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra);font-size:20px;font-weight:700;color:var(--verde)}
.paso>div{padding:18px 20px;border-radius:var(--radio);background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra)}
.paso p{margin-top:6px;color:var(--tinta-2);font-size:16px}
.paso small{display:block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--verde);line-height:1.45}
.trayecto{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.trayecto li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.trayecto li+li::before{content:'→';color:var(--neutro);font-weight:400}
.trayecto li:nth-child(4){padding:5px 12px;border-radius:999px;background:var(--lima)}

/* Qué incluye */
.destacados{display:grid;gap:16px}
.tarjeta{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--radio);background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra);transition:box-shadow .3s,transform .3s var(--curva)}
.tarjeta h3{font-size:22px}
.tarjeta>p:not(.tag):not(.tarjeta-kicker){color:var(--tinta-2);font-size:16px}
.tarjeta-destacada{padding:26px 22px 22px}
.tag{align-self:flex-start;padding:5px 11px;border-radius:999px;background:var(--lima);color:var(--tinta);font-size:12px;font-weight:700}
.tarjeta-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--verde)}
.tarjeta-abrir{margin-top:auto;padding-top:6px;font-weight:700;font-size:15px;color:var(--verde);text-decoration:none}
.tarjeta-abrir::after{content:'';position:absolute;inset:0;border-radius:inherit}
.tarjeta-abrir:focus-visible{outline:0}
.tarjeta:has(.tarjeta-abrir:focus-visible){outline:3px solid var(--verde);outline-offset:3px}
.parametros-mini{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.parametros-mini li{padding:5px 10px;border-radius:999px;background:var(--papel);border:1px solid var(--linea);font-size:13px;font-weight:600}
.barras-mini{display:grid;gap:10px;margin:6px 0;font-size:16px}
.barras-mini div{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:10px;font-size:13px;font-weight:600}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.rejilla .tarjeta{padding:18px 16px;gap:6px}
.rejilla .tarjeta h3{font-size:17px}
.rejilla .tarjeta>p:not(.tarjeta-kicker){font-size:14px;line-height:1.45}
.rejilla .tarjeta-abrir{font-size:14px}
.tarjeta-ancha{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;text-decoration:none;background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.tarjeta-ancha strong{display:block;margin-top:4px;font-size:17px;line-height:1.3}
.tarjeta-ancha .tarjeta-kicker{color:var(--lima)}
.tarjeta-ancha-ir{flex:none;font-size:14px;font-weight:700;color:var(--lima)}

/* Mi EasyWay: carrusel en celular, teléfono fijo en escritorio */
.seccion-app{padding-left:0;padding-right:0}
.seccion-app .seccion-cabeza{padding:0 var(--margen)}
.app-pasos{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--margen);padding:8px var(--margen) 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.app-pasos::-webkit-scrollbar{display:none}
.app-pasos:focus-visible{outline-offset:-3px}
.app-paso{flex:0 0 min(78vw,300px);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:18px}
.app-paso .telefono{--w:min(66vw,250px)}
.app-paso-texto{text-align:center;max-width:280px}
.app-paso-texto p{margin-top:6px;font-size:15px;color:var(--tinta-2)}
.app-puntos{display:flex;justify-content:center;gap:8px}
.app-puntos button{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:rgba(4,48,42,.18);transition:width .3s var(--curva),background .3s}
.app-puntos button[aria-current=true]{width:24px;background:var(--verde)}
.app-fijo{display:none}

/* Dónde te atendemos: el único vidrio de la página, sobre la foto */
.lugar{position:relative;padding:0 var(--margen) 24px}
.lugar-foto{height:280px;border-radius:var(--radio);background:#5E5A55 url('img/consultorio-movil.jpg') 30% 70%/cover no-repeat}
.lugar-tarjeta{position:relative;margin:-56px 12px 0;padding:24px 22px;border-radius:26px;display:grid;gap:12px}
.vidrio{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 20px 50px rgba(4,48,42,.14)}
.precio{font-size:52px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.precio-unidad{display:block;font-size:17px;font-weight:600;letter-spacing:0;color:var(--tinta)}
.lugar-tarjeta .etiqueta{color:var(--tinta)}
.lugar-lista{display:grid;gap:8px;font-size:16px}
.lugar-lista li{position:relative;padding-left:20px}
.lugar-lista li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--verde)}
.lugar-lista li:last-child{color:var(--tinta-2);font-size:14px}
.lugar-lista li:last-child::before{background:var(--lima)}
.lugar .acciones{margin-top:6px}

/* Reseñas */
.resenas-tarjeta{display:grid;gap:12px;padding:28px 22px;border-radius:var(--radio);background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra)}
.resenas-tarjeta p:not(.etiqueta){color:var(--tinta-2)}
.resenas-tarjeta .boton{margin-top:6px}

/* Preguntas */
.preguntas{display:grid;gap:10px;max-width:760px}
.preguntas details{border-radius:20px;background:var(--blanco);border:1px solid var(--linea);box-shadow:0 1px 2px rgba(4,48,42,.03)}
.preguntas summary{position:relative;list-style:none;padding:18px 52px 18px 20px;min-height:56px;font-weight:600;font-size:17px;line-height:1.35;cursor:pointer}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:'';position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(45deg);transition:transform .25s var(--curva)}
.preguntas details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.preguntas details p{padding:0 20px 20px;color:var(--tinta-2);font-size:16px}

/* Cierre y pie */
.cierre{padding:24px var(--margen) 72px}
.cierre-tarjeta{display:grid;gap:14px;padding:36px 24px;border-radius:32px;background:var(--tinta);color:var(--papel);text-align:center;position:relative;overflow:hidden}
.cierre-tarjeta::before{content:'';position:absolute;inset:-40% -20% auto;height:80%;background:radial-gradient(closest-side,rgba(198,242,74,.22),rgba(198,242,74,0));pointer-events:none}
.cierre-tarjeta>*{position:relative}
.cierre-tarjeta p{color:rgba(251,250,245,.8)}
.cierre .acciones{margin-top:8px}
.pie{display:grid;gap:8px;justify-items:center;padding:8px var(--margen) calc(110px + env(safe-area-inset-bottom));text-align:center;font-size:13px;color:var(--tinta-2)}
.pie img{width:104px;margin-bottom:6px}

/* Barra fija en celular */
.barra-flotante{position:fixed;z-index:40;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:8px;border-radius:999px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(4,48,42,.06);box-shadow:0 12px 36px rgba(4,48,42,.14);transition:transform .35s var(--curva),opacity .35s}
.barra-flotante[hidden]{display:grid;transform:translateY(140%);opacity:0;pointer-events:none;visibility:hidden}
.barra-flotante .boton{min-height:48px;padding:0 14px;font-size:15px;box-shadow:none}

/* ---------- Hoja de detalle (abajo en celular, centrada en escritorio) ---------- */
.hoja{position:fixed;inset:auto 0 0 0;width:100%;max-width:100%;max-height:88dvh;margin:0;padding:0;border:0;border-radius:28px 28px 0 0;background:var(--blanco);color:var(--tinta);box-shadow:0 -10px 50px rgba(4,48,42,.2);overflow:hidden}
.hoja[open]{display:flex;flex-direction:column;animation:hojaSube .38s var(--curva)}
.hoja.cerrando{animation:hojaBaja .26s ease-in forwards}
.hoja::backdrop{background:rgba(4,48,42,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hoja[open]::backdrop{animation:fondoAparece .3s ease}
.hoja-asa{flex:none;width:44px;height:5px;margin:10px auto 0;border-radius:5px;background:rgba(4,48,42,.18)}
.hoja-cerrar{position:absolute;z-index:2;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:var(--papel);color:var(--tinta);font-family:inherit;font-weight:400;font-size:26px;line-height:1;cursor:pointer}
.hoja-cuerpo{overflow-y:auto;overscroll-behavior:contain;padding:14px 22px calc(28px + env(safe-area-inset-bottom));display:grid;gap:14px;grid-auto-rows:max-content;align-content:start}
.hoja-cuerpo h2{font-size:28px;padding-right:44px}
.hoja-cuerpo h3{margin-top:8px;font-size:18px}
.hoja-cuerpo>p:not(.etiqueta){color:var(--tinta-2);font-size:16px}
.hoja-cuerpo .destacado{color:var(--tinta)!important;font-size:19px!important;font-weight:700}
.hoja-cuerpo .boton{margin-top:6px}
.parametros{display:grid;gap:8px}
.parametros div{padding:12px 14px;border-radius:16px;background:var(--papel)}
.parametros dt{font-weight:700;font-size:15px}
.parametros dd{font-size:14px;color:var(--tinta-2)}
.segmentos{display:flex;align-items:center;gap:20px;padding:16px;border-radius:18px;background:var(--papel)}
.figura{width:92px;flex:none}
.figura circle{fill:rgba(4,48,42,.14)}
.figura .seg{fill:var(--verde);opacity:.82}
.figura .seg:nth-child(3),.figura .seg:nth-child(4){fill:#58A896}
.segmentos ul{display:grid;gap:6px;font-size:15px;font-weight:600}
.nota{display:grid;gap:8px;padding:16px 18px;border-radius:18px;background:#F1F5F2;border-left:4px solid var(--verde);font-size:15px}
.nota p{color:var(--tinta-2)}
.nota-importante{background:#FBF7E8;border-left-color:#C9A227}
.lista-check{display:grid;gap:8px}
.lista-check li{position:relative;padding-left:28px;font-size:16px}
.lista-check li::before{content:'';position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:6px;background:var(--lima)}
.lista-check li::after{content:'';position:absolute;left:6px;top:.55em;width:5px;height:9px;border-right:2px solid var(--tinta);border-bottom:2px solid var(--tinta);transform:rotate(45deg)}
.ejemplo-calidad{padding:16px;border-radius:18px;background:var(--papel);font-size:17px}
.ejemplo-titulo{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.dx{display:grid;gap:10px}
.dx div{padding:14px 16px;border-radius:16px;background:var(--papel)}
.dx b{color:var(--verde)}
.dx p{margin-top:4px;font-size:15px;color:var(--tinta-2)}
.matriz-grande{font-size:16px}
.matriz-grande .cuadrante{min-height:auto}
.matriz-grande .cuadrante small{font-size:11px}
.matriz-grande .cuadrante span{font-size:14px;background:transparent;padding:0}
.tramos-grande{font-size:17px}
.agenda{display:grid;gap:6px}
.agenda li{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:14px;background:var(--papel);font-size:15px;font-weight:600}
.agenda small{flex:none;color:var(--verde);font-weight:700}

/* ---------- Movimiento al hacer scroll (solo si hay JavaScript) ---------- */
html.js .aparece{opacity:0;translate:0 18px;transition:opacity .8s var(--curva) calc(var(--i,0)*90ms),translate .8s var(--curva) calc(var(--i,0)*90ms),box-shadow .3s,transform .3s var(--curva)}
html.js .aparece.visible{opacity:1;translate:none}
/* La portada se anima solo con CSS: no espera al script, así no parpadea al cargar. */
.entra{animation:textoEntra .7s var(--curva) both;animation-delay:calc(var(--i,0)*80ms)}
.portada-visual .telefono{animation:telefonoEntra 1.1s var(--curva) .25s both}
.flotante-izq{animation:entraIzq .9s var(--curva) .9s both}
.flotante-der{animation:entraDer .9s var(--curva) 1.1s both}
@keyframes textoEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes telefonoEntra{from{opacity:0;transform:translateY(48px) scale(.96)}to{opacity:1;transform:none}}
@keyframes entraIzq{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes entraDer{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes hojaSube{from{transform:translateY(100%)}to{transform:none}}
@keyframes hojaBaja{to{transform:translateY(100%)}}
@keyframes fondoAparece{from{opacity:0}}
@keyframes hojaAparece{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes hojaDesaparece{to{opacity:0;transform:translateY(12px) scale(.98)}}

@media (hover:hover) and (pointer:fine){
  .tarjeta:hover{box-shadow:var(--sombra-alta);transform:translateY(-3px)}
  .boton-principal:hover{transform:translateY(-1px)}
}

/* ---------- Tableta ---------- */
@media (min-width:640px){
  :root{--margen:40px}
  .barra-producto{display:block}
  .acciones{flex-direction:row;flex-wrap:wrap}
  .acciones .boton{width:auto}
  .rejilla{grid-template-columns:repeat(4,1fr)}
  .lugar-foto{height:380px}
  .lugar-tarjeta{max-width:520px;margin:-90px auto 0}
  .cierre-tarjeta{padding:56px 40px}
  .cierre .acciones{justify-content:center}
}

/* ---------- Escritorio ---------- */
@media (min-width:960px){
  :root{--margen:max(48px,calc((100vw - 1180px)/2))}
  html{scroll-padding-top:100px}
  .barra{top:16px;left:50%;right:auto;width:min(1180px,calc(100vw - 48px));transform:translateX(-50%);height:64px;padding:0 12px 0 22px}
  .barra-nav{display:flex;gap:4px}
  .barra-nav a{padding:10px 14px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;color:var(--tinta-2);transition:background .2s,color .2s}
  .barra-nav a:hover{background:rgba(4,48,42,.05);color:var(--tinta)}
  .barra-marca img{width:118px}

  .portada{grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;min-height:min(100vh,900px);padding-top:120px;padding-bottom:80px}
  .portada-texto h1{max-width:12ch}
  .portada-sub{font-size:20px}
  .portada-visual{--wp:300px;--fuera:110px}
  .flotante{font-size:14px;max-width:230px;padding:12px 14px}

  .seccion{padding-top:120px;padding-bottom:120px}
  .seccion-cabeza{margin-bottom:56px}
  .seccion-cabeza>p:not(.etiqueta){font-size:20px}

  .pasos{grid-template-columns:repeat(3,1fr);gap:20px}
  .pasos::before,.pasos::after{display:none}
  .paso{grid-template-columns:1fr;gap:16px}
  .paso>div{padding:24px;min-height:100%}

  .destacados{grid-template-columns:1fr 1fr;gap:20px}
  .tarjeta-destacada{padding:32px}
  .tarjeta h3{font-size:26px}
  .rejilla{gap:20px;margin-top:20px}
  .rejilla .tarjeta{padding:24px}
  .rejilla .tarjeta h3{font-size:19px}
  .tarjeta-ancha{margin-top:20px;padding:24px 32px}

  /* Escena fijada: los textos avanzan y el teléfono cambia de pantalla */
  .seccion-app{padding-left:var(--margen);padding-right:var(--margen)}
  .seccion-app .seccion-cabeza{padding:0}
  .app-escena.con-fijo{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .app-escena.con-fijo .app-pasos{display:block;overflow:visible;padding:0}
  .app-escena.con-fijo .app-paso{display:flex;align-items:center;justify-content:center;min-height:80vh;max-width:none}
  .app-escena.con-fijo .app-paso .telefono{display:none}
  .app-escena.con-fijo .app-paso-texto{text-align:left;max-width:420px;padding:28px 30px;border-radius:var(--radio);background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra);opacity:.85;transform:scale(.97);transition:opacity .5s,transform .5s var(--curva),border-color .5s,box-shadow .5s}
  .app-escena.con-fijo .app-paso.activo .app-paso-texto{opacity:1;transform:none;border-color:rgba(0,128,106,.45);box-shadow:var(--sombra-alta)}
  .app-escena.con-fijo .app-paso-texto h3{font-size:26px}
  .app-escena.con-fijo .app-paso-texto p{font-size:18px}
  .app-escena.con-fijo .app-puntos{display:none}
  .app-escena.con-fijo .app-fijo{display:flex;justify-content:center;position:sticky;top:max(96px,calc(50vh - 290px));height:min(600px,calc(100vh - 120px));grid-row:1;grid-column:2}
  .app-fijo .telefono{--w:min(276px,calc((100vh - 130px)*390/844));position:absolute;top:0;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .55s var(--curva),transform .55s var(--curva)}
  .app-fijo .telefono.activo{opacity:1;transform:none}
  .app-fijo .telefono-enlace{pointer-events:none}
  .app-fijo .telefono-enlace.activo{pointer-events:auto}
  .app-escena:not(.con-fijo) .app-pasos{flex-wrap:wrap;justify-content:center;overflow:visible}

  .lugar{padding:40px var(--margen) 40px}
  .lugar-foto{height:600px;border-radius:32px;background-image:url('img/consultorio.jpg');background-position:50% 92%}
  .lugar-tarjeta{position:absolute;right:calc(var(--margen) + 48px);top:50%;transform:translateY(-50%);margin:0;max-width:430px;padding:32px}
  .precio{font-size:64px}

  .seccion-resenas{padding-top:80px;padding-bottom:40px}
  .resenas-tarjeta{grid-template-columns:1fr auto;align-items:center;padding:40px 44px}
  .resenas-tarjeta .etiqueta,.resenas-tarjeta h2,.resenas-tarjeta p{grid-column:1}
  .resenas-tarjeta .boton{grid-column:2;grid-row:1/4;margin:0}

  .cierre{padding-bottom:100px}
  .cierre-tarjeta{padding:80px 40px}
  .pie{padding-bottom:48px}
  .barra-flotante{display:none!important}

  .hoja{inset:0;margin:auto;width:min(640px,calc(100vw - 48px));max-height:min(86vh,820px);border-radius:28px}
  .hoja[open]{animation:hojaAparece .3s var(--curva)}
  .hoja.cerrando{animation:hojaDesaparece .2s ease-in forwards}
  .hoja-asa{display:none}
  .hoja-cuerpo{padding:36px 40px 40px}
}

/* El vidrio solo donde el navegador sí desenfoca; si no, tarjeta casi sólida */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  @media (min-width:960px){
    .vidrio{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
  }
}

/* Teléfonos chicos */
@media (max-width:360px){
  :root{--margen:16px}
  .barra-marca img{width:92px}
  .boton{padding:0 18px;font-size:15px}
  .portada-visual{--fuera:24px}
}

/* Reducir movimiento: todo aparece sin animación */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .aparece{opacity:1;translate:none}
}

html.js .hoja .calidad:not(.visible) i::before,html.js .hoja .calidad:not(.visible) i::after{transform:scaleX(0)}

/* Detalles añadidos tras la primera revisión en celular */
.sin-corte{white-space:nowrap}
.barras-nota{display:grid;grid-template-columns:88px 1fr 1fr;gap:0 10px;margin:0;font-size:11px;font-weight:600;color:var(--tinta-2)}
.barras-nota span:first-child{grid-column:2;text-align:right;padding-right:6px}
.barras-nota span:last-child{padding-left:6px}
.app-video{position:relative;margin:.6em 0 .5em;border-radius:1em;overflow:hidden;aspect-ratio:16/9;background:#E9E4DA}
.app-video img{width:100%;height:100%;object-fit:cover}
.app-video i{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;padding-left:.15em;border-radius:50%;background:rgba(251,250,245,.92);font-style:normal;font-size:.9em}
.app-video+.app-boton-linea,.app-boton-linea+.app-boton-linea{margin-top:.4em}
.app-mini{font-size:.72em;color:var(--tinta-2);margin-bottom:.3em}
.ranking li{display:flex;align-items:center;gap:.6em;padding:.45em 0;border-top:1px solid var(--linea);font-size:.8em}
.ranking b{width:1.2em;text-align:right;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.ranking span{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.ranking .yo{color:var(--verde);font-weight:700}
.ranking .yo b{color:var(--verde)}
.app-boton{padding:.85em;border-radius:999px;background:var(--tinta);color:var(--papel);text-align:center;font-weight:700;font-size:.85em}
.app-boton-claro{margin-top:.8em;background:var(--blanco);color:var(--tinta);border:1px solid rgba(4,48,42,.14)}

/* Correcciones de la revisión independiente (10 oct) */
@media (max-width:959px){html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
.hoja-cuerpo>.etiqueta{padding-right:52px}
.cierre-tarjeta :focus-visible{outline-color:var(--lima)}

/* Capturas reales: Skulpt (datos de Ricardo, con su permiso) y Avena (publicación de Instagram, plan inventado) */
.skulpt-capturas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 0}
.skulpt-capturas figure{margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:16px;background:#fff;border:1px solid var(--linea)}
.skulpt-capturas img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.skulpt-capturas-grandes figure{aspect-ratio:auto}
.skulpt-capturas-grandes img{height:auto;object-fit:initial}
.pie-captura{font-size:13px!important;color:var(--tinta-2)}
.pantalla-avena{padding:0;background:#fff}
.pantalla-avena img,.pantalla-avena video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pantalla-avena .avena-boton{position:absolute;left:1em;right:1em;bottom:1.4em;margin:0;box-shadow:0 .6em 1.6em rgba(4,48,42,.25)}
.skulpt-medios{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:330px;margin:4px 0 0}
.skulpt-medios video{grid-row:1/3;width:100%;height:100%;object-fit:cover;border-radius:16px;background:#2A2724}
.skulpt-medios figure{margin:0;min-height:0;overflow:hidden;border-radius:16px;background:#fff;border:1px solid var(--linea)}
.skulpt-medios img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.skulpt-video-hoja{display:block;width:min(100%,270px);aspect-ratio:9/14;object-fit:cover;justify-self:center;border-radius:20px;background:#2A2724}
@media (min-width:960px){.skulpt-medios{height:400px}}
.hoja-cuerpo:focus{outline:none}
.avena-capturas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.avena-capturas figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--linea);box-shadow:var(--sombra)}
.avena-capturas img{width:100%}
.avena-boton{display:block;padding:.85em;border-radius:999px;background:var(--tinta);color:var(--papel);text-align:center;font-weight:700;font-size:.85em}
/* Barra de estado propia encima de la grabación (tapa la hora y el punto rojo de «grabando») */
.pantalla-avena .estado-sobre{position:absolute;z-index:1;top:0;left:0;right:0;padding:0 1.6em;background:#F7F7F7}

/* Aprendes jugando: video real de sesiones con subtítulos que cambian */
.seccion-juegos{display:grid;gap:24px;grid-template-areas:"cabeza" "video" "lista" "nota"}
.juegos-cabeza{grid-area:cabeza;display:grid;gap:12px;max-width:560px}
.juegos-cabeza>p:not(.etiqueta){font-size:18px;color:var(--tinta-2)}
.juego-video{grid-area:video}
.juegos-lista{grid-area:lista}
.juegos-nota{grid-area:nota}
.juegos-lista{display:grid;gap:10px;max-width:560px}
.juegos-lista li{display:grid;gap:2px;padding:14px 16px;border-radius:18px;background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra)}
.juegos-lista b{font-size:16px}
.juegos-lista span{font-size:14.5px;line-height:1.45;color:var(--tinta-2)}
.juegos-nota{display:flex;gap:10px;align-items:baseline;max-width:560px;font-size:15px;color:var(--tinta-2)}
.juegos-nota::before{content:'';flex:none;width:10px;height:10px;border-radius:50%;background:var(--lima);transform:translateY(1px)}
.juego-video{position:relative;margin:0;justify-self:center;width:min(100%,340px);aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#2A2724;box-shadow:var(--sombra-alta)}
.juego-video video{display:block;width:100%;height:100%;object-fit:cover}
.vidrio-chip,.juego-subs li{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 30px rgba(4,48,42,.18)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vidrio-chip,.juego-subs li{background:rgba(255,255,255,.92)}}
.juego-chip{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em}
.juego-chip i{width:8px;height:8px;border-radius:50%;background:var(--verde);animation:latido 1.6s ease-in-out infinite}
.juego-subs{position:absolute;left:12px;right:12px;bottom:12px;height:72px;margin:0;padding:0;list-style:none}
.juego-subs li{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;border-radius:18px;font-size:15px;font-weight:700;line-height:1.3;opacity:0;transform:translateY(8px);transition:opacity .45s var(--curva),transform .45s var(--curva)}
.juego-subs li.activo,html:not(.js) .juego-subs li:first-child{opacity:1;transform:none}
.video-hoja{display:block;width:min(100%,270px);aspect-ratio:9/16;object-fit:cover;justify-self:center;border-radius:20px;background:#2A2724}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(0,128,106,.45)}50%{box-shadow:0 0 0 6px rgba(0,128,106,0)}}
@media (min-width:960px){
  .seccion-juegos{grid-template-columns:1fr auto;grid-template-areas:"cabeza video" "lista video" "nota video";align-content:center;gap:20px 72px}
  .juego-video{width:360px;align-self:center}
  .juegos-cabeza>p:not(.etiqueta){font-size:20px}
}