/* =======================================================================
   landing.css · piezas comunes de las variantes /v2 y /v3.
   Mismo sistema que estilo.css (Manual de marca v1): 16 / 20 y titulares
   34 · 30 · 26 · 22, teja solo en la acción principal, sin sombras ni
   degradados. Aquí solo hay lo que las variantes añaden.
   ======================================================================= */

/* --- hero con dos columnas (texto + pantalla) --------------------------- */
.hero{padding:48px 0 56px}
@media (min-width:900px){ .hero{padding:80px 0 96px} }
.hero-int{display:grid; gap:48px; align-items:center}
@media (min-width:900px){ .hero-int{grid-template-columns:1.15fr .85fr; gap:64px} }
.kicker{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--suave); margin:0 0 24px}
.kicker .rota{color:var(--bosque); display:inline-block; min-width:11.2ch; transition:opacity .35s ease}
.kicker .rota.fuera{opacity:0}
.hero h1{max-width:20ch}
.hero .linea{max-width:52ch; margin:0 0 32px}
.bajo-btn{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--suave); margin:16px 0 0}
.oscuro .bajo-btn,.verde .bajo-btn{color:#A8CFC0}
.sellos{display:flex; flex-wrap:wrap; gap:8px 20px; margin:32px 0 0; padding:0; list-style:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--suave)}
.sellos li{display:flex; align-items:center; gap:8px}
.sellos svg{width:16px; height:16px; color:var(--bosque)}

/* --- la pantalla de la app, dibujada (no captura) ------------------------ */
.movil{width:100%; max-width:340px; height:600px; overflow:hidden; margin:0 auto;
  border:1px solid var(--filete); border-radius:12px; background:var(--hueso); color:var(--noche);
  display:flex; flex-direction:column; text-align:left}
.m-top{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--filete); background:var(--papel)}
.m-lock{display:flex; align-items:center; gap:8px; font-family:var(--marca); font-weight:700;
  letter-spacing:.02em}
.m-lock svg{width:22px; height:22px}
.m-beta{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--teja);
  border:1px solid var(--teja); border-radius:99px; padding:1px 8px; margin-left:4px; font-weight:400}
.m-ava{width:32px; height:32px; border-radius:50%; background:#DCE7E2; color:var(--bosque);
  display:flex; align-items:center; justify-content:center; font-family:var(--marca); font-weight:600}
.m-cuerpo{padding:20px 16px; display:flex; flex-direction:column; gap:12px; flex:1; overflow:hidden}
.m-saludo{color:var(--suave); margin:0}
.m-valor{font-family:var(--marca); font-weight:700; font-size:26px; line-height:1.15; margin:0}
.m-valor em{font-style:normal; color:var(--bosque)}
.m-carril{background:var(--papel); border:1px solid var(--filete); border-radius:12px; padding:16px}
.m-et{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--suave); display:flex; align-items:center; gap:8px; margin:0 0 6px}
.m-punto{width:8px; height:8px; border-radius:50%; background:var(--teja); display:inline-block}
.m-tit{font-family:var(--marca); font-weight:600; margin:0 0 4px}
.m-txt{margin:0 0 8px; color:var(--suave)}
.m-acc{color:var(--bosque); font-weight:600}
.m-burbuja{border-radius:12px; padding:12px 14px; max-width:88%; margin:0}
.m-burbuja.guia{background:var(--papel); border:1px solid var(--filete)}
.m-burbuja.tu{background:#DCE7E2; align-self:flex-end}
.m-composer{margin-top:auto; border:1px solid var(--filete); border-radius:99px; padding:10px 16px;
  color:var(--suave); background:var(--papel)}
.m-hoja-tit{font-family:var(--marca); font-weight:700; font-size:22px; margin:0}
.m-caja{border:1px solid var(--filete); border-radius:12px; background:var(--papel); padding:14px 16px}
.movil-pie{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--suave); text-align:center; margin:12px 0 0}

/* fila de pantallas: carrusel en móvil, tres columnas en escritorio */
.pantallas{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,340px); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 24px 12px; margin:40px -24px 0;
  scrollbar-width:none}
.pantallas::-webkit-scrollbar{display:none}
.pantallas figure{margin:0; scroll-snap-align:center}
@media (min-width:1100px){ .pantallas{grid-auto-flow:row; grid-template-columns:repeat(3,1fr);
  overflow:visible; margin:40px 0 0; padding:0} }
.ejemplo{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--suave); margin:16px 0 0}

/* --- escenas que se pueden tocar ---------------------------------------- */
.escenas{display:grid; gap:12px; margin:32px 0 0}
@media (min-width:840px){ .escenas{grid-template-columns:1fr 1fr} }
.escena-b{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  text-align:left; background:var(--papel); border:1px solid var(--filete); border-radius:12px;
  padding:20px 24px; cursor:pointer; color:var(--noche); text-decoration:none;
  font-family:var(--cita); font-style:italic; font-size:20px; line-height:1.4; transition:border-color .15s}
