/* «Mezcla»: la noche de «noche» con la letra grande y las frases reales de «luz» (Antonio, 28-10). Oscura siempre:
   la luz la pone la app. Escala de autoridad: un titular enorme, una pantalla grande y el resto en losas de dos
   tamaños. Las capturas, planas: nada de perspectiva. Diseño y medidas en diseno/landing/mezcla. */
/* Geist (OFL 1.1, assets/fonts/OFL-Geist.txt), variable de 100 a 900, recortada a latín y latín extendido A. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(./assets/fonts/geist-variable.woff2) format('woff2'); }
:root {
  color-scheme: dark;
  --fondo: #07080d;
  --superficie: #101119;
  --superficie-2: #161826;
  --tinta: #f4f4f7;
  --suave: #a7a8b8;
  --borde: rgb(255 255 255 / .08);
  --borde-fuerte: rgb(255 255 255 / .2);
  --oro: #f3d37a;
  /* El azul de mañana de la app (SOLAR_CYCLE, 11:00), muestreado de la captura del PC. */
  --app: #13419d;
  --app-brillo: rgb(35 70 190 / .55);
  --ancho: 1160px;
  font-family: Geist, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 640; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 8px; }
.ancho { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: 12px; top: -100px; z-index: 20; padding: 10px 14px; background: var(--tinta); color: var(--fondo); border-radius: 8px; }
.saltar:focus { top: 12px; }

