/* Banca Monediza — estilos globales (Spec) */

/* -------------------------------------------------------------------------- */
/* 3.1 Variables globales obligatorias */
/* -------------------------------------------------------------------------- */
:root {
  --color-verde: #006600;
  --color-amarillo: #ffd217;
  --color-gris: #606060;
  --color-blanco: #ffffff;

  --espacio-seccion: 4%;
  --radio-tarjeta: 0.75rem;
  --sombra-tarjeta: 0 0.35rem 1.2rem rgba(0, 0, 0, 0.35);
}

/* Morado: solo vista Jaulas (prohibido en Home y en el resto del CSS global). */
body.page-jaulas {
  --color-morado: #76004d;
}

/* -------------------------------------------------------------------------- */
/* 3.2 Tipografía local (@font-face) */
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: "Font Titulos";
  src: url("../fonts/font-titulos.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/font-open-sans-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/font-open-sans-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/font-open-sans-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/font-open-sans-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel Logo";
  src: url("../fonts/font-cinzel-black-logo.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

html {
  font-size: 118.75%;
  scroll-behavior: smooth;
}

html, body { 
    overflow-x: hidden; /* Evita que los brillos o monedas generen scroll lateral */ 
    height: auto; 
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 400;
  color: var(--color-blanco);
  background-color: var(--color-verde);
  line-height: 1.6;
}

/* Home: gradiente verde oscuro → negro */
body.page-home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  background: linear-gradient(180deg, #002208 0%, #003814 38%, #000000 100%);
  color: var(--color-blanco);
}

h1,
h2,
h3 {
  font-family: "Font Titulos", "Open Sans", sans-serif;
  font-weight: normal;
  line-height: 1.2;
  margin: 0 0 1rem;
}

a {
  color: var(--color-amarillo);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Escalado coherente: ilustraciones y logos sin deformar */
.page-home .hero__diosa {
  object-fit: contain;
  object-position: bottom right;
}

.page-home .somos__diosa {
  object-fit: contain;
  object-position: bottom center;
}

.page-home .loteria-tarjeta__logo {
  object-fit: contain;
  object-position: center;
}

.page-home .site-logo--home img,
.page-home .site-footer__marca {
  object-fit: contain;
  object-position: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Franjas decorativas (3.3): borde superior volteado + inferior */
.deco-franja {
  width: 100%;
  height: auto;
  min-height: 0.5rem;
  object-fit: fill;
  display: block;
  pointer-events: none;
}

.deco-franja--superior {
  transform: scaleY(-1);
}

/* Contenedor principal con humo superpuesto (transparencia PNG) */
.shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell__humo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.shell > *:not(.shell__humo) {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------- */
/* Cabecera y navegación */
/* -------------------------------------------------------------------------- */
.site-header {
  width: 100%;
  padding: 2% 4%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    transparent 100%
  );
}

.site-header--home {
  background: var(--color-verde);
}

.site-header__inner--home {
  max-width: 100%;
}

.site-logo--home {
  width: min(48%, 22rem);
  min-width: 14rem;
}

.site-nav--home a {
  font-family: "Open Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--color-blanco);
}

.site-header__inner {
  width: 100%;
  max-width: 96%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-logo {
  display: block;
  width: min(42%, 18rem);
  min-width: 12rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: flex-end;
}

.site-nav a {
  font-weight: 700;
  color: var(--color-blanco);
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  border: 0.12rem solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-color: var(--color-amarillo);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--color-amarillo);
  border-color: var(--color-amarillo);
}

.site-nav--home a[aria-current="page"] {
  color: var(--color-blanco);
  border-color: var(--color-amarillo);
}

/* -------------------------------------------------------------------------- */
/* Pie */
/* -------------------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  width: 100%;
  padding: 0;
  position: relative;
  background-color: #003300;
}

.site-footer--home {
  margin-top: 0;
  max-width: 100%;
  overflow-x: hidden;
  background-color: transparent;
  background-image: url("../assets/img/ui/bg-footer.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 4% 5%;
  min-height: 14rem;
}

.site-footer--home .site-footer__inner--home {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 8rem;
}

.site-footer--home .site-footer__marca {
  width: min(85%, 34rem);
  max-width: 100%;
  height: auto;
}

.site-footer__bg {
  width: 100%;
  display: block;
  object-fit: cover;
  min-height: 8rem;
  opacity: 0.95;
}

.site-footer__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4%;
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-blanco);
  text-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------------- */
/* Secciones genéricas */
/* -------------------------------------------------------------------------- */
main {
  flex: 1;
  width: 100%;
  padding: var(--espacio-seccion) 4%;
}

/* 1. Liberación del contenedor maestro para unificar el scroll */ 
.main-home { 
    height: auto !important; 
    min-height: 100vh; 
    max-height: none !important; 
    overflow: visible !important; /* Elimina la barra de scroll interna */ 
    display: block; /* Asegura flujo vertical natural */ 
    width: 100%; 
    max-width: 100%; 
    padding: 0; 
    margin: 0; 
}

.seccion {
  width: 100%;
  max-width: 96%;
  margin: 0 auto 3rem;
}

.seccion__titulo {
  font-size: clamp(1.55rem, 4.2vw, 2.35rem);
  color: var(--color-amarillo);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Botón primario (dorado) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  padding: 0.75rem 1.4rem;
  border-radius: 0.4rem;
  border: 0.15rem solid var(--color-amarillo);
  background: linear-gradient(180deg, #ffe566 0%, var(--color-amarillo) 100%);
  color: #2a2000;
  cursor: pointer;
  font-size: 1.1rem;
}

.btn:hover,
.btn:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

/* -------------------------------------------------------------------------- */
/* Home — Hero (50% / 50%) + capas de fondo */
/* -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  padding: 3% 4% 0;
  overflow-x: hidden;
  overflow-y: visible;
}

.hero__capas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__fondo {
  position: absolute;
  display: block;
}

.hero__fondo--humo {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.5;
}

.hero__fondo--brillo {
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.4;
  mix-blend-mode: screen;
}

 .hero__deco-monedas { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
     z-index: 1; 
     pointer-events: none; 
     animation: titilarFondo 4s infinite ease-in-out; 
 } 

.hero__grid {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  align-items: end;
  align-content: end;
  gap: clamp(0.5rem, 1.25vw, 1.25rem);
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

.hero__col--media {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: flex-end;
  min-width: 0;
  overflow: visible;
}

.hero__diosa {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom right;
  align-self: flex-end;
  margin: 0;
  margin-left: auto;
  padding: 0;
  display: block;
  /* Escala extra hacia la derecha / textos; base 100% del ancho de columna */
  transform: scale(1.18);
  transform-origin: bottom right;
}

 .hero__col--textos { 
     opacity: 0; 
     animation: entradaTexto 2s ease-out 0.5s forwards; 
     position: relative; 
     z-index: 10; 
 } 

.hero__titulo {
  font-family: "Font Titulos", "Open Sans", sans-serif;
  font-size: clamp(0.75rem, calc(2.5vmin + 0.5vw), 3rem);
  font-weight: normal;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-blanco);
  margin: 0 0 0.35rem;
  white-space: nowrap;
  max-width: 100%;
}

.hero__suerte {
  display: block;
  font-family: "Font Titulos", "Open Sans", sans-serif;
  font-size: clamp(2rem, 12vw, 8.5rem);
  font-weight: normal;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffd217;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  padding-bottom: 0.15em;
  max-width: 100%;
  white-space: nowrap;
  text-shadow:
    0 0.04em 0 #b8940a,
    0 0.08em 0 #9a7a08,
    0 0.12em 0 #7d6406,
    0 0.16em 0 #5f4c04,
    0 0.2em 0 #423503,
    0 0.26em 0 #2a2202,
    0 0.34em 0.12em rgba(0, 0, 0, 0.55),
    0 0.08em 0.2em rgba(0, 0, 0, 0.45),
    0 0.2em 0.5em rgba(0, 0, 0, 0.4),
    0 0 0.15em rgba(255, 237, 120, 0.95),
    0 0 0.45em rgba(255, 210, 23, 0.65),
    0 0 0.9em rgba(255, 200, 40, 0.45),
    0 0 1.8rem rgba(255, 210, 23, 0.35);
}

.hero__sublinea {
  display: block;
  font-family: "Font Titulos", "Open Sans", sans-serif;
  font-size: clamp(0.55rem, calc(2vmin + 0.35vw), 2.35rem);
  font-weight: normal;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-blanco);
  margin: 0 0 1.15rem;
  max-width: 100%;
  white-space: nowrap;
}

.hero__intro {
  font-family: "Open Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 1.65rem;
  font-size: clamp(1rem, 2.8vw, 1.55rem);
  line-height: 1.55;
  max-width: min(100%, 42rem);
  overflow-wrap: break-word;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
  align-items: center;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  border-radius: 0.4rem;
  background-color: #ffd217;
  color: var(--color-verde);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  text-decoration: none;
  border: 0.1rem solid rgba(0, 102, 0, 0.3);
}

.hero__btn:hover,
.hero__btn:focus-visible {
  filter: brightness(1.07);
  text-decoration: none;
  outline: 0.125rem solid #ffd217;
  outline-offset: 0.125rem;
}

/* 1. Estilo del Título Principal con efecto de luz (Glow) */ 
 .hero__marca { 
     font-size: clamp(1.8rem, 4vw, 3.5rem); 
     color: #ffffff; 
     text-transform: uppercase; 
     font-weight: 800; 
     margin-bottom: 0.5rem; 
     letter-spacing: 1px; 
     white-space: nowrap; 
     display: block; 
     width: 100%; 
     /* Reemplazamos la sombra estática por la animación de neón verde */ 
     animation: resplandorVerdeLento 4s infinite ease-in-out; 
 } 
 /* 2. Contenedor de la fecha para dar espacio vertical */ 
 .hero__fecha-contenedor { 
     margin: 1.5rem 0; 
 } 
 
 /* 3. Alineación de botones en una sola línea horizontal */ 
 .hero__acciones { 
     display: flex !important; 
     flex-direction: row !important; /* Fuerza la línea horizontal */ 
     gap: 15px; /* Espacio entre botones */ 
     justify-content: flex-start; /* Alinea al inicio de la columna de texto */ 
     flex-wrap: wrap; /* Permite bajar en pantallas muy pequeñas si es necesario */ 
 } 
 
 /* Ajuste del botón para asegurar consistencia */ 
 .hero__btn { 
     min-width: 160px; 
     text-align: center; 
     margin: 0 !important; /* Elimina márgenes antiguos que rompan la línea */ 
 }

/* --- ANIMACIONES DEL HERO --- */ 
 @keyframes aparecerDiosa { 
     0% { opacity: 0; transform: translateY(100px); } 
     100% { opacity: 1; transform: translateY(0); } 
 } 
 
 @keyframes entradaTexto { 
     0% { opacity: 0; transform: translateY(50px); } 
     100% { opacity: 1; transform: translateY(0); } 
 } 
 
 @keyframes titilarFondo { 
     0%, 100% { opacity: 0.3; } 
     50% { opacity: 1; } 
 } 
 
 @keyframes resplandorVerdeLento { 
     0%, 100% { 
         text-shadow: 
             0 0 10px rgba(0, 255, 64, 0.7), 
             0 0 20px rgba(0, 255, 64, 0.4), 
             0 0 30px rgba(0, 255, 64, 0.2); 
     } 
     50% { 
         text-shadow: 
             0 0 15px rgba(0, 255, 64, 1), 
             0 0 30px rgba(0, 255, 64, 0.8), 
             0 0 50px rgba(0, 255, 64, 0.5); 
     } 
 } 
 
 /* Aplicación de animaciones a las imágenes */ 
 .hero__diosa { 
     opacity: 0; 
     animation: aparecerDiosa 2.5s ease-out forwards; 
 } 
 
  .hero__fondo--brillo { 
      animation: titilarFondo 4s infinite ease-in-out; 
  }

.hero__pie {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 100%;
  margin-top: auto;
  line-height: 0;
}

.hero__pie img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: fill;
  display: block;
}

/* -------------------------------------------------------------------------- */
/* Home — Loterías (fondo blanco, curva superior, flex 4 + 3) */
/* -------------------------------------------------------------------------- */
.loterias {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  color: #1a1a1a;
  border-radius: 6.25rem 6.25rem 0 0;
  padding: 4% 5% 2%;
  overflow-x: hidden;
}

.loterias__titulo {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-verde);
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin: 0 0 2.25rem;
}

