@font-face { font-family: "General Sans"; src: url(fonts/general-sans-200.woff2) format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(fonts/general-sans-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(fonts/general-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(fonts/general-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(fonts/general-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --negro: #0A0A0B;
  --blanco: #F4F4F2;
  --g1: rgba(244, 244, 242, .72);
  --g2: rgba(244, 244, 242, .56);
  --linea: rgba(244, 244, 242, .14);
  --tinta2: #55565a;
  --margen: clamp(22px, 5vw, 88px);
  --curva: cubic-bezier(.22, .7, .2, 1);
  /* Colores de la app (frontend/src/index.css) */
  --app-el: #101112;
  --app-sup: #17181A;
  --app-sup2: #212225;
  --app-l2: rgba(235, 235, 245, .62);
  --app-l3: rgba(235, 235, 245, .42);
  --app-sep: rgba(84, 84, 88, .6);
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--negro); -webkit-text-size-adjust: 100%; }
body { font: 400 1.0625rem/1.6 "General Sans", system-ui, sans-serif; color: var(--blanco); background: var(--negro); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2 { font-weight: 300; letter-spacing: -.042em; line-height: 1.02; text-wrap: balance; }

/* ---------- navegación ---------- */
.nav { position: absolute; z-index: 10; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: clamp(18px, 2.6vw, 34px) var(--margen); }
.marca { display: inline-flex; align-items: center; gap: .55em; font-weight: 500; font-size: 1.125rem; letter-spacing: -.02em; }
.marca svg { width: 1.3em; height: 1.3em; }

.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 34px; border-radius: 99px; background: var(--blanco); color: var(--negro); font-weight: 500; font-size: 1rem; letter-spacing: -.01em; }
.boton-fino { min-height: 44px; padding: 0 22px; background: transparent; color: var(--blanco); border: 1px solid rgba(244, 244, 242, .34); font-size: .9375rem; }
.boton[aria-disabled="true"] { cursor: default; }

/* ---------- la escena: textos a la izquierda, celular fijo a la derecha, nada más ---------- */
.escena { position: relative; z-index: 0; }
.escena-grilla { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 6vw, 110px); padding: 0 var(--margen); }
.textos { min-width: 0; }
.apertura { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 56px; }
h1 { font-size: clamp(2.75rem, 5.3vw, 5.5rem); max-width: 13.5em; }
h1 span { display: block; color: var(--g1); }
.bajada { margin-top: 1.5em; max-width: 31em; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--g1); }
.acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 2.5rem; }
.repetir { padding: 8px 0; border: 0; background: none; color: var(--g2); font: inherit; font-size: .9375rem; cursor: pointer; }
.repetir:hover { color: var(--blanco); }

.paso { min-height: 80svh; display: flex; flex-direction: column; justify-content: flex-start; max-width: 33rem; padding-top: 1.75rem; }
.paso:last-child { min-height: 92svh; }
.paso h2 { font-size: clamp(2.125rem, 3.5vw, 3.5rem); }
.paso p { margin-top: 1.1em; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); color: var(--g1); }
.js .paso { opacity: .34; transition: opacity .6s var(--curva); }
.js .paso.activo { opacity: 1; }

/* ---------- el hilo: la regla que une un paso con el siguiente; la luz baja con el scroll y, al llegar al título, cambia la pantalla ---------- */
.tramo { position: relative; flex: 1 1 auto; min-height: 88px; margin-top: 1.75rem; width: 44px; --c: rgba(244, 244, 242, .24); }
.tramo, .tramo i { background:
  linear-gradient(var(--c), var(--c)) 0 0 / 1px 100% no-repeat,
  repeating-linear-gradient(to bottom, var(--c) 0 1px, transparent 1px 12px) 0 0 / 7px 100% no-repeat,
  repeating-linear-gradient(to bottom, var(--c) 0 1px, transparent 1px 60px) 0 0 / 16px 100% no-repeat; }
.tramo i { position: absolute; inset: 0; --c: var(--blanco); }
.tramo b { display: none; }
.js .tramo i { clip-path: inset(0 0 100% 0); }
.js .tramo b { display: block; position: absolute; top: 0; left: 0; width: 28px; height: 2px; margin-top: -1px; background: var(--blanco); box-shadow: 0 0 1.1em .22em rgba(244, 244, 242, .5); opacity: 0; pointer-events: none; }

