/* BilleteraVial — portada (index.html)
   Complementa a styles.css, que aporta la paleta oficial, la base tipográfica
   y los componentes compartidos con las páginas legales.

   CRITERIO: pocos elementos, cada uno con peso.
   La única imagen es la fotografía del producto — nada de mockups dibujados,
   iconos decorativos ni resplandores. Lo que da presencia es otra cosa:
   escala tipográfica marcada, superficies con borde y sombra calibrada, un
   solo acento, y espaciado que respira. Limpio no es lo mismo que vacío.

   Aquí NO se redefine ningún color de marca: la paleta vive en styles.css.
   Sin fuentes ni recursos externos. */

:root {
  color-scheme: light;

  /* Sistema de sombras. Tres niveles, todos teñidos con el índigo de la marca
     en lugar de negro puro: un gris neutro sobre fondo claro se ve sucio. */
  --sombra-sutil: 0 1px 2px rgba(28, 28, 45, 0.04), 0 2px 8px rgba(28, 28, 45, 0.04);
  --sombra-media: 0 2px 4px rgba(28, 28, 45, 0.04), 0 12px 28px rgba(28, 28, 45, 0.08);
  --sombra-alta: 0 4px 8px rgba(28, 28, 45, 0.06), 0 24px 48px rgba(28, 28, 45, 0.12);

  --radio: 1.25rem;
  --transicion: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* styles.css encierra el contenido en una columna angosta pensada para leer
   documentos legales. La portada necesita secciones a todo el ancho. */
/* La tipografía se hereda de styles.css (pila del sistema). NO declarar `Inter`
   aquí: no está alojada en el proyecto y no se puede traer de un CDN, así que
   solo la vería quien la tenga instalada en su equipo — el resto caería al
   fallback. Sería un resultado al azar, distinto para cada visitante. */
body {
  max-width: none;
  padding: 0;
  background: var(--superficie);
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

.contenido {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─────────────────────────  Hero  ───────────────────────── */

/* Un degradado apenas perceptible desde el gris de fondo hacia el blanco:
   evita el blanco liso —que es lo que hace ver una página "sin terminar"—
   sin agregar un solo elemento. */
.hero {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--fondo) 0%, var(--superficie) 100%);
}

/* En móvil el hero va CENTRADO: sin la fotografía al costado, el texto
   alineado a la izquierda deja un vacío a la derecha que se lee como error de
   maquetación. En escritorio vuelve a la izquierda, donde sí tiene la imagen
   que lo equilibra (ver el bloque de 48rem). */
.hero-texto {
  text-align: center;
}

.logo {
  width: 11rem;
  max-width: 54%;
  height: auto;
  margin: 0 auto 1.5rem;
}

.hero h1 {
  /* El mínimo baja a 1.9rem: en una pantalla de 360 px el titular anterior se
     comía media pantalla antes de que apareciera nada más. */
  margin: 0 auto 1rem;
  font-size: clamp(1.9rem, 7.5vw, 3.3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 18ch;
}

.bajada {
  margin: 0 auto 1.75rem;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

.acciones {
  display: block;
  margin: 0 0 3.5rem;
}

.botones-tiendas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Botones PROPIOS, no badges de tienda. Sin los logos de Apple ni de Google:
   recrear un badge o cambiarle el texto está expresamente prohibido por sus
   guías de marca, y no existe una versión oficial que diga "próximamente".
   Escribir el nombre de la tienda sí está permitido.

   El texto va centrado porque ya no hay icono a la izquierda que lo balancee:
   dejarlo alineado a la izquierda con el hueco vacío se vería como un badge al
   que se le cayó el logo. */
.boton-tienda {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 11.5rem;
  min-height: 3.75rem;
  padding: 0.7rem 1rem;
  background: #111113;
  border: 1px solid #2e2e32;
  border-radius: 0.8rem;
  box-shadow: var(--sombra-media);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--transicion),
    box-shadow var(--transicion),
    background-color var(--transicion);
}

.boton-tienda:hover,
.boton-tienda:focus-visible {
  transform: translateY(-2px);
  background: #202023;
  box-shadow: var(--sombra-alta);
}

.boton-tienda small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.boton-tienda strong {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
  white-space: nowrap;
}

.boton-tienda-inactivo {
  cursor: default;
}

.boton-tienda-inactivo:hover {
  transform: none;
  background: #111113;
  box-shadow: var(--sombra-media);
}

.hero-imagen {
  margin: 0;
  text-align: center;
}

.hero-imagen img {
  display: block;
  width: 100%;
  max-width: 27rem;
  height: auto;
  margin: 0 auto;
  /* `drop-shadow` —no `box-shadow`— sigue la silueta recortada de la mano y la
     billetera, no el rectángulo de la imagen. Tres capas escalonadas: el
     objeto se lee apoyado, no pegado. */
  filter:
    drop-shadow(0 2px 4px rgba(28, 28, 45, 0.06))
    drop-shadow(0 12px 24px rgba(28, 28, 45, 0.1))
    drop-shadow(0 32px 56px rgba(28, 28, 45, 0.14));
}

/* ─────────────────────────  Secciones  ───────────────────────── */

main section {
  padding: 4.25rem 0;
}

.franja {
  background: var(--fondo);
}

/* Antetítulo simple con una línea de marca para identificar cada sección. */
.antetitulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
}

.antetitulo::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  border-radius: 3px;
  background: var(--acento);
}