.loterias__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2%;
  width: 100%;
}

/* 1. Eliminamos el keyframe viejo y creamos el del fantasma */ 
@keyframes latidoFantasma { 
    0%, 100% { opacity: 0; } 
    50% { opacity: 1; } 
} 

/* Animación de entrada al hacer scroll (de abajo hacia arriba) */ 
@keyframes entradaTarjeta { 
    0% { opacity: 0; transform: translateY(50px); } 
    100% { opacity: 1; transform: translateY(0); } 
} 

/* 2. Actualizamos la tarjeta padre (Ancla) */ 
.loteria-tarjeta { 
    flex: 0 0 calc(25% - 1.5%);
    max-width: calc(25% - 1.5%);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 5% 4% 6%;
    margin-bottom: 2%;
    background-image: url("../assets/img/ui/sombra-home-loterias.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 18rem;
    border-radius: 0.5rem;
    opacity: 0; 
    transform: translateY(50px); 
    position: relative; /* CRÍTICO: Anclaje para el pseudo-elemento */ 
    background-color: #ffffff; /* Aseguramos fondo sólido para tapar el fantasma */ 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Sombra base suave y estática */ 
    will-change: transform, opacity; 
    transition:
        transform 0.28s ease,
        filter 0.28s ease,
        box-shadow 0.28s ease;
} 

/* 3. Construimos la capa clon/fantasma que vivirá detrás */ 
.loteria-tarjeta::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border-radius: inherit; /* Copia las esquinas redondeadas exactas de la tarjeta */ 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9); /* Sombra densa estática (sin animar) */ 
    opacity: 0; /* Nace invisible */ 
    z-index: -1; /* Se esconde estrictamente detrás del fondo blanco de la tarjeta */ 
    pointer-events: none; /* Prohibido interactuar con el mouse */ 
    will-change: opacity; /* Renderizado exclusivo por GPU */ 
} 

