/*
 * FIT7 PRO · HOJA DE ESTILOS DE LA LANDING
 * ========================================
 * Escrita a mano, sin Tailwind y sin compilación. Antes esta página cargaba
 * `cdn.tailwindcss.com`: ~400 KB de JavaScript que compilaba el CSS EN EL
 * NAVEGADOR antes de pintar nada, en la única página cuyo trabajo es que
 * alguien pulse «Descargar». Esto son 31 KB de CSS estático (9 KB por el cable,
 * comprimido) y el navegador no tiene que ejecutar nada para pintarlo.
 *
 * Cómo está organizado (busca el número para saltar):
 *   1. Variables            10. Narrativa con teléfono fijo
 *   2. Base y reset         11. Teléfono dibujado en CSS
 *   3. Utilidades           12. Comunidad (la tribu)
 *   4. Aurora de fondo      13. Cierre y descarga
 *   5. Navegación           14. Cifras
 *   6. Botones              15. Pie
 *   7. Cristal              16. Aparición al desplazar
 *   8. Portada              17. Pantallas grandes, móvil y movimiento reducido
 *   9. Pilares
 *
 * CRITERIO DE NOMBRES: clases semánticas en español (`.telefono__pantalla`,
 * `.acto__etiqueta`), no utilidades genéricas. En una página de un solo archivo
 * sale mucho menos CSS y se entiende qué toca cada regla; el HTML queda legible
 * en vez de arrastrar veinte clases por etiqueta.
 */

/* ══════════════ 1 · VARIABLES ══════════════ */
:root {
  /* Paleta Dark Tech: gris plomo casi negro (nunca negro plano) y lima
     eléctrico como único acento. El contraste alto entre ambos es el gesto
     visual de toda la página. */
  --negro: #111215;
  --carbon: #131518;
  --panel: #17191d;
  --grafito: #1a1d21;
  --borde: #26292f;
  --ceniza: #4d5158;
  --gris: #9ba0a8;
  --hueso: #f2f3f5;
  --verde: #d1ff00;
  --verde-alto: #e2ff4d;
  --cian: #d1ff00;

  --display: 'Montserrat', 'Inter', system-ui, sans-serif;
  --texto: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --ancho: 84rem;
  /* Respiración vertical de cada sección. Una sola variable para que todas
     midan lo mismo y cambiarlo sea una línea. */
  --aire: clamp(4.5rem, 9vw, 8.5rem);
  --radio: 1.375rem;
  --radio-chico: 0.875rem;

  /* Cristal: la base de todas las tarjetas. Muy poca opacidad porque encima de
     negro puro cualquier valor alto se ve gris lechoso, no cristal. */
  --cristal: #1a1d21;
  --cristal-alto: #22252a;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sombra: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
}

/* ══════════════ 2 · BASE Y RESET ══════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--negro);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Deja aire por debajo del nav fijo cuando se salta a un ancla. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.98;
  /* Los titulares enormes necesitan tracking negativo o las letras se ven
     desparramadas. Cuanto más grande el texto, más negativo. */
  letter-spacing: -0.03em;
  font-weight: 900;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol,
dl,
dd,
dt {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Foco visible en cian: el verde de marca sobre negro no separa bien del texto
   activo, el cian sí. Nunca se quita el contorno, solo se estiliza. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--cian);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(209, 255, 0, 0.28);
  color: #fff;
}

/* ══════════════ 3 · UTILIDADES ══════════════ */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 2.5rem);
}

.seccion {
  position: relative;
  padding-block: var(--aire);
}

/* Enlace de salto para teclado y lector de pantalla. Fuera de pantalla hasta
   que recibe el foco. */
.saltar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 0.9rem 1.4rem;
  border-radius: var(--radio-chico);
  background: var(--verde);
  color: #111215;
  font-weight: 800;
}

/* Etiqueta de sección. Sustituye a los números 02, 03, 04… del maquetado
   antiguo, que eran una marca del mockup y no información para nadie. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--verde);
}

.etiqueta::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--verde));
}

/* Una sola palabra por titular lleva el acento. Lima sólido, sin degradado:
   el contraste con el plomo oscuro es el gesto de la página. */
.destello {
  color: var(--verde);
}

.titular-mega {
  font-size: clamp(3.25rem, 10.5vw, 7.5rem);
  letter-spacing: -0.045em;
  line-height: 0.92;
}

.titular {
  font-size: clamp(2.35rem, 6.2vw, 4.25rem);
  letter-spacing: -0.04em;
}

.entradilla {
  color: var(--gris);
  font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  max-width: 34ch;
}