.escena-b:hover{border-color:var(--bosque)}
.escena-b .fl{font-family:var(--ui); font-style:normal; color:var(--bosque); flex:0 0 auto}

/* --- lista de beneficios con filete doble ------------------------------- */
.cab-lista{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
  border-bottom:3px double var(--noche); padding-bottom:12px; margin:0 0 0}
.cab-lista h2{margin:0}
.cab-lista .meta{margin:0}
.cab-lista .meta::after{display:none}
.beneficios{border:1px solid var(--filete); border-top:0; border-radius:0 0 12px 12px; background:var(--papel)}
.beneficio{display:grid; grid-template-columns:32px 1fr; gap:20px; padding:28px 24px;
  border-top:1px solid var(--filete)}
.beneficio:first-child{border-top:0}
.beneficio .ico{width:32px; height:32px; color:var(--bosque)}
.beneficio h3{margin:0 0 8px}
.beneficio p{max-width:66ch}
.beneficio b{font-weight:600}
.beneficio.limite{background:var(--hueso)}

/* --- bloque de dos columnas: primer día + para quién -------------------- */
.dos-col{display:grid; gap:16px}
@media (min-width:900px){ .dos-col{grid-template-columns:1.5fr 1fr} }
.panel{border-radius:12px; padding:32px}
.panel.verde-p{background:var(--bosque); color:var(--hueso)}
.panel.verde-p .meta{color:#A8CFC0}
.panel.verde-p .meta::after{background:rgba(242,239,230,.22)}
.panel.claro-p{background:var(--papel); border:1px solid var(--filete)}
.linea-tiempo{margin:24px 0 0; padding:0; list-style:none}
.linea-tiempo li{display:grid; grid-template-columns:1fr; gap:4px; padding:16px 0;
  border-top:1px solid rgba(242,239,230,.22)}
@media (min-width:600px){ .linea-tiempo li{grid-template-columns:18ch 1fr; gap:16px} }
.linea-tiempo .cuando{font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:#A8CFC0; padding-top:3px}
.para{margin:0; padding:0; list-style:none}
.para li{padding:12px 0; border-top:1px solid var(--filete)}
.para li:first-child{border-top:0; padding-top:0}
.no-para{margin:20px 0 0; background:var(--hueso); border-radius:12px; padding:16px 20px; color:var(--suave)}

/* --- dudas (acordeón) --------------------------------------------------- */
.dudas{border-top:1px solid var(--filete); margin:32px 0 0; max-width:66ch}
.dudas details{border-bottom:1px solid var(--filete)}
.dudas summary{cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-family:var(--marca); font-weight:600}
.dudas summary::-webkit-details-marker{display:none}
.dudas summary::after{content:'+'; position:absolute; right:4px; top:18px; font-family:var(--ui);
  font-size:20px; color:var(--bosque)}
.dudas details[open] summary::after{content:'–'}
.dudas .resp{padding:0 0 20px}

/* --- barra fija inferior: solo cuando no hay otro botón teja a la vista -- */
.barra-fija{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--noche);
  color:var(--hueso); transform:translateY(110%); transition:transform .25s ease;
  padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px))}