/* 4. Estado de entrada: La tarjeta sube y aparece */ 
.loteria-tarjeta.visible { 
    animation: entradaTarjeta 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; 
} 

/* 5. El fantasma empieza a latir solo cuando la tarjeta ya es visible */ 
.loteria-tarjeta.visible::before { 
    animation: latidoFantasma 4s infinite ease-in-out; 
} 

.loteria-tarjeta:hover {
  transform: scale(1.05);
  filter: brightness(1.12) saturate(1.05);
  box-shadow:
    0 1.25rem 2.5rem rgba(0, 0, 0, 0.35),
    0 0 2rem rgba(255, 210, 23, 0.35);
  z-index: 3;
  position: relative;
}

.loteria-tarjeta__nombre {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: var(--color-verde);
  text-align: center;
  margin: 0;
  font-size: clamp(1rem, 2.3vw, 1.3rem);
  line-height: 1.2;
}

.loteria-tarjeta__logo {
  width: 72%;
  max-width: 13rem;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.loteria-tarjeta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.5rem;
  background-color: #ffd217;
  color: var(--color-verde);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  text-decoration: none;
  border-radius: 0.3rem;
  border: 0.08rem solid rgba(0, 102, 0, 0.25);
}

.loteria-tarjeta__link:hover,
.loteria-tarjeta__link:focus-visible {
  filter: brightness(1.06);
  text-decoration: none;
  outline: none;
}

/* Cinta dorada: sin bandas blancas; solapa .somos */
.home-cinta-puente {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 100vw;
  display: block;
  margin-top: -6%;
  margin-bottom: -8rem;
  pointer-events: none;
  line-height: 0;
}

.home-cinta-puente__img {
  width: 100%;
  max-width: 100vw;
  min-height: clamp(10rem, 22vw, 18rem);
  height: clamp(10rem, 22vw, 18rem);
  display: block;
  object-fit: cover;
  object-position: center;
}

/* -------------------------------------------------------------------------- */
/* Home — Somos */
/* -------------------------------------------------------------------------- */
.somos {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  background-color: #000000;
  padding: 10% 4% 0;
  overflow-x: hidden;
  overflow-y: visible;
  box-shadow:
    inset 0 0 8rem rgba(255, 210, 23, 0.14),
    0 0 5rem rgba(255, 210, 23, 0.1);
}

.somos__brillo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/img/ui/brillo-dorado-vertical.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
  opacity: 0.5;
  pointer-events: none;
}

.somos__grid {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: stretch;
  gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  min-height: 0;
}

.somos__col--media {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  min-height: 100%;
  align-self: stretch;
  padding-bottom: 0;
  margin-bottom: 0;
}

.somos__diosa-marco {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: min(70vh, 40rem);
  padding: 0;
  margin: 0;
}

.somos__diosa {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: bottom center;
}

.somos__col--textos {
  min-width: 0;
  align-self: start;
}

.somos__panel {
  box-sizing: border-box;
  width: 100%;
  max-width: min(100%, 24rem);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(2rem, 6vh, 4.5rem);
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  background: radial-gradient(
    circle at 50% 40%,
    #ffffff 0%,
    #f6f6f6 42%,
    #e6e6e6 100%
  );
  color: #222222;
  overflow-wrap: break-word;
}

