/* =========================================================
   VARIABLES GLOBALES
   ========================================================= */
:root{
  --bg:#ffffff;
  --surface:#f6f7f9;
  --text:#111827;
  --muted:#4b5563;
  --line:#e5e7eb;
  --brand:#111827;
  --link:#0b57d0;
  --radius:14px;
  --shadow:0 8px 22px rgba(17,24,39,.08);
  --max:1120px;
}

/* =========================================================
   RESET Y BASE
   ========================================================= */
*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

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

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

p{ margin:0 0 1rem; }
small{ color:var(--muted); }

/* =========================================================
   LAYOUT GENERAL
   ========================================================= */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}

.section{
  padding:44px 0;
}

section h2{
  scroll-margin-top:90px;
}

/* Grid */
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }

@media (max-width:900px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .section{ padding:34px 0; }
}

/* =========================================================
   HEADER / NAVEGACIÓN
   ========================================================= */
header{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:1000;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}

/* Marca */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:var(--brand);
}

.brand-badge{
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--surface);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-weight:800;
}

/* ===== DESKTOP ===== */
nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:12px;
}

nav a{
  display:inline-block;
  padding:6px 12px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--text);
  font-weight:600;
}

nav a:hover{
  background:var(--surface);
  text-decoration:none;
}

/* Botón hamburguesa (oculto en desktop) */
.nav-toggle{
  display:none;
  background:none;
  border:0;
  font-size:1.6rem;
  cursor:pointer;
}

/* Menú móvil (NO visible en desktop) */
.nav-menu{
  display:none;
}

/* ===== MÓVIL ===== */
@media (max-width:768px){

  /* Ocultamos menú inline */
  nav ul{
    display:none;
  }

  /* Mostramos hamburguesa */
  .nav-toggle{
    display:block;
  }

  /* Menú desplegable */
  .nav-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border-top:1px solid var(--line);
  }

  .nav-menu.is-open{
    display:block;
  }

  .nav-menu ul{
    display:block;
    padding:14px 18px;
  }

  .nav-menu li{
    margin-bottom:10px;
  }

  /* Botones móviles más finos */
  .nav-menu a{
    display:block;
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    background:var(--surface);
    border:1px solid var(--line);
    font-weight:600;
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:38px 0 10px;
}

.hero .btn-row{
  max-width: 520px;
}

.hero-unified{
  padding:28px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
}

.hero-media img{
  border-radius:14px;
}

.btn-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  justify-content: flex-start;
}

@media (min-width: 1024px){
  .hero .btn-row{
    margin-top: 18px;
  }
}


@media (max-width:768px){
  .hero-grid{ grid-template-columns:1fr; }
}

/* Eyebrow */
.h-eyebrow{
  display:inline-flex;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  font-size:.92rem;
}

/* =========================================================
   TITULARES
   ========================================================= */
h1{
  font-size:clamp(1.9rem,2.6vw,2.6rem);
  margin:.8rem 0 .6rem;
}

h2{
  font-size:clamp(1.4rem,2vw,1.9rem);
  margin:0 0 .8rem;
}

h3{
  font-size:1.1rem;
  margin:.2rem 0 .6rem;
}

/* =========================================================
   TARJETAS
   ========================================================= */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

/* Cards navegación */
.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
  transition:box-shadow .15s ease;
}

.card-link:hover{
  box-shadow:0 12px 28px rgba(17,24,39,.12);
}

.card-cta{
  margin-top:10px;
  font-weight:600;
  color:var(--link);
}

.card-link:hover .card-cta{
  text-decoration:underline;
}

/* Evitar subrayado en tarjetas clicables */
.card-link,
.card-link:hover,
.card-link *{
  text-decoration: none !important;
}


/* =========================================================
   EVENTOS – TARJETAS OVERLAY
   ========================================================= */
.event-card--overlay{
  display:block;
  border-radius:16px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}

.event-card--overlay:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(17,24,39,.12);
}

.event-card--overlay .event-media{
  position:relative;
}

.event-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:14px 16px;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.1),
    transparent
  );
  color:#fff;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  border-top:1px solid var(--line);
  padding:32px 0;
  margin-top:48px;
  background:#fff;
  color:var(--muted);
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:32px;
}

.footer-block strong{
  color:var(--text);
}

.social-links{
  display:flex;
  gap:12px;
}