/* Barra fina de cristal oscuro. */
.barra { position: fixed; inset: 0 0 auto; z-index: 10; background: rgb(7 8 13 / .84); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--borde); }
.barra .ancho { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.marca { display: flex; gap: 10px; align-items: center; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.marca img { border-radius: 7px; }
.barra nav { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.barra nav a { text-decoration: none; }
.barra nav .menor { color: #cdcdd9; }
.barra nav .menor:hover { color: var(--tinta); }
.boton-barra { padding: 7px 14px; border-radius: 999px; background: var(--tinta); color: var(--fondo); font-weight: 560; }

/* Portada: el titular manda; debajo, la app en grande. */
.portada {
  position: relative;
  overflow-x: clip;
  text-align: center;
  padding: clamp(104px, 13vw, 156px) 0 clamp(24px, 4vw, 48px);
  background:
    radial-gradient(70% 46% at 50% 0%, oklch(0.36 0.14 266 / .9), transparent 72%),
    radial-gradient(60% 40% at 50% 78%, rgb(35 70 190 / .28), transparent 70%),
    var(--fondo);
}
/* El logotipo: el negro del icono con un tono azul y violeta que se mueve despacio, también por dentro de las letras. */
.logo { width: clamp(88px, 9vw, 120px); aspect-ratio: 1; margin: 0 auto; border-radius: 24%; overflow: hidden; background-color: #0b0f17;
  background-image: radial-gradient(circle at 30% 30%, oklch(0.46 0.17 266 / .95), transparent 42%), radial-gradient(circle at 72% 70%, oklch(0.42 0.15 305 / .8), transparent 40%);
  background-size: 220% 220%; background-position: 0% 0%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 24px 70px -18px rgb(35 70 190 / .7); }
.logo svg { display: block; width: 100%; height: 100%; }
h1 { font-size: clamp(52px, 8.4vw, 124px); line-height: .95; letter-spacing: -0.055em; margin: clamp(28px, 3vw, 40px) 0 0; font-weight: 660; }
.sub { font-size: clamp(19px, 2.1vw, 28px); line-height: 1.3; letter-spacing: -0.015em; margin-top: 22px; color: var(--tinta); }
.portada .sub { color: #d9d9e3; }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.boton { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 560; text-decoration: none; letter-spacing: -0.01em; transition: transform .2s, background-color .2s; }
.boton:hover { transform: translateY(-1px); }
.principal { background: var(--tinta); color: var(--fondo); }
.contorno { border: 1px solid var(--borde-fuerte); color: var(--tinta); }
.contorno:hover { background: rgb(255 255 255 / .06); }
.letra { font-size: 13px; color: var(--suave); margin-top: 18px; }

.escaparate { margin: clamp(48px, 6vw, 80px) auto 0; width: min(100% - 40px, var(--ancho)); }
.pantallas { position: relative; }
.principal-img { width: 100%; border-radius: 14px; border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 0 0 1px #000, 0 60px 160px -40px var(--app-brillo), 0 30px 60px -30px #000; }
.telefono { position: absolute; left: -2.5%; bottom: -7%; width: 22%; max-width: 262px; border-radius: 28px; border: 5px solid #05060a; outline: 1px solid rgb(255 255 255 / .16); box-shadow: 0 40px 90px -20px #000; }

/* Lo que hace: un titular y losas de dos tamaños. */
.bloque { padding: clamp(64px, 7vw, 96px) 0; }
h2 { font-size: clamp(40px, 6.6vw, 96px); line-height: .96; letter-spacing: -0.05em; max-width: 13ch; }
#hace { padding-top: clamp(40px, 5vw, 72px); }
#t-hace { margin-bottom: clamp(36px, 4.5vw, 56px); }
.rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.losa { grid-column: span 4; height: 540px; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--superficie); border: 1px solid var(--borde); }
.losa .texto { padding: 30px 30px 0; }
.etiqueta { color: var(--oro); font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
h3 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.08; letter-spacing: -0.035em; margin-top: 10px; }
.losa .texto > p:not(.etiqueta):not(.letra) { color: var(--suave); margin-top: 10px; font-size: 16.5px; line-height: 1.5; }
.captura { flex: 1; min-height: 0; overflow: hidden; display: flex; justify-content: center; padding: 28px 30px 0; }
.captura img { width: min(100%, 300px); align-self: flex-start; border-radius: 20px 20px 0 0; border: 1px solid rgb(255 255 255 / .14); border-bottom: 0; box-shadow: 0 30px 70px -20px rgb(35 70 190 / .45); }

/* La grande: texto a la izquierda, pantalla a la derecha. */
.losa.mayor, .losa.media { height: 540px; }
.losa.mayor { grid-column: span 8; flex-direction: row; background: linear-gradient(160deg, var(--superficie-2), var(--superficie) 60%); }
.mayor .texto { flex: 1; padding: 40px 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.mayor h3 { font-size: clamp(36px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -0.045em; }
.mayor .texto p:not(.etiqueta):not(.cita) { font-size: 17px; max-width: 32ch; color: var(--suave); margin-top: 14px; }
.cita b { display: block; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 620; color: var(--tinta); }
.cita span { display: block; margin-top: 12px; color: var(--suave); font-size: 15.5px; max-width: 34ch; padding-left: 14px; border-left: 2px solid var(--oro); }
.mayor .captura { flex: 0 0 auto; width: 42%; padding: 32px 40px 0 0; }
.mayor .captura img { width: 100%; max-width: 320px; }
/* Una captura más baja que su hueco se apoya abajo y ocupa su ancho: nada de pantalla vacía. */
.captura.corta { padding: 20px 24px 0; }
.captura.corta img { width: min(100%, 328px); align-self: flex-end; }

/* El color: siete horas de verdad de la app, a un toque. */
.losa.color { grid-column: span 7; height: 600px; flex-direction: row; --a: #11409d; --b: #2a3a7a; background: linear-gradient(150deg, color-mix(in oklab, var(--a) 22%, var(--superficie)), var(--superficie) 72%); }
.color .texto { flex: 1; padding: 44px; display: flex; flex-direction: column; }
.color h3 { font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -0.045em; }
.color .letra { margin-top: auto; }
.horas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.horas button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--suave); font: 500 14px/1 Geist, system-ui, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.horas button::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.horas button:hover { color: var(--tinta); }
.horas button[aria-pressed="true"] { color: var(--tinta); border-color: rgb(255 255 255 / .75); background: rgb(255 255 255 / .07); }
.horas button[data-ahora]::after { content: "ahora"; color: var(--oro); font-size: 11px; }
.telefono-color { position: relative; flex: 0 0 auto; width: 44%; padding: 44px 44px 0 0; isolation: isolate; }
.telefono-color::before { content: ""; position: absolute; inset: 6% -12% -10% -30%; z-index: -1; background: radial-gradient(closest-side, var(--a), transparent); opacity: .75; }
.telefono-color img { width: 100%; max-width: 270px; border-radius: 26px 26px 0 0; box-shadow: 0 30px 80px -20px #000; transition: opacity .18s; }
.telefono-color img.cambiando { opacity: 0; }
.losa.listas { grid-column: span 5; height: 600px; }

/* La de cierre de rejilla: lo que Andrew hace sin que le escribas (iniciativa, mañanas, silencio). */
.losa.ancha { grid-column: span 12; height: auto; padding: 38px 44px; gap: 28px; background: linear-gradient(160deg, var(--superficie-2), var(--superficie) 70%); }
.cabeza-ancha h3 { font-size: clamp(28px, 3vw, 40px); max-width: 24ch; }
.puntos-ancha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 36px; padding-top: 22px; border-top: 1px solid var(--borde); }
.puntos-ancha b { display: block; color: var(--tinta); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.puntos-ancha p { color: var(--suave); margin-top: 6px; font-size: 15.5px; line-height: 1.5; }

/* Lo tuyo: denso, en dos columnas. */
.tuyo { border-top: 1px solid var(--borde); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.tuyo h2 { font-size: clamp(36px, 4.8vw, 66px); max-width: 14ch; }
.garantias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.garantias li { color: var(--suave); padding-top: 18px; border-top: 1px solid var(--borde-fuerte); font-size: 16.5px; }
.garantias b { color: var(--tinta); font-weight: 600; }

/* Cierre: la misma luz que la portada, desde abajo. */
.cierre { text-align: center; padding: clamp(24px, 4vw, 56px) 0 clamp(88px, 11vw, 150px); background: radial-gradient(70% 60% at 50% 100%, oklch(0.36 0.14 266 / .85), transparent 72%), var(--fondo); }
.cierre h2 { font-size: clamp(54px, 11vw, 160px); line-height: .92; letter-spacing: -0.058em; max-width: none; }
.cierre .sub { color: #d9d9e3; }

.pie { border-top: 1px solid var(--borde); padding: 40px 0 56px; font-size: 14px; color: var(--suave); }
.pie .ancho > * + * { margin-top: 14px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie nav a { color: var(--tinta); }
.pie .nota { font-size: 12.5px; }

/* Tableta: dos columnas; la grande, el color, las listas y la ancha, a lo ancho. */
@media (max-width: 1100px) {
  .rejilla { grid-template-columns: 1fr 1fr; }
  .losa, .losa.media { grid-column: span 1; }
  .losa.mayor, .losa.color, .losa.listas, .losa.ancha { grid-column: span 2; }
  .losa.listas { flex-direction: row; height: 540px; }
  .listas .texto { flex: 1; padding: 44px; }
  .listas .captura { flex: 0 0 auto; width: 46%; padding: 44px 44px 0 0; }
  .puntos-ancha { grid-template-columns: 1fr; gap: 20px; }
  .dos { grid-template-columns: 1fr; gap: 40px; }
}

/* Móvil: una columna; la portada enseña las dos pantallas del teléfono en fila. */
@media (max-width: 759px) {
  .barra nav .menor { display: none; }
  /* Las dos a un tamaño que se lee, en fila: la segunda asoma y se desliza; la página no se mueve de lado. */
  .escaparate { width: 100%; }
  .pantallas { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 0 calc((100% - min(78vw, 300px)) / 2) 12px; }
  .pantallas::-webkit-scrollbar { display: none; }
  .pantallas > picture, .pantallas > .telefono { display: block; flex: 0 0 min(78vw, 300px); scroll-snap-align: center; }
  .principal-img, .telefono { position: static; width: 100%; max-width: none; border-radius: 20px; border: 1px solid rgb(255 255 255 / .16); outline: 0; box-shadow: 0 24px 60px -18px var(--app-brillo), 0 16px 36px -16px #000; }
  .rejilla { grid-template-columns: 1fr; gap: 14px; }
  .losa, .losa.media, .losa.mayor, .losa.color, .losa.listas, .losa.ancha { grid-column: span 1; height: auto; flex-direction: column; }
  .losa .texto, .mayor .texto, .color .texto, .listas .texto { padding: 26px 24px 0; justify-content: flex-start; }
  .losa.ancha { padding: 26px 24px; gap: 20px; }
  .mayor .captura, .listas .captura, .telefono-color { width: auto; }
  .captura, .mayor .captura, .listas .captura { height: 360px; flex: none; padding: 24px 24px 0; }
  .mayor .captura, .captura.corta { height: auto; }
  .mayor .texto { gap: 24px; }
  .telefono-color { height: 470px; padding: 28px 24px 0; display: flex; justify-content: center; }
  .telefono-color img { width: 230px; }
  .color .letra { margin-top: 18px; }
  .garantias { grid-template-columns: 1fr; gap: 20px; }
}

/* Movimiento: sólo si se quiere, y suave. */
@media (prefers-reduced-motion: no-preference) {
  .escaparate { animation: subir .9s cubic-bezier(.2, .7, .2, 1) both .1s; }
  .logo { animation: tono 16s ease-in-out infinite alternate; }
  @keyframes tono { to { background-position: 100% 100%; } }
  @keyframes subir { from { opacity: 0; transform: translateY(28px); } }
  .anima .revela { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .anima .revela.visto { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}