/* ══════════════ 4 · AURORA DE FONDO ══════════════ */
/*
 * Tres manchas de color muy difuminadas que derivan despacio detrás de todo,
 * más una rejilla técnica de 1 px que se desvanece hacia los bordes. Va en
 * `position: fixed` y `z-index: -2`, así que es un solo elemento para la página
 * entera: da cohesión sin repetir degradados sección a sección.
 */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.aurora__mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.aurora__mancha--1 {
  width: 52vw;
  height: 52vw;
  top: -16vw;
  right: -8vw;
  background: radial-gradient(circle, rgba(209, 255, 0, 0.14), transparent 66%);
  animation: derivar-1 34s var(--curva) infinite alternate;
}

.aurora__mancha--2 {
  width: 46vw;
  height: 46vw;
  top: 42vh;
  left: -16vw;
  background: radial-gradient(circle, rgba(209, 255, 0, 0.07), transparent 68%);
  animation: derivar-2 46s var(--curva) infinite alternate;
}

.aurora__mancha--3 {
  width: 58vw;
  height: 58vw;
  bottom: -22vw;
  right: -6vw;
  background: radial-gradient(circle, rgba(209, 255, 0, 0.09), transparent 70%);
  animation: derivar-3 54s var(--curva) infinite alternate;
}

.aurora__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(74% 62% at 50% 26%, #000, transparent 78%);
  mask-image: radial-gradient(74% 62% at 50% 26%, #000, transparent 78%);
}

@keyframes derivar-1 {
  to {
    transform: translate3d(-7vw, 6vh, 0) scale(1.14);
  }
}

@keyframes derivar-2 {
  to {
    transform: translate3d(9vw, -8vh, 0) scale(1.1);
  }
}

@keyframes derivar-3 {
  to {
    transform: translate3d(-6vw, -5vh, 0) scale(1.16);
  }
}

/* ══════════════ 5 · NAVEGACIÓN ══════════════ */
/*
 * Empieza invisible sobre la portada y se convierte en cristal a partir de los
 * 24 px de desplazamiento (la clase `.nav--solido` la pone el script). Antes no
 * había barra ninguna: los únicos enlaces estaban en el pie, donde no llega
 * nadie, y el botón de descarga desaparecía al primer scroll.
 */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition:
    background 0.35s var(--curva),
    border-color 0.35s var(--curva),
    backdrop-filter 0.35s var(--curva);
}

.nav--solido {
  background: rgba(17, 18, 21, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

/*
 * MENÚ ABIERTO = BARRA OPACA, SIN EXCEPCIONES.
 *
 * Aquí estaba el bug del móvil. Sobre la portada la barra es transparente a
 * propósito (el fondo solo llega con `.nav--solido`, a partir de 24 px de
 * desplazamiento). Pero el menú desplegable vive DENTRO de esta misma barra, así
 * que al abrirlo arriba del todo —donde nadie ha desplazado nada todavía— los
 * seis enlaces caían encima del logotipo y del titular «Tu mejor versión»: dos
 * textos claros pisándose sin ningún fondo que los separase.
 *
 * `rgba()` no basta: el titular es enorme y se leía por debajo. Fondo OPACO y
 * sombra para despegarlo de la página.
 */
.nav--abierto {
  background: #131518;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.95);
}

.nav__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.5rem;
}

.nav__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.nav__emblema {
  width: 1.85rem;
  height: 1.85rem;
}

.nav__enlaces {
  display: none;
  align-items: center;
  gap: 2.25rem;
}

.nav__enlace {
  position: relative;
  color: var(--gris);
  font-size: 0.94rem;
  font-weight: 500;
  transition: color 0.25s var(--curva);
}

.nav__enlace::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  width: 100%;
  height: 1px;
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--curva);
}

.nav__enlace:hover {
  color: var(--hueso);
}

.nav__enlace:hover::after {
  transform: scaleX(1);
}

.nav__acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* En una barra estrecha caben el APK y la hamburguesa, no las tres cosas: el
   «Abrir Web App» vive en el menú desplegable hasta que hay sitio. */
.nav__acciones .boton--linea {
  display: none;
}

/* Botón hamburguesa: solo existe por debajo de 900 px. Las dos rayas se cruzan
   cuando el menú está abierto (`aria-expanded="true"`). */
.nav__hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radio-chico);
  background: transparent;
  cursor: pointer;
}

.nav__hamburguesa span {
  display: block;
  height: 1.5px;
  background: var(--hueso);
  transition: transform 0.3s var(--curva), opacity 0.2s linear;
}