@media (max-width:900px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* =========================================================
   FIX BOTONES EN HERO / BLOQUES DE TEXTO
   ========================================================= */

.btn-row a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.2;
}

.btn-row a.btn:hover{
  background: var(--surface);
  text-decoration: none !important;
}

/* Botón principal */
.btn-row a.btn-primary{
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

.btn-row a.btn-primary:hover{
  background: #0b1220;
}

/* Botones en línea en móvil apaisado */
@media (max-width: 900px) and (orientation: landscape){
  .hero .btn-row{
    flex-wrap: nowrap;
  }
}

/* =========================================================
   FORMULARIO – MEJORA VISUAL
   ========================================================= */

.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px 18px;
  margin-bottom: 12px;
}

/* Campos que deben ocupar todo el ancho */
.form-grid .full{
  grid-column: 1 / -1;
}

/* Labels más claras */
.form label{
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 4px;
  display: block;
}

/* Inputs y textarea más elegantes */
.form input,
.form textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: .95rem;
}

/* Placeholder más discreto */
.form ::placeholder{
  color: #9ca3af;
}

/* Textarea */
.form textarea{
  min-height: 140px;
  resize: vertical;
}

/* Responsive: una columna en móvil */
@media (max-width: 768px){
  .form-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   EVENTOS REALIZADOS – LISTADO CON IMAGEN
   ========================================================= */

.event{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.event-media img{
  border-radius: 12px;
}

.event-title{
  margin: 0;
  font-size: 1.2rem;
}

.event-meta{
  font-size: .95rem;
  color: var(--muted);
}

.event-desc{
  margin: 0;
}

/* Vídeo */
.event-video details summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--link);
  margin-top: 6px;
}

.video-wrapper{
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
}

.video-wrapper iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.note{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--muted);
}
/* Variantes de note */
.note-spaced{
  margin-top: 18px;
  font-weight: 600;
    border-left: 4px solid #000;

}

.figure-media{
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.figure-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   INAUGURACIÓN – GALERÍA EDITORIAL
   ========================================================= */

.inauguracion-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

/* Imagen */
.inauguracion-media{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

.inauguracion-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto */
.inauguracion-grid figcaption{
  margin-top: 8px;
  font-size: .92rem;
  text-align: center;
  color: var(--muted);
  line-height: 1.4;
}

/* Móvil */
@media (max-width: 900px){
  .inauguracion-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* =========================================================
   MINI BANNER DE COOKIES
   ========================================================= */

.cookie-banner{
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 520px;
  width: calc(100% - 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(17,24,39,.12);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  font-size: .9rem;
}

.cookie-banner p{
  margin: 0;
  color: var(--muted);
}

.cookie-banner a{
  color: var(--link);
  font-weight: 600;
}

.cookie-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.cookie-actions button{
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.cookie-actions button:first-child{
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

.cookie-actions button:hover{
  opacity: .9;
}

/* No mostrar si ya hay decisión */
body[data-cookie-set="true"] .cookie-banner{
  display: none;
}

/* =========================================================
   OVERLAY DE CONFIRMACIÓN
   ========================================================= */

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.overlay.hidden{
  display: none;
}

.overlay-box{
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  max-width: 420px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}

.overlay-box h2{
  margin-top: 0;
}

.footer {
  background: #fff;
  color: #333;
  border-top: 1px solid #e5e5e5;
  padding: 40px 0;
  font-size: 14px;
}

.footer a {
  color: #000;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.footer-brand {
  font-size: 16px;
  letter-spacing: .5px;
}

.footer-col p {
  margin: 10px 0;
  line-height: 1.5;
}

.footer-contact a {
  display: inline-block;
  margin-bottom: 4px;
}

.footer-links a {
  display: block;
  margin-bottom: 8px;
}

.footer-logos {
  margin-top: 20px;
  display: flex;
  gap: 25px;
  align-items: center;
  flex-wrap: wrap;
}

/* ⚠️ IMPORTANTE: NO se fuerza tamaño */
.footer-logos img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
}

.footer-social {
  margin-top: 20px;
}

.footer-social span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #666;
}

.social-links {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* 📱 MÓVIL */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-logos,
  .social-links {
    justify-content: center;
  }

  .footer-links a {
    display: inline-block;
    margin: 0 10px 10px;
  }
}