/* Widuf — web nueva, v2 «Vuelo» (agente `web`, 25-10-2026).
 * Móvil primero (390 px); en escritorio, la misma historia a dos columnas.
 * Sin JS o con prefers-reduced-motion: cada sección se lee quieta, con su jilguero quieto.
 * Con movimiento (html.mov, lo pone vuelo.js): las escenas se alargan, su escenario queda pegado a la
 * pantalla y un solo jilguero (.ave-vuela) vuela de una a otra. Solo se animan transform y opacity. */

@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Sora"; font-style: normal; font-display: swap; font-weight: 500 800;
  src: url("/fonts/sora-latin.woff2") format("woff2");
}

/* Tokens de la app (frontend/src/theme/variables.scss): crema y «pizarra» en oscuro. */
:root {
  color-scheme: light dark;
  --fondo: #f7f4ec;
  --fondo-2: #efeadc;
  --superficie: #fffdf8;
  --linea: #e2e1da;
  --tinta: #1f2e57;
  --tinta-2: #4f5468;
  --marca: #4a6299;
  --marca-tinta: #2e4478;
  --marca-suave: #e3e8f3;
  --sol: #e8a93c;
  --campo: #8a5a00;
  --campo-fondo: #fff1c9;
  --sombra: 0 18px 40px rgba(31, 46, 87, .14), 0 3px 10px rgba(31, 46, 87, .06);
  --cielo: #f7f4ec;
  --cerro-1: #c9d5ee;
  --cerro-2: #9db3df;
  --cerro-3: #1f2e57;
  --nube: #dfe6f4;
  --ave-trazo: #1f2e57;   /* la cara crema del jilguero necesita borde sobre crema (ui-designer) */
  --ave-halo: transparent;
  --pantalla-1: #5a74ad;
  --pantalla-2: #a9bde3;
  --aviso-fondo: rgba(255, 255, 255, .8);
  --aviso-texto: #1b2333;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #1a1f25;
    --fondo-2: #20262d;
    --superficie: #252c34;
    --linea: #46505c;
    --tinta: #eef1f4;
    --tinta-2: #c5ccd4;
    --marca: #9db3df;
    --marca-tinta: #c6d4f1;
    --marca-suave: #2e3b55;
    --campo: #ffd98a;
    --campo-fondo: #4a3b1c;
    --sombra: 0 18px 40px rgba(0, 0, 0, .4), 0 3px 10px rgba(0, 0, 0, .3);
    --cielo: #1a1f25;
    --cerro-1: #2a3546;
    --cerro-2: #34466a;
    --cerro-3: #46598a;
    --nube: #27303b;
    --ave-trazo: transparent;
    --ave-halo: rgba(230, 236, 246, .7);
    --pantalla-1: #24345a;
    --pantalla-2: #3d5486;
    --aviso-fondo: rgba(42, 48, 58, .86);
    --aviso-texto: #eef1f4;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta); overflow-x: clip;
  font: 400 1.0625rem/1.55 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: var(--marca-tinta); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 6px; }
h1, h2 { font-family: "Sora", system-ui, sans-serif; margin: 0; letter-spacing: -.025em; line-height: 1.06; font-weight: 700; }
p { margin: 0; }
[hidden] { display: none !important; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--superficie); padding: 10px 14px; border-radius: 10px; z-index: 30; }
.saltar:focus { top: 12px; }
.chico { font-size: .82rem; color: var(--tinta-2); line-height: 1.5; }
.campo { background: var(--campo-fondo); color: var(--campo); border-radius: 6px; padding: 0 .3em; font-weight: 600; }

