/* RewardOdds — sistema "Ledger": componentes */

/* ============ Botones ============ */
.lgr-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  font-weight: 600;
  font-size: var(--tipo-300);
  line-height: 1;
  padding: 0.85em 1.4em;
  border-radius: var(--radio);
  border: var(--borde-fuerte) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur) var(--easing), border-color var(--dur) var(--easing), color var(--dur) var(--easing);
}
.lgr-boton--primario { background: var(--indigo); color: #fff; }
.lgr-boton--primario:hover { background: var(--indigo-oscuro); color: #fff; }
.lgr-boton--secundario { background: var(--teal); color: #fff; }
.lgr-boton--secundario:hover { background: #084f40; color: #fff; }
/* Indirected through custom properties (not hardcoded to --tinta/--linea) so
   any dark-surface container can repoint them locally — see ".lgr-cookies"
   below — instead of the button needing a light background to read correctly. */
.lgr-boton--linea {
  background: var(--boton-linea-fondo, transparent);
  color: var(--boton-linea-texto, var(--tinta));
  border-color: var(--boton-linea-borde, var(--linea));
}
.lgr-boton--linea:hover {
  border-color: var(--boton-linea-borde-hover, var(--tinta));
  background: var(--boton-linea-fondo-hover, var(--superficie-alt));
}
.lgr-boton--linea:disabled,
.lgr-boton--linea[disabled] {
  color: var(--boton-linea-texto, var(--tinta));
  border-color: var(--boton-linea-borde, var(--linea));
  background: var(--boton-linea-fondo, transparent);
}
.lgr-boton--sm { padding: 0.55em 1em; font-size: var(--tipo-200); }
.lgr-boton--lg { padding: 1em 1.85em; font-size: var(--tipo-400); }
.lgr-boton--bloque { width: 100%; }
.lgr-boton[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ============ Cabecera: barra utilitaria + fila principal ============ */
.lgr-barra-utilidad {
  background: var(--marino-950);
  color: var(--marino-200);
  font-size: var(--tipo-100);
}
.lgr-barra-utilidad__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  padding-block: var(--e-1);
}
.lgr-barra-utilidad a { color: var(--indigo-claro); }
.lgr-insignia-edad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 0.5em;
  font-weight: 800;
  border-radius: var(--radio-sm);
  background: var(--indigo-claro);
  color: var(--marino-950);
}
.lgr-insignia-edad--lg { font-size: var(--tipo-500); padding: 0.2em 0.6em; }

.lgr-cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--superficie);
  border-bottom: var(--borde) solid var(--linea-sutil);
}
.lgr-cabecera.es-fija { box-shadow: var(--sombra-cabecera); }
.lgr-cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-2);
}

/* Logo: caja de tamaño fijo + object-fit:contain — evita distorsión sin
   importar la relación de aspecto real del archivo. Ancho calculado a partir
   de la relación de aspecto real del logo actual (760×300 = 2.533:1); si el
   archivo cambia de proporción, este ancho debe recalcularse. */
.lgr-marca { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; }
.lgr-marca__caja {
  width: 112px;
  height: 44px;
  overflow: hidden;
  display: block;
}
.lgr-marca__caja img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.lgr-marca__caja--pie { width: 127px; height: 50px; }

.lgr-nav { display: flex; align-items: center; gap: 2px; }
.lgr-nav__enlace {
  font-size: var(--tipo-300);
  font-weight: 600;
  color: var(--tinta-media);
  text-decoration: none;
  padding: 0.55em 0.9em;
  border-radius: var(--radio-sm);
}
.lgr-nav__enlace:hover { background: var(--superficie-alt); color: var(--tinta); }
.lgr-nav__enlace.es-activo { background: var(--indigo-tenue); color: var(--indigo-oscuro); }