.somos__titulo {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: var(--color-verde);
  margin: 0 0 0.55rem;
  font-size: clamp(1.9rem, 5.5vw, 3.35rem);
  line-height: 1.12;
}

.somos__subtitulo {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 0.85rem;
  line-height: 1.4;
  font-size: clamp(1.25rem, 3.8vw, 2.05rem);
  color: #333333;
}

.somos__subtitulo-destacado {
  text-decoration: underline;
  text-decoration-color: #ffd217;
  text-decoration-thickness: 0.15rem;
  text-underline-offset: 0.3rem;
}

.somos__texto {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  margin: 0 0 1rem;
  line-height: 1.5;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: #2a2a2a;
}

.somos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.somos__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.65rem;
}

.somos__icono {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.somos__item-texto {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.45;
  color: #2a2a2a;
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------- */
/* Resultados — página (fondo blanco, sin morado) */
/* -------------------------------------------------------------------------- */
body.page-resultados {
  background-color: #121212;
  color: #f5f5f5;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.page-resultados::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #006600;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
  animation: pulseFlicker 4s ease-in-out infinite;
}

@keyframes pulseFlicker {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.35;
  }
}

.main-resultados {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* 1. Contenedor Maestro: Altura compacta (16:9) y Recorte suave en V */ 
 .hero-resultados { 
     position: relative; 
     margin: 0 !important; 
     padding: 0 !important; 
     overflow: hidden !important; 
     min-height: 65vh !important; /* CRÍTICO: Define la proporción vertical exacta */ 
     display: flex !important; 
     align-items: stretch !important; 
     clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%) !important; /* V del 85% */ 
 } 
 
 /* 2. Grid Interno: Partición 50/50 y anclaje al piso */ 
 .hero-resultados__inner { 
     position: relative; 
     z-index: 3; 
     display: grid !important; 
     grid-template-columns: 1fr 1fr !important; /* Mitad para Diosa, mitad para texto */ 
     align-items: end !important; /* CRÍTICO: Obliga a la Diosa a tocar la base inferior */ 
     gap: 2rem !important; 
     padding: 4% 5% 0 !important; /* CRÍTICO: Cero padding abajo para que haya contacto físico */ 
     width: 100%; 
     max-width: 96%; 
     margin: 0 auto; 
 } 
 
 /* 3. Columna Izquierda y Limpieza de la Diosa */ 
 .hero-resultados__col--media { 
     width: 100% !important; /* Controlado por el Grid */ 
     order: 1 !important; 
     display: flex !important; 
     justify-content: flex-start !important; 
 } 
 
 .hero-resultados__diosa { 
     width: 100% !important; 
     max-width: 560px !important; /* Escala imponente sin desbordar */ 
     height: auto !important; 
     transform: none !important; /* CRÍTICO: Se eliminan empujes forzados (translateY) */ 
     display: block !important; 
     margin-bottom: -5px !important; /* Ajuste milimétrico para tapar el borde */ 
 } 
 
 /* 4. Columna Derecha: Textos alineados y con aire inferior */ 
 .hero-resultados__col--textos { 
     width: 100% !important; 
     order: 2 !important; 
     display: flex !important; 
     flex-direction: column !important; 
     align-items: flex-end !important; 
     text-align: right !important; 
     padding-bottom: 12% !important; /* Aire inferior para que el texto no flote pegado al corte en V */ 
 } 
 
 .hero-resultados__titulo, 
 .hero-resultados__fecha-burbuja, 
 .hero-resultados__suerte-img { 
     align-self: flex-end !important; 
     text-align: right !important; 
 } 
 
 /* 5. Asegurar visibilidad del texto por encima del fondo */ 
 /* 1. Clonación tipográfica fluida de Jaulas */ 
 .hero-resultados__titulo { 
     font-family: "Open Sans", sans-serif !important; 
     font-weight: 700 !important; 
     font-size: clamp(2rem, 6vw, 4rem) !important; /* Escala masiva idéntica a jaulas */ 
     line-height: 1.1 !important; 
     white-space: nowrap !important; /* Mantiene una sola línea */ 
     margin: 0 0 15px 0 !important; 
     position: relative; 
     z-index: 10 !important; 
     animation: titilarTituloRes 3s infinite ease-in-out alternate; 
 } 
 
 /* 2. Escalado e impacto visual de la palabra SUERTE */ 
 .hero-resultados__suerte-img { 
     width: 100% !important; 
     max-width: 420px !important; /* Expansión para balancear el título gigante */ 
     height: auto !important; 
     align-self: flex-end !important; 
     margin-bottom: 20px !important; 
 } 
 
 /* 3. Ajuste de la burbuja de fecha (Pasa al final) */ 
 @keyframes titilarTituloRes { 
     0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 0, 0.4), 0 0 20px rgba(0, 255, 0, 0.2); } 
     50% { text-shadow: 0 0 20px rgba(0, 255, 0, 0.9), 0 0 40px rgba(0, 255, 0, 0.7), 0 0 60px rgba(255, 215, 0, 0.5); } 
 } 
 
 /* 4. Atmósfera Titilante Asíncrona (Uso de animación existente) */ 
 .hero-resultados__fondo { 
     position: absolute; 
     top: 0; left: 0; width: 100%; height: 100%; 
     object-fit: cover; 
 } 
 
 .hero-resultados__fondo--humo { animation: titilarFondo 6s infinite ease-in-out; } 
 .hero-resultados__fondo--brillo { animation: titilarFondo 4s infinite ease-in-out 1s; } 
 .hero-resultados__fondo--monedas1 { animation: titilarFondo 5s infinite ease-in-out 2s; } 
 .hero-resultados__fondo--monedas5 { animation: titilarFondo 7s infinite ease-in-out 0.5s; } 
 
 .hero-resultados__fecha-burbuja { 
     margin: 0 !important; 
     align-self: flex-end !important; 
     display: inline-flex; 
     align-items: center; 
     justify-content: center; 
     padding: 0.65rem 1.25rem; 
     background-color: #ffd217; 
     border-radius: 999rem; 
     font-family: "Open Sans", sans-serif; 
     font-weight: 700; 
     font-size: clamp(0.95rem, 2vw, 1.15rem); 
     color: #1a1a1a; 
 } 
 
 .hero-resultados__fecha-burbuja time { 
   font-family: inherit; 
   font-weight: inherit; 
 } 
 
 /* Controles */
