/*
  Landing de VA!. Los colores salen del design system (packages/design-system/css/tokens.css);
  aquí sólo están los que la página usa.

  Sólo tema claro, a propósito: la app está fija en claro (apps/mobile/app.json,
  userInterfaceStyle: light) y la página tiene que verse como ella. Fondo blanco en todas las
  secciones; el rojo es el único acento.

  Sistema de formas, para que no se mezcle: botones y píldoras redondos del todo (--r-pildora),
  tarjetas y teléfonos a 24 px (--r-tarjeta), campos a 12 px (--r-campo).
*/

@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/poppins-800.woff2') format('woff2'); }

:root {
  color-scheme: light;

  --rojo: #e5261a;
  --rojo-oscuro: #c41911;
  --rojo-tenue: #feecea;
  --verde: #1a7a37;

  --fondo: #ffffff;
  --hundido: #faf8f5;   /* --surface-sunken de la app: el recuadro del subtotal en el carrito */
  --gris-100: #f2efea;
  --texto: #14110f;
  --texto-suave: #635c54;
  --linea: #e5e1db;
  --sombra: 20, 17, 15;

  --fuente: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --r-pildora: 999px;
  --r-tarjeta: 24px;
  --r-campo: 12px;

  --margen: 20px;
  --ancho: 1180px;
  --suave: cubic-bezier(0.2, 0.7, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
}

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

/* El atributo `hidden` tiene que ganar a cualquier `display` de abajo (el resultado del
   verificador es un grid y empezaba visible, vacío). */
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-weight: 800; font-size: clamp(2.375rem, 1.5rem + 3.2vw, 3.875rem); }
h2 { font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
h3 { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0; }

a { color: inherit; }

.acento { color: var(--rojo); }

:focus-visible {
  outline: 3px solid rgba(229, 38, 26, 0.45);
  outline-offset: 3px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Las celdas de las rejillas pueden encoger por debajo de su contenido. Sin esto, la fila del
   verificador (un input de 20 caracteres por defecto más el botón) ensanchaba su columna a 424 px
   en una pantalla de 400 y la página entera se desplazaba de lado. */
.portada__rejilla > *, .pasos__rejilla > *, .zona__rejilla > *, .contacto__caja > * { min-width: 0; }

.ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.ico--grande { width: 28px; height: 28px; }

.saltar {
  position: absolute;
  left: var(--margen);
  top: -100px;
  padding: 10px 16px;
  background: var(--texto);
  color: var(--fondo);
  border-radius: var(--r-pildora);
  z-index: 100;
}
.saltar:focus { top: 12px; }

/* Botones ----------------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: var(--r-pildora);
  font: 600 1rem/1 var(--fuente);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 160ms var(--suave), background-color 160ms var(--suave), border-color 160ms var(--suave);
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: scale(0.98); }
.boton--primario { background: var(--rojo); color: #fff; }
.boton--primario:hover { background: var(--rojo-oscuro); }
.boton--secundario { background: var(--fondo); color: var(--texto); border-color: var(--texto); }
.boton--secundario:hover { background: var(--hundido); }
.boton--compacto { min-height: 42px; padding: 8px 18px; font-size: 0.9375rem; }
.boton[disabled] { opacity: 0.7; cursor: progress; transform: none; }

/* Barra ------------------------------------------------------------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.barra__fila {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}
.marca { display: inline-flex; flex: none; }
.marca img { border-radius: 10px; }
.barra__nav { display: none; gap: 28px; margin-inline: auto; }
.barra__nav a {
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--texto-suave);
  transition: color 160ms var(--suave);
}
.barra__nav a:hover { color: var(--texto); }
.barra .boton { margin-left: auto; }

/* Portada ----------------------------------------------------------------------------------- */

.portada { overflow: hidden; }
.portada__rejilla {
  display: grid;
  gap: 40px;
  padding-block: 40px 56px;
  align-items: center;
}
.portada__texto { display: grid; gap: 22px; max-width: 34rem; }
.portada__sub { font-size: 1.1875rem; color: var(--texto-suave); max-width: 30rem; }

.tiendas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.tiendas__apple { display: inline-flex; border-radius: 8px; }
.tiendas__apple img { height: 53px; width: auto; }
.tiendas__google { display: inline-flex; border-radius: 8px; }
.tiendas__google img { height: 53px; width: auto; }

.portada__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
}
/* Un disco rojo muy tenue: da peso al teléfono sin romper el fondo blanco. */
.disco {
  position: absolute;
  width: min(520px, 110%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rojo-tenue);
  right: -6%;
  top: 6%;
}

/* El marco de teléfono es un rectángulo con esquinas de teléfono: el contenido (la captura
   real) es lo que importa, y una imagen de mockup fotográfico pesaría más que toda la página.
   El bisel oscuro es lo que separa una captura blanca del fondo blanco. */
.telefono {
  position: relative;
  margin: 0;
  width: 280px;
  max-width: 78vw;
  padding: 10px;
  border-radius: 44px;
  background: var(--texto);
  box-shadow: 0 40px 70px -34px rgba(var(--sombra), 0.45);
}
.telefono img {
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1560;
  object-fit: cover;
  border-radius: 34px;
  background: var(--hundido);
}
.telefono--portada { transform: rotate(-3deg); }

/* Pasos ------------------------------------------------------------------------------------- */

.pasos { padding-block: 72px; border-top: 1px solid var(--linea); }
.pasos__rejilla { display: grid; }
.pasos h2 { margin-bottom: 36px; }
.pasos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.paso { display: grid; gap: 10px; justify-items: start; }
.paso p { color: var(--texto-suave); max-width: 30rem; }
.paso__icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: var(--r-pildora);
  background: var(--rojo-tenue);
  color: var(--rojo);
}
.telefono--paso { width: 240px; margin: 18px auto 0; justify-self: center; }
.telefono--paso img { border-radius: 30px; }
.telefono--paso { border-radius: 40px; }
.pasos__visual { display: none; }