.lgr-nav-boton {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  cursor: pointer;
}
.lgr-nav-boton span { display: block; height: 2px; width: 20px; margin-inline: auto; background: var(--tinta); }
.lgr-nav-boton.es-abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lgr-nav-boton.es-abierto span:nth-child(2) { opacity: 0; }
.lgr-nav-boton.es-abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ Héroe: columna única + riel de estadísticas ============ */
/* ============ Héroe + marcas: una sola composición de primera pantalla ============
   El héroe y la fila de operadores comparten sección para que al menos una
   marca completa y el inicio de la siguiente queden visibles sin scroll, en
   cualquier alto de viewport. min-height (no height fija) más flex-centrado
   dejan que el contenido crezca si el texto no entra; clamp() y la media
   query de altura reducen el texto secundario cuando sobra poco alto. */
.lgr-hero {
  min-height: calc(100svh - var(--alto-cabecera));
  display: flex;
  align-items: center;
  padding-block: clamp(0.75rem, 3vh, 1.75rem);
  border-bottom: var(--borde) solid var(--linea-sutil);
}
.lgr-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3);
  width: 100%;
  align-items: center;
}
@media (min-width: 1024px) {
  .lgr-hero { padding-block: clamp(1.5rem, 5vh, var(--e-7)); }
  .lgr-hero__grid { grid-template-columns: 1.15fr 1fr; gap: var(--e-7); }
}
.lgr-hero__etiqueta {
  display: inline-block;
  font-size: var(--tipo-100);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--indigo);
  border: var(--borde) solid var(--indigo);
  border-radius: var(--radio-sm);
  padding: 0.3em 0.7em;
  margin-bottom: var(--e-2);
}
.lgr-hero h1 { max-width: 20ch; margin-bottom: var(--e-2); font-size: clamp(1.35rem, 1rem + 3.5vw, var(--tipo-900)); }
.lgr-hero h1 em { font-style: normal; color: var(--indigo); }
.lgr-hero__texto { font-size: var(--tipo-400); color: var(--tinta-media); max-width: 42rem; margin-bottom: var(--e-1); }
.lgr-hero__texto--breve { font-size: var(--tipo-300); margin-top: var(--e-1); }
.lgr-hero__acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-3); }

/* ============ Disclosure: "Mostrar más" del héroe ============
   En pantallas angostas o de poco alto, la marca principal de la copy y el
   bloque secundario (segunda línea, estadísticas, CTA de juego responsable)
   compiten por el mismo espacio vertical que las tarjetas de operadores.
   En vez de esconder ese contenido sin forma de recuperarlo, se recorta de
   forma visual (line-clamp) o se colapsa detrás de un <button> real con
   aria-expanded/aria-controls: nada queda inalcanzable, solo oculto por
   defecto. A 1024px+ con alto cómodo no hace falta el control: todo entra. */