.controles-resultados {
  width: 100%;
  max-width: 100%;
  margin: 0;
  margin-top: 3.5rem;
  padding: 0;
  box-sizing: border-box;
}

.controles-resultados__bread {
  background-color: #e8e8e8;
  padding: 0.85rem 4%;
  text-align: center;
}

.controles-resultados__migas {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: #333333;
}

.controles-resultados__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 4%;
  background-color: #ffffff;
  box-shadow: 0 0.35rem 0.65rem rgba(0, 0, 0, 0.12);
}

.controles-resultados__btn {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.65rem 1.35rem;
  border-radius: 0.4rem;
  cursor: pointer;
  border: 0.12rem solid #006600;
  background: #ffffff;
  color: #006600;
}

.controles-resultados__btn--historial {
  background: #ffffff;
  color: #006600;
}

.controles-resultados__btn--buscar {
  background: #ffd217;
  color: #1a1a1a;
  border-color: #ffd217;
}

.controles-resultados__fecha-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  border: 0.1rem solid #cccccc;
  border-radius: 0.35rem;
}

.controles-resultados__fecha {
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  border: none;
  background: transparent;
  color: #1a1a1a;
  padding: 0.25rem;
}

.controles-resultados__cal-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

/* Bloques de lotería */
.bloque-loteria {
  width: 100%;
  max-width: 96%;
  margin: 0 auto 3rem;
  padding: 0 2%;
  overflow: visible;
}

.loteria-banner {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: 70px;
  background-color: var(--color-verde);
  margin-left: 50%;
  transform: translateX(-50%);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  z-index: 5;
  margin-bottom: 3.5rem; /* Espacio para el desbordamiento inferior */
}

.loteria-banner__inner {
  width: 100%;
  max-width: 96%;
  margin: 0 auto;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2rem !important;
  padding: 0 4%;
  height: 100%;
  overflow: visible !important;
}

.loteria-banner__logo-wrap {
  position: relative !important;
  z-index: 10 !important;
  height: 100%;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

.loteria-banner__logo {
  height: 130px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}

.loteria-banner__titulo {
  font-family: "Open Sans", sans-serif;
  font-weight: 700; /* Open Sans Bold */
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  color: var(--color-blanco);
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none;
  line-height: 1 !important;
}

.page-resultados .loteria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.25rem 0 0;
}

.page-resultados .resultado-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0.5rem 0.65rem 0.85rem;
  background-color: #ffffff;
  background-image: url("../assets/img/ui/sombra-resultados-loterias.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0.45rem;
  border: 0.06rem solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* Tarjeta en espera — skeleton amarillo */
.resultado-card__cuerpo {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  margin-bottom: 0.35rem;
}

.resultado-card__cuerpo img {
  width: 90%;
  height: auto;
  max-width: 100%;
  max-height: 85%;
  object-fit: contain;
  display: block;
}

.resultado-card__skeleton {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0.3rem;
  background-color: #ffffff;
  overflow: hidden;
  border: 0.06rem solid rgba(255, 210, 23, 0.35);
}

.resultado-card__skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 35%,
    rgba(255, 210, 23, 0.55) 50%,
    #ffffff 65%,
    #ffffff 100%
  );
  background-size: 200% 100%;
  animation: resultado-skeleton-shine 1.4s linear infinite;
}

@keyframes resultado-skeleton-shine {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.resultado-card__hora {
  margin: 5px 0 10px 0;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #333333;
  width: 100%;
  flex: 0 0 auto;
}

.site-footer--resultados {
  background-color: #006600;
  margin-top: auto;
  padding: 1.5rem 5% 1.25rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.site-footer--resultados .site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 96%;
  margin: 0 auto 1rem;
}

.site-footer--resultados .site-footer__brand {
  display: block;
  flex: 0 1 auto;
}

.site-footer--resultados .site-footer__brand img {
  width: min(100%, 22rem);
  height: auto;
  display: block;
  object-fit: contain;
}

.site-footer--resultados .site-footer__contactos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.site-footer--resultados .site-footer__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.15);
}

.site-footer--resultados .site-footer__icon-link img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.site-footer--resultados .site-footer__legal {
  margin: 0 auto;
  padding-top: 0.75rem;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(0.75rem, 1.8vw, 0.9rem);
  color: #ffffff;
  line-height: 1.5;
  max-width: 96%;
}

/* -------------------------------------------------------------------------- */
/* 3.3 Skeleton Loader — Shimmer gris (otras vistas) */
/* -------------------------------------------------------------------------- */
.skeleton-loading {
  position: relative;
  width: 70%;
  aspect-ratio: 1 / 1;
  border-radius: 0.35rem;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--color-gris) 0%,
    #8a8a8a 45%,
    var(--color-gris) 90%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.35s ease-in-out infinite;
}

.skeleton-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 45%,
    transparent 70%
  );
  animation: skeleton-shimmer-fg 1.35s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes skeleton-shimmer-fg {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(60%);
  }
}

/* -------------------------------------------------------------------------- */
/* Jaulas — tablas y badges */
/* -------------------------------------------------------------------------- */
.jaulas-intro {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 2rem;
  color: var(--color-blanco);
}

.tabla-jaula__thumb {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.35rem;
}

.jaulas-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 3%;
  justify-content: center;
  align-items: flex-start;
}

