/* Landing narrativa de Barber Turno. Estilos exclusivos de la portada: no alteran
 * reservas ni paneles. Siempre oscura: la ruta fija data-tema="oscuro" y los tokens
 * --t-* ya son la paleta de marca (fondo #0f1115, tarjeta #17191f, oro #dfa441).
 *
 * Mobile first. El orden del DOM es el orden de lectura (título, texto, globos, pasos,
 * figura); en pantallas anchas el grid acomoda la figura al costado.
 * La animación es progresiva: sin JavaScript todo se ve; con JavaScript, portada.js
 * agrega .js-escenas al <html> y cada escena entra al aparecer su título. El apagado
 * por prefers-reduced-motion ya lo hace app.css para todo el sitio. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap;
}

body[data-vista="portada"] { --portada-dorado: #efcc82; --portada-oro: #dfa441; overflow-x: clip; }
[data-vista="portada"] main.contenedor { width: 100%; max-width: none; padding: 0 !important; }
[data-vista="portada"] section[id] { scroll-margin-top: 84px; }
[data-vista="portada"] h1, [data-vista="portada"] h2, .portada-kicker, [data-vista="portada"] .btn {
  font-family: "Montserrat", Bahnschrift, var(--fuente);
}

/* ------------------------------------------------------------- cabecera */
.portada-saltar { position: fixed; top: -100px; left: 20px; z-index: 200; padding: 12px 20px; background: var(--t-tarjeta); color: var(--t-texto); }
.portada-saltar:focus { top: 12px; }
.portada-cabecera .contenedor { max-width: 1208px; height: 80px; justify-content: space-between; }
.portada-cabecera .marca { flex-shrink: 0; }
.portada-nav { display: flex; align-items: center; gap: 28px; font-size: .85rem; font-weight: 600; }
.portada-nav a:not(.btn) { color: var(--t-suave); }
.portada-nav .btn { min-height: 42px; padding: 10px 16px; }

/* ---------------------------------------------------------------- textos */
.portada-kicker { font-size: .69rem; font-weight: 700; letter-spacing: .16em; line-height: 1.8; color: var(--portada-dorado); margin: 0 0 14px; text-transform: uppercase; }
.portada-kicker > span { display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--portada-dorado); border-radius: 50%; vertical-align: middle; }
[data-vista="portada"] h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 18px; text-wrap: balance; }
[data-vista="portada"] h3 { letter-spacing: -.02em; }
.escena-texto p:not(.globo) { color: var(--t-suave); font-size: 1rem; line-height: 1.75; margin: 0 0 14px; max-width: 54ch; }
.leyenda { font-size: .74rem; line-height: 1.5; color: var(--t-tenue); margin: 12px 0 0; text-align: center; }
.leyenda-centrada { margin-top: 26px; }

/* ---------------------------------------------------------------- escenas */
.escena { position: relative; width: min(100% - 40px, 1160px); margin-inline: auto; padding-block: 56px; display: flex; flex-direction: column; gap: 22px; }
.escena-titulo, .escena-texto, .globos, .pasos, .escena-figura { min-width: 0; }
.escena-titulo h2, .escena-titulo h1 { margin-bottom: 0; }
.escena-figura { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 14px 22px; margin-top: 6px; }
.escena.compacta { padding-block: 40px 8px; }

/* Los personajes: transparentes, alineados por los pies. Su alto máximo sale de dos
 * variables por escena: --a (Fran y los demás) y --ac (el celular vivo, más chico porque
 * es un objeto). Los pares se calcularon para entrar en la columna sin saltar de renglón.
 * `sizesPersonaje` (componentes.js) elige el archivo con una aproximación de estos altos. */
.escena { --a: min(40vh, 340px); --ac: min(30vh, 260px); }
.escena-hero { --a: min(26vh, 230px); --ac: min(26vh, 230px); }
#dolor { --a: min(30vh, 260px); --ac: min(20vh, 170px); }
#aviso { --a: min(30vh, 260px); --ac: min(36vh, 330px); }
#cierre { --a: min(30vh, 260px); --ac: min(30vh, 260px); }
@supports (height: 1svh) {
  .escena { --a: min(40svh, 340px); --ac: min(30svh, 260px); }
  .escena-hero { --a: min(26svh, 230px); --ac: min(26svh, 230px); }
  #dolor { --a: min(30svh, 260px); --ac: min(20svh, 170px); }
  #aviso { --a: min(30svh, 260px); --ac: min(36svh, 330px); }
  #cierre { --a: min(30svh, 260px); --ac: min(30svh, 260px); }
}
.personaje, .pila img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--a); }
.personaje.celu, .pila.celu img { max-height: var(--ac); }
.personaje { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45)); }
.pila { display: grid; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45)); }
.pila > img { grid-area: 1 / 1; justify-self: center; align-self: end; }
.personaje.equipo { max-width: min(100%, 520px); }
.personaje.fran-chico { max-height: 190px; }

