/* ============================================================
   PLENO GARAGE — Landing
   Solo la pagina principal. Carga DESPUES de estilos.css, de
   donde salen todos los colores y las tipografias.

   Aca no hay ni un color escrito a mano: si hace falta un tono
   intermedio se mezcla con color-mix a partir de la paleta.
   ============================================================ */

/* La landing es de ancho completo: el <body> NO lleva la clase
   "centrado" y por lo tanto no hay nada que anular aca. */

/* ------------------------------------------------------------
   Bandas
   ------------------------------------------------------------ */

/* El fondo de la pagina. Las bandas lo tapan entero, pero si
   una seccion quedara sin color asignado, cae sobre crema y no
   sobre el blanco del navegador. */
body { background: var(--crema); }

.banda { padding-block: 76px; }

/* ------------------------------------------------------------
   Las bandas

   Cada seccion ocupa su franja de lado a lado y el color dice
   donde empieza y donde termina. El orden de los colores no es
   decorativo, sigue tres reglas:

   1. Nunca dos secciones seguidas del mismo color, o se leen
      como una sola seccion larga.
   2. Tres fondos, no cinco: crema para leer, celeste para
      elegir, oscuro para cerrar.
   3. El celeste del inicio no es un gusto: las filas de packs
      son blancas, y sobre crema se aplastarian contra el fondo.
      El celeste atras es lo que las levanta y hace que cada una
      se lea como algo que se toca.

   Habia una cuarta banda azul con los datos de transferencia,
   entre "como funciona" y "ganadores". Se borro: esos datos
   ahora salen en comprar.html, en el paso 2, junto al codigo de
   referencia.
   ------------------------------------------------------------ */

#inicio    { background: var(--celeste); }
#como      { background: var(--crema);   }
#ganadores { background: var(--celeste); }
#faq       { background: var(--crema);   }

.banda.crema    { background: var(--crema); }
.banda.celeste  { background: var(--celeste); }
.banda.azul     { background: var(--azul);        color: var(--texto-inverso); }
.banda.profunda { background: var(--azul-oscuro); color: var(--texto-inverso); }