.jaulas-bloque {
  flex: 1 1 45%;
  min-width: min(100%, 18rem);
  max-width: 48%;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radio-tarjeta);
  border: 0.12rem solid rgba(255, 210, 23, 0.4);
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.jaulas-bloque__titulo {
  font-family: "Font Titulos", sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  margin: 0 0 1rem;
  text-align: center;
}

.jaulas-bloque--mas .jaulas-bloque__titulo {
  color: var(--color-amarillo);
}

.jaulas-bloque--menos .jaulas-bloque__titulo {
  color: #ffb3d1;
}

.tabla-jaula {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.98rem, 2.1vw, 1.08rem);
}

/* 1. Filas Impares (1, 3, 5, etc.): Mantiene Fondo Blanco Limpio */ 
 .jaulas-tabla tbody tr:nth-child(odd) { 
     background-color: #ffffff !important; 
 } 
 
 /* 2. Filas Pares (2, 4, 6, etc.): Corrección al nuevo Rosa Pastel Suave */ 
 .jaulas-tabla tbody tr:nth-child(even) { 
     background-color: #F8C9E7 !important; 
 } 
 
 /* 3. Corrección de Contraste para Fondo Claro */ 
 /* Al cambiar a un fondo claro, el texto DEBE ser oscuro para poder leerse */ 
 .jaulas-tabla tbody tr:nth-child(even) td, 
 .jaulas-tabla tbody tr:nth-child(even) th, 
 .jaulas-tabla tbody tr:nth-child(even) span, 
 .jaulas-tabla tbody tr:nth-child(even) time { 
     color: #1a1a1a !important; /* Gris oscuro neutro de alta legibilidad */ 
 } 
 
 /* 4. Mantener el énfasis de color en la última columna (Días sin salir) */ 
 .jaulas-tabla tbody tr:nth-child(even) td:last-child { 
     color: #5a0c36 !important; /* Un tono vino/ginda oscuro para que resalte limpiamente sobre el rosa */ 
 }

.tabla-jaula th,
.tabla-jaula td {
  padding: 0.55rem 0.5rem;
  text-align: left;
  border-bottom: 0.06rem solid rgba(255, 255, 255, 0.15);
}

.tabla-jaula th {
  color: var(--color-amarillo);
  font-weight: 700;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999rem;
  font-weight: 700;
  font-size: 0.8em;
}

.badge--alto {
  background: var(--color-amarillo);
  color: #2a2000;
}

.page-jaulas .badge--bajo {
  background: var(--color-morado);
  color: var(--color-blanco);
  border: 0.08rem solid rgba(255, 210, 23, 0.6);
}

/* -------------------------------------------------------------------------- */
/* Responsive — Mobile first: apilar hero y reducir columnas */
/* -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__col--media {
    align-self: center;
    justify-content: center;
  }

  .hero__diosa {
    width: min(100%, 36rem);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    object-position: bottom center;
  }

  .hero__deco-monedas {
    width: min(58%, 17rem);
    top: 12%;
    transform: translateY(0);
    opacity: 0.9;
  }

  .hero__col--textos {
    text-align: center;
    padding-bottom: 2%;
  }

  .hero__intro {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__acciones {
    justify-content: center;
  }

  .home-cinta-puente {
    margin-top: -8%;
    margin-bottom: -8rem;
  }

  .somos {
    padding-top: 12%;
  }

  .somos__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .somos__diosa-marco {
    min-height: min(62vh, 38rem);
  }

  .somos__panel {
    max-width: min(100%, 22rem);
    margin-bottom: clamp(1.75rem, 5vh, 3.5rem);
  }

  .loteria-tarjeta {
    flex: 0 0 calc(50% - 1.25%);
    max-width: calc(50% - 1.25%);
  }

  .page-resultados .loteria-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-resultados__inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .hero-resultados__col--media {
    align-items: center;
    width: 100%;
  }

  .hero-resultados__diosa {
    align-self: center;
    object-position: bottom center;
  }

  .hero-resultados__col--textos {
    max-width: 100%;
  }

  .controles-resultados {
    margin-top: 2.5rem;
  }

  .site-footer--resultados .site-footer__row {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .site-footer--resultados .site-footer__contactos {
    justify-content: center;
  }

  .jaulas-bloque {
    max-width: 100%;
  }
}

@media (max-width: 35rem) {
  .site-header__inner {
    flex-direction: column;
    align-items: center;
  }

  .site-nav {
    justify-content: center;
  }

  .loteria-tarjeta {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .page-resultados .loteria-grid {
    grid-template-columns: 1fr;
  }

  .loterias {
    border-radius: 3rem 3rem 0 0;
  }

  .home-cinta-puente {
    margin-top: -10%;
    margin-bottom: -8rem;
  }

  .home-cinta-puente__img {
    min-height: 8rem;
    height: clamp(8rem, 32vw, 12rem);
  }

  .hero__deco-monedas {
    width: min(70%, 14rem);
    right: -2%;
  }
}

/* -------------------------------------------------------------------------- */
/* Jaulas — Página específica */
/* -------------------------------------------------------------------------- */
.page-jaulas {
  background-color: #ffffff !important;
}

.page-jaulas .loteria-banner {
  background-color: #76004D !important;
}

.main-jaulas {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #ffffff;
}