/* ── El jilguero ─────────────────────────────────── */
.c { stroke: var(--ave-trazo); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.n { stroke: var(--ave-halo); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.ave-quieta { width: 88px; height: 86px; }
.mov .ave-quieta { display: none; }
.ave-vuela { display: none; }
.mov .ave-vuela {
  display: block; position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none;
  width: 100px; height: 98px; will-change: transform; transform: translate3d(-200px, -200px, 0);
}
.ave-vuela svg { width: 100%; height: 100%; overflow: visible; }
/* Puntos donde se posa: invisibles; vuelo.js los usa de referencia. */
.posa { position: absolute; width: 1px; height: 1px; pointer-events: none; }

/* ── Cabecera ────────────────────────────────────── */
.cabecera {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 20px 0;
}
.marca { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--tinta);
  font: 700 1.45rem/1 "Sora", sans-serif; letter-spacing: -.03em; min-height: 44px; }
.marca { gap: 10px; }
/* Logotipo trazado de la marca (el de web/ y la app; Oscar 26-10-2026: «conservarla en todos lados»). */
.marca-icono { width: 34px; height: 34px; border-radius: 9px; }
.logotipo { display: block; height: 23px; width: auto; overflow: visible; }
.logotipo .rombo { fill: var(--sol); stroke: var(--sol); }
.idioma { font-weight: 600; font-size: .92rem; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }

/* ── 1 · Portada ─────────────────────────────────── */
.portada { position: relative; min-height: 100svh; overflow: hidden; background: var(--cielo);
  display: flex; flex-direction: column; padding: 92px 22px 0; }
.paisaje { position: absolute; inset: 0; pointer-events: none; }
.capa { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; will-change: transform; }
.sol { fill: var(--sol); }
.nube { fill: var(--nube); }
.capa-lejos path { fill: var(--cerro-3); opacity: .92; }
.capa-medio path, .capa-medio circle { fill: var(--cerro-2); }
.capa-cerca path { fill: var(--cerro-1); }
.portada-texto { position: relative; z-index: 2; max-width: 34rem; }
.antetitulo { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--marca); margin-bottom: 12px; }
h1 { font-size: clamp(2.7rem, 12.5vw, 5.4rem); }
.punto { color: var(--sol); }
.bajada { font-size: clamp(1.08rem, 4.4vw, 1.3rem); color: var(--tinta-2); margin-top: 16px; max-width: 28rem; }
.tiendas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tienda { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px 8px 12px; border-radius: 14px;
  background: var(--superficie); border: 1.5px solid var(--linea); color: var(--tinta); }
