/* ==========================================================================
   ESTILOS BASE — MOBILE FIRST
   --------------------------------------------------------------------------
   Cada bloque incluye comentarios con “QUÉ hace” y “POR QUÉ”.
   ========================================================================== */

/* -----------------------------
   1) Variables y resets
   ----------------------------- */
:root{
  /* Paleta (ajustar a la identidad de marca) */
  --bg:#0b0b0f;
  --surface:#12121a;
  --text:#e8eaf2;
  --muted:#b7bed1;
  --primary:#49b6ff;
  --primary-contrast:#061423;
  --accent:#7ce3ff;
  --border:#262637;

  /* Tipografía fluida */
  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  --step-0: clamp(1.00rem, 0.95rem + 0.25vw, 1.10rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.6vw, 1.50rem);
  --step-2: clamp(1.56rem, 1.40rem + 0.8vw, 1.95rem);
  --step-3: clamp(1.95rem, 1.70rem + 1.2vw, 2.44rem);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ color-scheme: dark; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fondo parallax sutil */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("imagenes/fondo-parallax.avif") center / cover no-repeat fixed;
  opacity: .06;
  pointer-events: none;
}

/* Mejoras de accesibilidad al usar teclado */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Utilidades */
.container{
  width: min(1120px, 100% - 2rem);
  margin-inline: auto;
}

.fecha-resaltada{
  color:#fff;
  font-size: 38px;
}

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid transparent; border-radius: calc(var(--radius) - 6px);
  padding:.8rem 1.1rem; font-weight:600; text-decoration:none;
  transition: transform .08s ease, background-color .2s ease, border-color .2s ease;
  cursor:pointer; will-change: transform;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{
  background: linear-gradient(180deg, var(--primary), #3aa3e6);
  color: var(--primary-contrast);
}
.btn-secondary{
  background: transparent; color: var(--text); border-color: var(--border);
}
.btn-secondary:hover{ background: rgba(255,255,255,.04); }

/* -----------------------------
   2) Cabecera y navegación
   ----------------------------- */
.site-header{
  position: sticky; top:0;
  z-index: 1000; /* Por encima del hero */
  background: rgba(12,13,15,0.45);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:.75rem;
}
.logo img{ height:40px; width:auto; display:block; }
@media (min-width: 768px){ .logo img{ height:60px; } }

.primary-nav ul{ list-style:none; display:flex; gap:.25rem; }
.primary-nav a{
  display:block; padding:.6rem .9rem; border-radius: 10px;
  color: var(--text); text-decoration:none;
}
.primary-nav a:hover{ background: rgba(255,255,255,.06); }

/* Menú hamburguesa (visible en móvil) */
.nav-toggle{
  display:inline-flex; flex-direction:column; gap:4px;
  width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid var(--border); background:transparent; color:var(--text);
  border-radius:12px;
}
.nav-toggle-bar{ width:22px; height:2px; background: currentColor; border-radius:2px; }

@media (min-width: 768px){
  .nav-toggle{ display:none; }
}

/* Nav mobile (oculto por defecto) */
.primary-nav{
  position: fixed; inset-inline:0; top: 60px;
  background: rgba(10,14,24,.98);
  border-top:1px solid rgba(255,255,255,.06);
  transform: translateY(-8px);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
  z-index: 1100; /* por encima del header/hero */
}
.primary-nav.open{ opacity:1; pointer-events:auto; }
.primary-nav ul{ flex-direction:column; padding:.5rem; }

@media (min-width: 768px){
  .primary-nav{
    position: static; inset:auto; background:transparent; border:0;
    opacity:1; pointer-events:auto; transform:none; z-index:auto;
  }
  .primary-nav ul{ flex-direction:row; padding:0; }
}

/* -----------------------------
   3) Hero con vídeo
   ----------------------------- */
.hero{ position:relative; min-height: 70svh; display:grid; align-items:end; }
.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 50% 100%, rgba(12,13,15,0), rgba(12,13,15,0.45) 60%, rgba(12,13,15,0.6));
  pointer-events: none; /* no tapa clics */
}
.hero-content{ position:relative; padding-block:4rem; text-align:center; }
.hero h1{ font-size: var(--step-3); line-height:1.1; margin-bottom:.6rem; }
.hero p{ font-size: var(--step-1); color: var(--muted); margin-bottom:1rem; }

/* -----------------------------
   4) Secciones, rejillas y tarjetas
   ----------------------------- */
.section{ padding-block: clamp(2rem, 1rem + 4vw, 5rem); }
.grid{ display:grid; gap:1rem; }
.about-grid{ grid-template-columns:1fr; }
@media (min-width: 900px){
  .about-grid{ grid-template-columns: 1.5fr 1fr; gap:2rem; }
}

.info-card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); padding:1.25rem; box-shadow: var(--shadow);
}
.info-card h3{ margin-bottom:.5rem; font-size: var(--step-1); }
.info-card dt{ color: var(--muted); }
.info-card dd{ margin: 0 0 .6rem 0; }