.lgr-hero__alternar {
  display: none;
  align-items: center;
  gap: var(--e-1);
  margin-top: var(--e-2);
  padding: 0.6em 0.9em;
  min-height: 44px;
  font-size: var(--tipo-200);
  font-weight: 600;
  color: var(--indigo);
  background: var(--indigo-tenue);
  border: var(--borde) solid transparent;
  border-radius: var(--radio-sm);
  cursor: pointer;
}
.lgr-hero__alternar:hover { background: #d5def8; }
.lgr-hero__alternar:active { background: #c8d4f5; }
.lgr-hero__alternar-flecha { transition: transform var(--dur) var(--easing); }
.lgr-hero__alternar[aria-expanded="true"] .lgr-hero__alternar-flecha { transform: rotate(180deg); }

/* Expandido por defecto: si el viewport es ancho/alto (o si CSS Grid con
   unidades fr no corre, o si JS no llega a cargar), el contenido secundario
   simplemente se ve — nunca depende de JS para ser accesible. El colapso es
   la excepción, activada explícitamente solo en modo compacto más abajo. */
.lgr-hero__revelado {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur) var(--easing);
}
.lgr-hero__revelado-interior { overflow: hidden; }

/* Modo compacto: ancho angosto O poco alto de viewport (la coma es un "o"
   en media queries). Recorta el párrafo principal a 3 líneas y colapsa el
   panel secundario por defecto; el botón de abajo pasa a mostrarse. */
@media (max-width: 1023px), (max-height: 700px) {
  .lgr-hero__grid { gap: var(--e-2); }
  .lgr-hero__etiqueta { font-size: 0.6875rem; padding: 0.25em 0.6em; }
  .lgr-hero__texto {
    font-size: var(--tipo-300);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lgr-hero__acciones { margin-top: var(--e-2); }
  .lgr-hero__alternar { display: inline-flex; }
  .lgr-hero__revelado { grid-template-rows: 0fr; }
  .lgr-hero__revelado.es-expandido { grid-template-rows: 1fr; }
  .lgr-hero__revelado.es-expandido .lgr-hero__revelado-interior { padding-top: var(--e-1); }
  #lgr-hero-contenido.es-expandido .lgr-hero__texto {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
}

.lgr-riel {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--e-6);
  border-top: var(--borde) solid var(--linea-sutil);
}
.lgr-riel__item {
  flex: 1 1 180px;
  padding: var(--e-3) var(--e-4) 0;
  border-right: var(--borde) solid var(--linea-sutil);
  font-size: var(--tipo-200);
  color: var(--tinta-media);
}
.lgr-riel__item:last-child { border-right: none; }
.lgr-riel__item strong { display: block; font-size: var(--tipo-300); color: var(--tinta); }
.lgr-hero__estadisticas { margin-top: var(--e-4); }

/* ============ Marcas destacadas: fila-riel dentro del héroe ============
   Ancho de tarjeta fijo (no 1fr) para que el alto de la fila nunca dependa
   del número de marcas: siempre es la altura de UNA tarjeta. La segunda
   tarjeta se asoma a propósito (no se recorta por accidente): el máscara de
   desvanecido a la derecha y el borde visible de la primera tarjeta dejan
   claro que hay más contenido para deslizar. */
.lgr-destacados { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.lgr-destacados__cabecera h2 { font-size: var(--tipo-500); margin-bottom: 0.2em; }
.lgr-destacados__cabecera p { font-size: var(--tipo-200); }
@media (min-width: 1024px) {
  .lgr-destacados { gap: var(--e-4); }
  .lgr-destacados__cabecera h2 { font-size: var(--tipo-600); margin-bottom: var(--e-1); }
}
@media (max-width: 480px) {
  .lgr-destacados__cabecera p { display: none; }
  /* La etiqueta "bono" es la menos esencial de las dos en la fila de tags:
     sin ella, "LOTBA · IPLyC · Córdoba" entra en una sola línea y la tarjeta
     no crece por wrap innecesario. El dato del bono sigue disponible al
     abrir "Ver detalles" o en la reseña completa. */
  .lgr-destacados__grid .lgr-etiqueta--bono { display: none; }
  .lgr-destacados__grid .lgr-ficha__nota { line-height: 1.3; }
  .lgr-destacados__grid .lgr-ficha { padding: var(--e-3); }
  /* En 320–360px los dos botones de acción llegan a wrappear a dos filas
     por unos pocos px (gap + padding de más), duplicando el alto de la
     fila. Recortar gap y padding del botón alcanza para que entren en una
     sola línea. */
  .lgr-destacados__grid .lgr-ficha__acciones { gap: 0.25rem; }
  .lgr-destacados__grid .lgr-ficha__acciones .lgr-boton--sm { padding-inline: 0.55em; font-size: 0.75rem; }
}

/* Teléfonos muy compactos (~360×640): la etiqueta eyebrow es puramente
   decorativa (la licencia LOTBA ya se lee en negrita dentro del párrafo y
   en la propia tarjeta), así que es la primera en ceder. */
@media (max-width: 400px) {
  .lgr-hero__etiqueta { display: none; }
  .lgr-hero__texto { -webkit-line-clamp: 2; margin-bottom: 0; }
  .lgr-hero { padding-block: 0.625rem; }
  .lgr-hero__grid { gap: var(--e-2); }
  .lgr-hero h1 { margin-bottom: var(--e-1); }
}
.lgr-destacados__grid {
  display: flex;
  gap: var(--e-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--e-1);
  padding-block: var(--e-1);
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.lgr-destacados__grid .lgr-ficha {
  flex: 0 0 min(85vw, 320px);
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .lgr-destacados__grid .lgr-ficha { flex-basis: 320px; }
}
.lgr-destacados__mas { margin-top: 0; }

/* ============ Secciones / cabeceras de página ============ */
.lgr-seccion { padding-block: var(--e-7); }
.lgr-seccion--sm { padding-block: var(--e-6); }
.lgr-seccion--dividida { border-top: var(--borde) solid var(--linea-sutil); }

.lgr-cabecera-pagina { padding-block: var(--e-6) var(--e-5); border-bottom: var(--borde) solid var(--linea-sutil); background: var(--superficie-alt); }
.lgr-cabecera-pagina__fila { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.lgr-cabecera-pagina p { color: var(--tinta-media); margin-top: var(--e-2); font-size: var(--tipo-300); }

.lgr-migas { display: flex; gap: var(--e-1); align-items: center; font-size: var(--tipo-100); color: var(--tinta-media); padding-block: var(--e-3); }
.lgr-migas a { color: var(--tinta-media); }
.lgr-migas__sep { color: var(--tinta-media); }

.lgr-encabezado-seccion { margin-bottom: var(--e-5); }

/* ============ Panel plano ============ */
.lgr-panel { background: var(--superficie); border: var(--borde) solid var(--linea-sutil); border-radius: var(--radio); padding: var(--e-4); }
.lgr-panel--mb { margin-bottom: var(--e-4); }
.lgr-panel--acento { border-color: var(--indigo); border-width: var(--borde-fuerte); }
.lgr-panel--alt { background: var(--superficie-alt); }

/* ============ Barra de veredicto (sticky, reemplaza al sidebar) ============ */
.lgr-veredicto {
  position: sticky;
  top: 58px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  background: var(--tinta);
  color: #fff;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radio);
  margin-bottom: var(--e-5);
}
.lgr-veredicto__puntaje { display: flex; align-items: baseline; gap: var(--e-1); font-weight: 800; font-size: var(--tipo-600); }
.lgr-veredicto__puntaje span { font-size: var(--tipo-200); font-weight: 500; color: var(--marino-400); }
.lgr-veredicto__nota { font-size: var(--tipo-100); color: var(--marino-400); }

/* ============ Franja de confianza ============ */
.lgr-confianza { display: flex; flex-wrap: wrap; gap: 0; border: var(--borde) solid var(--linea-sutil); border-radius: var(--radio); overflow: hidden; }
.lgr-confianza__item {
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-3);
  font-size: var(--tipo-200);
  border-right: var(--borde) solid var(--linea-sutil);
  border-top: var(--borde) solid var(--linea-sutil);
}
.lgr-confianza__item:first-child { border-top: none; }
@media (min-width: 640px) {
  .lgr-confianza__item:nth-child(-n+3) { border-top: none; }
}
.lgr-confianza__item:last-child { border-right: none; }

/* ============ Etiquetas ============ */
.lgr-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--tipo-100);
  font-weight: 700;
  padding: 0.3em 0.6em;
  border-radius: var(--radio-sm);
  background: var(--superficie-alt);
  color: var(--tinta-media);
  border: var(--borde) solid var(--linea-sutil);
}
.lgr-etiqueta--licencia { background: var(--teal-tenue); color: var(--teal); border-color: transparent; }
.lgr-etiqueta--bono { background: var(--ambar-bg); color: var(--ambar-fg); border-color: transparent; }
.lgr-fila-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-1); }