.nav__hamburguesa[aria-expanded='true'] span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.nav__hamburguesa[aria-expanded='true'] span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

.menu {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  /* Fondo propio: si algún día el menú deja de estar dentro de `.nav`, o el
     navegador no aplica el filtro de fondo, los enlaces siguen legibles. */
  background: #131518;
  /* Un menú de seis enlaces cabe en cualquier móvil, pero si mañana crece —o el
     teléfono está en horizontal, donde la pantalla tiene 320 px de alto— tiene
     que poder desplazarse él en vez de salirse de la pantalla. */
  max-height: calc(100vh - 4.5rem);
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu[hidden] {
  display: none;
}

/* Mientras el menú está abierto la página de detrás no se mueve: en móvil, un
   fondo que se desplaza debajo de un panel fijo se siente roto. */
body.menu-abierto {
  overflow: hidden;
}

.menu__enlace {
  padding: 0.85rem 0.25rem;
  color: var(--hueso);
  font-size: 1.0625rem;
  font-weight: 600;
}

/* ══════════════ 6 · BOTONES E INSIGNIAS ══════════════ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--texto);
  font-size: 0.94rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--curva), box-shadow 0.25s var(--curva);
}

.boton--verde {
  background: var(--verde);
  color: #111215;
}

.boton--verde:hover {
  transform: translateY(-2px);
  background: var(--verde-alto);
}

/* Píldora agresiva de borde lima: el gesto del navbar. */
.boton--linea {
  border: 1px solid var(--verde);
  background: transparent;
  color: var(--verde);
  font-weight: 800;
}

.boton--linea:hover {
  background: rgba(209, 255, 0, 0.1);
  border-color: var(--verde-alto);
  color: var(--verde-alto);
}

/* Los dos botones del cierre: mismo componente, más presencia. */
.boton--grande {
  padding: 1.05rem 2rem;
  font-size: 1.02rem;
}

.acciones {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* En móvil, apilados y contenidos: ni el botón ni la insignia se estiran a
   todo el ancho, quedan centrados con la medida de un pulgar. */
@media (max-width: 39.99rem) {
  .portada .acciones,
  .cierre .acciones {
    align-items: center;
  }

  .portada .acciones > *,
  .cierre .acciones > * {
    width: 100%;
    max-width: 20rem;
  }

  .portada .acciones > .boton,
  .cierre .acciones > .boton {
    justify-content: center;
  }
}

/*
 * INSIGNIA DE DESCARGA
 * Las dos tarjetas grandes («Descargar APK» y «Abrir Web App»). El `::after` es
 * el resplandor magnético: el script guarda la posición del puntero en las
 * variables --mx y --my, y el degradado radial las usa como centro. Sin JS la
 * tarjeta sigue funcionando, solo se queda sin el brillo que sigue al ratón.
 */
.insignia {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0.95rem 1.5rem;
  border-radius: var(--radio);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--curva), border-color 0.3s var(--curva);
}

.insignia:hover {
  transform: translateY(-3px);
}

.insignia::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(209, 255, 0, 0.22),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.35s var(--curva);
}

.insignia:hover::after {
  opacity: 1;
}

.insignia__icono {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--verde);
}

.insignia__previo {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}

.insignia__titulo {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--hueso);
}

/* Chips de confianza bajo la portada: los tres motivos honestos para probarla. */
.confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.confianza li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gris);
}

.confianza li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 8px var(--verde);
}

/* ══════════════ 7 · CRISTAL ══════════════ */
/*
 * El borde no es un `border` normal: es un degradado de 1 px recortado con dos
 * máscaras que se excluyen entre sí. Así el canto de arriba recoge luz blanca y
 * el de abajo tira al verde, que es lo que hace que la tarjeta parezca un
 * cristal con grosor en vez de un rectángulo con línea alrededor.
 */
.cristal {
  position: relative;
  border-radius: var(--radio);
  background: var(--cristal);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.cristal::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(209, 255, 0, 0.18));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ══════════════ 8 · PORTADA ══════════════ */
.portada {
  position: relative;
  padding-top: 8.5rem;
  padding-bottom: var(--aire);
}

