/*
  Fortunica Casino – Tema claro (Light)
  - Cabecera color #131a4e
  - Diseño responsive mobile-first
  - Comentarios detallan bloques y lógica visual
*/

/* ============
   RESET BÁSICO
   ============ */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #0f172a; /* slate-900 */
  background-color: #ffffff;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: #0b57d0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Accesibilidad: enlace de salto visible al enfocar */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 1rem; top: 1rem; width: auto; height: auto; padding: .5rem .75rem; background: #131a4e; color: #fff; border-radius: .375rem;
}

/* ============
   LAYOUT GLOBAL
   ============ */
.container { width: min(1200px, 100% - 2rem); margin-inline: auto; }

/* Botones reutilizables */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .625rem 1rem; border-radius: .5rem; border: 1px solid transparent;
  font-weight: 600; line-height: 1.2; cursor: pointer;
}
.btn:focus-visible { outline: 3px solid #94a3b8; outline-offset: 2px; }
.btn--primary { background: #1d4ed8; color: #fff; }
.btn--primary:hover { background: #1e40af; text-decoration: none; }
.btn--secondary { background: #eef2ff; color: #1e40af; border-color: #c7d2fe; }
.btn--secondary:hover { background: #e0e7ff; }
.btn--link { background: transparent; color: #0b57d0; padding: 0; border: 0; }
.btn--link:hover { text-decoration: underline; }
.btn--lg { padding: .875rem 1.25rem; font-size: 1.125rem; }

/* ============
   CABECERA
   ============ */
.site-header { position: sticky; top: 0; z-index: 50; background: #131a4e; color: #fff; }
.header__inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.logo img { display: block; }
.primary-nav__list { display: flex; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.primary-nav .btn--primary { background: #00b894; } /* contraste con cabecera */
.primary-nav .btn--primary:hover { background: #019875; }
.primary-nav .btn--link { color: #ffffff; opacity: .9; }
.primary-nav .btn--link:hover { opacity: 1; text-decoration: underline; }

/* ============
   BREADCRUMBS
   ============ */
.breadcrumbs { background: #f8fafc; border-block: 1px solid #e2e8f0; }
.breadcrumbs__list { display: flex; gap: .5rem; padding: .5rem 0; margin: 0; list-style: none; }
.breadcrumbs__item { color: #475569; font-size: .875rem; }
.breadcrumbs__link { color: #334155; }
.breadcrumbs__current { color: #111827; font-weight: 600; }

/* ============
   HERO/BANNER
   ============ */
.hero { position: relative; isolation: isolate; }
.hero__media img { width: 100%; height: clamp(380px, 58vh, 660px); object-fit: cover; object-position: center 5%; }
.hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.hero__particles { position: absolute; inset: 0; z-index: 1; }
.hero__content {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; padding: 1rem; z-index: 2;
}
.hero__box { background: rgba(19,26,78,.6); backdrop-filter: saturate(120%) blur(2px); padding: 1rem 1.25rem; border-radius: .75rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: min(720px, 90%); }
.hero__title { margin: 0 0 .25rem; font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem); }
.hero__subtitle { margin: 0 0 .75rem; font-size: clamp(1rem, 1.5vw + .5rem, 1.25rem); opacity: .95; }
.hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* ==========
   SLOTS GRID
   ==========
   - 12 celdas; en desktop 6 por fila
*/
.slots { padding: 2rem 0; }
.slots__grid {
  display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
.slots__cell { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; }
.slots__item { display: block; }
.slots__item img { display: block; width: 100%; height: auto; }

@media (min-width: 640px) {
  .slots__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .slots__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Ajuste de encuadre del banner para mostrar rostros en escritorio */
@media (min-width: 768px) {
  .hero__media img { object-position: center 10%; }
}

/* ============
   CONTENIDO
   ============ */
.content { padding: 2rem 0; }
.content__article h2, .content__article h3, .content__article h4, .content__article h5 { color: #0f172a; }
.content__header { margin-bottom: 1rem; }
.cta-block { margin: 1.5rem 0; display: flex; justify-content: center; }

/* ============
   TABLAS ACCESIBLES + RESPONSIVE
   ============
   - En móvil, cada celda muestra data-label con el encabezado
*/
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border: 1px solid #e2e8f0; padding: .5rem .75rem; text-align: left; vertical-align: top; }
.table thead { background: #f1f5f9; }

/* Mobile stacked table */
@media (max-width: 640px) {
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: 1fr; border: 1px solid #e2e8f0; margin-bottom: .75rem; }
  .table td, .table th[scope="row"] { display: grid; grid-template-columns: 10ch 1fr; gap: .75rem; border: 0; border-bottom: 1px solid #e5e7eb; }
  .table td::before, .table th[scope="row"]::before { content: attr(data-label); font-weight: 600; color: #334155; }
  .table tr:last-child td { border-bottom: 0; }
}

/* ============
   FOOTER
   ============ */
.site-footer { background: #0b122f; color: #cbd5e1; }
.site-footer__inner { padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer a { color: #93c5fd; }

/* ============
   BACKGROUND PARTICLES (global, non-intrusive)
   ============ */
.bg-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* behind content */
  pointer-events: none; /* don't block clicks */
}

/* ============
   ACCORDION (FAQ)
   ============ */
.accordion { border: 1px solid #e2e8f0; border-radius: .75rem; background: #ffffff; }
.accordion__item + .accordion__item { border-top: 1px solid #e2e8f0; }
.accordion__summary { list-style: none; cursor: pointer; padding: .875rem 1rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:focus-visible { outline: 3px solid #94a3b8; outline-offset: 2px; }
.accordion__item[open] .accordion__summary { background: #f8fafc; }
.accordion__panel { padding: 0 1rem 1rem; }

/* ============
   PAYMENTS STRIP
   ============ */
.payments { width: 100%; }
.payments__list { display: flex; align-items: center; gap: .75rem; padding: 0; margin: 0; list-style: none; flex-wrap: wrap; }
.payments__item img { height: 24px; width: auto; filter: grayscale(0); opacity: .95; }

/* ============
   UTILIDADES
   ============ */
/* Fixed mobile viewport helper class (script ajusta la variable --vh) */
:root { --vh: 1vh; }
.vh-100 { height: calc(var(--vh, 1vh) * 100); }