/* ============ Aviso ============ */
.lgr-aviso {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  background: var(--ambar-bg);
  color: var(--ambar-fg);
  border-left: 4px solid var(--ambar-fg);
  border-radius: var(--radio-sm);
  padding: var(--e-3) var(--e-4);
  font-size: var(--tipo-300);
  margin-bottom: var(--e-4);
}
.lgr-aviso--ok { background: var(--verde-bg); color: var(--verde-fg); border-color: var(--verde-fg); }
.lgr-aviso--grande { font-size: var(--tipo-400); padding: var(--e-4) var(--e-5); }

/* ============ Medidores de puntaje ============ */
.lgr-medidores { display: flex; flex-direction: column; gap: var(--e-2); }
.lgr-medidor-fila { display: grid; grid-template-columns: 11rem 1fr 2.75rem; align-items: center; gap: var(--e-2); font-size: var(--tipo-200); color: var(--tinta-media); }
.lgr-medidor-pista { height: 6px; background: var(--superficie-alt); border-radius: var(--radio-sm); overflow: hidden; }
.lgr-medidor-relleno { height: 100%; width: 0; background: var(--indigo); transition: width 700ms var(--easing); }
.lgr-medidor-valor { font-weight: 700; text-align: right; color: var(--tinta); }

/* ============ Ventajas / desventajas ============ */
.lgr-pros-contras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.lgr-pros-contras h4 { font-size: var(--tipo-300); margin-bottom: var(--e-1); }
.lgr-pros-contras ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--tipo-300); }
.lgr-ventajas li { padding-left: 1.3em; position: relative; }
.lgr-ventajas li::before { content: "+"; position: absolute; left: 0; color: var(--teal); font-weight: 800; }
.lgr-desventajas li { padding-left: 1.3em; position: relative; }
.lgr-desventajas li::before { content: "–"; position: absolute; left: 0; color: var(--ambar-fg); font-weight: 800; }