.portada__rejilla {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

.portada__logo {
  height: clamp(3rem, 6.5vw, 4.5rem);
  width: auto;
}

.portada h1 {
  margin-top: 2.25rem;
}

.portada .entradilla {
  margin-top: 1.75rem;
  max-width: 40ch;
}

.portada .acciones {
  margin-top: 2.5rem;
}

.portada .confianza {
  margin-top: 1.75rem;
}

/* La escena del teléfono de portada: centrada y con un poco de aire por arriba
   en móvil, donde cae debajo del texto. */
.portada__escena {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* ══════════════ 9 · PILARES ══════════════ */
/* Tarjetas Dark Tech: gris un punto más claro que el fondo, borde sutil e
   icono lima arriba a la izquierda. */
.pilares__rejilla {
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
  grid-template-columns: 1fr;
}

.pilar {
  padding: 1.75rem 1.5rem 1.85rem;
  background: var(--grafito);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: transform 0.35s var(--curva), border-color 0.35s var(--curva);
}

.pilar:hover {
  transform: translateY(-4px);
  border-color: rgba(209, 255, 0, 0.45);
}

.pilar__icono {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--verde);
}

.pilar h3 {
  margin-top: 1.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--hueso);
}

.pilar p {
  margin-top: 0.7rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--gris);
}

/* ══════════════ 10 · NARRATIVA CON TELÉFONO FIJO ══════════════ */
/*
 * A partir de 1024 px el teléfono se queda CLAVADO en el centro de la pantalla
 * (`position: sticky`) mientras los tres textos pasan por su lado, y lo que
 * cambia es la captura de dentro: plan → progreso → nutrición. Tres secciones
 * apiladas se convierten en un solo momento continuo.
 *
 * Por debajo de 1024 px no hay nada fijo: cada acto lleva su propio teléfono
 * debajo del texto (`.acto__telefono`) y la página se lee apilada, como siempre.
 * Son dos maquetados distintos porque un teléfono clavado en una sola columna,
 * con el texto por encima, no funciona en un móvil.
 */
.narrativa__rejilla {
  display: grid;
  gap: 3rem;
}

/* El escenario del teléfono fijo no existe en móvil. */
.narrativa__escenario {
  display: none;
}

.acto {
  padding-block: 1rem;
}

.acto + .acto {
  margin-top: 4.5rem;
}

.acto h2 {
  margin-top: 1.5rem;
}

.acto .entradilla {
  margin-top: 1.5rem;
}

.acto__telefono {
  margin-top: 2.75rem;
  display: flex;
  justify-content: center;
}

/* Los cuatro pilares del estilo de vida, dentro del tercer acto. */
.cuatro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
  max-width: 30rem;
}

.cuatro__icono {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--verde);
}

.cuatro span {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ══════════════ 11 · TELÉFONO DIBUJADO EN CSS ══════════════ */
/*
 * El marco, el bisel, la isla dinámica, los botones laterales y el resplandor
 * verde de debajo son CSS. Lo único que se aporta es una captura PLANA de la
 * pantalla de la app. Ventajas frente a montar la composición en un editor:
 * queda nítido en cualquier densidad de pantalla, se adapta al ancho sin
 * deformarse y para cambiar el marco no hay que reexportar seis PNG.
 *
 * `--alto` permite encoger el teléfono entero desde un solo sitio.
 */
.telefono {
  --alto: 34rem;
  position: relative;
  /* El tamaño NO se declara aquí, sino en `.telefono__pantalla`: la pantalla
   * lleva la proporción exacta de las capturas y el marco se ajusta a ella
   * sumando su propio bisel (el `padding`). Antes la proporción estaba en el
   * marco (`aspect-ratio: 9/19.5`) y la pantalla heredaba una proporción
   * distinta a la de las capturas, así que `object-fit: cover` recortaba por
   * donde le parecía. */
  padding: 0.5rem;
  border-radius: 2.75rem;
  background: linear-gradient(155deg, #2c2c2e 0%, #0a0a0a 38%, #232325 72%, #0d0d0d 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    var(--sombra);
}

/* Resplandor verde bajo el aparato. Va detrás con z-index negativo para que no
   tape la pantalla. */
.telefono::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12%;
  z-index: -1;
  width: 135%;
  height: 45%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(209, 255, 0, 0.38), transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}

.telefono__pantalla {
  position: relative;
  /*
   * LA PROPORCIÓN, EXPLICADA CON NÚMEROS.
   *
   * Las capturas son de 540 × 1206 y traen dentro las dos barras del sistema
   * Android: el reloj arriba y los tres botones de navegación abajo. El reloj y
   * la batería suman realismo (parece un móvil de verdad), pero el triángulo /
   * círculo / cuadrado de abajo delata que es un pantallazo y rompe el marco
   * dibujado.
   *
   * La barra de navegación mide 61 px de esos 1206. Dando a la pantalla la
   * proporción 540 / 1145 (= 1206 − 61) y anclando la imagen arriba
   * (`object-position` en `.telefono__captura`), `object-fit: cover` recorta
   * exactamente esos 61 px de abajo y NADA más: ni un píxel de los lados. Sin
   * editar los archivos del usuario.
   */
  height: var(--alto);
  aspect-ratio: 540 / 1145;
  border-radius: 2.3rem;
  overflow: hidden;
  background: #000;
}

/* Mientras falte el PNG se ve esta trama diagonal con el nombre del archivo
   dentro del propio teléfono: el marco sigue en su sitio y la página no parece
   rota, solo pendiente de una captura. */
.telefono__hueco {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: #17191d;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 0 12px,
    transparent 12px 24px
  );
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  text-align: center;
  color: var(--ceniza);
}