.interior {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* El inicio es mas ancho que el resto: adentro tiene la foto y
   las siete filas de packs, uno al lado del otro. Y lleva poco
   aire arriba y abajo porque app.js le mide el alto a la foto
   para que entre justa en la pantalla. */
.inicio.banda { padding-block: 26px; }
.inicio > .interior { max-width: min(1500px, 95vw); }

footer.banda.profunda { padding-block: 64px; }

@media (max-width: 860px) {
  .banda { padding-block: 46px; }
}

.titulo-seccion {
  font-size: clamp(26px, 4vw, 38px);
  margin: 6px 0 10px;
}

.bajada-seccion {
  max-width: 54ch;
  color: var(--texto-tenue);
  margin-bottom: 36px;
}

.banda.azul .etiqueta,
.banda.profunda .etiqueta { color: var(--celeste); }

.banda.azul .bajada-seccion,
.banda.profunda .bajada-seccion,
.banda.azul .muted,
.banda.profunda .muted {
  color: color-mix(in srgb, var(--celeste) 80%, var(--azul));
}

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

.barra {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--crema) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.barra-interior {
  max-width: 1080px;
  margin: 0 auto;
  padding-block: 12px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.barra .marca img { height: 32px; }

.barra .boton { width: auto; padding: 11px 22px; font-size: 15px; }

/* ------------------------------------------------------------
   Inicio: el tablero

   La foto del vehiculo tapada por 2000 cuadraditos. Cada uno
   vale un puñado de numeros (100 en un sorteo de 200.000) y se
   destapa cuando esos numeros se venden.

   La foto va abajo y el canvas encima. El canvas no dibuja la
   foto: dibuja la tapa y le hace agujeros. Asi la foto se ve
   nitida y el codigo no tiene que leer un solo pixel de ella.
   ------------------------------------------------------------ */

/* UN SOLO alto manda en todo el inicio: lo que sobra de la
   pantalla despues de la barra de arriba y un respiro. La foto
   lo usa de alto, y la columna de al lado tambien, asi las dos
   empiezan y terminan en la misma linea sin acomodar nada a
   mano. El max() es para que en notebooks bajas no se aplaste.

   dvh y no vh por el celular, donde la barra del navegador se
   esconde al scrollear y vh mide de mas. */
.inicio {
  padding-block: 26px;
  /* Valor de arranque nomas: el de verdad lo pone app.js midiendo
     la barra, porque su alto depende del logo y de la tipografia
     y no se puede saber desde el CSS. */
  --alto: max(560px, calc(100dvh - 170px));
}

/* El ancho del inicio se fija arriba, junto con las bandas. Aca
   habia una segunda declaracion que ganaba por venir despues:
   dos lugares distintos decidiendo el mismo numero. */

.tablero-inicio {
  display: grid;
  /* La foto es "auto": su ancho sale de su alto, porque es 1:1.
     La columna se queda con el resto, con un piso de 340 para
     que los packs no se aplasten en pantallas angostas. */
  grid-template-columns: auto minmax(340px, 1fr);
  gap: 40px;
  align-items: stretch;
}

/* ---- La escena (foto + tapa) ---- */

.escena {
  position: relative;
  margin: 0;
  /* Cuadrada 1:1. Llenando el alto de la pantalla, una foto
     cuadrada mide lo mismo de ancho que de alto: 864 px donde una
     2:3 medía 576. La misma altura y un 50% mas de ancho.
     El alto es lo que sobra de la pantalla despues de la barra de
     arriba (104) y un respiro de 32. El ancho lo deduce
     el navegador de la proporcion: no se escribe. dvh y no vh por
     el celular, donde la barra del navegador se esconde al
     scrollear y vh mide de mas. */
  height: var(--alto);
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: 100%;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--azul-oscuro);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--azul-oscuro) 24%, transparent);
}

