/* =============================================================================
 * Ganadería Jehovasi — hoja de estilos única
 * -----------------------------------------------------------------------------
 * Orden: tokens · reset · tipografía · barra · hero · ganado · rifas · contacto
 *        · pie · piezas compartidas (modal, hoja inferior, avisos)
 *
 * Reglas de la casa que se respetan aquí:
 *   · color en OKLCH, contraste mínimo 4.5:1
 *   · dos familias tipográficas, servidas desde el propio dominio
 *   · animaciones por debajo de 300 ms, solo transform y opacity, nunca ease-in
 *   · nada de `transition: all`, nada de scale(0), nada de fondos crema
 *   · móvil primero: rejillas de 2 columnas, carriles, nada de 100vh porque sí
 * ========================================================================== */

/* ============================================================ 1. FUENTES */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Respaldos con métricas ajustadas para que, al llegar la woff2, el texto no dé
 * un salto (eso es CLS). Los valores están MEDIDOS con
 * `.claude/medir-fuentes.mjs`, que compara en un navegador el ancho de una
 * cadena real de la página con cada fuente y con su respaldo. No los toques a
 * ojo: vuelve a ejecutar el script.
 *
 * Medición del 2026-09-04, cadena de 82 caracteres a 100 px:
 *   Archivo 400 sobre Arial     3844,9 / 3891,7  ->  98,8 %
 *   Archivo 700 sobre Arial     4118,9 / 4118,5  ->  100,0 %
 *   Fraunces 700 sobre Georgia  3588,8 / 4449,6  ->  80,65 %
 *
 * Fraunces es mucho más estrecha que Georgia: sin ese 80,65 % el titular del
 * hero se encogía de golpe al cargar la fuente. La medida se tomó en Windows;
 * en Android, donde no existe Georgia, el respaldo real será otro y el ajuste
 * es aproximado. */
@font-face {
  font-family: 'Archivo respaldo';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 98.8%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces respaldo';
  src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
  size-adjust: 80.65%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* ============================================================= 2. TOKENS */

:root {
  /* -- color ---------------------------------------------------------- */
  --verde-900: oklch(19% 0.028 155);   /* fondo oscuro principal          */
  --verde-850: oklch(23% 0.032 155);   /* superficie sobre el fondo       */
  --verde-800: oklch(28% 0.038 155);   /* bordes sobre oscuro             */
  --verde-600: oklch(46% 0.075 152);
  --verde-500: oklch(56% 0.105 150);
  --lima: oklch(80% 0.165 128);        /* acento vivo, botón principal    */
  --lima-oscura: oklch(72% 0.155 128);
  --dorado: oklch(82% 0.105 82);       /* letrero, rifas                  */
  --dorado-tenue: oklch(92% 0.045 85);
  --hueso: oklch(97.5% 0.005 130);     /* fondo claro, NO es crema        */
  --blanco: oklch(100% 0 0);
  --tinta: oklch(24% 0.028 150);       /* texto sobre claro               */
  --tinta-suave: oklch(45% 0.016 150); /* texto secundario, 4.7:1         */
  --linea: oklch(90% 0.008 140);
  --linea-fuerte: oklch(83% 0.012 140);

  /* estados de los números de rifa */
  --num-libre-fondo: var(--blanco);
  --num-libre-borde: oklch(85% 0.012 140);
  --num-reservado-fondo: oklch(93% 0.075 85);
  --num-reservado-borde: oklch(80% 0.11 82);
  --num-reservado-texto: oklch(38% 0.075 68);
  --num-vendido-fondo: oklch(92% 0.006 150);
  --num-vendido-texto: oklch(58% 0.012 150);
  --num-elegido-fondo: var(--verde-900);
  --num-elegido-texto: var(--lima);

  --error: oklch(52% 0.19 27);
  --error-fondo: oklch(95% 0.035 27);

  /* -- tipografía ------------------------------------------------------ */
  --fuente-texto: 'Archivo', 'Archivo respaldo', system-ui, sans-serif;
  --fuente-titulo: 'Fraunces', 'Fraunces respaldo', Georgia, serif;

  --t-micro: clamp(0.69rem, 0.66rem + 0.15vw, 0.76rem);
  --t-pequeno: clamp(0.81rem, 0.78rem + 0.16vw, 0.89rem);
  --t-base: clamp(0.94rem, 0.9rem + 0.2vw, 1.02rem);
  --t-medio: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --t-h3: clamp(1.18rem, 1.08rem + 0.5vw, 1.5rem);
  --t-h2: clamp(1.6rem, 1.32rem + 1.4vw, 2.7rem);
  --t-h1: clamp(2.1rem, 1.6rem + 2.6vw, 4.2rem);
  --t-cifra: clamp(1.5rem, 1.2rem + 1.6vw, 2.6rem);

  /* -- espacio --------------------------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --seccion-y: clamp(2.6rem, 1.6rem + 4vw, 5.5rem);
  --ancho: 78rem;
  --borde-r: 14px;
  --borde-r-g: 22px;

  /* -- movimiento ------------------------------------------------------ */
  --sal: cubic-bezier(0.16, 1, 0.3, 1);   /* salida suave, nunca ease-in  */
  --rapido: 140ms var(--sal);
  --medio: 220ms var(--sal);

  /* -- capas ----------------------------------------------------------- */
  --z-base: 1;
  --z-pegado: 20;
  --z-barra: 40;
  --z-cta-movil: 50;
  --z-capa: 90;

  color-scheme: light;
}

/* =============================================================== 3. BASE */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.sin-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; }
p { margin: 0; }

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

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

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

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contenedor {
  width: min(100% - 2rem, var(--ancho));
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .contenedor { width: min(100% - 4rem, var(--ancho)); }
}