/* ============ Tabla informativa ============ */
.lgr-tabla-info { font-size: var(--tipo-300); }
.lgr-tabla-info tr { border-bottom: var(--borde) solid var(--linea-sutil); }
.lgr-tabla-info tr:last-child { border-bottom: none; }
.lgr-tabla-info td { padding: var(--e-2) var(--e-1); vertical-align: top; }
.lgr-tabla-info td:first-child { color: var(--tinta-media); font-weight: 600; width: 38%; }

/* ============ Medios de pago ============ */
.lgr-medios-pago { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.lgr-medio-pago { font-size: var(--tipo-100); font-weight: 600; padding: 0.35em 0.7em; border-radius: var(--radio-sm); background: var(--superficie-alt); border: var(--borde) solid var(--linea-sutil); }

/* ============ Listas ============ */
.lgr-lista-simple { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--tipo-300); }
.lgr-lista-alerta { list-style: none; padding: 0; display: flex; flex-direction: column; }
.lgr-lista-alerta li { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--tipo-300); padding: var(--e-2) 0; border-bottom: var(--borde) solid var(--linea-sutil); }
.lgr-lista-alerta li:last-child { border-bottom: none; }
.lgr-marca-alerta { color: var(--rojo-fg); font-weight: 800; }

/* ============ Rejilla de criterios ============ */
.lgr-criterios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: var(--borde) solid var(--linea-sutil); border-radius: var(--radio); overflow: hidden; }
.lgr-criterio { padding: var(--e-4); border-right: var(--borde) solid var(--linea-sutil); border-top: var(--borde) solid var(--linea-sutil); }
.lgr-criterio:nth-child(-n+2) { border-top: none; }
.lgr-criterio:nth-child(even) { border-right: none; }
.lgr-criterio__num { display: block; font-size: var(--tipo-200); font-weight: 800; color: var(--indigo); margin-bottom: var(--e-1); }
.lgr-criterio h3 { font-size: var(--tipo-400); margin-bottom: var(--e-1); }
.lgr-criterio p { font-size: var(--tipo-300); color: var(--tinta-media); }