/* Entrada de cada escena. Todo lo que lleva .anim espera a .visible; --i escalona. */
.anim { transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i, 0) * 140ms); }
.js-escenas .escena:not(.visible) .anim { opacity: 0; transform: translateY(18px); }
/* La pose de arriba (el celular que enciende su pantalla) llega después de las demás. */
.js-escenas .sobre { opacity: 0; transition: opacity .7s ease 1.1s; }
.js-escenas .escena.visible .sobre { opacity: 1; }
.js-escenas .sobre-paso { opacity: 0; transition: opacity .4s ease; }
.escena[data-paso="3"] .sobre-paso { opacity: 1; }

/* ----------------------------------------------------------------- globos */
.globos { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.globo { position: relative; display: block; max-width: min(100%, 34ch); margin: 0; padding: 11px 16px; border-radius: 18px; font-size: .95rem; line-height: 1.45; list-style: none;
  background: var(--t-globo-fondo); color: var(--t-globo-texto); border: 1px solid var(--t-globo-borde); }
.globo.cliente, .globo.juani { align-self: flex-start; border-bottom-left-radius: 4px; }
.globo.fran { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--portada-oro); border-color: transparent; color: #1a1406; font-weight: 650; }
.escena-texto .globo { margin: 4px 0 18px; }

/* --------------------------------------------------------- marco de celular */
.dispositivo { flex: 0 0 auto; width: min(78vw, 300px); }
.marco { border: 7px solid #34363d; border-radius: 30px; overflow: hidden; background: var(--t-fondo); box-shadow: var(--t-sombra-alta); }
.marco img { display: block; width: 100%; height: auto; }

/* Escena 4: en la compu el marco queda fijo y cambia la pantalla según el paso a la vista;
 * en el celular cada paso trae su captura debajo y el marco no se muestra. */
.pantallas { display: grid; }
.pantallas > img { grid-area: 1 / 1; }
.escena[data-pasos] .pantallas > img { opacity: 0; transition: opacity .45s ease; }
.escena[data-paso="1"] .pantallas > img[data-paso="1"],
.escena[data-paso="2"] .pantallas > img[data-paso="2"],
.escena[data-paso="3"] .pantallas > img[data-paso="3"] { opacity: 1; }
.escena[data-pasos] .dispositivo { display: none; }
.pasos { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 26px; }
.paso { padding-top: 18px; border-top: 1px solid var(--t-borde-fuerte); }
.paso .globo { margin-bottom: 12px; }
.paso h3 { font-size: 1.1rem; margin: 0 0 8px; }
.paso p { margin: 0; color: var(--t-suave); font-size: .94rem; line-height: 1.7; }
.paso-captura { width: min(78vw, 280px); margin: 16px auto 0; border: 6px solid #34363d; border-radius: 26px; overflow: hidden; box-shadow: var(--t-sombra-alta); }
.paso-captura img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------- beneficios */
.beneficios { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
.beneficio { display: flex; flex-direction: column; background: var(--t-tarjeta); border: 1px solid var(--t-borde); border-radius: 18px; overflow: hidden; }
.beneficio img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--t-borde); }
.beneficio > div { padding: 18px 20px 22px; }
.beneficio h3 { font-size: 1.05rem; margin: 6px 0 8px; }
.beneficio p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--t-suave); }
.portada-numero { font-size: .8rem; font-weight: 700; color: var(--portada-dorado); letter-spacing: .08em; }