.seccion { padding-block: var(--seccion-y); }
.seccion--oscura {
  background: var(--verde-900);
  color: var(--hueso);
}

/* ------------------------------------------------- encabezado de sección */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-600);
}
.seccion--oscura .rotulo { color: var(--lima); }
.rotulo::before {
  content: '';
  width: 1.6rem; height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.cabecera-seccion {
  display: grid;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  max-width: 44rem;
}
.cabecera-seccion p {
  color: var(--tinta-suave);
  font-size: var(--t-medio);
  text-wrap: pretty;
}
.seccion--oscura .cabecera-seccion p { color: oklch(84% 0.02 140); }

/* ============================================================ 4. BOTONES */

.boton {
  --fondo: var(--lima);
  --texto: var(--tinta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 2.9rem;
  padding: 0.62rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto);
  font-size: var(--t-pequeno);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rapido), background-color var(--rapido), border-color var(--rapido), opacity var(--rapido);
}
.boton:hover { background: var(--lima-oscura); }
.boton:active { transform: scale(0.97); }
.boton[disabled], .boton[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.boton svg { width: 1.05em; height: 1.05em; flex: none; }

.boton--fantasma {
  --fondo: transparent;
  --texto: var(--tinta);
  border-color: var(--linea-fuerte);
}
.boton--fantasma:hover { background: oklch(94% 0.01 140); }
/* Sobre fondo oscuro el fantasma tiene que invertirse. Si no, queda texto
 * oscuro sobre oscuro y el botón desaparece. */
.seccion--oscura .boton--fantasma,
.hero .boton--fantasma,
.cta-movil .boton--fantasma {
  --texto: var(--hueso);
  border-color: oklch(100% 0 0 / 0.32);
}
.seccion--oscura .boton--fantasma:hover,
.hero .boton--fantasma:hover,
.cta-movil .boton--fantasma:hover { background: oklch(100% 0 0 / 0.1); }

.boton--oscuro { --fondo: var(--verde-900); --texto: var(--hueso); }
.boton--oscuro:hover { background: var(--verde-850); }

.boton--grande { min-height: 3.25rem; padding-inline: 1.5rem; font-size: var(--t-base); }
.boton--ancho { width: 100%; }

/* ============================================================== 5. BARRA */

.barra {
  position: sticky;
  top: 0;
  z-index: var(--z-barra);
  background: oklch(19% 0.028 155 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(100% 0 0 / 0.09);
  color: var(--hueso);
}
.barra__caja {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 3.5rem;
}
.barra__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-right: auto;
}
.barra__marca svg { width: 1.75rem; height: 1.75rem; color: var(--dorado); flex: none; }
.barra__marca span small {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(78% 0.03 140);
}
.barra__nav { display: none; gap: var(--e-5); }
.barra__nav a {
  text-decoration: none;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: oklch(88% 0.015 140);
  padding-block: 0.4rem;
  transition: color var(--rapido);
}
.barra__nav a:hover { color: var(--lima); }
.barra__cta { display: none; }

@media (min-width: 56rem) {
  .barra__nav { display: flex; }
  .barra__cta { display: inline-flex; }
}

/* =============================================================== 6. HERO
 *
 * Dos piezas y nada más: la foto y un bloque de texto sobre color sólido.
 *
 * Aquí hubo antes una composición con la foto horizontal, un panel oscuro
 * horneado en la imagen para tapar los chips de contacto que el cliente trae
 * quemados, y una ficha HTML encima calzada al píxel con ese panel. Se retiró
 * entera: el texto sobre color sólido no necesita velos ni contraste calculado,
 * y sin panel horneado no hay dos sitios que mantener sincronizados.
 */

.hero {
  background: var(--verde-900);
  color: var(--hueso);
}

.hero__foto { position: relative; }
.hero__foto picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La vaca y el letrero viven en la mitad baja del encuadre; cuando el recorte
   * se come alto, que se coma el cielo. */
  object-position: center 62%;
  aspect-ratio: 941 / 1020;
}