/* Teléfono fijo de pantallas anchas: las tres capturas encimadas; se ve la del paso activo. */
.telefono--fijo img { position: absolute; inset: 10px; width: calc(100% - 20px); opacity: 0; transition: opacity 420ms var(--suave); }
.telefono--fijo img:first-child { position: relative; inset: auto; width: 100%; }
.telefono--fijo img.activa { opacity: 1; }

/* Extras ------------------------------------------------------------------------------------ */

.extras { padding-block: 72px; border-top: 1px solid var(--linea); }
.extras h2 { margin-bottom: 40px; max-width: 22ch; }
.extras__rejilla { display: grid; gap: 48px; }
.extra { margin: 0; display: grid; gap: 22px; justify-items: center; text-align: center; }
.telefono--extra { width: 232px; border-radius: 38px; }
.telefono--extra img { border-radius: 28px; }
.extra figcaption { display: grid; gap: 6px; max-width: 18rem; }
.extra p { color: var(--texto-suave); }

/* En el teléfono, las tres se deslizan de lado en vez de apilarse: la página ya trae tres
   capturas en los pasos. */
@media (max-width: 719px) {
  .extras__rejilla {
    grid-auto-flow: column;
    grid-auto-columns: 240px;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--margen) * -1);
    padding: 8px var(--margen) 24px;
    scrollbar-width: thin;
  }
  .extra { scroll-snap-align: center; }
}

/* Zona de entrega --------------------------------------------------------------------------- */

.zona { border-top: 1px solid var(--linea); }
.zona__rejilla { display: grid; gap: 36px; padding-block: 72px; align-items: center; }
.zona__texto { display: grid; gap: 14px; }
.zona__texto > p { font-size: 1.125rem; color: var(--texto-suave); max-width: 32rem; }