.galeria{ display:grid; gap:1rem; grid-template-columns: repeat(2,1fr); }
.galeria img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; display:block;
  border-radius:12px; border:1px solid var(--border);
}
@media (min-width: 640px){ .galeria{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px){ .galeria{ grid-template-columns: repeat(4,1fr); } }

/* -----------------------------
   5) Formularios
   ----------------------------- */
.form{ display:grid; gap:1rem; max-width:680px; }
.form-row{ display:grid; gap:.4rem; }
label{ font-weight:600; }
input, textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px;
  border:1px solid var(--border); background:#0e1220; color:var(--text);
}
input::placeholder, textarea::placeholder{ color:#8a93a7; }
input:focus, textarea:focus{ border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(73,182,255,.2); }

/* -----------------------------
   6) Pie de página
   ----------------------------- */
.site-footer{ border-top:1px solid rgba(255,255,255,.06); background:#0a0d17; }
.footer-inner{
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; justify-content:space-between; padding-block:1.25rem;
}
.social{ display:flex; gap:.75rem; flex-wrap:wrap; }
.social a{ color:var(--muted); text-decoration:none; border:1px solid var(--border); padding:.4rem .7rem; border-radius:999px; }
.social a:hover{ color:var(--text); border-color: rgba(255,255,255,.3); }

/* -----------------------------
   7) Lightbox
   ----------------------------- */
.lightbox{
  position: fixed; inset:0; background: rgba(0,0,0,.85);
  display:grid; place-items:center; z-index: 2000; padding:2rem;
}
.lightbox img{ max-width:100%; max-height:80svh; border-radius:12px; box-shadow: var(--shadow); }
.lightbox[hidden]{ display:none; }

/* -----------------------------
   8) Código/miscelánea
   ----------------------------- */
code{ background:#0f1424; padding:.1rem .3rem; border-radius:6px; border:1px solid var(--border); }

/* ==========================================================================
   HERO SLIDER (full viewport)
   ========================================================================== */
.hero-slider{ min-height:100svh; }
.slider{ position:absolute; inset:0; overflow:hidden; }
.slide{
  position:absolute; inset:0;
  opacity:0; transition: opacity .6s ease;
  display:grid; place-items:center;
}
.slide.is-active{ opacity:1; }
.slide video, .slide img, .slide iframe{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Controles del slider */
.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); background: rgba(0,0,0,.35); color: var(--text);
  display:grid; place-items:center; cursor:pointer; z-index:5;
}
.slider-nav:hover{ background: rgba(0,0,0,.55); }
.slider-nav.prev{ left:1rem; }
.slider-nav.next{ right:1rem; }

/* Dots */
.slider-dots{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem; z-index:5;
}
.slider-dots button{
  width:10px; height:10px; border-radius:50%;
  border:1px solid var(--border); background: rgba(255,255,255,.35);
}
.slider-dots button[aria-selected="true"]{ background: var(--primary); }

/* Evitar interacción sobre YouTube (ocultar UI) */
.slide[data-type="youtube"] iframe{ pointer-events:none; }

/* ==========================================================================
   EFECTO GLOBAL: HACES DE LUZ
   ========================================================================== */
.page-beams{
  position: fixed;
  inset: 0;
  z-index: 1;                 /* por encima del fondo y por debajo del contenido */
  pointer-events: none;
  opacity: 0.70;
  mix-blend-mode: screen;
  background:
    linear-gradient(75deg, rgba(76,196,255,0) 35%, rgba(76,196,255,.18) 50%, rgba(76,196,255,0) 65%) 0 0 / 45% 100% no-repeat,
    linear-gradient(-65deg, rgba(124,227,255,0) 30%, rgba(124,227,255,.14) 50%, rgba(124,227,255,0) 70%) 15% 0 / 38% 100% no-repeat,
    linear-gradient(85deg, rgba(90,180,255,0) 35%, rgba(90,180,255,.12) 50%, rgba(90,180,255,0) 65%) 60% 0 / 40% 100% no-repeat,
    radial-gradient(120% 60% at 50% 100%, rgba(80,120,190,.06), rgba(0,0,0,0) 60%);
  animation: page-beams-sweep 28s linear infinite alternate;
  filter: blur(.3px);
}

@keyframes page-beams-sweep{
  0%   { background-position: 0% 0, 15% 0, 60% 0, 50% 100%; }
  50%  { background-position: 80% 0, -10% 0, 20% 0, 50% 100%; }
  100% { background-position: 0% 0, 15% 0, 60% 0, 50% 100%; }
}

/* Menos movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .page-beams{ animation:none; opacity:0.70; }
  body::before{ background-attachment: scroll; opacity:.06; }
}

/* Afinado en pantallas grandes */
@media (min-width: 1024px){
  body::before{ opacity:.12; }
}