.hero__texto {
  padding: var(--e-5) 1rem var(--e-6);
  display: grid;
  gap: var(--e-3);
}
.hero__texto h1 { text-wrap: balance; }
.hero__texto h1 em {
  font-style: normal;
  color: var(--lima);
}
.hero__bajada {
  font-size: var(--t-medio);
  color: oklch(90% 0.02 140);
  max-width: 42ch;
  text-wrap: pretty;
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

@media (min-width: 62rem) {
  .hero {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    align-items: stretch;
    min-height: 30rem;
  }
  /* La foto llena su columna de borde a borde; el aspect-ratio deja de mandar y
   * el recorte lo resuelve object-fit. */
  .hero__foto img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 30rem;
  }
  .hero__texto {
    align-content: center;
    gap: var(--e-4);
    padding-block: var(--e-7);
    padding-inline: clamp(2rem, 4vw, 3.5rem);
    /* El tope de ancho y el centrado en la columna evitan que en pantallas de
     * 1920 el texto se quede pegado al borde de la foto con medio metro de
     * verde vacío a la derecha. */
    max-width: 44rem;
    margin-inline: auto;
    width: 100%;
  }
}


/* ------------------------------------------------------- franja de datos */
.franja {
  background: var(--verde-850);
  color: var(--hueso);
  border-block: 1px solid var(--verde-800);
}
.franja__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--verde-800);
  margin: 0;
  padding: 0;
  list-style: none;
}
.franja__lista li {
  background: var(--verde-850);
  padding: var(--e-4) var(--e-3);
  display: grid;
  gap: 0.15rem;
  text-align: center;
}
.franja__lista b {
  font-family: var(--fuente-titulo);
  font-size: var(--t-h3);
  color: var(--lima);
  line-height: 1;
}
.franja__lista span {
  font-size: var(--t-micro);
  color: oklch(82% 0.02 140);
  letter-spacing: 0.03em;
}
@media (min-width: 48rem) {
  .franja__lista { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================= 7. GANADO */

.ganado__carril {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--e-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: 1rem;
  margin-inline: -1rem;
  padding-bottom: var(--e-3);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.ganado__carril > * { scroll-snap-align: start; }

@media (min-width: 40rem) {
  .ganado__carril {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
    gap: var(--e-4);
  }
}
@media (min-width: 68rem) {
  .ganado__carril { grid-template-columns: repeat(3, 1fr); }
  /* La primera ficha ocupa dos columnas: rompe la rejilla de tarjetas iguales. */
  .ganado__carril > :first-child { grid-column: span 2; }
}

.ficha-ganado {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--borde-r-g);
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  transition: transform var(--medio), box-shadow var(--medio);
}
.ficha-ganado:hover { transform: translateY(-3px); box-shadow: 0 14px 34px oklch(20% 0.03 150 / 0.14); }

.ficha-ganado__medio {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--verde-850);
  overflow: hidden;
}
/* El <picture> hay que dimensionarlo TAMBIÉN. Si se queda en altura automática,
 * el `height: 100%` de la <img> no tiene contra qué resolverse, cae a `auto`, la
 * foto se pinta con su relación propia (832x464) en vez de la del marco y
 * `object-fit: cover` no llega a actuar: quedaba una banda verde de 19 px bajo
 * cada tarjeta. `display: contents` NO sirve aquí, rompe el object-fit. */
.ficha-ganado__medio picture {
  display: block;
  width: 100%;
  height: 100%;
}
.ficha-ganado__medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--medio);
}
.ficha-ganado:hover .ficha-ganado__medio img { transform: scale(1.03); }
@media (min-width: 68rem) {
  .ganado__carril > :first-child .ficha-ganado__medio { aspect-ratio: 16 / 8; }
}