.telefono__captura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anclada ARRIBA: lo que sobra se va por abajo, que es donde está la barra de
     navegación de Android que queremos esconder. Con el valor por defecto
     (`50% 50%`) el recorte se repartía entre arriba y abajo y se comía medio
     reloj. */
  object-position: 50% 0;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 0.75s var(--curva), transform 1s var(--curva);
}

.telefono__captura--activa {
  opacity: 1;
  transform: none;
}

/* Isla dinámica. Va por encima de la captura porque las capturas traen su propia
   barra de estado: el reloj queda a la izquierda y la batería a la derecha, así
   que este óvalo negro cae justo en el hueco central y se lee como la cámara
   frontal del aparato. Medidas ajustadas para NO salir de la barra de estado
   (unos 55 px de los 1145 visibles ≈ 4,8 % de la altura): si fuese más alto se
   comería el encabezado de la app. */
.telefono__isla {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  z-index: 3;
  width: 20%;
  height: 0.85rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

/* Botones físicos del lateral. */
.telefono__boton {
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3a3a3c, #1c1c1e);
}

.telefono__boton--silencio {
  left: -2px;
  top: 22%;
  height: 5%;
}

.telefono__boton--menos {
  left: -2px;
  top: 31%;
  height: 9%;
}

.telefono__boton--mas {
  left: -2px;
  top: 42%;
  height: 9%;
}

.telefono__boton--encendido {
  right: -2px;
  top: 30%;
  height: 13%;
}

/*
 * TARJETAS FLOTANTES
 * Los rótulos de cristal que salen del teléfono («Recomendación IA +5 %»…).
 * Son HTML de verdad, no parte de la imagen: se pueden traducir, se leen con
 * lector de pantalla y quedan nítidas. Aparecen y se van con su acto.
 */
.tarjeta-flotante {
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: 13.5rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radio-chico);
  background: rgba(19, 21, 24, 0.85);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.6s var(--curva), transform 0.7s var(--curva);
  pointer-events: none;
}

.tarjeta-flotante--visible {
  opacity: 1;
  transform: none;
}

.tarjeta-flotante__previo {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
}

.tarjeta-flotante__dato {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hueso);
}

.tarjeta-flotante--1 {
  top: 14%;
  right: -3.5rem;
}

.tarjeta-flotante--2 {
  bottom: 20%;
  left: -4.5rem;
}

.tarjeta-flotante--3 {
  bottom: 9%;
  right: -3rem;
}

/* ══════════════ 12 · COMUNIDAD (LA TRIBU) ══════════════ */
/*
 * Tres tarjetas de cristal y un panel-pacto que las cierra. No lleva capturas:
 * el muro real es de los usuarios y una captura del muro enseñaría publicaciones
 * y caras de gente concreta en una página pública. Con tipografía y aire basta.
 *
 * Las tarjetas comparten forma con `.pilar` pero NO su clase: el pilar es un
 * titular de tres palabras con una línea debajo, y esto es un párrafo de cuatro
 * líneas que necesita otra medida de texto y otro relleno.
 */
.comunidad {
  position: relative;
}

.comunidad__entradilla {
  margin-top: 1.75rem;
  max-width: 52ch;
}

.comunidad__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3.5rem;
}

.tribu {
  padding: 2rem 1.75rem 2.1rem;
  transition: transform 0.35s var(--curva), background 0.35s var(--curva);
}

.tribu:hover {
  transform: translateY(-4px);
  background: var(--cristal-alto);
}

.tribu__icono {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--verde);
}

.tribu h3 {
  margin-top: 1.4rem;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--hueso);
}

.tribu p {
  margin-top: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--gris);
  /* Un párrafo de opinión se lee mejor corto: 42 caracteres por línea aunque la
     tarjeta sea más ancha. */
  max-width: 42ch;
}