/* ============ Recursos de ayuda ============ */
.lgr-recursos { display: flex; flex-direction: column; }
.lgr-recurso {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--tipo-300);
  padding: var(--e-3) var(--e-1);
  border-bottom: var(--borde) solid var(--linea-sutil);
  text-decoration: none;
  color: var(--tinta);
}
.lgr-recurso:last-child { border-bottom: none; }
.lgr-recurso:hover { color: var(--indigo); }

/* ============ Ficha de operador (resaltado en portada) ============ */
.lgr-ficha { background: var(--superficie); border: var(--borde) solid var(--linea-sutil); border-radius: var(--radio); padding: var(--e-4); }
.lgr-ficha--destacada { border-color: var(--indigo); border-width: var(--borde-fuerte); }
.lgr-ficha__cabecera { display: flex; justify-content: space-between; gap: var(--e-3); align-items: flex-start; }
.lgr-ficha__logo { font-weight: 800; font-size: var(--tipo-500); }
.lgr-ficha__logo span { color: var(--indigo); }
.lgr-ficha__puntaje { text-align: right; font-weight: 800; font-size: var(--tipo-600); }
.lgr-ficha__puntaje small { font-size: var(--tipo-100); font-weight: 500; color: var(--tinta-media); }
.lgr-ficha__alternar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  border-top: var(--borde) solid var(--linea-sutil);
  margin-top: var(--e-3);
  padding-top: var(--e-2);
  cursor: pointer;
  font-size: var(--tipo-200);
  font-weight: 700;
  color: var(--tinta-media);
}
.lgr-ficha__flecha { transition: transform var(--dur) var(--easing); }
.lgr-ficha__alternar[aria-expanded="true"] .lgr-ficha__flecha { transform: rotate(180deg); }
.lgr-ficha__detalle { padding-top: var(--e-2); font-size: var(--tipo-300); color: var(--tinta-media); }
.lgr-ficha__acciones { display: flex; gap: var(--e-1); flex-wrap: wrap; margin-top: var(--e-3); }
.lgr-ficha__nota { font-size: var(--tipo-100); color: var(--tinta-media); margin-top: var(--e-2); }

/* ============ Comparador: tabla real (>=768px) + tarjetas (<768px) ============ */
.lgr-tabla-comparacion { display: none; font-size: var(--tipo-300); }
.lgr-tabla-comparacion th, .lgr-tabla-comparacion td { border: var(--borde) solid var(--linea-sutil); padding: var(--e-2) var(--e-3); text-align: left; vertical-align: top; }
.lgr-tabla-comparacion thead th { background: var(--marino-950); color: var(--marino-200); font-size: var(--tipo-500); }
.lgr-tabla-comparacion tbody th { background: var(--superficie-alt); font-weight: 600; width: 16rem; }
.lgr-tabla-comparacion .lgr-boton { margin-top: var(--e-2); }

.lgr-comparacion-movil { display: flex; flex-direction: column; gap: var(--e-4); }

@media (min-width: 768px) {
  .lgr-tabla-comparacion { display: table; }
  .lgr-comparacion-movil { display: none; }
}

/* ============ Reseña (artículo) ============ */
.lgr-resena p { margin-block: var(--e-3); }