.ficha-ganado__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: oklch(19% 0.028 155 / 0.18);
  cursor: pointer;
  transition: background-color var(--rapido);
}
.ficha-ganado__play:hover { background: oklch(19% 0.028 155 / 0.32); }
.ficha-ganado__play span {
  display: grid;
  place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.94);
  color: var(--tinta);
  box-shadow: 0 6px 20px oklch(20% 0.03 150 / 0.32);
  transition: transform var(--rapido);
}
.ficha-ganado__play:active span { transform: scale(0.94); }
.ficha-ganado__play svg { width: 1.35rem; height: 1.35rem; margin-left: 3px; }

.ficha-ganado__duracion {
  position: absolute;
  right: 0.6rem; bottom: 0.6rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: oklch(19% 0.028 155 / 0.82);
  color: var(--hueso);
  font-size: var(--t-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ficha-ganado__cuerpo {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.55rem;
  padding: var(--e-4);
}
.ficha-ganado__cuerpo h3 { text-wrap: balance; }
.ficha-ganado__cuerpo p {
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.etiquetas li {
  font-size: var(--t-micro);
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: oklch(94% 0.03 140);
  color: var(--verde-600);
}
/* `margin-top: auto` empuja el pie al fondo de la tarjeta: con descripciones de
 * distinto largo, si no, el botón «Preguntar» queda a una altura distinta en
 * cada una y la fila se ve descuadrada. */
.ficha-ganado__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linea);
}
.ficha-ganado__precio {
  font-size: var(--t-micro);
  color: var(--tinta-suave);
  line-height: 1.25;
}

/* =============================================================== 8. RIFAS
 * La sección va sobre fondo oscuro para separarla del catálogo sin inventar un
 * divisor decorativo. Dentro, el tablero de números va sobre papel claro
 * porque los estados necesitan contraste alto.
 */

.rifas { position: relative; }

/* --- selector cuando hay más de una rifa --- */
.rifas__pestanas {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  padding: 0.25rem 1rem 0.75rem;
  margin-inline: -1rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rifas__pestanas::-webkit-scrollbar { display: none; }
.rifas__pestanas:not([data-visible='si']) { display: none; }

.pestana-rifa {
  flex: none;
  display: grid;
  gap: 0.25rem;
  min-width: 13.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--verde-800);
  border-radius: var(--borde-r);
  background: var(--verde-850);
  color: var(--hueso);
  text-align: left;
  cursor: pointer;
  transition: transform var(--rapido), border-color var(--rapido), background-color var(--rapido);
}
.pestana-rifa:active { transform: scale(0.98); }
.pestana-rifa[aria-selected='true'] {
  border-color: var(--lima);
  background: oklch(26% 0.05 150);
}
.pestana-rifa b { font-size: var(--t-pequeno); font-weight: 700; }
.pestana-rifa small {
  font-size: var(--t-micro);
  color: oklch(82% 0.02 140);
  font-variant-numeric: tabular-nums;
}

/* --- tarjeta de la rifa --- */
.rifa {
  display: grid;
  gap: var(--e-4);
  border-radius: var(--borde-r-g);
  overflow: hidden;
  background: var(--verde-850);
  border: 1px solid var(--verde-800);
}
@media (min-width: 62rem) {
  .rifa {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 0;
  }
}

.rifa__portada {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--verde-900);
  overflow: hidden;
}
.rifa__portada img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 62rem) {
  .rifa__portada { aspect-ratio: auto; height: 100%; min-height: 22rem; }
}