main section h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.75rem, 4.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 22ch;
}

.entrada {
  margin: 0;
  max-width: 40rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

#privacidad h2 {
  max-width: none;
  font-size: clamp(1.65rem, 3.4vw, 2.25rem);
}

#privacidad .entrada {
  max-width: 47rem;
}

/* ─── Listas: tarjetas con superficie propia ───
   La retícula base mantiene una lectura clara; cada sección puede sumar sus
   propios detalles visuales sin alterar la estructura. */

.lista {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.lista li {
  margin: 0;
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sutil);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.lista li:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

.numerada {
  counter-reset: item;
}

.numerada li {
  counter-increment: item;
}

/* Numeral grande: ordena, escanea y aporta el peso visual que en otras
   landings dan los iconos — sin inventar una iconografía que la app no tiene. */
.numerada li::before {
  content: counter(item, decimal-leading-zero);
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--acento);
  opacity: 0.28;
}

.lista h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.lista p {
  margin: 0;
  color: var(--texto-suave);
  line-height: 1.6;
}

/* Privacidad usa tarjetas horizontales e iconos propios: más compactas y
   reconocibles que una retícula de cajas genéricas. */
.lista-privacidad {
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.lista-privacidad li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0.25rem 0.9rem;
  padding: 1.25rem;
  overflow: hidden;
  box-shadow: none;
}

.lista-privacidad li::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--acento);
  content: "";
  opacity: 0.7;
}

.lista-privacidad li:hover {
  border-color: rgba(51, 51, 122, 0.22);
  box-shadow: var(--sombra-sutil);
}

.icono-privacidad {
  display: grid;
  grid-row: 1 / 3;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 0.8rem;
  background: var(--destacado-fondo);
  color: var(--acento);
}

.icono-privacidad svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.lista-privacidad h3 {
  align-self: end;
}

.lista-privacidad p {
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ─── Qué se puede guardar ─── */

.tipos {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}

.tipos-titulo {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tipos ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.tipos li {
  margin: 0;
  padding: 0.45rem 0.9rem;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(51, 51, 122, 0.14);
  color: var(--superficie);
  font-size: 0.95rem;
  font-weight: 600;
}

.tipos .nota {
  font-size: 1rem;
  line-height: 1.55;
}

.nota {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

/* ─── Descarga ─── */

.descarga {
  background: var(--fondo);
}

.descarga .contenido {
  max-width: 44rem;
  text-align: center;
}

.descarga h2 {
  margin-inline: auto;
}

.descarga p {
  margin-inline: auto;
  max-width: 34rem;
  color: var(--texto-suave);
  font-size: 1rem;
}

.app-store {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* ─── Pie ─── */

footer {
  margin: 0;
  padding: 2.5rem 0;
  border-top: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
}

.footer-principal {
  display: grid;
  gap: 1.5rem;
}

.footer-marca {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.logo-pie {
  width: 2.8rem;
  height: auto;
}

.footer-nombre {
  margin: 0;
  color: var(--texto);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.footer-nombre span {
  color: var(--acento);
}

.footer-frase {
  margin: 0.2rem 0 0;
  color: var(--texto-suave);
  font-size: 0.82rem;
  line-height: 1.4;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

/* Padding vertical para llegar al área táctil cómoda en móvil. */
footer nav a {
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--texto-suave);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}

footer nav a:hover,
footer nav a:focus-visible {
  color: var(--acento);
  border-color: var(--acento);
}

.footer-inferior {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
  font-size: 0.8rem;
}

.footer-inferior p {
  margin: 0;
}

.footer-inferior a {
  width: max-content;
  color: var(--texto-suave);
  text-decoration: none;
  transition: color var(--transicion);
}

.footer-inferior a:hover,
.footer-inferior a:focus-visible {
  color: var(--acento);
}

/* ─────────────────────  Pantallas medianas  ───────────────────── */

@media (min-width: 48rem) {
  #privacidad h2 {
    white-space: nowrap;
  }

  /* Dos columnas: el texto manda a la izquierda y la fotografía ancla la
     derecha, alineada abajo para que la mano "entre en cuadro" desde el borde
     inferior en vez de flotar centrada. */
  .hero-interior {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 3.5rem;
    align-items: center;
  }

  /* Vuelve a la izquierda: aquí la fotografía ocupa la otra columna, así que
     el texto ya no queda descompensado como en móvil. */
  .hero-texto {
    padding-bottom: 0;
    text-align: left;
  }

  .logo {
    width: 15rem;
    max-width: 68%;
    margin-inline: 0;
    margin-bottom: 1.75rem;
  }

  .hero h1 {
    margin-inline: 0;
    max-width: 15ch;
    letter-spacing: -0.04em;
  }

  .bajada {
    margin-inline: 0;
    font-size: 1.1rem;
  }

  .botones-tiendas {
    justify-content: flex-start;
  }

  .acciones {
    margin-bottom: 0;
  }

  .hero-imagen img {
    max-width: 100%;
  }

  .hero-imagen {
    align-self: end;
  }

  .footer-principal,
  .footer-inferior {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  footer nav {
    justify-content: flex-end;
  }

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

  .franja .lista {
    grid-template-columns: repeat(3, 1fr);
  }

  main section {
    padding: 5.25rem 0;
  }
}