/* ============ Formularios ============ */
.lgr-formulario { display: flex; flex-direction: column; gap: var(--e-4); }
.lgr-campo { display: flex; flex-direction: column; gap: var(--e-1); }
.lgr-etiqueta-campo { font-size: var(--tipo-300); font-weight: 600; }
.lgr-entrada { width: 100%; padding: 0.75em 0.9em; border-radius: var(--radio-sm); border: var(--borde) solid var(--linea); background: var(--superficie); font-size: var(--tipo-300); }
.lgr-entrada:focus { border-color: var(--indigo); }
.lgr-entrada.es-error { border-color: var(--rojo-fg); }
.lgr-textarea { resize: vertical; min-height: 8rem; }
.lgr-error-campo { font-size: var(--tipo-100); color: var(--rojo-fg); font-weight: 600; }
.lgr-campo-casilla { display: flex; align-items: flex-start; gap: var(--e-1); font-size: var(--tipo-300); }
.lgr-campo-casilla input { margin-top: 0.3em; }
.lgr-anti-spam { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ Acordeón ============ */
.lgr-acordeon-item { border-bottom: var(--borde) solid var(--linea-sutil); }
.lgr-acordeon-pregunta {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--e-2);
  background: none; border: none; text-align: left; padding-block: var(--e-3);
  font-size: var(--tipo-400); font-weight: 700; color: var(--tinta); cursor: pointer;
}
.lgr-acordeon-flecha { flex-shrink: 0; color: var(--indigo); transition: transform var(--dur) var(--easing); }
.lgr-acordeon-item.es-abierto .lgr-acordeon-flecha { transform: rotate(180deg); }
.lgr-acordeon-respuesta { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--easing); }
.lgr-acordeon-respuesta-interior { padding-bottom: var(--e-3); color: var(--tinta-media); font-size: var(--tipo-300); max-width: var(--ancho-lectura); }

/* ============ Documento legal ============ */
.lgr-documento h2 { font-size: var(--tipo-500); margin-top: var(--e-6); margin-bottom: var(--e-2); padding-top: var(--e-4); border-top: var(--borde) solid var(--linea-sutil); }
.lgr-documento h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.lgr-documento h3 { font-size: var(--tipo-400); margin-top: var(--e-4); margin-bottom: var(--e-1); }
.lgr-documento p { margin-bottom: var(--e-2); color: var(--tinta-media); }
.lgr-documento ul { color: var(--tinta-media); margin-bottom: var(--e-2); }
.lgr-documento a { font-weight: 600; }

/* ============ Mapa del sitio ============ */
.lgr-mapa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: var(--borde) solid var(--linea-sutil); border-radius: var(--radio); }
.lgr-mapa > div { padding: var(--e-4); border-right: var(--borde) solid var(--linea-sutil); }
.lgr-mapa > div:last-child { border-right: none; }
.lgr-mapa h3 { font-size: var(--tipo-200); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--tinta-media); margin-bottom: var(--e-2); }
.lgr-mapa ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); }

/* ============ 404 ============ */
.lgr-404 { font-size: 5.5rem; font-weight: 800; color: var(--linea); line-height: 1; letter-spacing: -0.03em; }

/* ============ Pie de página (mega-footer) ============ */
.lgr-pie { background: var(--marino-950); color: var(--marino-200); padding-block: var(--e-7) var(--e-4); margin-top: var(--e-8); }
.lgr-pie a { color: var(--marino-200); text-decoration: none; }
.lgr-pie a:hover { color: var(--indigo-claro); }
.lgr-pie__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.lgr-pie__col { padding: 0 var(--e-4); border-right: var(--borde) solid var(--marino-800); }
.lgr-pie__col:first-child { padding-left: 0; }
.lgr-pie__col:last-child { border-right: none; }
.lgr-pie__marca p { color: var(--marino-400); font-size: var(--tipo-300); margin-block: var(--e-3); max-width: 26rem; }
.lgr-pie__rg { display: flex; align-items: center; gap: var(--e-2); }
.lgr-pie__rg-nota { font-size: var(--tipo-100); color: var(--marino-400); }
.lgr-pie__col h4 { font-size: var(--tipo-100); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--marino-400); margin-bottom: var(--e-2); }
.lgr-pie__enlaces { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--tipo-300); }
.lgr-pie__seccion-rg { padding-block: var(--e-5); margin-top: var(--e-5); border-top: var(--borde) solid var(--marino-800); border-bottom: var(--borde) solid var(--marino-800); }
.lgr-pie__rg-titulo { font-weight: 700; margin-bottom: var(--e-2); font-size: var(--tipo-300); }
.lgr-pie__recursos { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.lgr-pie__recursos a { font-size: var(--tipo-200); padding: 0.4em 0.8em; border: var(--borde) solid var(--marino-800); border-radius: var(--radio-sm); }
.lgr-pie__inferior { padding-top: var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); }
.lgr-pie__divulgacion { font-size: var(--tipo-200); color: var(--marino-400); line-height: 1.6; }
.lgr-pie__franja-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e-2); font-size: var(--tipo-100); color: var(--marino-400); }
.lgr-pie__enlaces-legales { display: flex; gap: var(--e-3); flex-wrap: wrap; }