.rifa__portada--sin-foto {
  display: grid;
  place-items: center;
  padding: var(--e-5);
  background: linear-gradient(150deg, var(--verde-850), var(--verde-900));
}
.rifa__portada-texto {
  font-family: var(--fuente-titulo);
  font-size: var(--t-h2);
  color: var(--dorado);
  text-align: center;
  text-wrap: balance;
}

.rifa__caducada {
  padding: 0.5rem 0.75rem;
  border-radius: var(--borde-r);
  background: oklch(38% 0.1 60);
  color: oklch(94% 0.05 85);
  font-size: var(--t-micro);
  font-weight: 700;
}

.enlace-dato {
  color: var(--lima);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

.reglamento {
  border-top: 1px solid var(--verde-800);
  padding-top: var(--e-3);
}
.reglamento summary {
  font-size: var(--t-pequeno);
  font-weight: 700;
  cursor: pointer;
  color: var(--hueso);
}
.reglamento p {
  margin-top: var(--e-2);
  font-size: var(--t-pequeno);
  color: oklch(84% 0.02 140);
  white-space: pre-line;
}

.rifa__marca-ejemplo {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--dorado);
  color: oklch(28% 0.06 70);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rifa__estado-cinta {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: oklch(19% 0.028 155 / 0.88);
  color: var(--hueso);
  font-size: var(--t-micro);
  font-weight: 700;
}

.rifa__info {
  display: grid;
  align-content: start;
  gap: var(--e-3);
  padding: var(--e-4);
  color: var(--hueso);
}
@media (min-width: 62rem) { .rifa__info { padding: var(--e-6); } }

.rifa__info h3 { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.1rem); text-wrap: balance; }
.rifa__info > p {
  color: oklch(85% 0.02 140);
  font-size: var(--t-pequeno);
  text-wrap: pretty;
}

.rifa__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--verde-800);
  border: 1px solid var(--verde-800);
  border-radius: var(--borde-r);
  overflow: hidden;
  margin: 0;
}
.rifa__datos > div {
  background: var(--verde-850);
  padding: 0.7rem 0.85rem;
  display: grid;
  gap: 0.1rem;
}
.rifa__datos dt {
  font-size: var(--t-micro);
  color: oklch(78% 0.02 140);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rifa__datos dd {
  margin: 0;
  font-size: var(--t-pequeno);
  font-weight: 700;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}
.rifa__datos dd b { color: var(--lima); font-weight: 800; }

.rifa__avance { display: grid; gap: 0.4rem; }
.rifa__barra {
  height: 8px;
  border-radius: 999px;
  background: var(--verde-800);
  overflow: hidden;
}
.rifa__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--verde-500), var(--lima));
  transform-origin: left center;
  transition: transform var(--medio);
}
.rifa__avance small {
  font-size: var(--t-micro);
  color: oklch(82% 0.02 140);
  font-variant-numeric: tabular-nums;
}

/* --- tablero de números --- */
.tablero {
  background: var(--hueso);
  border-radius: var(--borde-r-g);
  border: 1px solid var(--linea);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.tablero__superior {
  display: grid;
  gap: var(--e-3);
}
@media (min-width: 40rem) {
  .tablero__superior {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.buscador {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.buscador svg {
  position: absolute;
  left: 0.75rem;
  width: 1.05rem; height: 1.05rem;
  color: var(--tinta-suave);
  pointer-events: none;
}
.buscador input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.55rem 0.9rem 0.55rem 2.4rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--blanco);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--rapido);
}
.buscador input:focus { border-color: var(--verde-500); }
.buscador input::-webkit-outer-spin-button,
.buscador input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-micro);
  color: var(--tinta-suave);
}
.leyenda li { display: inline-flex; align-items: center; gap: 0.35rem; }
.leyenda i {
  width: 0.85rem; height: 0.85rem;
  border-radius: 4px;
  border: 1px solid var(--num-libre-borde);
  background: var(--num-libre-fondo);
  flex: none;
}
.leyenda i[data-estado='reservado'] {
  background: var(--num-reservado-fondo);
  border-color: var(--num-reservado-borde);
}
.leyenda i[data-estado='vendido'] {
  background: var(--num-vendido-fondo);
  border-color: var(--linea-fuerte);
}
.leyenda i[data-estado='elegido'] {
  background: var(--num-elegido-fondo);
  border-color: var(--num-elegido-fondo);
}