/* El pacto: mismo gesto que el panel del cierre, pero con el sello a la
   izquierda y sin botones. Es el remate emocional de la sección, no una acción. */
.comunidad__pacto {
  display: grid;
  gap: 1.75rem;
  margin-top: 1rem;
  padding: clamp(1.85rem, 4vw, 3rem);
  justify-items: start;
}

.comunidad__sello {
  width: clamp(3rem, 6vw, 4rem);
  height: auto;
  color: var(--verde);
  filter: drop-shadow(0 0 26px rgba(209, 255, 0, 0.35));
}

.comunidad__pacto h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--hueso);
}

.comunidad__pacto p {
  margin-top: 1rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--gris);
  max-width: 62ch;
}

.comunidad__lista {
  margin-top: 1.75rem;
}

/* ══════════════ 13 · CIERRE Y DESCARGA ══════════════ */
.cierre {
  position: relative;
  padding-block: var(--aire);
}

.cierre__panel {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  justify-items: center;
}

.cierre__emblema {
  width: clamp(6rem, 14vw, 9rem);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(209, 255, 0, 0.4));
}

.cierre h2 {
  margin-top: 1.75rem;
}

.cierre .entradilla {
  margin-top: 1.5rem;
  max-width: 46ch;
  margin-inline: auto;
}

.cierre .acciones {
  margin-top: 2.5rem;
  align-items: stretch;
}

/* ══════════════ 14 · CIFRAS ══════════════ */
/*
 * Cuatro datos COMPROBABLES. Los de antes («+100K usuarios activos», «4.9 ★★★★★»)
 * eran inventados, y tres líneas más abajo el pie admite que la app se
 * distribuye fuera de Google Play: no puede tener calificación de tienda.
 * El separador de 1 px se hace con `gap` sobre un fondo claro: una rejilla con
 * líneas sin escribir un solo `border`.
 */
.cifras__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 3.5rem;
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.cifra {
  padding: 1.85rem 1.5rem;
  background: rgba(19, 21, 24, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.cifra__icono {
  width: 1.85rem;
  height: 1.85rem;
  color: var(--verde);
}

.cifra__valor {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--verde);
}

.cifra__nombre {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Filete que se llena al aparecer. Detalle de «panel de datos» sin inventarse
   una gráfica que no significa nada. */
.cifra__barra {
  display: block;
  height: 2px;
  margin-top: 1.35rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.cifra__barra i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--verde), var(--cian));
  transition: width 1.4s var(--curva) 0.15s;
}

/* ══════════════ PRECIOS ══════════════
   La única puerta de venta: el checkout de Polar se abre desde AQUÍ, en la web.
   Dos tarjetas, la anual destacada. La nota android repite el patrón de la app:
   el pago vive en fit7pro.com, la app solo lee. */
.precios__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3.5rem;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.precio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radio);
  background: rgba(19, 21, 24, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.precio--destacado {
  border: 2px solid var(--verde);
  box-shadow: 0 0 40px rgba(82, 240, 43, 0.12);
}

.precio__insignia {
  position: absolute;
  top: 0;
  right: 1.5rem;
  transform: translateY(-50%);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--verde);
  color: #08080c;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.precio__nombre {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hueso);
}

.precio__tarifa {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.precio__valor {
  font-family: var(--mono);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.precio__periodo {
  color: var(--gris);
  font-size: 0.85rem;
}

.precio__nota {
  font-size: 0.85rem;
  color: var(--gris);
  margin-top: -0.6rem;
}

.precio__ventajas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--hueso);
}

.precio__ventajas li::before {
  content: "✓";
  margin-right: 0.6rem;
  color: var(--verde);
  font-weight: 700;
}

.precio__boton {
  margin-top: auto;
  text-align: center;
}

.precio__android {
  font-size: 0.8rem;
  color: var(--gris);
  line-height: 1.55;
}

.precios__pie {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--gris);
}

@media (min-width: 720px) {
  .precios__rejilla {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.cifra.revelado .cifra__barra i {
  width: var(--llenado, 100%);
}

/* ══════════════ 15 · PIE ══════════════ */
.pie {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(17, 18, 21, 0.7);
}

.pie__alto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding-block: 3rem;
  text-align: center;
}

.pie__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
}

.pie__enlace {
  font-size: 0.94rem;
  color: var(--gris);
  transition: color 0.25s var(--curva);
}

.pie__enlace:hover {
  color: var(--verde);
}

/* El filete de separación va en el zócalo y no en `.pie__legal`, para que la
   línea cruce toda la ventana y no se corte al ancho del contenedor. */