/* ============ Modal de verificación de edad ============ */
.lgr-modal-edad {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--e-4);
  background: rgba(10, 15, 24, 0.78);
  opacity: 0; transition: opacity var(--dur) var(--easing);
}
.lgr-modal-edad.es-visible { opacity: 1; }
.lgr-modal-edad[hidden] { display: none; }
.lgr-modal-edad__panel {
  background: var(--superficie); border-radius: var(--radio); padding: var(--e-6) var(--e-5);
  max-width: 26rem; text-align: center; border: var(--borde-fuerte) solid var(--tinta);
}
.lgr-modal-edad__pregunta { font-size: var(--tipo-600); font-weight: 800; margin-bottom: var(--e-2); }
.lgr-modal-edad__ayuda { font-size: var(--tipo-300); color: var(--tinta-media); margin-bottom: var(--e-5); }
.lgr-modal-edad__acciones { display: flex; gap: var(--e-2); justify-content: center; }

/* ============ Banner de cookies ============ */
.lgr-cookies {
  position: fixed; left: var(--e-4); right: var(--e-4); bottom: var(--e-4); z-index: 900;
  max-width: 40rem; margin-inline: auto;
  background: var(--tinta); color: #fff;
  border-radius: var(--radio); padding: var(--e-4) var(--e-5);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing);
  /* Dark surface: repoint the outline-button variant so "Rechazar analíticas"
     (.lgr-boton--linea) reads correctly instead of inheriting the light-surface
     defaults (dark text on transparent = invisible against this background).
     Also repoint the focus ring: the default indigo ring is only ~2.4:1 here. */
  --boton-linea-texto: #ffffff;
  --boton-linea-borde: var(--marino-400);
  --boton-linea-borde-hover: #ffffff;
  --boton-linea-fondo-hover: var(--marino-800);
  --anillo-foco: var(--indigo-claro);
}
.lgr-cookies.es-visible { opacity: 1; transform: translateY(0); }
.lgr-cookies[hidden] { display: none; }
.lgr-cookies p { font-size: var(--tipo-300); margin-bottom: var(--e-3); color: var(--marino-200); }
.lgr-cookies a { color: var(--indigo-claro); }
.lgr-cookies__acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* ============ Aparición al cargar (CSS puro, sin IntersectionObserver) ============
   Deliberadamente NO depende de scroll/IntersectionObserver: ese enfoque deja
   contenido invisible (opacity:0 permanente) en cualquier contexto donde el
   observer no llega a disparar antes de que el usuario mire esa zona —
   capturas de pantalla de página completa, lectores de pantalla, o scroll
   muy rápido. Una animación de carga es visualmente equivalente y no puede
   "perder" contenido. */
.lgr-revelar { animation: lgr-aparecer max(var(--dur), 500ms) var(--easing) both; }
@media (prefers-reduced-motion: reduce) {
  .lgr-revelar { animation: none; opacity: 1; }
}
@keyframes lgr-aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}