.verificador {
  display: grid;
  gap: 10px;
  padding: 28px;
  border-radius: var(--r-tarjeta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  box-shadow: 0 30px 60px -36px rgba(var(--sombra), 0.35);
}
.verificador__etiqueta { font-weight: 600; font-size: 0.9375rem; }
.verificador__fila { display: flex; gap: 10px; }
.verificador__campo {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  padding: 10px 16px;
  border-radius: var(--r-campo);
  border: 1.5px solid var(--linea);
  background: var(--fondo);
  color: var(--texto);
  font: 500 1.125rem/1 var(--fuente);
  letter-spacing: 0.08em;
}
.verificador__campo::placeholder { color: var(--texto-suave); opacity: 0.7; letter-spacing: 0.08em; }
.verificador__campo:focus { border-color: var(--rojo); outline: none; box-shadow: 0 0 0 3px rgba(229, 38, 26, 0.25); }
.verificador__ayuda { font-size: 0.875rem; color: var(--texto-suave); }
.verificador__resultado {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 8px;
  padding: 16px;
  border-radius: var(--r-campo);
  background: var(--hundido);
}
.verificador__resultado strong { display: block; font-weight: 700; }
.verificador__resultado p { color: var(--texto-suave); font-size: 0.9375rem; }
.verificador__resultado[data-estado='cubierto'] .ico { color: var(--verde); }
.verificador__resultado[data-estado='sin-cobertura'] .ico,
.verificador__resultado[data-estado='error'] .ico,
.verificador__resultado[data-estado='invalido'] .ico { color: var(--rojo); }

/* Preguntas --------------------------------------------------------------------------------- */

.preguntas { padding-block: 72px; border-top: 1px solid var(--linea); }
.preguntas h2 { margin-bottom: 24px; }
.preguntas__rejilla { display: grid; column-gap: 40px; }
.pregunta { border-top: 1px solid var(--linea); }
.pregunta:last-child { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary .ico { color: var(--texto-suave); transition: transform 200ms var(--suave); }
.pregunta[open] summary .ico { transform: rotate(180deg); color: var(--rojo); }
.pregunta p { padding: 0 0 20px; color: var(--texto-suave); max-width: 44rem; }

/* Contacto ---------------------------------------------------------------------------------- */

.contacto { padding-block: 8px 72px; }
.contacto__caja {
  display: grid;
  gap: 28px;
  padding: 40px 32px;
  border-radius: var(--r-tarjeta);
  background: var(--hundido);
  border: 1px solid var(--linea);
}
.contacto__caja p { color: var(--texto-suave); margin-top: 8px; }
.contacto__botones { display: flex; flex-wrap: wrap; gap: 12px; align-content: start; }

/* Pie --------------------------------------------------------------------------------------- */

.pie { border-top: 1px solid var(--linea); }
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding-block: 28px;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.pie .marca img { border-radius: 8px; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 20px; }
.pie__nav a { text-decoration: none; }
.pie__nav a:hover { text-decoration: underline; }
.pie__nota { margin-left: auto; }

/* Movimiento: sólo transform y opacity, y nada de esto si la persona pidió menos movimiento. */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--suave), transform 600ms var(--suave); }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .entrada { animation: entrada 700ms var(--suave) both; }
  .portada__texto .entrada:nth-child(2) { animation-delay: 90ms; }
  .portada__texto .entrada:nth-child(3) { animation-delay: 180ms; }
  .portada__visual.entrada { animation-delay: 140ms; }
  @keyframes entrada {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .boton, .pregunta summary .ico, .telefono--fijo img, .paso { transition: none; }
  .boton:hover, .boton:active { transform: none; }
}

/* Pantallas anchas -------------------------------------------------------------------------- */

@media (min-width: 720px) {
  .contacto__caja { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 48px; }
  .contacto__botones { justify-content: flex-end; }
  .preguntas__rejilla { grid-template-columns: 1fr 1fr; }
  .pregunta:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
  /* Las tres en fila, con la de en medio más arriba: no son tres tarjetas iguales en línea. */
  .extras__rejilla { grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
  .extra:nth-child(2) { margin-top: -40px; }
  .extra:nth-child(1), .extra:nth-child(3) { margin-top: 40px; }
}

@media (min-width: 900px) {
  :root { --margen: 32px; }
  .barra__nav { display: flex; }
  .portada__rejilla { grid-template-columns: 1.05fr 0.95fr; padding-block: 56px 80px; gap: 24px; }
  .portada__visual { min-height: 620px; }
  .telefono--portada { width: 300px; }

  /* Pasos: texto que avanza a la izquierda, teléfono fijo a la derecha. Cada paso ocupa casi una
     pantalla para que dé tiempo a leerlo antes de que cambie la captura. */
  .pasos { padding-block: 96px; }
  .pasos__rejilla { grid-template-columns: 1fr 1fr; gap: 64px; }
  .pasos__lista { gap: 0; }
  .paso { min-height: 62vh; align-content: center; }
  .paso:first-child { min-height: 48vh; align-content: start; }
  .paso h3 { font-size: 1.75rem; }
  .paso p { font-size: 1.125rem; }
  .telefono--paso { display: none; }
  .pasos__visual { display: block; }
  .telefono--fijo {
    position: sticky;
    top: calc(68px + (100vh - 68px - min(620px, 100vh - 140px)) / 2);
    width: calc(min(620px, 100vh - 140px) * 720 / 1560 + 20px);
    margin-inline: auto;
  }
  /* Con JavaScript, el paso que no se lee se atenúa; sin él, todo se ve igual. */
  .pasos--vivo .paso { opacity: 0.32; transition: opacity 320ms var(--suave); }
  .pasos--vivo .paso.activo { opacity: 1; }

  .extras { padding-block: 96px 120px; }
  .extras h2 { margin-bottom: 72px; }
  .zona__rejilla { grid-template-columns: 1.1fr 0.9fr; gap: 64px; padding-block: 96px; }
  .verificador { padding: 36px; }
  .preguntas { padding-block: 96px; }
  .contacto { padding-block: 0 96px; }
}