/* ---------- el celular: titanio negro cepillado, canto biselado, bandas y botones ---------- */
.col-tel { position: relative; }
.tel { --alto: min(86svh, 800px); --ph: calc(var(--alto) - 20px); --an: calc(var(--ph) * .4621); --ra: calc(var(--an) * .165);
  position: sticky; top: calc((100svh - var(--alto)) / 2); width: calc(var(--an) + 20px); margin-top: calc((100svh - var(--alto)) / 2); margin-bottom: calc((100svh - var(--alto)) / 2); padding: 10px; border-radius: var(--ra);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .24), transparent 2.4%, transparent 97.6%, rgba(255, 255, 255, .18)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    linear-gradient(162deg, #a2a3a6 0%, #3c3d40 12%, #17171a 38%, #222325 66%, #77787c 100%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 0 2px rgba(0, 0, 0, .7), 0 70px 120px -40px #000, 0 30px 90px -40px rgba(244, 244, 242, .16); }
.bt { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #3a3b3d, #141415); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.bt1 { left: -4px; top: 17%; height: 4%; } .bt2 { left: -4px; top: 24%; height: 8%; } .bt3 { left: -4px; top: 34%; height: 8%; } .bt4 { right: -4px; top: 27%; height: 13%; }
.an { position: absolute; z-index: 2; width: 9px; height: 2px; background: #060606; }
.an1 { left: 0; top: 15%; } .an2 { right: 0; top: 15%; } .an3 { left: 0; bottom: 15%; } .an4 { right: 0; bottom: 15%; }

/* Todo adentro mide en em, y el em sale del ancho real: la pantalla es la misma en cualquier tamaño. */
.pantalla { position: relative; width: var(--an); height: var(--ph); border-radius: calc(var(--ra) - 10px); overflow: hidden; background: var(--negro); font-size: calc(var(--an) / 21); line-height: 1.35; isolation: isolate; box-shadow: 0 0 0 3px #000; }
.barra { position: absolute; z-index: 7; inset: 0 0 auto; height: 3.5em; display: flex; align-items: center; justify-content: space-between; padding: .55em 2.2em 0 2.7em; font-weight: 600; font-size: .85em; }
.barra-i { display: inline-flex; gap: .45em; } .barra-i svg { height: .78em; width: auto; }
.isla { position: absolute; z-index: 8; top: .75em; left: 50%; width: 6.8em; height: 1.95em; border-radius: 1em; background: #000; transform: translateX(-50%); }
.isla::after { content: ""; position: absolute; right: .85em; top: 50%; width: .75em; height: .75em; margin-top: -.375em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a3f48, #08090b 62%); }
.casa { position: absolute; z-index: 7; bottom: .6em; left: 50%; width: 7.6em; height: .32em; border-radius: 1em; background: rgba(255, 255, 255, .6); transform: translateX(-50%); }
.vidrio { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 20%, transparent 36%), radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%); }

.vista { position: absolute; inset: 0; padding: 4.6em 1.25em 2em; display: flex; flex-direction: column; gap: .9em; opacity: 0; visibility: hidden; transition: opacity .45s var(--curva), visibility 0s .45s; }
.tel[data-s="1"] .vista[data-v~="1"], .tel[data-s="2"] .vista[data-v~="2"], .tel[data-s="3"] .vista[data-v~="3"], .tel[data-s="4"] .vista[data-v~="4"], .tel[data-s="5"] .vista[data-v~="5"], .vista-fija { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Sin JS o con movimiento reducido no hay pasos que cambien la pantalla: queda la respuesta, y cada paso sigue en el texto. */
html:not(.js) .vista:not([data-v~="2"]):not(.vista-fija) { display: none; }

.a-chico { color: var(--app-l2); font-size: .9em; }
.a-titulo { font-size: 2em; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin-top: -.5em; }
.a-sub { color: var(--app-l2); font-size: .95em; margin-top: -.6em; }
.a-caja { border-radius: 1.1em; background: var(--app-sup); overflow: hidden; }
.a-cab, .a-fila { display: grid; grid-template-columns: 2.6em 1fr 1fr 1.7em; align-items: center; padding: 0 1em; }
.a-cab { height: 2.6em; color: var(--app-l3); }
.a-cab span { font-size: .8em; }
.a-fila { height: 3.1em; border-top: 1px solid var(--app-sep); }
.a-fila b { font-weight: 600; }
.ok { width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.7 2.6L12 5.4' fill='none' stroke='%230A0A0B' stroke-width='1.8'/%3E%3C/svg%3E") center/contain; }
.js .tel.leyendo .a-fila { color: var(--app-l3); }
.js .tel.leyendo .a-fila b { opacity: 0; }
.js .tel.leyendo .a-fila .ok { opacity: 0; transform: scale(.6); }
.a-fila b, .a-fila .ok { transition: opacity .25s, transform .3s var(--curva); }
.js .tel.leyendo .a-fila.marcada { color: inherit; }
.js .tel.leyendo .a-fila.marcada b, .js .tel.leyendo .a-fila.marcada .ok { opacity: 1; transform: none; }

.a-respuesta { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 1.15em 1.25em 1.25em; border-radius: 1.25em; background: var(--blanco); color: var(--negro); transition: opacity .5s var(--curva), transform .6s var(--curva); }
.tel[data-s="1"] .a-respuesta { opacity: 0; transform: translateY(1.2em); }
.a-et { font-size: .8em; color: #5c5d61; }
.a-grande { margin-top: .16em; font-size: 4.5em; font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.a-grande small { display: block; margin-top: .22em; font-size: .27em; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.a-texto { margin-top: auto; padding-top: .6em; font-size: .88em; line-height: 1.32; color: #2e2f31; }

.a-lista { padding: .2em 0; }
.a-renglon { display: flex; justify-content: space-between; align-items: center; height: 2.9em; padding: 0 1.1em; border-top: 1px solid var(--app-sep); font-size: .96em; }
.a-renglon:first-child { border-top: 0; }
.a-renglon span { font-variant-numeric: tabular-nums; }
.a-renglon em { font-style: normal; color: var(--app-l2); font-variant-numeric: tabular-nums; }
.a-renglon.sube, .a-renglon.elegida { font-weight: 600; }
.a-renglon.sube em, .a-renglon.elegida em { color: var(--blanco); }
.a-enorme { font-size: 6.2em; font-weight: 300; letter-spacing: -.05em; line-height: 1; }
.a-enorme small { font-size: .3em; letter-spacing: -.01em; margin-left: .2em; color: var(--app-l2); }

.a-fatiga { padding: .6em 1.2em 1.5em; }
.a-musculo { padding-top: 1.15em; }
.a-musculo p { display: flex; justify-content: space-between; font-size: .96em; }
.a-musculo b { font-weight: 600; }
.a-musculo i { display: block; height: .62em; margin-top: .6em; border-radius: 1em; background: linear-gradient(90deg, var(--blanco) calc(var(--f) * 100%), var(--app-sup2) 0); }

.a-buscar { display: flex; align-items: center; gap: .6em; height: 2.8em; padding: 0 1em; border-radius: .95em; background: var(--app-sup); }
.a-buscar svg { width: 1em; height: 1em; color: var(--app-l2); flex: none; }
.a-corta { flex: none; margin-top: auto; }
.a-larga { flex: 1 1 0; min-height: 0; margin-bottom: -2em; border-radius: 1.1em 1.1em 0 0; -webkit-mask-image: linear-gradient(#000 62%, transparent 96%); mask-image: linear-gradient(#000 62%, transparent 96%); }
.a-larga .a-renglon span { white-space: nowrap; }

/* El gesto de la página: un filo de luz cruza la pantalla una vez. */
.filo { position: absolute; z-index: 6; inset: 0 auto 0 0; width: 2px; background: var(--blanco); box-shadow: 0 0 1.4em .3em rgba(244, 244, 242, .55); opacity: 0; pointer-events: none; }

/* ---------- el celular fuera de la escena: el mismo objeto, sin quedar fijo ---------- */
.tel-libre { position: relative; top: auto; margin: 0; }
/* El eco: la pantalla está apagada hasta que el filo la cruza. */
.js .tel-eco:not(.leida) .vista-fija { opacity: 0; visibility: hidden; }

/* ---------- papel: el titanio negro sobre blanco roto ---------- */
.papel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; background: var(--blanco); color: var(--negro); }
.escaparate { display: grid; place-items: center; padding: clamp(72px, 8vw, 130px) 24px; }
.papel .tel { color: var(--blanco); --alto: min(84svh, 760px); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 0 2px rgba(0, 0, 0, .7), 0 90px 90px -60px rgba(10, 10, 11, .6), 0 34px 54px -30px rgba(10, 10, 11, .38); }
.papel-texto { padding: clamp(64px, 9vw, 150px) var(--margen); }
.papel h2 { font-size: clamp(2.375rem, 4.2vw, 4.25rem); }
.papel h2 span { display: block; color: var(--tinta2); }
.papel-texto > p { margin-top: 1.3em; max-width: 30em; color: #3b3c3f; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); }
.datos { margin-top: clamp(40px, 5vw, 72px); }
.datos div { padding: 22px 0; border-top: 1px solid rgba(10, 10, 11, .16); }
.datos dt { font-weight: 600; letter-spacing: -.01em; }
.datos dd { margin: .25em 0 0; max-width: 30em; color: #3b3c3f; }

/* ---------- cierre: el mismo celular, enorme, cortado por el borde de la página ---------- */
.cierre { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--negro); overflow: hidden; }
.cierre-texto { padding: clamp(96px, 12vw, 180px) var(--margen) clamp(56px, 6vw, 90px); }
.cierre h2 { font-size: clamp(2.75rem, 6.4vw, 6.5rem); max-width: 11em; margin-bottom: .55em; }
.cierre-tel { height: min(70svh, 640px); overflow: hidden; width: 100%; display: flex; justify-content: center; padding-top: 4px; }
.tel-gigante { --alto: min(1280px, 170svh, calc(84vw / .4621 + 20px)); flex: none; text-align: left; }

.pie { position: relative; z-index: 1; padding: 40px var(--margen) 34px; background: var(--negro); border-top: 1px solid var(--linea); }
.pie-arriba, .pie-abajo { display: flex; justify-content: space-between; gap: 18px 40px; }
.pie-arriba { align-items: center; }
.pie-abajo { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--linea); }
.pie-legal { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.pie-legal a { color: var(--g1); font-size: .9375rem; text-decoration: none; }
.pie-legal a:hover { color: var(--blanco); }
.pie p { color: var(--g2); font-size: .875rem; }
.pie-abajo p:last-child { max-width: 38em; }
.pie-abajo p + p { text-align: right; }
.marca { color: var(--blanco); text-decoration: none; }

/* ---------- páginas legales ---------- */
.legal-nav { position: static; }
.legal { max-width: 38em; margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--margen) clamp(72px, 10vw, 136px); box-sizing: content-box; }
.legal h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.legal .fecha { margin-top: 1.2em; color: var(--g2); font-size: .9375rem; }
.legal h2 { margin-top: 2.6em; font-size: 1.5rem; font-weight: 400; letter-spacing: -.025em; line-height: 1.2; }
.legal p { margin-top: .85em; color: var(--g1); }
.legal .fecha + p { margin-top: 2.4em; }
.legal a { color: var(--blanco); text-underline-offset: .2em; }

/* ---------- tablet angosta y celular: el celular queda arriba y la historia pasa abajo ---------- */
@media (max-width: 900px) {
  .escena-grilla { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .textos { display: contents; }
  .apertura { order: 0; min-height: 0; justify-content: flex-start; padding: 112px var(--margen) 36px; }
  h1 { font-size: clamp(2.625rem, 11.6vw, 4.5rem); }
  .col-tel { order: 1; position: sticky; top: 0; z-index: 4; height: 60svh; display: grid; place-items: center; padding-top: 10px; background: var(--negro); }
  /* El texto se va por debajo del teléfono: la franja es opaca de lado a lado y abajo se funde, nunca asoma a los costados. */
  .col-tel::after { content: ""; position: absolute; inset: 100% 0 auto; height: 34px; background: linear-gradient(var(--negro), rgba(10, 10, 11, 0)); pointer-events: none; }
  .col-tel .tel { --alto: min(calc(60svh - 22px), 620px); position: relative; top: auto; margin: 0; }
  .paso { order: 2; min-height: 44svh; max-width: none; padding: 26px var(--margen) 0; justify-content: flex-start; }
  .tramo { min-height: 72px; margin-top: 1.25rem; }
  .paso:last-child { min-height: 52svh; }
  .paso h2 { font-size: clamp(1.875rem, 8vw, 2.75rem); }
  .papel { grid-template-columns: minmax(0, 1fr); }
  .escaparate { padding: 64px 24px 8px; }
  .papel .tel { --alto: min(78svh, 640px); }
  .cierre-tel { height: min(62svh, 520px); }
  .pie-arriba, .pie-abajo { flex-direction: column; align-items: flex-start; } .pie-abajo p + p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}