/* carril de bloques (00-99, 100-199, ...) para rifas largas */
.bloques {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.bloques:not([data-visible='si']) { display: none; }
.bloques button {
  flex: none;
  min-height: 2.25rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  background: var(--blanco);
  font-size: var(--t-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform var(--rapido), background-color var(--rapido), border-color var(--rapido);
}
.bloques button:active { transform: scale(0.97); }
.bloques button[aria-pressed='true'] {
  background: var(--verde-900);
  border-color: var(--verde-900);
  color: var(--hueso);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.05rem, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); }
}

.numero {
  display: grid;
  place-items: center;
  /* Sin este 100 % el <button> se encoge al ancho del texto (los controles de
   * formulario no estiran solos) y el área de toque baja de 55 px a 25 px. */
  width: 100%;
  min-height: 2.75rem;
  padding: 0.2rem;
  border: 1px solid var(--num-libre-borde);
  border-radius: 10px;
  background: var(--num-libre-fondo);
  color: var(--tinta);
  font-size: var(--t-pequeno);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform var(--rapido), background-color var(--rapido), border-color var(--rapido), color var(--rapido);
}
.numero:hover:not([disabled]) { border-color: var(--verde-500); }
.numero:active:not([disabled]) { transform: scale(0.94); }

.numero[data-estado='reservado'] {
  background: var(--num-reservado-fondo);
  border-color: var(--num-reservado-borde);
  color: var(--num-reservado-texto);
  cursor: not-allowed;
  /* la trama es la señal que no depende del color */
  background-image: repeating-linear-gradient(135deg,
    oklch(80% 0.11 82 / 0.42) 0 3px, transparent 3px 7px);
}
/* Rifa pausada: los libres se apagan para que no parezcan comprables. */
.numero[data-estado='cerrado'] {
  background: var(--num-vendido-fondo);
  border-color: var(--linea);
  color: var(--num-vendido-texto);
  cursor: not-allowed;
}
.numero[data-estado='vendido'] {
  background: var(--num-vendido-fondo);
  border-color: var(--linea-fuerte);
  color: var(--num-vendido-texto);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.numero[data-estado='elegido'] {
  position: relative;
  background: var(--num-elegido-fondo);
  border-color: var(--num-elegido-fondo);
  color: var(--num-elegido-texto);
}
/* Marca que no depende del color: con daltonismo el fondo oscuro y el claro
 * pueden parecerse, el visto no. */
.numero[data-estado='elegido']::after {
  content: '';
  position: absolute;
  top: 4px; right: 5px;
  width: 5px; height: 9px;
  border: solid var(--num-elegido-texto);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.numero[data-destacado='si'] {
  animation: latido 520ms var(--sal) 2;
  border-color: var(--verde-500);
}
@keyframes latido {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

.tablero__vacio {
  padding: var(--e-5) var(--e-4);
  text-align: center;
  color: var(--tinta-suave);
  font-size: var(--t-pequeno);
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--borde-r);
  background: var(--error-fondo);
  border: 1px solid oklch(80% 0.11 27);
  color: oklch(38% 0.15 27);
  font-size: var(--t-pequeno);
  font-weight: 600;
}
.aviso svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.1rem; }
.aviso[hidden] { display: none; }
.aviso--neutro {
  background: oklch(95% 0.03 140);
  border-color: oklch(84% 0.06 140);
  color: var(--verde-600);
}

/* --- barra de selección pegada abajo --- */
/* Barra pegada abajo del tablero. Va lo más baja posible a propósito: cada
 * píxel que crece es una fila de números que tapa mientras se hace scroll. */
.seleccion {
  position: sticky;
  bottom: 0;
  z-index: var(--z-pegado);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  padding: 0.6rem var(--e-4) calc(0.6rem + env(safe-area-inset-bottom));
  margin: 0 calc(var(--e-4) * -1) calc(var(--e-4) * -1);
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -10px 26px oklch(20% 0.03 150 / 0.09);
}
.seleccion[hidden] { display: none; }
.seleccion #sel-continuar { padding-inline: 1rem; }

.seleccion__resumen { display: grid; gap: 0.3rem; min-width: 0; }
.seleccion__cabeza {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
}
.seleccion__cabeza b { color: var(--tinta); font-size: var(--t-medio); font-weight: 800; }
/* Una sola fila con desplazamiento lateral: si envuelve, la barra crece y tapa
 * media cuadrícula. */
.fichas-elegidas {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  margin: 0;
  padding-bottom: 2px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.fichas-elegidas::-webkit-scrollbar { display: none; }
.ficha-elegida { flex: none; }
.ficha-elegida {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.3rem 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--verde-900);
  color: var(--lima);
  font-size: var(--t-micro);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ficha-elegida button {
  display: grid;
  place-items: center;
  width: 1.15rem; height: 1.15rem;
  border: 0;
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.16);
  color: var(--hueso);
  cursor: pointer;
  transition: transform var(--rapido), background-color var(--rapido);
}
.ficha-elegida button:hover { background: oklch(100% 0 0 / 0.3); }
.ficha-elegida button:active { transform: scale(0.9); }
.ficha-elegida svg { width: 0.7rem; height: 0.7rem; }

/* ================================================= 9. HOJA / FORMULARIO */

/* Poner `display` en el propio <dialog> pisa el `display: none` que el
 * navegador aplica mientras está cerrado, y la hoja aparece maquetada al final
 * de la página. Por eso el display SOLO se declara para [open]. Y dentro va un
 * envoltorio con flex: `display: flex` en el <dialog> rompe su centrado. */
dialog.hoja { display: none; }

dialog.hoja[open] {
  display: block;
  width: min(100%, 34rem);
  max-width: 100%;
  max-height: 92svh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--borde-r-g) var(--borde-r-g) 0 0;
  background: var(--hueso);
  color: var(--tinta);
  overflow: hidden;
}
/* Con `[open]` en el selector de arriba, un `dialog.hoja` a secas aquí perdería
 * por especificidad y la hoja se quedaría pegada abajo también en escritorio. */