/* Hero Jaulas */
.hero-jaulas {
  position: relative;
  margin: 0;
  padding: 0;
  background-color: #000000 !important;
  color: #ffffff;
  overflow: hidden;
  min-height: 65vh;
  display: flex;
  align-items: stretch; /* Estirar para que el inner ocupe todo el alto */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

.hero-jaulas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle at 30% 50%, rgba(255, 210, 23, 0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.hero-jaulas__capas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-jaulas__fondo {
  position: absolute;
}

/* Contenedores y otros estilos de Jaulas */

.hero-jaulas__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end; /* Alineación hacia la base */
  gap: 2rem;
  padding: 4% 5% 0; /* Padding inferior removido para que la diosa toque la base */
  width: 100%;
  max-width: 96%;
  margin: 0 auto;
}

.hero-jaulas__col--media {
  display: flex;
  justify-content: flex-end; /* Alineada al borde central donde está la punta */
  align-self: end;
}

.hero-jaulas__diosa {
  width: 95%; /* Ocupa casi todo el ancho de su mitad */
  max-width: none;
  height: auto;
  display: block;
  transform: translateY(4.5rem); /* Ajuste para que el clip-path corte por la cintura */
  object-fit: contain;
  object-position: bottom right;
}

.hero-jaulas__col--textos {
  text-align: left;
  align-self: center; /* Texto centrado verticalmente en su columna */
  padding-bottom: 4rem; /* Desplazado un poco hacia arriba para balance */
  position: relative;
  z-index: 5;
}

.hero-jaulas__lead {
  font-family: "Open Sans", sans-serif;
  font-weight: 300; /* Open Sans Light */
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  margin: 0 0 0.5rem;
  color: #ffd217;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 210, 23, 0.8), 0 0 20px rgba(255, 210, 23, 0.4);
}

.hero-jaulas__titulo { 
   font-family: "Open Sans", sans-serif; 
   font-weight: 700; /* Open Sans Bold */ 
   font-size: clamp(2rem, 6vw, 4rem); 
   line-height: 1.1; 
   color: #ffffff; 
   margin: 0; 
   text-shadow: 0 0 15px rgba(255, 210, 23, 0.7), 0 0 30px rgba(255, 210, 23, 0.3); 
   animation: titilarTextoJaulas 3s infinite alternate ease-in-out !important; 
 } 
 
 @keyframes titilarTextoJaulas { 
     0% { text-shadow: 0 0 10px rgba(255, 210, 23, 0.4), 0 0 20px rgba(255, 210, 23, 0.2); } 
     100% { text-shadow: 0 0 20px rgba(255, 210, 23, 0.9), 0 0 40px rgba(255, 210, 23, 0.7), 0 0 60px rgba(255, 210, 23, 0.5); } 
 } 
 
 /* 3. Motor y Activación de Animaciones Asíncronas de Fondo */ 
 @keyframes titilarFondoJaulas { 
     0% { opacity: 0.2; } 
     100% { opacity: 0.7; } 
 } 
 
 .hero-jaulas__fondo--brillo { 
     top: 0; 
     left: 0; 
     height: 100%; 
     width: auto; 
     opacity: 0.4; 
     mix-blend-mode: screen; 
     animation: titilarFondoJaulas 4s infinite alternate ease-in-out !important; 
 } 
 
 .hero-jaulas__fondo--monedas { 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
     opacity: 0.25; 
     z-index: 1; 
     animation: titilarFondoJaulas 6s infinite alternate ease-in-out 1s !important; /* Retraso de 1s para asincronía */ 
 } 
 
 /* 1. Capa base: Textura de Loterías */ 
 /* 1. Capa base: Textura de Loterías (Redimensionada y Centrada) */ 
 .hero-jaulas__fondo--loterias { 
     position: absolute !important; 
     top: 50% !important; /* Baja la imagen a la mitad de la caja */ 
     left: 50% !important; /* Mueve la imagen a la mitad horizontal */ 
     transform: translate(-50%, -50%) !important; /* Retrae la imagen sobre su propio eje para un centrado matemático perfecto */ 
     width: 100% !important; 
     max-width: 750px !important; /* Límite estricto para que los logos recuperen su escala original sin verse gigantes */ 
     height: auto !important; /* Permite que la altura fluya de forma natural según el ancho */ 
     opacity: 0.15 !important; 
     z-index: -1 !important; 
 }
.jaulas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 96%;
  margin: 0 auto;
  padding: 3rem 0;
  background-color: #ffffff;
}

.jaula-card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/img/ui/sombra-jaulas.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 15%;
}

.jaula-card img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* Controles Jaulas */
.controles-jaulas {
  width: 100%;
  background-color: #ffffff;
}

.controles-jaulas__bread {
  background-color: #f4f4f4;
  padding: 0.75rem 0;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}