.escena-foto,
.escena-tapa {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.escena-foto {
  object-fit: cover;
  /* Un empujon suave: lo que se destapa tiene que leerse como
     una moto iluminada, no como una foto apagada detras de un
     vidrio. Suave a proposito, para que siga siendo la foto
     que ellos subieron. */
  filter: brightness(1.12) saturate(1.08);
}

.escena-tapa { z-index: 1; }

/* Mientras no hay foto cargada: la misma diagonal del resto del
   sitio, para que se vea que falta la foto y no que fallo algo. */
.escena.sin-foto {
  background: repeating-linear-gradient(
    -45deg,
    var(--azul) 0 16px,
    color-mix(in srgb, var(--azul) 78%, var(--azul-oscuro)) 16px 32px
  );
}

/* ---- El medidor ----
   Va en la columna, no sobre la foto. Con la foto grande el pie
   de la imagen queda abajo del borde de la pantalla, y el
   porcentaje es justo lo que tiene que verse de entrada. */

.medidor {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 2px 0 0;
  padding: 11px 16px;
  border-radius: var(--radio-chico);
  background: var(--blanco);
  border: 1px solid var(--borde-fuerte);
}

.medidor-cifra {
  font-family: var(--tipo-titulo);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.medidor-pie {
  font-size: 13px;
  color: var(--texto-tenue);
}

/* ---- La columna de al lado ---- */

/* La columna mide lo mismo que la foto y reparte adentro: todo
   lo fijo arriba y abajo, y los packs se estiran para llenar lo
   que sobra. Por eso las filas quedan siempre alineadas con el
   borde de la foto, haya 3 packs o 7. */
.lado-inicio {
  min-width: 0;
  height: var(--alto);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* La letra va mas chica que antes: ahora todo el texto comparte
   el alto con los siete packs. */
.inicio-titulo {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.8px;
  margin: 2px 0 0;
}

.inicio-bajada {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto-tenue);
  max-width: 52ch;
}

.inicio-fecha {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.inicio-fecha .faltan {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--blanco);
  border: 1px solid var(--borde-fuerte);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---- La etiqueta del ejemplo ---- */

.ejemplo {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--azul-oscuro) 86%, transparent);
  color: var(--crema);
  backdrop-filter: blur(6px);
  font-family: var(--tipo-titulo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;

  /* Se va junto con los circulitos. El cartel aclara que los
     numeros son inventados, asi que tiene que estar mientras se
     ven los numeros y no despues. */
  opacity: 1;
  transition: opacity .5s ease;
}

.ejemplo.yendose { opacity: 0; }

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

/* ---- El medidor ----
   Va en la columna, no sobre la foto. Con la foto grande el pie
   de la imagen queda abajo del borde de la pantalla, y el
   porcentaje es justo lo que tiene que verse de entrada. */

.medidor {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 2px 0 0;
  padding: 11px 16px;
  border-radius: var(--radio-chico);
  background: var(--blanco);
  border: 1px solid var(--borde-fuerte);
}

.medidor-cifra {
  font-family: var(--tipo-titulo);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.medidor-pie {
  font-size: 13px;
  color: var(--texto-tenue);
}

/* ---- La columna de al lado ---- */

/* La columna mide lo mismo que la foto y reparte adentro: todo
   lo fijo arriba y abajo, y los packs se estiran para llenar lo
   que sobra. Por eso las filas quedan siempre alineadas con el
   borde de la foto, haya 3 packs o 7. */
.lado-inicio {
  min-width: 0;
  height: var(--alto);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* La letra va mas chica que antes: ahora todo el texto comparte
   el alto con los siete packs. */
.inicio-titulo {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.8px;
  margin: 2px 0 0;
}

.inicio-bajada {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto-tenue);
  max-width: 52ch;
}

.inicio-fecha {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.inicio-fecha .faltan {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--blanco);
  border: 1px solid var(--borde-fuerte);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---- Los atajos a los packs ---- */

.rotulo-packs {
  margin: 4px 0 0;
  font-family: var(--tipo-titulo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* flex:1 y min-height:0 son los dos que hacen que las filas se
   repartan el alto sobrante. Sin el min-height, una fila nunca
   baja de su contenido y la columna se pasa de largo. */
.atajos {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

/* Los packs acompañan, no compiten: la que tiene que llamar la
   atencion es la foto. Por eso van chicos y tranquilos. */
.atajo {
  position: relative;
  /* Cuatro columnas: el numero, el descuento con el precio por
     chance, el boton de comprar y el precio. La del boton reserva
     su lugar siempre, aunque el boton este invisible: asi la fila
     no da un salto cuando pasas el mouse por encima. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex: 1;
  /* El piso evita que, si la pantalla es muy baja, las filas se
     aplasten por debajo de su contenido y el texto se derrame
     por encima de la fila de al lado. */
  min-height: 44px;
  padding: 5px 14px;
  overflow: hidden;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  background: var(--blanco);
  font: inherit;
  text-align: left;
  color: var(--texto);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.atajo:hover { background: var(--hover); border-color: var(--borde-fuerte); }

.atajo.elegido {
  border-color: var(--azul);
  box-shadow: inset 0 0 0 1px var(--azul);
  background: var(--hover);
}

.atajo-chances {
  font-family: var(--tipo-titulo);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  min-width: 2.6em;
}

.atajo-chances small {
  display: block;
  margin-top: 2px;
  font-family: var(--tipo-texto);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* El descuento y el precio por chance van en UNA linea, no
   apilados: apilados la fila necesita 45px de alto y en
   notebooks bajas solo hay 46, asi que el texto se derramaba
   sobre la fila de al lado. */
.atajo-medio {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* El chip del descuento: es lo que hace que el pack grande se
   venda solo. Va arriba del precio por chance. */
.atajo-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--celeste) 70%, var(--blanco));
  border: 1px solid var(--borde-fuerte);
  font-family: var(--tipo-titulo);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}

.atajo-chip.base {
  background: transparent;
  border-color: transparent;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10px;
  padding-inline: 0;
  color: var(--texto-tenue);
}

/* El precio por chance: es el argumento del pack grande, y venia
   de la seccion de abajo que se borro. */
.atajo-unitario {
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atajo-precio {
  font-family: var(--tipo-titulo);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* El boton de comprar, adentro de la fila.
   Vive en el hueco blanco que quedaba al lado del precio y
   aparece cuando esa fila esta elegida o tenes el mouse encima.
   El primer toque elige el pack y muestra el ejemplo sobre la
   foto; el segundo, ya sobre el boton, lleva a comprar.
   Antes esto era un boton suelto abajo de las siete filas: con
   siete packs no entraba en la columna y se montaba sobre la
   ultima fila. */
.atajo-ir {
  justify-self: end;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--azul);
  background: var(--azul);
  font-family: var(--tipo-titulo);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--crema);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, background .15s;
}

.atajo.elegido .atajo-ir,
.atajo:focus-within .atajo-ir {
  opacity: 1;
  pointer-events: auto;
}

/* El hover va aparte, solo donde hay mouse de verdad. En un
   telefono el navegador deja el "hover" pegado en lo ultimo que
   tocaste, asi que sin esto el boton quedaba del color de
   apretado despues de soltarlo. */
@media (hover: hover) {
  .atajo:hover .atajo-ir { opacity: 1; pointer-events: auto; }
}

/* Apretado: el mismo azul un poco mas oscuro. --azul-oscuro es
   casi negro y al lado del boton del encabezado se veia como
   otro boton distinto. */
.atajo-ir:hover,
.atajo-ir:focus-visible {
  background: color-mix(in srgb, var(--azul) 84%, #000);
  border-color: color-mix(in srgb, var(--azul) 84%, #000);
}

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

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

.boton-secundario {
  display: inline-block;
  padding: 11px 20px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  background: transparent;
  font-family: var(--tipo-titulo);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--azul);
  transition: background .15s, border-color .15s;
}

.boton-secundario:hover { background: var(--blanco); border-color: var(--azul); }
/* ---- Telefono ---- */

@media (max-width: 860px) {
  .tablero-inicio {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* En el celular la foto va primero y ocupa lo que puede sin
     empujar todo lo demas fuera de la pantalla. */
  .escena { height: auto; width: min(100%, 360px); margin-inline: auto; }

  /* Y se corta la atadura de alto: en una sola columna no hay
     nada con que alinearse, y mantenerla aplastaba las filas por
     debajo de su contenido. Cada una vuelve a medir lo suyo. */
  .lado-inicio { height: auto; }
  .atajo { flex: none; grid-template-columns: auto minmax(0, 1fr) auto; }

  /* En el telefono no hay mouse, asi que no hay nada que mostrar
     "al pasar por encima": el boton aparece al elegir la fila. Y
     va en un renglon propio, de lado a lado, porque al lado del
     precio no entra y porque asi es facil de tocar. */
  /* El precio se queda clavado en el primer renglon. Sin esto el
     boton abre un renglon nuevo, el precio cae AL RENGLON DE
     ABAJO del boton y la fila queda leyendose al reves. */
  .atajo-precio { grid-row: 1; grid-column: 3; }

  .atajo-ir {
    display: none;
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
    padding-block: 11px;
    font-size: 13px;
  }

  .atajo.elegido {
    row-gap: 9px;
    padding-bottom: 9px;
  }

  .atajo.elegido .atajo-ir {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .inicio-titulo { font-size: clamp(26px, 8vw, 34px); }
  .medidor-cifra { font-size: 26px; }
  .boton-secundario { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------
   Packs
   ------------------------------------------------------------ */

.packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
  gap: 16px;
}

.pack {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pack-nombre {
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accion);
}

.pack-chances {
  font-family: var(--tipo-titulo);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.pack-chances small {
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-tenue);
  margin-left: 6px;
}

.pack-precio { font-size: 22px; font-weight: 600; margin-top: 8px; }

.pack-unitario {
  font-size: 13px;
  color: var(--texto-tenue);
  margin-bottom: 16px;
}

.pack .boton { margin-top: auto; }

/* ------------------------------------------------------------
   Como funciona
   ------------------------------------------------------------ */

.pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 760px) {
  .pasos { grid-template-columns: repeat(2, 1fr); }
}

/* Cuatro en fila. Esto funciona porque la seccion ocupa la
   pantalla entera: un @media solo puede mirar el ancho de la
   VENTANA, no el del contenedor. Si "como funciona" volviera a
   meterse adentro de algo mas angosto, aca habria que mirar el
   contenedor y no la ventana. */
@media (min-width: 1000px) {
  .pasos { grid-template-columns: repeat(4, 1fr); }
}

.paso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.paso-num {
  font-family: var(--tipo-titulo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accion);
  margin-bottom: 12px;
}

.paso h3 { font-size: 18px; margin-bottom: 8px; }
.paso p { font-size: 15px; color: var(--texto-tenue); }

.icono {
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  fill: none;
  stroke: var(--accion);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------
   Datos de pago
   ------------------------------------------------------------ */

.pago {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 620px;
}

.dato {
  background: color-mix(in srgb, var(--crema) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--crema) 22%, transparent);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.dato-etiqueta {
  font-family: var(--tipo-titulo);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--celeste);
  display: block;
  margin-bottom: 3px;
}

.dato-valor {
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 17px;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.dato .boton-copiar {
  font-family: var(--tipo-texto);
  font-size: 14px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--crema) 40%, transparent);
  color: var(--crema);
  padding: 9px 16px;
  border-radius: var(--radio-chico);
  cursor: pointer;
  flex-shrink: 0;
}

.dato .boton-copiar:hover { border-color: var(--crema); }

.dato .boton-copiar:focus-visible {
  outline: 2px solid var(--celeste);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Ganadores
   ------------------------------------------------------------ */

.ganadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;

  /* Cada tarjeta mide lo que mide su contenido.
     Por defecto la grilla las estira todas a la altura de la mas
     alta: con una sola entrega con foto, las otras dos quedaban
     con un palmo de blanco abajo y parecian rotas. Unas mas
     altas que otras se lee como lo que es, unas tienen foto y
     otras todavia no. */
  align-items: start;
}

.ganador {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 22px;
  min-width: 0;
}

/* La foto de la entrega. Recorte centrado en 4:3: las fotos
   llegan del celular de cualquiera, paradas o acostadas, y asi
   las tres tarjetas quedan parejas sin pedirle a nadie que
   recorte nada. El fondo tapa el hueco mientras carga. */
.ganador-foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--hover);
  margin-bottom: 14px;
}

.ganador-numero {
  font-family: var(--tipo-titulo);
  font-size: 34px;
  font-weight: 700;
  color: var(--accion);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ganador-nombre { font-weight: 600; margin-top: 8px; }
.ganador-sorteo { font-size: 14px; color: var(--texto-tenue); }

/* Un lugar todavia sin ganador.
   Tiene que leerse como un lugar reservado y NUNCA como un
   ganador: sin fondo, borde punteado y los textos apagados. La
   diferencia con una tarjeta de verdad se ve de lejos, sin
   leerla. En una pagina de sorteos, una tarjeta vacia que
   pareciera llena seria un problema serio. */
.ganador-vacio {
  /* Un velo de blanco, no transparente del todo. Son dos cosas
     de una: el recuadro se despega del celeste de la banda, y
     "Pendiente" deja de apoyarse sobre el celeste, donde el gris
     tenue daba 4,48:1 y AA pide 4,5. */
  background: color-mix(in srgb, var(--blanco) 55%, transparent);
  border: 1px dashed var(--borde-fuerte);
  box-shadow: none;
}

.ganador-vacio .ganador-numero { color: var(--borde-fuerte); }

.ganador-vacio .ganador-nombre {
  color: var(--texto-tenue);
  font-weight: 500;
}

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

.faq-partida {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .faq-partida { grid-template-columns: 4fr 7fr; gap: 48px; align-items: start; }
}

.faq { min-width: 0; }

.faq details {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.faq summary {
  padding: 17px 20px;
  cursor: pointer;
  font-family: var(--tipo-titulo);
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-size: 22px;
  color: var(--accion);
  flex-shrink: 0;
  line-height: 1;
}

.faq details[open] summary::after { content: "–"; }

.faq summary:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: -2px;
}

.faq-cuerpo {
  padding: 0 20px 18px;
  color: var(--texto-tenue);
}

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

.pie-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 760px) {
  .pie-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.pie-grid h3 {
  font-family: var(--tipo-titulo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--celeste);
  margin-bottom: 14px;
}

.pie-grid a {
  color: var(--crema);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 15px;
}

.pie-grid a:hover { text-decoration: underline; }

.pie-grid a svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--celeste);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pie-grid p {
  color: color-mix(in srgb, var(--celeste) 80%, var(--azul-oscuro));
  font-size: 15px;
  line-height: 1.6;
}

.pie-marca img { height: 38px; margin-bottom: 14px; }

.pie-legal {
  border-top: 1px solid color-mix(in srgb, var(--crema) 18%, transparent);
  margin-top: 36px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: color-mix(in srgb, var(--celeste) 65%, var(--azul-oscuro));
}

.pie-legal a {
  color: inherit;
  display: inline;
  margin: 0;
  font-size: inherit;
}

/* ------------------------------------------------------------
   Revelado al hacer scroll

   Lo maneja el navegador con animation-timeline, no un listener
   del evento scroll: la animacion corre fuera del hilo principal,
   asi que el dedo del usuario nunca espera a que termine codigo
   nuestro.

   SOLO SE ANIMA EL DESPLAZAMIENTO, NUNCA LA OPACIDAD. Si el
   contenido arrancara en opacity:0 esperando la animacion, un
   navegador que no la corra bien dejaria la pagina en blanco.
   Moviendo, el peor caso posible es que no se mueva.

   Esa fue la primera version y se vio al renderizarla: cuatro
   secciones enteras salian vacias.
   ------------------------------------------------------------ */

@keyframes subir {
  from { transform: translateY(26px); }
  to   { transform: none; }
}

/* El contenido de cada banda entra subiendo al aparecer.
   Sube el contenido, no la banda: si se moviera la banda, se
   movería la franja de color y se verían costuras entre una
   seccion y la siguiente.

   Hubo una version en que entraban de costado, cuando las
   secciones estaban corridas a izquierda y derecha. Con bandas
   de lado a lado no va: el contenido esta centrado, moverlo
   horizontalmente no sale de ningun lado.

   Misma regla que arriba y por el mismo motivo: SOLO transform,
   nunca opacity. Si un navegador no corre la animacion, el peor
   caso es que la seccion aparezca quieta en su lugar. Con
   opacity, el peor caso seria una seccion en blanco. */
@keyframes entrar {
  from { transform: translateY(44px) scale(.99); }
  to   { transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revelar {
      animation: subir linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }

    .entra {
      animation: entrar linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 36%;
    }

    /* Los hijos que ya traen .revelar adentro de algo que entra
       entero: sin esto el titulo sube por su cuenta mientras la
       seccion sube, y se ve como si el contenido se despegara. */
    .entra .revelar { animation: none; }
  }
}