/* TusRifas: rifa.css (detalle del sorteo) */

.rifa-layout {
  display: grid; gap: 2rem 2.5rem; padding-top: .5rem;
  grid-template-columns: minmax(0, 1fr) 370px;
  grid-template-areas: "galeria panel" "contenido panel";
}
.rifa-galeria { grid-area: galeria; }
.rifa-panel { grid-area: panel; align-self: start; position: sticky; top: calc(var(--header-h) + 1.25rem); }
.rifa-contenido { grid-area: contenido; min-width: 0; }
.rifa-contenido > section { padding-top: 2.5rem; }
.rifa-contenido > section:first-child { padding-top: 0; }
.rifa-contenido h2 { font-size: var(--t-xl); margin-bottom: 1rem; }
@media (max-width: 980px) {
  .rifa-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "galeria" "panel" "contenido"; }
  .rifa-panel { position: static; }
}

/* ---------- Galería ---------- */
.galeria__principal { margin: 0; border-radius: var(--radio-l); overflow: hidden; background: var(--celeste-50); aspect-ratio: 16 / 10; }
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria__nota { margin-top: .5rem; font-size: var(--t-xs); color: var(--tinta-60); }
.galeria__miniaturas { display: flex; gap: .625rem; margin-top: .75rem; overflow-x: auto; padding: 2px; }
.galeria__miniatura { flex: 0 0 96px; aspect-ratio: 16 / 10; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; opacity: .7; }
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniatura[aria-current="true"] { border-color: var(--tinta); opacity: 1; }
.galeria__miniatura:hover { opacity: 1; }

/* ---------- Cabecera del premio ---------- */
.rifa-cabecera__meta { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; font-size: var(--t-s); color: var(--tinta-60); font-weight: 600; margin-bottom: .875rem; }
.rifa-cabecera h1 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); }
.rifa-cabecera .lead { margin-top: .875rem; }
.incluye { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; gap: .5rem; }
.incluye li { display: flex; gap: .625rem; align-items: baseline; }
.incluye i { color: var(--ok); }

/* Cifras clave */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--blanco); border-radius: var(--radio-m); box-shadow: var(--sombra); }
.cifra { padding: 1.25rem; }
.cifra + .cifra { border-left: 1px dashed var(--linea-fuerte); }
.cifra strong { display: block; font-size: 2.25rem; line-height: 1; font-weight: 800; font-stretch: var(--ancho-condensado); font-variant-numeric: tabular-nums; }
.cifra strong small { font-size: var(--t-m); font-weight: 700; margin-left: .2rem; }
.cifra span { display: block; margin-top: .5rem; font-size: var(--t-xs); color: var(--tinta-60); font-weight: 600; }
@media (max-width: 640px) {
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifra:nth-child(3) { border-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px dashed var(--linea-fuerte); }
}

/* Versiones */
.versiones { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.version { position: relative; padding: 1.5rem; border-radius: var(--radio-m); background: var(--blanco); border: 1.5px solid var(--linea); }
.version--premio { border: 2px solid var(--sol); box-shadow: 0 0 0 4px var(--sol-50); }
.version h3 { font-size: var(--t-l); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.version .version__precio { margin-block: .625rem .75rem; font-size: var(--t-2xl); font-weight: 800; font-stretch: var(--ancho-condensado); }
.version .version__precio small { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-60); font-stretch: 100%; }
.version p { font-size: var(--t-s); color: var(--tinta-80); }
@media (max-width: 640px) { .versiones { grid-template-columns: 1fr; } }

/* Ficha técnica */
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ficha__grupo { background: var(--blanco); border-radius: var(--radio-m); padding: 1.25rem 1.5rem; }
.ficha__grupo h3 { font-size: var(--t-m); margin-bottom: .375rem; font-stretch: 100%; }
@media (max-width: 760px) { .ficha { grid-template-columns: 1fr; } }

/* Reserva directa de fábrica */
.reserva { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; padding: 1.5rem; border-radius: var(--radio-m); border: 2px dashed var(--linea-fuerte); }
.reserva > div { flex: 1 1 320px; }
.reserva h2 { margin-bottom: .375rem !important; }
.reserva p { font-size: var(--t-s); color: var(--tinta-80); }
.fuente { margin-top: .75rem; font-size: var(--t-xs); color: var(--tinta-60); }

/* ---------- Panel de compra ---------- */
.panel { --boleto-fondo: var(--papel); }
.panel .boleto__cuerpo { padding: 1.5rem; }
.panel__precio { display: flex; align-items: baseline; gap: .5rem; }
.panel__precio strong { font-size: 3rem; line-height: 1; font-weight: 800; font-stretch: var(--ancho-condensado); font-variant-numeric: tabular-nums; }
.panel__precio span { color: var(--tinta-60); font-weight: 600; font-size: var(--t-s); }
.panel__tramos { list-style: none; padding: 0; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.panel__tramos li { font-size: var(--t-xs); font-weight: 700; padding: .25rem .5rem; border-radius: 5px; background: var(--ok-50); color: var(--ok); }
.panel__sorteo { margin-top: 1rem; font-size: var(--t-s); }
.panel__sorteo strong { display: block; }
.panel .boleto__talon { gap: 1.25rem; padding: 1.5rem; }

.cuenta { display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem; text-align: center; }
.cuenta div { background: var(--papel); border-radius: 8px; padding: .5rem .25rem; }
.cuenta strong { display: block; font-size: 1.75rem; line-height: 1.1; font-weight: 800; font-stretch: var(--ancho-condensado); font-variant-numeric: tabular-nums; }
.cuenta span { font-size: var(--t-xs); color: var(--tinta-60); font-weight: 600; }
.panel__nota { font-size: var(--t-xs); color: var(--tinta-60); display: flex; gap: .5rem; align-items: baseline; }
.panel__secundario { text-align: center; font-size: var(--t-s); }