.controles-jaulas__migas {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

.controles-jaulas__filtros {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.controles-jaulas__btn-historial {
  background: #ffffff;
  border: 1px solid #ccc;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  color: #333;
}

.controles-jaulas__fecha-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: white;
}

.controles-jaulas__fecha-input {
  border: none;
  outline: none;
  font-family: inherit;
  margin-right: 0.5rem;
}

.controles-jaulas__cal-icon {
  width: 20px;
  height: 20px;
  filter: invert(24%) sepia(93%) saturate(1914%) hue-rotate(104deg) brightness(94%) contrast(101%); /* Verde #006600 */
}

.controles-jaulas__btn-buscar {
  background: #ffd217;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  color: #000;
  cursor: pointer;
  transition: filter 0.2s;
}

.controles-jaulas__btn-buscar:hover {
  filter: brightness(1.1);
}

@media (max-width: 60rem) {
  .hero-jaulas {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  }
  .hero-jaulas__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-jaulas__col--media {
    justify-content: center;
  }
  .hero-jaulas__diosa {
    width: 50%;
    transform: translateY(20px);
  }
  .hero-jaulas__col--textos {
    text-align: center;
  }
  .jaulas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .controles-jaulas__filtros {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 35rem) {
  .jaulas-grid {
    grid-template-columns: 1fr;
  }
  .hero-jaulas__diosa {
    width: 70%;
  }
}

.hero-fecha-badge {
  background-color: #ffd217;
  color: #222222;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 8px 24px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 15px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.hero__suerte-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  object-fit: contain;
}

/* ========================================================== */
/* COMPONENTE: CARRUSEL DE RESUMEN (DIGITAL SIGNAGE)          */
/* ========================================================== */

.resumen-carrusel {
    width: 100%;
    max-width: 1600px; /* Limite máximo para TVs ultra anchas */
    margin: 2rem auto;
    position: relative;
    overflow: hidden;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Botones de Navegación */
.carrusel-controles {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none; /* Deja clickear a través del contenedor */
}

.carrusel-btn {
    background-color: rgba(0, 128, 0, 0.8);
    color: #fff;
    border: 2px solid #FFD700;
    padding: clamp(0.5rem, 2vh, 2rem); /* REGLA MODIFICADA */
    cursor: pointer;
    font-size: clamp(1rem, 4vh, 3rem); /* REGLA MODIFICADA */
    pointer-events: auto;
    border-radius: 8px;
    transition: background 0.3s;
}

.carrusel-btn:hover {
    background-color: #FFD700;
    color: #000;
}

/* Contenedor del Paneo */
.carrusel-viewport {
    width: 100%;
    height: calc(100vh - 100px); /* NUEVA REGLA: Muro de contención vertical */
    overflow: hidden;
    border: 3px solid #FFD700;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

.carrusel-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Paneo suave */
    align-items: stretch;
    flex-grow: 1;
}

.carrusel-slide {
    min-width: 100%; /* Cada tabla ocupa el 100% de la pantalla */
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    height: 100%;
    flex-direction: column;
    height: auto;
    align-self: stretch;
}

/* Sistema de Cuadrícula (Tablas Flexibles sin <table>) */
.tabla-resumen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex-grow: 1;
}

.tabla-head {
    background-color: #006400; /* Verde oscuro institucional */
    color: #FFD700; /* Letra dorada */
    font-weight: bold;
    text-align: center;
    border-bottom: 4px solid #FFD700;
}

/* Subdivisión en Columnas usando CSS Grid */
.tabla-5-cols .tabla-head,
.tabla-5-cols .tabla-fila {
    display: grid;
    grid-template-columns: 0.8fr repeat(4, 1fr);
    align-items: center;
}

.tabla-3-cols .tabla-head,
.tabla-3-cols .tabla-fila {
    display: grid;
    grid-template-columns: 1fr repeat(2, 1.5fr);
    align-items: center;
}

.tabla-celda {
    padding: 0.8vh 0.5vw; /* REGLA MODIFICADA: Reducción de aire vertical */
    text-align: center;
    border-right: 1px solid #ccc;
    font-size: clamp(14px, 3.5vh, 36px); /* REGLA MODIFICADA: Eje vertical vh */
    display: flex;
    justify-content: center;
    align-items: center;
}

.tabla-celda:last-child {
    border-right: none;
}

/* Imágenes de Loterías en las cabeceras */
.tabla-head img {
    max-width: 100%;
    height: auto;
    max-height: clamp(35px, 7vh, 85px); /* REGLA MODIFICADA: Adaptación al alto */
    object-fit: contain;
}

.head-hora {
    font-size: clamp(16px, 4vh, 42px); /* REGLA MODIFICADA: Eje vertical vh */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Filas que inyectaremos con JS luego (Estilo Preparado) */
.tabla-fila {
    border-bottom: 1px solid #eee;
    background: #fdfdfd;
    color: #333;
    font-weight: 700;
    flex-grow: 1;
}

.tabla-fila:nth-child(even) {
    background: #f0f8ff; /* Estilo cebra sutil */
}

/* NUEVA REGLA: Compresión vertical exclusiva para filas de datos (Protegiendo cabeceras) */
.tabla-fila .tabla-celda {
    padding: 0.2vh 0.5vw; /* Reducción extrema del aire vertical solo en datos */
    font-size: clamp(11px, 2.6vh, 28px); /* Reducción del piso y del multiplicador vertical */
}

.tabla-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden; /* Previene empujes extraños */
}

/* 1. Eliminación del panel blanco y ajuste de colores de texto */ 
.somos__panel { 
    background: transparent !important; 
    box-shadow: none !important; 
    padding: 0 !important; 
    height: auto !important; 
    max-height: none !important; 
    overflow: visible !important; 
} 

.somos__titulo, 
.somos__texto, 
.somos__item-texto, 
.somos__subtitulo-continuacion { 
    color: #ffffff !important; /* Forzamos blanco para legibilidad sobre fondo oscuro */ 
} 

.somos__subtitulo-destacado { 
    color: #ffd700 !important; /* Dorado para mantener jerarquía visual */ 
} 

/* 2. Control del contenedor principal y animación de fondos */ 
.somos, 
.somos__grid { 
    position: relative; 
    height: auto !important; 
    min-height: 100vh; /* Asegura que ocupe al menos la pantalla, pero pueda crecer */ 
    max-height: none !important; /* Destruye cualquier límite previo */ 
    overflow: visible !important; /* Mata la barra de scroll interna y permite superposición */ 
} 

.somos__deco-brillo, 
.somos__deco-monedas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    z-index: 0; /* Detrás de todo el contenido */ 
    pointer-events: none; 
    animation: titilarFondo 4s infinite ease-in-out; /* Usamos la animación ya existente */ 
} 

/* 3. Posicionamiento y superposición de la Diosa y el Footer */ 
.somos__col, .somos__diosa-marco { 
    position: relative; 
    z-index: 2; /* Asegura que el contenido quede sobre los fondos animados */ 
} 

.somos__diosa { 
    position: relative; 
    transform: translateY(80px); /* Empuja la imagen hacia abajo para cruzar la línea del footer */ 
    z-index: 1; /* Capa inferior respecto al footer */ 
} 

/* 3. Asegurar que el footer sea el plano superior absoluto */ 
.site-footer, 
.site-footer--home { 
    position: relative; 
    z-index: 999 !important; /* Capa máxima para recibir a la diosa por debajo */ 
    background-color: #004d00; /* Asegura que el fondo del footer sea opaco */ 
}

.site-footer--home { 
    margin-top: 0; 
    max-width: 100%; 
    overflow-x: hidden; 
    background-color: transparent; 
    background-image: url("../assets/img/ui/bg-footer.webp"); 
    background-position: center; 
    background-size: cover; 
    background-repeat: no-repeat; 
    padding: 4% 5%; 
    min-height: 14rem; 
}