a.tienda { text-decoration: none; background: var(--tinta); color: var(--fondo); border-color: transparent; }
.tienda svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.tienda > span { display: flex; flex-direction: column; line-height: 1.15; }
.tienda-pre { font-size: .72rem; color: var(--tinta-2); }
/* Sin la app en las tiendas (Oscar 26-10-2026): botones bloqueados, QR y enlace apagados hasta .con-tiendas. */
span.tienda[aria-disabled] { border-style: dashed; opacity: .55; cursor: not-allowed; user-select: none; }
.qr-pronto { display: none; margin-top: 10px; font-size: .9rem; font-weight: 700; color: var(--tinta-2); }
html:not(.con-tiendas) .qr { filter: blur(4px); opacity: .35; }
html:not(.con-tiendas) .qr-texto { display: none; }
html:not(.con-tiendas) .qr-pronto { display: block; }
html:not(.con-tiendas) .compartir { display: none; }
a.tienda .tienda-pre { color: inherit; opacity: .8; }
.tienda b { font: 700 1.02rem/1.15 "Sora", sans-serif; }
.gratis { margin-top: 14px; }
.sello { display: inline-block; background: var(--marca-suave); color: var(--marca-tinta); font-weight: 700; font-size: .88rem; padding: 6px 12px; border-radius: 999px; }
.rama-caja { position: relative; z-index: 1; margin: auto -22px 0 auto; width: min(100%, 420px); aspect-ratio: 600 / 220; }
.rama { width: 100%; height: 100%; overflow: visible; }
.rama path { fill: none; stroke: #6b4e3a; stroke-width: 9; stroke-linecap: round; }
.rama path + path { stroke-width: 5; }
.rama .hoja { fill: #7f9c6a; }
@media (prefers-color-scheme: dark) { .rama path { stroke: #8b6d55; } .rama .hoja { fill: #6f8b5c; } }
.ave-rama { position: absolute; left: 52%; top: 62%; width: 150px; height: 147px; transform: translate(-50%, -78%); }
.baja { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px auto 18px;
  font-size: .82rem; font-weight: 600; color: var(--marca-tinta); text-decoration: none; }
.baja svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.mov .baja svg { animation: baja 1.8s ease-in-out infinite; }
@keyframes baja { 50% { transform: translateY(5px); } }

/* ── Escenas (avisos, foto, agenda, progreso) ────── */
.escena { position: relative; }
.escenario { display: flex; flex-direction: column; gap: 22px; padding: 64px 22px 40px; }
.mov .escena-avisos { height: 330svh; }
.mov .escena-foto { height: 240svh; }
.mov .escena-agenda { height: 270svh; }
.mov .escena-progreso { height: 220svh; }
.mov .escenario { position: sticky; top: 0; height: 100svh; padding: 56px 22px 20px; justify-content: flex-start; overflow: hidden; }
h2 { font-size: clamp(1.95rem, 8.4vw, 3.5rem); }
.nota { margin-top: 10px; color: var(--tinta-2); font-size: 1.02rem; }
.mov [data-aparece] { opacity: 0; transform: translateY(14px); }
.visual { position: relative; }
.rotulo { margin-top: 8px; font-size: .75rem; color: var(--tinta-2); text-align: center; }
.captura img { border-radius: 22px; box-shadow: var(--sombra); width: 100%; height: auto; }

/* Teléfono con la pantalla bloqueada (dibujado; los textos de los avisos son los del servidor). */
.telefono { position: relative; margin-inline: auto; width: min(330px, 86vw); height: min(540px, 62svh);
  border-radius: 46px 46px 0 0; padding: 10px 10px 0; background: #11161d; box-shadow: var(--sombra);
  -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.tel-pantalla { position: relative; height: 100%; border-radius: 37px 37px 0 0; overflow: hidden; padding: 46px 12px 0;
  background: linear-gradient(170deg, var(--pantalla-1), var(--pantalla-2)); color: #fff; text-align: center; }
.tel-isla { position: absolute; top: 11px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; }
.tel-fecha { font-weight: 600; font-size: .95rem; opacity: .92; }
.tel-hora { font: 600 3.9rem/1 "Sora", sans-serif; letter-spacing: -.03em; margin: 2px 0 16px; }
.avisos { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.aviso { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 20px;
  background: var(--aviso-fondo); color: var(--aviso-texto); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(10, 20, 40, .18); font-size: .84rem; line-height: 1.32; }
.aviso-icono { flex: 0 0 34px; height: 34px; border-radius: 9px; background: linear-gradient(#34559a, #22386c); display: grid; place-items: center; }
.aviso-icono svg { width: 30px; height: 29px; }
.aviso-cuerpo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.aviso-app { display: flex; justify-content: space-between; font-size: .68rem; letter-spacing: .04em; opacity: .7; font-weight: 600; }
.aviso-hace { letter-spacing: 0; font-weight: 500; }
.aviso b { font-weight: 700; }
.mov .aviso { opacity: 0; }
.ave-aviso { position: absolute; right: 14px; top: 150px; width: 64px; height: 63px; transform: scaleX(-1); }

/* Foto del horario */
.visual-foto { height: min(560px, 60svh); }
.papel { position: absolute; left: 0; top: 0; width: 74%; transform: rotate(-4deg); }
.papel img { border-radius: 14px; box-shadow: var(--sombra); width: 100%; height: auto; }
.escaneo { position: absolute; left: 3%; right: 3%; top: 0; height: 3px; border-radius: 3px; background: var(--sol);
  box-shadow: 0 0 18px 4px rgba(232, 169, 60, .55); opacity: 0; }
.clases { position: absolute; right: 0; bottom: 0; width: 82%; }
.sin-js .escaneo { display: none; }

/* Agenda */
.visual-agenda { padding-bottom: 150px; max-width: 420px; margin-inline: auto; width: 100%; }
.mes { position: relative; width: 100%; }
.tarjeta { position: absolute; width: 84%; }
.tarjeta img { border-radius: 18px; }
.prueba { right: -6px; bottom: 74px; }
.evento { left: -6px; bottom: 0; }

/* Progreso */
.visual-progreso { max-width: 400px; margin-inline: auto; width: 100%; }
.progreso { position: relative; }
.progreso picture { display: block; }
/* Velo del color de la tarjeta sobre el área del gráfico: al correrse, la curva «se dibuja» mes a mes. */
.curva-velo { display: none; position: absolute; left: 13%; right: 2.5%; top: 34%; bottom: 32%; background: #fefdf9; transform-origin: right center; }
.mov .curva-velo { display: block; }
@media (prefers-color-scheme: dark) { .curva-velo { background: #252d33; } }
.plus { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: var(--marca-suave); font-size: .95rem; }
.plus-precio { margin-top: 6px; }
.plus-precio p + p { margin-top: 4px; }
[data-precios] { font-weight: 700; }

/* ── Confianza ──────────────────────────────────── */
.confianza { padding: 90px 22px 70px; max-width: 1120px; margin-inline: auto; }
.confianza h2 { font-size: clamp(1.7rem, 7vw, 2.8rem); max-width: 18ch; }
.confianza ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.confianza li { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px;
  background: var(--superficie); border: 1px solid var(--linea); font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.confianza li svg { flex: 0 0 44px; height: 44px; padding: 9px; border-radius: 12px; background: var(--marca-suave);
  fill: none; stroke: var(--marca-tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mas { margin-top: 16px; font-weight: 600; }
.mov .confianza li { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.mov .confianza li.visto { opacity: 1; transform: none; }
.mov .confianza li:nth-child(2) { transition-delay: .1s; } .mov .confianza li:nth-child(3) { transition-delay: .2s; }

/* ── Descargar ───────────────────────────────────── */
.descargar { position: relative; padding: 80px 22px 70px; text-align: center; background: linear-gradient(var(--fondo), var(--fondo-2)); }
.descargar h2 { font-size: clamp(2.1rem, 9vw, 3.8rem); }
.descargar-fila { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: 26px; }
.tiendas-cierre { justify-content: center; margin-top: 0; }
.qr-caja { position: relative; display: none; }
.qr { width: 156px; height: 156px; padding: 10px; background: #fff; border-radius: 18px; box-shadow: var(--sombra); }
.qr-texto { margin-top: 10px; font-size: .9rem; color: var(--tinta-2); }
.compartir { margin-top: 24px; font-size: .95rem; }
.enlace { font-weight: 700; color: var(--marca-tinta); }
.copiar { font: inherit; font-weight: 700; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--marca); background: none; color: var(--marca-tinta); cursor: pointer; }
.ave-cierre { margin: 26px auto 0; }
.desde-app [data-comercial] { display: none !important; }

/* ── Pie ─────────────────────────────────────────── */
.pie { padding: 34px 22px 48px; border-top: 1px solid var(--linea); text-align: center; display: grid; gap: 10px; justify-items: center; }
.origen { font-family: "Sora", sans-serif; font-weight: 600; }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 6px; }
.pie nav a { font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; }

/* ── Escritorio: la misma historia, a dos columnas ─ */
@media (min-width: 960px) {
  .cabecera { padding: 22px 48px 0; }
  .portada { padding: 0 48px; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px; }
  .portada-texto { padding-top: 40px; }
  /* En pantallas anchas los cerros escalan con el ancho y suben sobre el texto: se bajan lo que sobre. */
  .paisaje { top: 9%; transform: translateY(max(0px, calc(21vw - 30svh))); }
  .rama-caja { margin: 0; align-self: center; width: 100%; max-width: 620px; transform: translateY(40px); }
  .ave-rama { width: 200px; height: 196px; }
  .baja { position: absolute; left: 50%; bottom: 18px; margin: 0; transform: translateX(-50%); }
  .escenario, .mov .escenario { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px;
    max-width: 1180px; margin-inline: auto; padding: 40px 56px; }
  .mov .escenario { padding: 0 56px; }
  .escena-agenda .texto { order: 2; }
  h2 { font-size: clamp(2.6rem, 4.2vw, 3.9rem); }
  .nota { font-size: 1.15rem; }
  .telefono { width: 400px; height: min(680px, 82svh); }
  .tel-hora { font-size: 5rem; }
  .aviso { font-size: .9rem; }
  .visual-foto { height: min(660px, 78svh); }
  .visual-agenda { max-width: 520px; }
  .visual-progreso { max-width: 520px; }
  .plus { max-width: 30rem; }
  .confianza { padding: 120px 56px 90px; }
  .confianza ul { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .confianza li { flex-direction: column; align-items: flex-start; padding: 22px; min-height: 150px; }
  .descargar { padding: 110px 48px 90px; }
  .descargar-fila { flex-direction: row; justify-content: center; gap: 56px; }
  .tiendas-cierre { flex-direction: column; }
  .qr-caja { display: block; }
  .pie { padding: 40px 48px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.sprite { position: absolute; }
.titulo-posa { position: relative; display: inline-block; }
.escena-progreso .plus { margin-top: 0; }
@media (min-width: 960px) {
  .escena-progreso .escenario { grid-template-rows: auto auto; align-content: center; row-gap: 18px; }
  .escena-progreso .texto { grid-column: 1; grid-row: 1; align-self: end; }
  .escena-progreso .visual { grid-column: 2; grid-row: 1 / span 2; }
  .escena-progreso .plus { grid-column: 1; grid-row: 2; align-self: start; }
}