.pie__zocalo {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.pie__legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1.75rem;
  font-size: 0.82rem;
  color: var(--ceniza);
}

/* La firma es lo único del zócalo que no es letra pequeña legal: va un punto más
   clara que el resto para que se lea como una firma y no como una nota al pie.
   `white-space: nowrap` evita que el copyright se parta en dos renglones en
   pantallas estrechas, que es justo donde peor queda.
   `flex: 0 0 100%` la manda SIEMPRE a su propio renglón: el zócalo tenía dos
   párrafos y en pantallas de ~700 px los tres a la vez estrangulaban los dos
   primeros hasta tres líneas cada uno. Con esto arriba siguen quedando esos dos,
   como antes, y la firma debajo. */
.pie__firma {
  flex: 0 0 100%;
  color: rgba(229, 226, 225, 0.72);
  white-space: nowrap;
}

/* ══════════════ 16 · APARICIÓN AL DESPLAZAR ══════════════ */
/*
 * Por defecto TODO está visible: la clase que esconde (`.oculto`) la pone el
 * script. Si el JavaScript falla o el navegador es viejo, la página se ve
 * entera. Es al revés de como se hace normalmente, y es a propósito.
 */
.oculto {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
}

.revelado {
  opacity: 1;
  transform: none;
  /* El retardo lo escribe el script hermano a hermano: 70 ms de diferencia
     entre las tarjetas de una rejilla es lo que convierte «todo aparece a la
     vez» en «va entrando». */
  transition:
    opacity 0.7s var(--curva) var(--retardo, 0ms),
    transform 0.7s var(--curva) var(--retardo, 0ms);
}