.barra-fija.ver{transform:none}
.barra-fija .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.barra-fija p{margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#A8CFC0}
.barra-fija .btn{height:44px; flex:0 0 auto}
@media (max-width:420px){ .barra-fija p{display:none} .barra-fija .btn{width:100%} }

@media (prefers-reduced-motion:reduce){ .barra-fija{transition:none} }

/* --- pastilla BETA (uno de los tres sitios donde va la teja) ------------ */
.pastilla{display:inline-block; background:var(--teja); color:#FFFFFF; border-radius:99px;
  padding:5px 14px; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; margin:0 0 24px}
.pantallas .movil{height:520px}
.medio-caja{margin-top:56px; padding-top:40px; border-top:1px solid var(--filete)}


/* --- 26-sept · las pantallas dentro de un iPhone: que se lea como imagen, no como botones --- */
.movil{position:relative; border:10px solid var(--noche); border-radius:44px; padding-top:30px;
  pointer-events:none; user-select:none; -webkit-user-select:none}
.movil::before{content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:96px; height:26px; border-radius:99px; background:var(--noche); z-index:2}
.movil .m-top{border-top:0}
.pie-pantalla{max-width:340px; margin:14px auto 0; text-align:left}
.pie-pantalla b{font-family:var(--marca); font-weight:600; display:block; margin:0 0 4px}
.pie-pantalla p{margin:0; color:var(--suave)}
/* cualidades: una lista corta, no pasos */
.cualidades{display:grid; gap:0; border-top:1px solid var(--filete); margin:32px 0 0}
@media (min-width:720px){ .cualidades{grid-template-columns:1fr 1fr; column-gap:40px} }
.cualidades div{border-bottom:1px solid var(--filete); padding:16px 0}
.cualidades b{font-family:var(--marca); font-weight:600; display:block}
.cualidades span{color:var(--suave)}
.por-que{display:grid; gap:12px; margin:24px 0 0; padding:0; list-style:none}
@media (min-width:720px){ .por-que{grid-template-columns:repeat(3,1fr); gap:24px} }
.por-que li{border:1px solid var(--filete); border-radius:12px; background:var(--papel); padding:18px 20px}
.por-que b{font-family:var(--marca); font-weight:600; display:block; margin:0 0 4px}
.beneficio-banda{padding:64px 0}

/* =======================================================================
   30-sept · decisiones A (revisión del 29-sept). Portadas cortas: las tres
   usan ya este fichero (también `/`). Aquí va lo que antes vivía suelto en
   index.html y lo nuevo: la maqueta grande del Guía, «Qué hay dentro», el
   ejemplo de la pareja y las escenas compactas para quien llega de un post.
   ======================================================================= */

/* --- la maqueta del hero: grande, sin recortar, que se lea a 390 px ------ */
.maqueta{max-width:360px; margin:0 auto}
.maqueta .maq-et{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--suave); margin:0 0 12px; text-align:center}
.maqueta .movil{height:auto; max-width:360px}
.maqueta .ejemplo{text-align:center}
.que-hay{list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--filete)}
.que-hay li{border-bottom:1px solid var(--filete); padding:12px 0}
.que-hay b{font-family:var(--marca); font-weight:600}
.oscuro .que-hay,.oscuro .que-hay li{border-color:#2B3934}

/* --- el ejemplo de la pareja: el mismo hecho, dos perspectivas ---------- */
.diag{margin:40px 0 0}
.hecho{border:1px solid var(--filete); border-radius:12px; background:var(--papel); padding:20px 24px}
.hecho .et{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--suave); margin:0 0 6px}
.bifurca{position:relative; height:40px}
.bifurca i{position:absolute; background:var(--filete); display:block}
.bifurca .tronco{left:50%; top:0; width:1px; height:20px}
.bifurca .viga{left:25%; right:25%; top:20px; height:1px}
.bifurca .iz{left:25%; top:20px; width:1px; height:20px}
.bifurca .de{left:75%; top:20px; width:1px; height:20px}
@media (max-width:719px){ .bifurca{height:24px} .bifurca .viga,.bifurca .de{display:none}
  .bifurca .iz{left:50%; top:0; height:24px} }
.dos{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:720px){ .dos{grid-template-columns:1fr 1fr; gap:24px} }
.lectura{border:1px solid var(--filete); border-radius:12px; background:var(--papel); padding:24px}
.lectura .et{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--suave); margin:0 0 12px}
.lectura .frase{font-family:var(--cita); font-style:italic; font-size:20px; line-height:1.4; margin:0 0 16px}
.lectura dl{margin:0; border-top:1px solid var(--filete); padding-top:16px}
.lectura dt{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--suave)}
.lectura dd{margin:2px 0 12px}
.lectura dd:last-child{margin-bottom:0}
.lectura .lado{font-family:var(--marca); font-weight:600; font-size:16px; margin:0 0 14px; color:var(--suave)}
.lectura.nueva{border-color:var(--bosque)}
.lectura.nueva .lado{color:var(--bosque)}
.con-lo-tuyo{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bosque); margin:32px 0 -24px}
.oculto{display:none}

/* --- las escenas marcables de `/` (js/marcar.js) ------------------------ */
.marcables{border-top:1px solid var(--filete); margin:32px 0 0}
.marcable{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  text-align:left; background:none; border:0; border-bottom:1px solid var(--filete); padding:18px 0;
  color:inherit; cursor:pointer; font:inherit}
.marcable .escena{flex:1}
.marcable .tick{flex:0 0 auto; width:24px; height:24px; border:1.5px solid var(--filete); border-radius:99px;
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s}
.marcable:hover .tick{border-color:var(--bosque)}
.marcable[aria-pressed="true"] .tick{background:var(--bosque); border-color:var(--bosque)}
.marcable[aria-pressed="true"] .tick::after{content:''; width:9px; height:5px; border:2px solid #fff;
  border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg)}
.marcable[aria-pressed="true"] .escena{color:var(--bosque)}

/* --- quien llega de un post (D-R6, js/landing.js): las escenas suben al hero */
.escenas.compactas{gap:8px; margin:20px 0 0}
.escenas.compactas .escena-b{font-family:var(--ui); font-style:normal; font-size:16px; line-height:1.4;
  padding:12px 16px}
.hero .nota{margin:16px 0 0}