/* -------------------------------------------------------------------- hero */
.hero-fondo { background: radial-gradient(70% 80% at 78% 38%, rgba(223, 164, 65, .20), transparent 70%), linear-gradient(180deg, #0f1115, #12151b); border-bottom: 1px solid var(--t-borde); }
.escena-hero { padding-block: 44px 28px; }
.escena-hero h1 { font-size: clamp(1.95rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.045em; margin: 0; text-wrap: balance; color: #fff; }
.escena-hero h1 span { color: var(--portada-dorado); }
.escena-hero .portada-kicker { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid #ffffff38; border-radius: 30px; background: #111316b3; font-size: .6rem; letter-spacing: .1em; }
.portada-bajada { font-size: 1.02rem !important; line-height: 1.75 !important; color: #e0e0df !important; }
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.portada-acciones .btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 50px; padding: 13px 22px; font-size: .88rem; }
.portada-hero .btn, .portada-cierre .btn { background: var(--portada-dorado); color: #211b10; border-color: var(--portada-dorado); }
.escena-hero .btn.fantasma, .portada-cierre .btn.fantasma { background: #11131699; color: #fff; border-color: #ffffff80; }
.escena-hero .btn:not(.fantasma) { background: var(--portada-dorado); color: #211b10; border-color: var(--portada-dorado); }
.portada-nota { max-width: 46ch; margin: 16px 0 0 !important; font-size: .73rem !important; line-height: 1.65 !important; color: #d0d0d1 !important; }
.escena-hero .escena-figura { align-items: flex-end; }
.portada-promesas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 36px; padding: 22px 20px; border-bottom: 1px solid var(--t-borde); font-size: .8rem; color: var(--t-suave); }
.portada-promesas b { color: var(--portada-dorado); margin-right: 8px; }

/* ------------------------------------------------- planes, preguntas, cierre */
.portada-seccion { width: min(100% - 40px, 1160px); margin: 0 auto; padding: 56px 0; }
.portada-encabezado { text-align: center; max-width: 730px; margin: 0 auto 34px; }
.portada-encabezado .portada-kicker { margin-bottom: 12px; }
.portada-encabezado > p:not(.portada-kicker) { color: var(--t-suave); font-size: .95rem; line-height: 1.75; }
.portada-planes > .bajada { margin: 0 auto 40px; text-align: center; color: var(--t-suave); }
.portada-planes > h2 { text-align: center; }
.portada-planes .cols-2 { max-width: 980px; margin: auto; align-items: stretch; gap: 24px; }
.portada-planes .tarjeta { display: flex; flex-direction: column; padding: 26px; height: auto; text-align: left; }
.portada-planes .tarjeta + .tarjeta { margin-top: 20px; }
.portada-plan-insignia { min-height: 32px; }
.portada-planes .tarjeta > .etiqueta { align-self: flex-start; }
.portada-planes .precio-grande { font-size: clamp(1.9rem, 3vw, 2.5rem); margin: 22px 0 4px; }
.portada-planes .portada-plan-boton { margin-top: auto; padding-top: 28px; }
.portada-planes .tabla-scroll { max-width: 980px; margin: 28px auto 0; }
.portada-planes table { min-width: 0; }
.portada-planes td, .portada-planes th { padding: 12px 8px; font-size: .75rem; }
.portada-planes th:first-child { width: 55%; }
.portada-planes .ayuda { text-align: center; max-width: 760px; margin: 20px auto 0; }
.portada-moneda { font-size: .75rem; color: var(--t-suave); margin: 0 0 24px; }
.portada-faq { padding-top: 12px; }
.faq-fran { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; }
.faq-fran .globo { align-self: center; border-bottom-right-radius: 18px; }
.portada-preguntas { max-width: 760px; margin-inline: auto; text-align: left; }
.portada-preguntas details { padding: 22px 0; }
.portada-preguntas summary { padding-right: 28px; position: relative; }
.portada-preguntas summary::after { position: absolute; right: 0; top: 0; }
.portada-preguntas p { max-width: 68ch; line-height: 1.8; }
.portada-consulta { text-align: center; margin-top: 28px; font-size: .9rem; color: var(--t-suave); }
.portada-cierre { background: radial-gradient(60% 90% at 50% 0%, rgba(223, 164, 65, .22), transparent 70%), #0c0f13; border-top: 1px solid var(--t-borde); color: #fff; }
.portada-cierre h2 { color: #fff; }
.portada-cierre .escena-texto p { color: #d0d0d1; }
.portada-footer { max-width: 1208px; margin: auto; padding: 40px 20px; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 22px; }
.portada-footer p { font-size: .76rem; color: var(--t-suave); margin: 8px 0 0; }
.portada-footer .portada-personajes { color: var(--t-tenue); }
.portada-footer-enlaces { display: flex; gap: 24px; font-size: .8rem; }
.portada-footer-enlaces a { color: var(--t-suave); }
[data-vista="portada"] a:focus-visible, [data-vista="portada"] summary:focus-visible, [data-vista="portada"] button:focus-visible { outline: 3px solid var(--portada-dorado); outline-offset: 5px; border-radius: 4px; }

/* ------------------------------------------------------- tablet y compu */
@media (min-width: 600px) {
  .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .portada-nav { gap: 18px; }
  .portada-nav-seccion { display: none; }
}
@media (max-width: 899px) {
  /* En el celular el hero muestra a Fran y al celular enseguida de la promesa, antes de la
   * bajada y los botones: así la historia empieza en la primera pantalla. El orden del DOM
   * (y de lectura) no cambia: es solo cómo se acomodan. */
  .escena-hero .escena-titulo { order: 0; }
  .escena-hero .escena-figura { order: 1; margin-top: 0; }
  .escena-hero .escena-texto { order: 2; }
}
@media (max-width: 719px) {
  .portada-cabecera .contenedor { height: 68px; gap: 10px; }
  .portada-cabecera .marca { font-size: .85rem; }
  .portada-cabecera .logo-marca { width: 23px; height: 24px; }
  .portada-nav { gap: 12px; font-size: .77rem; }
  .portada-nav .btn { display: none; }
  .portada-acciones .btn { width: 100%; max-width: 340px; }
  .portada-promesas { font-size: .72rem; }
}
@media (min-width: 900px) {
  .escena {
    display: grid; column-gap: 56px; row-gap: 0; align-content: center; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "titulo figura" "texto figura" "globos figura" "pasos figura" "resto resto";
    min-block-size: min(86vh, 780px); min-block-size: min(86svh, 780px); padding-block: 88px;
  }
  .escena.compacta { min-block-size: 0; padding-block: 64px 12px; }
  .escena-titulo { grid-area: titulo; }
  .escena-texto { grid-area: texto; }
  .globos { grid-area: globos; }
  .pasos { grid-area: pasos; }
  .escena-figura { grid-area: figura; align-self: center; margin-top: 0; }
  .escena > .escena-resto { grid-area: resto; }
  .escena > .portada-acciones { grid-area: pasos; margin-top: 18px; }
  .escena.invertida { grid-template-areas: "figura titulo" "figura texto" "figura globos" "figura pasos" "resto resto"; }
  .escena-titulo { margin-bottom: 18px; }
  .escena-texto + .globos { margin-top: 6px; }
  .escena { --a: min(62vh, 560px); --ac: min(40vh, 380px); }
  .escena-hero { --a: min(52vh, 440px); --ac: min(52vh, 440px); }
  #dolor { --a: min(58vh, 500px); --ac: min(30vh, 250px); }
  #como-funciona { --a: min(60vh, 520px); }
  #cliente { --a: min(56vh, 480px); }
  #aviso { --a: min(44vh, 380px); --ac: min(54vh, 470px); }
  #cierre { --a: min(46vh, 400px); --ac: min(46vh, 400px); }
  .escena.compacta { --a: min(44vh, 420px); }
  @supports (height: 1svh) {
    .escena { --a: min(62svh, 560px); --ac: min(40svh, 380px); }
    .escena-hero { --a: min(52svh, 440px); --ac: min(52svh, 440px); }
    #dolor { --a: min(58svh, 500px); --ac: min(30svh, 250px); }
    #como-funciona { --a: min(60svh, 520px); }
    #cliente { --a: min(56svh, 480px); }
    #aviso { --a: min(44svh, 380px); --ac: min(54svh, 470px); }
    #cierre { --a: min(46svh, 400px); --ac: min(46svh, 400px); }
    .escena.compacta { --a: min(44svh, 420px); }
  }
  .escena-hero { min-block-size: max(560px, 86svh); padding-block: 64px 40px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .escena-hero .escena-texto .globo { margin-bottom: 22px; }
  .dispositivo { width: 280px; }
  .beneficios { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .portada-seccion { width: min(100% - 48px, 1160px); padding: 80px 0; }
  .portada-encabezado { margin-bottom: 46px; }
  .portada-planes .tarjeta { padding: 32px; height: 100%; }
  .portada-planes .tarjeta + .tarjeta { margin-top: 0; }
  .portada-planes .tabla-scroll { margin-top: 36px; }
  .portada-planes td, .portada-planes th { padding: 14px 12px; font-size: .85rem; }
  .portada-faq { padding-top: 32px; }
  .portada-footer { flex-direction: row; justify-content: space-between; text-align: left; padding-inline: 24px; }

  /* El marco fijo de la escena 4: acompaña mientras pasan los pasos. */
  .escena[data-pasos] .escena-figura { position: sticky; top: 100px; align-self: start; }
  .escena[data-pasos] .dispositivo { display: block; }
  .paso-captura { display: none; }
  .pasos { gap: 0; margin-top: 12px; }
  .paso { min-height: 30vh; padding: 24px 0; }
  /* El paso que no está a la vista se atenúa, pero no tanto como para bajar de 4,5:1 (se midió: .7 da 4,9). */
  .js-escenas .paso { opacity: .7; transition: opacity .35s ease; }
  .escena[data-paso="1"] .paso[data-paso="1"],
  .escena[data-paso="2"] .paso[data-paso="2"],
  .escena[data-paso="3"] .paso[data-paso="3"] { opacity: 1; }
}