/* ══════════════ 17 · PANTALLAS GRANDES ══════════════ */
@media (min-width: 40rem) {
  .acciones {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cuatro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cifras__rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pilares__rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Dos y una: la tercera tarjeta ocupa el ancho completo en vez de dejar un
     hueco vacío a su derecha. */
  .comunidad__rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comunidad__rejilla .tribu:last-child {
    grid-column: 1 / -1;
  }

  .comunidad__rejilla .tribu:last-child p {
    max-width: 66ch;
  }

  .pie__alto {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .pie__legal {
    flex-direction: row;
    /* Con `wrap`, la firma (que pide el 100 % del ancho) baja sola a su renglón
       y los dos párrafos legales se reparten el de arriba como siempre. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 56.25rem) {
  .nav__enlaces {
    display: flex;
  }

  .nav__acciones .boton--linea {
    display: inline-flex;
  }

  .nav__hamburguesa,
  .menu {
    display: none;
  }

  .pilares__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .comunidad__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .comunidad__rejilla .tribu:last-child {
    grid-column: auto;
  }

  .comunidad__rejilla .tribu:last-child p {
    max-width: 42ch;
  }

  /* El sello a la izquierda del texto, como el emblema del cierre. */
  .comunidad__pacto {
    grid-template-columns: auto 1fr;
    gap: clamp(1.75rem, 3.5vw, 2.75rem);
    align-items: center;
    margin-top: 1rem;
  }

  .cifras__rejilla {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .portada {
    padding-top: 10.5rem;
  }

  .portada__rejilla {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .pilares__rejilla {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .cierre__panel {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    text-align: left;
    justify-items: start;
  }

  .cierre .entradilla {
    margin-inline: 0;
  }
}

/* El scroll narrativo: solo a partir de 1024 px de ancho. */
@media (min-width: 64rem) {
  .narrativa__rejilla {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    /* `start` es lo que permite que el hijo pegajoso viaje por toda la altura de
       su celda en vez de estirarse y quedarse quieto. */
    align-items: start;
  }

  .narrativa__textos {
    order: 1;
    /*
     * Cola de aire debajo del último acto. Sin ella el teléfono pegajoso se
     * despega ANTES de que el tercer acto llegue al centro de la pantalla: un
     * elemento `sticky` solo puede viajar hasta el final de su celda, y la celda
     * acaba donde acaba esta columna. Estos 26vh son el margen que hace que el
     * teléfono aguante hasta el final del tercer texto. La sección compensa el
     * hueco quitándose su relleno inferior.
     */
    padding-bottom: 26vh;
  }

  .narrativa {
    padding-bottom: 0;
  }

  .narrativa__escenario {
    order: 2;
    display: flex;
    position: sticky;
    top: 0;
    height: 100vh;
    align-items: center;
    justify-content: center;
  }

  /* Cada acto ocupa casi una pantalla: es lo que da tiempo a leerlo antes de que
     la captura del teléfono cambie. */
  .acto {
    display: flex;
    min-height: 90vh;
    flex-direction: column;
    justify-content: center;
    padding-block: 0;
  }

  .acto + .acto {
    margin-top: 0;
  }

  .acto__telefono {
    display: none;
  }

  .telefono {
    --alto: min(38rem, 74vh);
  }
}

/* ══════════════ MÓVIL: AURORA MÁS BARATA ══════════════ */
/*
 * Difuminar tres manchas de 55vw es caro en una GPU de móvil. Por debajo de
 * 40 rem se quita la tercera, se baja el radio del difuminado y se para la
 * deriva: el efecto se mantiene y el desplazamiento va fluido.
 */
@media (max-width: 40rem) {
  .aurora__mancha {
    filter: blur(60px);
    animation: none;
  }

  .aurora__mancha--3 {
    display: none;
  }

  .telefono {
    --alto: min(30rem, 72vh);
  }

  .tarjeta-flotante {
    display: none;
  }
}

/* ══════════════ MÓVIL ESTRECHO: LA BARRA SUPERIOR ══════════════ */
/*
 * A 375 px de ancho —el móvil más común— la marca terminaba en el píxel 121 y el
 * botón verde empezaba en el 145: técnicamente no se solapaban, pero 24 px entre
 * el logotipo y una pastilla verde encendida se leen como un choque. Aquí el
 * botón se compacta y se recupera medio centímetro de aire a cada lado.
 *
 * No se esconde: es la acción principal de toda la página y tiene que estar
 * siempre a un dedo de distancia. La descarga también está dentro del menú
 * desplegable para quien llegue por ahí.
 */
@media (max-width: 30rem) {
  .nav__acciones .boton--verde {
    padding: 0.62rem 0.95rem;
    font-size: 0.82rem;
  }

  .nav__marca {
    font-size: 1rem;
  }
}

/* ══════════════ MOVIMIENTO REDUCIDO ══════════════ */
/*
 * Quien pide menos movimiento en su sistema recibe la página completa y quieta:
 * sin aurora en marcha, sin apariciones, sin desplazamiento suave. Los cambios
 * de captura del teléfono siguen ocurriendo, pero de golpe, sin fundido.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .aurora__mancha {
    animation: none;
  }

  .oculto,
  .revelado {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .telefono__captura,
  .tarjeta-flotante,
  .cifra__barra i,
  .boton,
  .insignia,
  .pilar {
    transition: none;
  }

  .insignia:hover,
  .pilar:hover,
  .boton--verde:hover {
    transform: none;
  }
}


/* ══════════════ BOTÓN GOOGLE PLAY ══════════════ */
/*
 * Insignia oficial del estilo «Disponible en Google Play», dibujada en SVG
 * para no cargar un PNG: se escala nítida en cualquier tamaño y pesa ~2 KB.
 * El enlace sigue apuntando al APK hasta que la app viva en la tienda.
 */
/*
 * La insignia es el PNG oficial de Google (transparente, con el texto dentro).
 * La altura queda clavada a la del botón que tiene al lado y el ancho crece
 * solo, así que nunca se deforma ni desborda.
 */
.boton-play {
  display: inline-flex;
  align-items: center;
  height: 4.05rem;
  transition: opacity 0.25s var(--curva);
}

.boton-play:hover {
  opacity: 0.85;
}

.boton-play__png {
  display: block;
  height: 100%;
  width: auto;
}

.acciones--centro {
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .boton-play {
    transition: none;
  }
}

/* ══════════════ PULIDO PREMIUM ══════════════ */
/*
 * Capa de refinamiento sobre el diseño existente: más aire entre secciones,
 * cristales con un borde de luz al pasar, selección de texto de marca y un
 * scroll bar acorde al tema oscuro. Nada reescribe lo de arriba: solo lo
 * afina.
 */
:root {
  --aire: clamp(5.5rem, 11vw, 9.5rem);
}

::selection {
  background: rgba(209, 255, 0, 0.25);
  color: #fff;
}

html {
  scrollbar-color: #2a2d33 #111215;
}

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

.cristal {
  transition: transform 0.3s var(--curva), border-color 0.3s var(--curva),
    box-shadow 0.3s var(--curva);
}

.cristal:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.seccion:first-of-type {
  padding-top: calc(var(--aire) + 1rem);
}

.entradilla {
  color: #9d9995;
  max-width: 38ch;
}

@media (prefers-reduced-motion: reduce) {
  .cristal {
    transition: none;
  }
}