@media (min-width: 40rem) {
  dialog.hoja[open] {
    margin: auto;
    border-radius: var(--borde-r-g);
    max-height: 88svh;
  }
}
dialog.hoja::backdrop { background: oklch(15% 0.02 150 / 0.62); }
dialog.hoja[open] { animation: hoja-entra 200ms var(--sal); }
@keyframes hoja-entra {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.hoja__marco {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}
.hoja__asa {
  display: grid;
  place-items: center;
  padding: 0.55rem 0 0.25rem;
  /* el asa no captura el puntero: si lo hiciera, tocarla contaría como toque
   * fuera del contenido y la hoja se cerraría sola */
  pointer-events: none;
}
.hoja__asa span {
  width: 2.6rem; height: 4px;
  border-radius: 999px;
  background: var(--linea-fuerte);
}
@media (min-width: 40rem) { .hoja__asa { display: none; } }

.hoja__cabeza {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: 0.75rem var(--e-4) var(--e-3);
  border-bottom: 1px solid var(--linea);
}
.hoja__cabeza h3 { font-size: var(--t-h3); }
.hoja__cabeza p { font-size: var(--t-micro); color: var(--tinta-suave); margin-top: 0.2rem; }
.hoja__cerrar {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  flex: none;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  cursor: pointer;
  transition: transform var(--rapido), background-color var(--rapido);
}
.hoja__cerrar:hover { background: oklch(94% 0.008 140); }
.hoja__cerrar:active { transform: scale(0.93); }
.hoja__cerrar svg { width: 1rem; height: 1rem; }

.hoja__cuerpo {
  padding: var(--e-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: var(--e-4);
}
.hoja__pie {
  padding: var(--e-3) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--blanco);
  display: grid;
  gap: var(--e-2);
}

.resumen-compra {
  display: grid;
  gap: 0.55rem;
  padding: var(--e-3);
  border-radius: var(--borde-r);
  background: var(--blanco);
  border: 1px solid var(--linea);
}
.resumen-compra__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--t-pequeno);
}
.resumen-compra__fila span { color: var(--tinta-suave); }
.resumen-compra__fila b { font-variant-numeric: tabular-nums; text-align: right; }
.resumen-compra__total {
  border-top: 1px dashed var(--linea-fuerte);
  padding-top: 0.55rem;
  font-size: var(--t-medio);
}
.resumen-compra__total b { font-size: var(--t-medio); font-weight: 800; }
.resumen-compra__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.resumen-compra__numeros b {
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: var(--verde-900);
  color: var(--lima);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.campo { display: grid; gap: 0.3rem; }
.campo label {
  font-size: var(--t-pequeno);
  font-weight: 700;
}
.campo label span { color: var(--tinta-suave); font-weight: 500; }
.campo input,
.campo textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  background: var(--blanco);
  transition: border-color var(--rapido);
}
.campo textarea { min-height: 4.5rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--verde-500); }
.campo[data-error='si'] input,
.campo[data-error='si'] textarea { border-color: var(--error); }
.campo__error {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--error);
  min-height: 1rem;
}
.campo__error:empty { min-height: 0; }

/* ============================================== 10. MODAL DE VÍDEO */

dialog.visor { display: none; }
dialog.visor[open] {
  display: block;
  width: min(100%, 62rem);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
dialog.visor::backdrop { background: oklch(12% 0.02 150 / 0.86); }
.visor__caja {
  position: relative;
  border-radius: var(--borde-r-g);
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px oklch(10% 0.02 150 / 0.5);
}
.visor__caja video { width: 100%; height: auto; max-height: 78svh; background: #000; }
.visor__cerrar {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.9);
  color: var(--tinta);
  cursor: pointer;
  transition: transform var(--rapido);
}
.visor__cerrar:active { transform: scale(0.93); }
.visor__cerrar svg { width: 1.05rem; height: 1.05rem; }
.visor__titulo {
  padding: 0.7rem 0.9rem;
  background: var(--verde-900);
  color: var(--hueso);
  font-size: var(--t-pequeno);
  font-weight: 700;
}

/* ============================================== 11. CONTACTO Y PIE */

.contacto__rejilla {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 52rem) {
  .contacto__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.contacto__tarjeta {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: var(--e-4);
  border-radius: var(--borde-r);
  background: var(--verde-850);
  border: 1px solid var(--verde-800);
  color: var(--hueso);
  text-decoration: none;
  transition: transform var(--rapido), border-color var(--rapido);
}
.contacto__tarjeta:hover { border-color: var(--lima); transform: translateY(-2px); }
.contacto__tarjeta:active { transform: scale(0.99); }
.contacto__tarjeta svg { width: 1.5rem; height: 1.5rem; color: var(--lima); }
.contacto__tarjeta b { font-size: var(--t-pequeno); }
.contacto__tarjeta small { font-size: var(--t-micro); color: oklch(82% 0.02 140); word-break: break-word; }

.pie {
  background: oklch(15% 0.024 155);
  color: oklch(85% 0.02 140);
  padding-block: var(--e-6);
  font-size: var(--t-pequeno);
}
.pie__caja {
  display: grid;
  gap: var(--e-4);
}
@media (min-width: 52rem) {
  .pie__caja { grid-template-columns: 1fr auto; align-items: center; }
}
.pie__marca {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--hueso);
  font-size: var(--t-medio);
}
.pie__marca svg { width: 1.8rem; height: 1.8rem; color: var(--dorado); }
.pie__legal { font-size: var(--t-micro); color: oklch(70% 0.02 140); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.pie__enlaces a { text-decoration: none; transition: color var(--rapido); }
.pie__enlaces a:hover { color: var(--lima); }

/* =========================================== 12. CTA PEGADO EN MÓVIL */

.cta-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-cta-movil);
  display: flex;
  gap: var(--e-2);
  padding: 0.55rem 1rem calc(0.55rem + env(safe-area-inset-bottom));
  background: oklch(19% 0.028 155 / 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid oklch(100% 0 0 / 0.1);
  transform: translateY(110%);
  transition: transform var(--medio);
}
.cta-movil[data-visible='si'] { transform: none; }
.cta-movil .boton { flex: 1; }
@media (min-width: 56rem) { .cta-movil { display: none; } }

/* deja aire al final para que el CTA pegado no tape el pie */
@media (max-width: 55.99rem) {
  body { padding-bottom: 3.9rem; }
}

/* ================================================ 13. ENTRADA SUAVE */

/* El estado inicial oculto va detrás de `.con-js`, que pone app.js. Si el
 * JavaScript no llega a ejecutarse, los títulos se ven igual en vez de quedarse
 * invisibles para siempre. */
.con-js [data-revelar] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 260ms var(--sal), transform 260ms var(--sal);
}
.con-js [data-revelar='visto'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .con-js [data-revelar] { opacity: 1; transform: none; }
}