/* =========================================================
   modern-clean.css
   Generado a partir de modern.css: limpieza + deduplicación.
   - Mantiene look & feel actual
   - Elimina selectores no usados (según PHP en php.zip)
   - Consolida duplicados (hero-text, venue-map, step-indicator, etc.)
   ========================================================= */

/* =========================
   TOKENS / BASE
   ========================= */
:root{
  /* Layout */
  --header-h: 160px; /* fallback */
  --vnl-page-bg: #f8fafc;

  /* Paleta base (fuente de verdad: hero de Sede) */
  --vnl-navy-1: rgba(12, 38, 70, 0.95);
  --vnl-navy-2: rgba(7, 22, 44, 1);
  --vnl-teal: #2dd4bf;
  --vnl-teal-glow: rgba(45, 212, 191, 0.35);
  --vnl-blue-glow: rgba(59, 130, 246, 0.22);

  --text: #0f172a;
  --muted: #64748b;
  --card: #ffffff;

  /* Bootstrap compatibility (si se usa en algún lado) */
  --accent-color: #0d6efd;
}

body{
  font-family: 'Montserrat', sans-serif;
  background: var(--vnl-page-bg);
  color: #1f2937;
  margin: 0;
}

main{ padding-top: var(--header-h); }

@media (max-width: 992px){ main{ padding-top: 140px; } }
@media (max-width: 768px){ main{ padding-top: 120px; } }

/* Tipografía de secciones */
.section{ padding: 70px 0; }
.section-title{
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: var(--text);
}
.section-subtitle{
  color: var(--muted);
  line-height: 1.55;
}

/* Tarjetas genéricas (cuando se use la clase custom) */
.about-card{
  background: var(--card);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* =========================
   HEADER / NAV
   ========================= */
.site-header{ width: 100%; z-index: 1050; }

.header-top{
  background: linear-gradient(180deg, var(--vnl-navy-1), rgba(7, 22, 44, 0.95));
  padding: 18px 0;
}

.header-logo{ width: 70px; height: auto; }

.header-title h1{
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}
.header-title p{
  margin: 2px 0 0;
  font-size: 13px;
  color: #cbd5f5;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 992px){
  .header-title h1{ font-size: 18px; }
  .header-title p{ font-size: 11px; }
}

.header-nav{
  background: rgba(7, 22, 44, 0.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-nav .nav-link{
  color: #e5e7eb;
  font-size: 13px;
  letter-spacing: .12em;
  padding: 14px 6px;
  transition: color .2s ease;
}
.header-nav .nav-link:hover,
.header-nav .nav-link.active{ color: var(--vnl-teal); }

.navbar-toggler{ border-color: rgba(255,255,255,.3); }
.navbar-toggler-icon{ filter: invert(1); }

/* =========================
   HERO (Inicio)
   ========================= */
.hero.carousel{
  position: relative;
  min-height: 80vh;
  width: 100%;
  overflow: hidden;
}
.hero.carousel img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero.carousel::after{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15));
  z-index: 1;
}
.hero-text{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 20px;
}
.hero-text h1{ font-size: 40px; font-weight: 700; }
.hero-text h3{ font-size: 18px; font-weight: 400; }
.hero-text .location{ margin-top: 20px; font-size: 16px; }

@media (max-width: 768px){
  .hero-text h1{ font-size: 28px; }
}

/* =========================
   HERO (patrocinadores – “genérico”)
   - Se usa en patrocinadores.php dentro de .committees-hero
   ========================= */
.hero-top{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .02em;
}
.hero-kicker-icon{ filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)); }

/* =========================
   FOOTER
   Nota: en footer.php hay estilos inline que pisan esto.
   Si quieres “limpio”, quita los style="" del footer.
   ========================= */
.footer-vnl{
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2));
  color: #e5e7eb;
  padding: 50px 0 20px;
}
.footer-vnl a{ color: #e5e7eb; }
.footer-vnl a:hover{ color: var(--vnl-teal); }

/* Los wrappers del footer existen en footer.php */
.footer-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.footer-column{ min-width: 250px; }

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

/* =========================
   SEDE / VENUE
   ========================= */
.venue-page{ background: var(--vnl-page-bg); }

.venue-hero{
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2));
  color: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(2,6,23,.22);
}
.venue-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 20% 10%, var(--vnl-teal-glow), transparent 60%),
    radial-gradient(650px 260px at 80% 80%, var(--vnl-blue-glow), transparent 60%);
  pointer-events:none;
}
.venue-hero-content{ position: relative; z-index: 1; }

.venue-hero h2{ margin: 0; font-size: 32px; font-weight: 800; letter-spacing: .2px; }
.venue-hero p{ margin: 8px 0 0; opacity: .9; }

.venue-meta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.venue-pill{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.venue-cards .card{
  border: 0;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.venue-cards .card h5{ font-weight: 700; margin-bottom: 10px; }
.venue-cards .card p{ margin: 0; color: #334155; line-height: 1.55; }

.venue-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.venue-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #fff;
  color: var(--text);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
  transition: transform .15s ease, opacity .15s ease;
}
.venue-btn:hover{ transform: translateY(-1px); }
.venue-btn-primary{
  background: #0b2b4d;
  color: #fff;
  border-color: rgba(255,255,255,.14);
}
.venue-btn-primary:hover{ opacity: .95; }

.venue-map{
  height: 100%;
  min-height: 520px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  border: 1px solid rgba(15, 23, 42, .08);
  background: #fff;
}
.venue-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 992px){
  .venue-map{ min-height: 360px; }
  .venue-hero h2{ font-size: 28px; }
}
@media (max-width: 576px){
  .venue-hero{ padding: 22px 18px; }
  .venue-hero h2{ font-size: 24px; }
}

/* =========================
   COMITÉS
   ========================= */
.committees-page{ background: #f4f7fb; }

/* Hero: unificado con Sede (misma paleta/gradiente) */
.committees-hero{
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2)) !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(2,6,23,0.22) !important;
  padding: 28px 24px !important;
}
.committees-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 20% 10%, var(--vnl-teal-glow), transparent 60%),
    radial-gradient(650px 260px at 80% 80%, var(--vnl-blue-glow), transparent 60%);
  pointer-events:none;
}
.committees-hero-inner{ position: relative; z-index: 1; color: #fff; }
.committees-hero .section-title{ color: #fff; }

.committee-search .input-group-text{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.90);
}
.committee-search .form-control{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.committee-search .form-control::placeholder{ color: rgba(255,255,255,.65); }
.committee-search .form-control:focus{
  box-shadow: 0 0 0 3px rgba(45,212,191,.18);
  border-color: rgba(45,212,191,.55);
}

.committee-card{
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}

.committee-header{
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2)) !important;
  color: #fff;
}
.committee-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 22px;
  flex: 0 0 auto;
}
.committee-title{ font-size: 1.15rem; font-weight: 800; }
.committee-desc{ line-height: 1.35; color: rgba(255,255,255,.78); }

.committee-count{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.95);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 700;
}

.committee-list .list-group-item{
  border: 0;
  border-top: 1px solid rgba(15,23,42,.10);
  padding: 14px 18px;
  background: transparent;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.committee-list .list-group-item:first-child{ border-top: 0; }

.committee-person.is-hidden{ display: none; }

.committee-name{ font-weight: 800; color: #0b1b2e; font-size: 1rem; }
.committee-inst{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(11,27,46,.06);
  border: 1px solid rgba(11,27,46,.10);
  color: rgba(11,27,46,.78);
  font-weight: 700;
  letter-spacing: .02em;
}
.committee-mail{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(45,212,191,.10);
  border: 1px solid rgba(45,212,191,.26);
  color: #0b1b2e;
  font-weight: 700;
}
.committee-mail:hover{
  background: rgba(45,212,191,.18);
  border-color: rgba(45,212,191,.40);
  color: #0b1b2e;
}
.committee-empty-state{
  display: none;
  padding: 14px 18px 18px;
  color: rgba(11,27,46,.70);
  font-weight: 700;
}
.committee-card.is-empty .committee-empty-state{ display: block; }

/* =========================
   HISTORIA
   ========================= */
.history-page{ background: #f4f7fb; }

.history-hero{
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2)) !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(2,6,23,0.22) !important;
  padding: 28px 24px !important;
}
.history-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 20% 10%, var(--vnl-teal-glow), transparent 60%),
    radial-gradient(650px 260px at 80% 80%, var(--vnl-blue-glow), transparent 60%);
  pointer-events:none;
}
.history-hero-inner{ position: relative; z-index: 1; color: #fff; }

.history-hero .section-title{ color: #fff; margin-bottom: 10px; }
.history-hero .section-subtitle{
  color: rgba(255,255,255,.78);
  max-width: 100% !important;
  text-align: justify;
  text-justify: inter-word;
}

.history-hero .history-controls .input-group-text{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.90);
}
.history-hero .history-controls .form-control,
.history-hero .history-controls .form-select{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.history-hero .history-controls .form-control::placeholder{ color: rgba(255,255,255,.70); }
.history-hero .history-controls .form-select option{ color: var(--text); }

.history-controls .input-group-text{
  background: #fff;
  border-color: rgba(15,23,42,.12);
}
.history-controls .form-control,
.history-controls .form-select{ border-color: rgba(15,23,42,.12); }

.history-card{
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.history-card.is-link{ border-left: 4px solid var(--vnl-teal); }
.history-card.no-link{ border-left: 4px solid rgba(148,163,184,.55); }
.history-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.history-year{ font-size: 30px; font-weight: 900; margin: 0; color: var(--text); }
.history-year a{ color: inherit; text-decoration: none; }
.history-place{
  margin-top: 8px;
  color: #334155;
  font-weight: 600;
  line-height: 1.4;
}
.history-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  color: #64748b;
  font-size: 13px;
}
.history-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(45,212,191,.14);
  color: #0f766e;
  font-weight: 700;
}
.history-badge.muted{
  background: rgba(148,163,184,.18);
  color: #475569;
}
@media (max-width: 768px){
  .history-year{ font-size: 26px; }
}

/* =========================
   REGISTRO
   ========================= */
.registration-page{ background: var(--vnl-page-bg); }

.register-hero{
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2));
  color: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(2,6,23,0.22);
}
.register-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 20% 10%, var(--vnl-teal-glow), transparent 60%),
    radial-gradient(650px 260px at 80% 80%, var(--vnl-blue-glow), transparent 60%);
  pointer-events:none;
}
.register-hero-content{ position: relative; z-index: 1; }

.register-title{
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .2px;
}
.register-subtitle{
  margin: 10px 0 0;
  color: rgba(255,255,255,.80);
  max-width: 980px;
}

.register-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 16px; }
.register-pill{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.reg-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration:none;
  font-weight:700;
  font-size: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: var(--text);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.reg-btn:hover{ transform: translateY(-1px); }
.reg-btn-primary{
  background: #0b2b4d;
  color: #fff;
  border-color: rgba(255,255,255,.14);
}
.reg-btn-primary:hover{ opacity: .95; }

.reg-card{
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  overflow: hidden;
}
.reg-card-head{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.reg-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,43,77,.08);
  border: 1px solid rgba(11,43,77,.10);
  font-size: 22px;
  flex: 0 0 auto;
  color: #0b2b4d;
}
.reg-card-title{ font-weight: 800; color:#0b1b2e; }
.reg-card-desc{ color: var(--muted); }
.reg-card-body{ padding: 16px 18px 18px; color:#334155; }

.reg-steps{ margin: 0; padding-left: 1.2rem; }
.reg-steps li{ margin: .55rem 0; }

.reg-callout{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(45,212,191,.10);
  border: 1px solid rgba(45,212,191,.22);
  color: #0b1b2e;
}

.reg-amounts{ display:flex; flex-wrap:wrap; gap:10px; }
.reg-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11,27,46,.06);
  border: 1px solid rgba(11,27,46,.10);
  color: rgba(11,27,46,.82);
  font-weight: 700;
}

/* Modal */
.reg-modal{
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(2,6,23,.35);
}
.reg-modal .modal-header{
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2));
  color: #fff;
  border: 0;
}
.reg-modal .table th{ width: 180px; color: #0b1b2e; }

.reg-mail{
  font-weight: 800;
  text-decoration: none;
  color: #0b2b4d;
}
.reg-mail:hover{ color: var(--vnl-teal); text-decoration: underline; }

/* Steps indicador (registro_form.php) */
.step{ display: none; }
.step.active{ display: block; }

.step-indicator span{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dee2e6;
  color: #495057;
  font-weight: 600;
  margin: 0 6px;
  transition: all .3s ease;
}
.step-indicator span.active{
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(13,110,253,.2);
}

/* Aviso de cierre */
.reg-deadline-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-weight: 700;
}
.reg-closed-banner{
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(239, 68, 68, .14);
  border: 1px solid rgba(239, 68, 68, .28);
  color: rgba(255,255,255,.92);
  max-width: 980px;
}
.reg-closed-title{
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.reg-closed-text{ color: rgba(255,255,255,.82); }

@media (max-width: 992px){ .register-title{ font-size: 28px; } }
@media (max-width: 576px){
  .register-hero{ padding: 22px 18px; }
  .register-title{ font-size: 24px; }
}

/* =========================
   COLOQUIO / ABOUT (coloquio.php)
   ========================= */
.about-page{ background: var(--vnl-page-bg); }

.about-hero{
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2));
  color:#fff;
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(2,6,23,0.22);
}
.about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 20% 10%, var(--vnl-teal-glow), transparent 60%),
    radial-gradient(650px 260px at 80% 80%, var(--vnl-blue-glow), transparent 60%);
  pointer-events:none;
}
.about-hero-content{ position: relative; z-index:1; }

.about-title{ margin:0; font-size: 32px; font-weight: 800; letter-spacing:.2px; }
.about-subtitle{ margin: 10px 0 0; color: rgba(255,255,255,.80); max-width: 980px; line-height: 1.55; }
.about-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 16px; }
.about-pill{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.about-card{
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  overflow: hidden;
  padding: 0; /* se usa estructura head/body */
}
.about-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.about-card-title{ font-weight: 900; color: #0b1b2e; margin:0; }
.about-card-sub{ margin: 6px 0 0; color: var(--muted); line-height: 1.45; }
.about-card-body{ padding: 16px 18px 18px; color:#334155; }

.about-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,43,77,.08);
  border: 1px solid rgba(11,43,77,.12);
  color: #0b2b4d;
  flex: 0 0 auto;
}

.about-photo{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display:block;
}
.about-photo-fallback{
  background: linear-gradient(135deg, var(--vnl-navy-1), var(--vnl-navy-2));
}
.about-photo-caption{
  padding: 14px 16px 16px;
  text-align:center;
}
.about-photo-caption .name{ font-weight: 900; margin: 0; color:#0b1b2e; }
.about-photo-caption .desc{ margin: 6px 0 0; color: var(--muted); }

.about-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: var(--text);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
  transition: transform .15s ease, opacity .15s ease;
}
.about-btn:hover{ transform: translateY(-1px); }

.about-btn-primary{
  background: #0b2b4d;
  color:#fff;
  border-color: rgba(255,255,255,.14);
}
.about-btn-primary:hover{ opacity: .95; }

@media (max-width: 992px){ .about-title{ font-size: 28px; } }
@media (max-width: 576px){
  .about-hero{ padding: 22px 18px; }
  .about-title{ font-size: 24px; }
  .about-photo{ height: 200px; }
}

/* =========================
   CONFERENCISTAS
   ========================= */
.speakers-page{ background: var(--vnl-page-bg) !important; }

.speakers-hero{
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2)) !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  box-shadow: 0 18px 45px rgba(2,6,23,0.22) !important;
  position: relative !important;
  overflow: hidden !important;
}
.speakers-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 20% 10%, var(--vnl-teal-glow), transparent 60%),
    radial-gradient(650px 260px at 80% 80%, var(--vnl-blue-glow), transparent 60%);
  pointer-events:none;
}
.speakers-hero-inner{ position: relative; z-index: 1; color: #fff; }

.speakers-title{
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 8px;
}
.speakers-subtitle{
  max-width: 980px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 992px){ .speakers-title{ font-size: 28px; } }
@media (max-width: 576px){
  .speakers-hero{ padding: 22px 18px !important; }
  .speakers-title{ font-size: 24px; }
}

.speaker-card{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.speaker-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* Variante “pro” (la usa conferencistas.php) */
.speaker-card--pro{
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.speaker-card--pro:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(2,6,23,.14);
}

.speaker-photo{
  position: relative;
  display: block;
  height: 230px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2));
}
.speaker-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 20% 10%, var(--vnl-teal-glow), transparent 60%),
    radial-gradient(650px 260px at 80% 80%, var(--vnl-blue-glow), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.10), rgba(2,6,23,.28));
  pointer-events:none;
  z-index: 1;
}
.speaker-photo img{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  z-index: 3;
}
.speaker-initials{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 58px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(255,255,255,.92);
  text-shadow: 0 16px 32px rgba(0,0,0,.35);
  z-index: 2;
}
.speaker-body{ padding: 16px 16px 18px; text-align: center; }
.speaker-name{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.speaker-name a{ color: var(--text); text-decoration: none; }
.speaker-name a:hover{ color: var(--vnl-teal); text-decoration: underline; }
.speaker-inst{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 575.98px){ .speaker-photo{ height: 210px; } }

/* =========================
   PATROCINADORES
   ========================= */
.sponsors-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.sponsor-card{
  position: relative;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 28px rgba(2,6,23,.10);
  padding: 22px 20px 20px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 170px;
}
.sponsor-card::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 82px;
  background:
    radial-gradient(900px 220px at 15% 20%, rgba(45,212,191,.18), transparent 65%),
    radial-gradient(800px 220px at 95% 0%, rgba(59,130,246,.14), transparent 60%),
    linear-gradient(135deg, rgba(10, 27, 46, .98), rgba(7, 51, 63, .92));
}
.sponsor-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(2,6,23,.14);
}

.sponsor-logo{
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(255,255,255,.95);
  background:
    radial-gradient(900px 220px at 15% 20%, rgba(45,212,191,.22), transparent 65%),
    radial-gradient(800px 220px at 95% 0%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(135deg, var(--vnl-navy-1), var(--vnl-navy-2));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 18px rgba(2,6,23,.18);
}

/* Variante con imagen */
.sponsor-logo--img{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sponsor-logo--img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sponsor-name{
  position: relative;
  z-index: 1;
  margin: 16px 0 6px;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text);
}
.sponsor-note{
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(15,23,42,.62);
  font-size: .95rem;
}

.sponsors-footnote{
  border-radius: 18px;
  padding: 16px 18px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.72);
}
.sponsors-footnote a{
  color: rgba(2, 132, 199, .95);
  font-weight: 700;
  text-decoration: none;
}
.sponsors-footnote a:hover{ text-decoration: underline; }

@media (max-width: 576px){
  .sponsor-card{ padding: 20px 18px; }
}

/* Sponsor card: logo centrado en el header (más limpio/pro) */
.sponsor-card--logohero{
  text-align: center;
  padding-top: 130px; /* espacio para header + logo */
  min-height: 190px;
}

.sponsor-card--logohero::before{
  height: 120px; /* header más alto */
}

/* Logo como medallón centrado dentro del header */
.sponsor-card--logohero .sponsor-logo--logohero{
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 16px 30px rgba(2,6,23,.22);
  z-index: 2;
}

/* “aire” interno del logo */
.sponsor-card--logohero .sponsor-logo--logohero img{
  width: 84%;
  height: 84%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}


/* Ajusta el título para que no parezca apretado */
.sponsor-card--logohero .sponsor-name{
  margin-top: 0;
}

/* Responsive */
@media (max-width: 576px){
  .sponsor-card--logohero{ padding-top: 124px; }
  .sponsor-card--logohero::before{ height: 112px; }
  .sponsor-card--logohero .sponsor-logo--logohero{
    width: 80px; height: 80px; top: 20px;
  }
}
/* ===== Ajustes móviles finos ===== */
@media (max-width: 576px){

  /* 1) Compensación del header (ajusta si tu header es más alto/bajo) */
  main{ padding-top: 110px; }

  /* 2) Hero más compacto en celular */
  .hero.carousel{ min-height: 62vh; }
  .hero-text h1{ font-size: 24px; } /* opcional: más chico que 28 */
  .hero-text h3{ font-size: 16px; }

  /* 3) Evitar overflow en footer en pantallas muy angostas */
  .footer-column{ min-width: 0; }

  /* 4) Tablas en modal más “mobile friendly” */
  .reg-modal .table th{ width: auto; }
  .reg-modal .table{ display: block; overflow-x: auto; }
}

/* Buenas prácticas globales (si no las tienes ya en otro archivo) */
img{ max-width: 100%; height: auto; }

/* =========================================================
   FIX MOBILE: HERO (no “se corta” tan feo) + HEADER dinámico + FOOTER responsive
   Pegar al final del archivo
   ========================================================= */

/* 1) Hero ocupa el alto real de pantalla menos header (mejor que 80vh en móvil) */
.hero.carousel{
  min-height: calc(100vh - var(--header-h));
}

/* Navegadores modernos: svh evita problemas de barra de dirección en móvil */
@supports (height: 100svh){
  .hero.carousel{ min-height: calc(100svh - var(--header-h)); }
}

/* 2) En móvil, muestra más “arriba” de la foto (menos recorte del edificio) */
@media (max-width: 768px){
  .hero.carousel img{
    object-position: center top;
  }
}

/* 3) Footer: permite que las columnas colapsen bien en móvil */
@media (max-width: 768px){
  .footer-column{ min-width: 0; } /* el min-width inline te estaba rompiendo */
}

.footer-vnl{
  padding: 22px 0 18px; /* compacto y consistente */
}

.footer-brand p{ margin: 0; line-height: 1.35; }
.footer-brand .footer-title{ font-size: 16px; font-weight: 700; }
.footer-brand .footer-subtitle{ font-size: 12px; opacity: .85; }

.footer-contact{
  text-align: center;
  background: rgba(255,255,255,0.05);
  padding: 10px 14px;
  border-radius: 10px;
}
.footer-contact .footer-contact-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
}
.footer-contact a{ text-decoration: none; }

.footer-copy{
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  opacity: .85;
  border-top: 1px solid rgba(255,255,255,0.15);
}

#snow-canvas{
 position: fixed;
 inset: 0;
 width: 100%;
 height: 100%;
 Pointer-events: none;
 Z-index: 1048;
}  



    /* ── Tokens locales (espejo de modern-clean.css) ─── */
    :root {
      --vnl-navy-1:    rgba(12,38,70,0.95);
      --vnl-navy-2:    rgba(7,22,44,1);
      --vnl-teal:      #2dd4bf;
      --vnl-teal-glow: rgba(45,212,191,0.35);
      --vnl-blue-glow: rgba(59,130,246,0.22);
      --text:          #0f172a;
      --muted:         #64748b;
    }

    /* ── Hero (mismo patrón que .committees-hero) ─────── */
    .programa-hero {
      background: linear-gradient(180deg, var(--vnl-navy-1), var(--vnl-navy-2));
      border-radius: 20px;
      position: relative; overflow: hidden;
      box-shadow: 0 18px 45px rgba(2,6,23,.22);
      padding: 32px 28px; color: #fff;
    }
    .programa-hero::after {
      content:""; position:absolute; inset:0;
      background:
        radial-gradient(600px 220px at 20% 10%, var(--vnl-teal-glow), transparent 60%),
        radial-gradient(650px 260px at 80% 80%, var(--vnl-blue-glow), transparent 60%);
      pointer-events:none;
    }
    .programa-hero-inner { position:relative; z-index:1; }
    .programa-hero h1 { font-size:32px; font-weight:800; letter-spacing:.2px; margin:0 0 6px; }
    .programa-hero p  { margin:0; color:rgba(255,255,255,.78); font-size:15px; }
    @media(max-width:992px){ .programa-hero h1{ font-size:26px; } }
    @media(max-width:576px){ .programa-hero{ padding:22px 18px; } .programa-hero h1{ font-size:22px; } }

    /* ── Toolbar ──────────────────────────────────────── */
    .prog-toolbar {
      background:#fff; border:1px solid rgba(15,23,42,.08);
      border-radius:16px; padding:14px 16px;
      box-shadow:0 4px 18px rgba(2,6,23,.06);
      display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    }
    .prog-search { position:relative; flex:1; min-width:200px; }
    .prog-search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
    .prog-search input {
      width:100%; padding:.5rem .75rem .5rem 2.2rem;
      border:1.5px solid rgba(15,23,42,.12); border-radius:10px;
      font-family:'Montserrat',sans-serif; font-size:.85rem;
      background:#f8fafc; outline:none;
      transition:border-color .2s, box-shadow .2s;
    }
    .prog-search input:focus {
      border-color:var(--vnl-teal);
      box-shadow:0 0 0 3px rgba(45,212,191,.18);
      background:#fff;
    }

    .prog-filtros { display:flex; flex-wrap:wrap; gap:6px; }
    .prog-filtro {
      padding:6px 14px; border-radius:999px;
      border:1.5px solid rgba(15,23,42,.12);
      background:transparent; cursor:pointer;
      font-family:'Montserrat',sans-serif; font-size:.78rem; font-weight:700;
      color:var(--muted); transition:all .18s;
    }
    .prog-filtro:hover { border-color:var(--vnl-teal); color:var(--text); }
    .prog-filtro.activo                            { background:var(--vnl-navy-2); border-color:var(--vnl-navy-2); color:#fff; }
    .prog-filtro[data-tipo="plenaria"].activo      { background:#0b2b4d; border-color:#0b2b4d; }
    .prog-filtro[data-tipo="investigacion"].activo { background:#0f766e; border-color:#0f766e; }
    .prog-filtro[data-tipo="divulgacion"].activo   { background:#166534; border-color:#166534; }
    .prog-filtro[data-tipo="poster"].activo        { background:#92400e; border-color:#92400e; }

    .prog-btn-pdf {
      margin-left:auto;
      display:inline-flex; align-items:center; gap:7px;
      padding:7px 14px; border-radius:10px; border:0;
      background:linear-gradient(135deg,var(--vnl-navy-1),var(--vnl-navy-2));
      color:#fff; font-family:'Montserrat',sans-serif;
      font-size:.8rem; font-weight:700; cursor:pointer;
      box-shadow:0 4px 12px rgba(2,6,23,.18); transition:opacity .18s;
      text-decoration:none;
    }
    .prog-btn-pdf:hover { opacity:.88; color:#fff; }

    /* ── Tabs ─────────────────────────────────────────── */
    .prog-tabs {
      display:flex; flex-wrap:wrap; gap:6px;
      border-bottom:2px solid rgba(15,23,42,.08);
    }
    .prog-tab {
      padding:9px 18px; border-radius:10px 10px 0 0;
      border:1.5px solid rgba(15,23,42,.08); border-bottom:none;
      background:#f8fafc; cursor:pointer;
      font-family:'Montserrat',sans-serif; font-size:.82rem; font-weight:600;
      color:var(--muted); transition:all .18s;
    }
    .prog-tab:hover { background:#fff; color:var(--text); }
    .prog-tab.activo {
      background:#fff; color:#0b2b4d; font-weight:800;
      border-color:rgba(15,23,42,.12);
      margin-bottom:-2px;
    }

    /* ── Panel ────────────────────────────────────────── */
    .prog-panel { display:none; }
    .prog-panel.activo { display:block; }

    .prog-card {
      background:#fff; border:1.5px solid rgba(15,23,42,.08);
      border-radius:0 16px 16px 16px; overflow:hidden;
      box-shadow:0 10px 28px rgba(2,6,23,.06);
    }

    /* ── Slot ─────────────────────────────────────────── */
    .prog-slot {
      display:grid; grid-template-columns:90px 1fr;
      border-bottom:1px solid rgba(15,23,42,.06);
      transition:background .15s;
    }
    .prog-slot:last-child { border-bottom:none; }
    .prog-slot.oculto     { display:none; }
    .prog-slot.tipo-cafe,
    .prog-slot.tipo-especial { background:#f8fafc; }

    .prog-slot-hora {
      padding:14px 10px 14px;
      font-family:'Montserrat',sans-serif; font-size:.7rem; font-weight:700;
      color:var(--muted); letter-spacing:.04em;
      border-right:2px solid rgba(15,23,42,.06);
      display:flex; align-items:flex-start; justify-content:center;
      text-align:center; line-height:1.5; padding-top:16px;
    }
    .prog-slot-body { padding:12px 18px; }

    /* Badge – mismo estilo que .committee-inst / .history-badge */
    .prog-badge {
      display:inline-flex; align-items:center; gap:5px;
      font-size:.67rem; font-weight:800; letter-spacing:.09em;
      text-transform:uppercase; padding:3px 9px;
      border-radius:999px; margin-bottom:6px;
    }
    .prog-badge-plenaria      { background:#dce9ff; color:#0b2b4d; }
    .prog-badge-investigacion { background:rgba(45,212,191,.14); color:#0f766e; }
    .prog-badge-divulgacion   { background:#dcfce7; color:#166534; }
    .prog-badge-poster        { background:#fef3c7; color:#92400e; }
    .prog-badge-especial      {
      background:linear-gradient(135deg,var(--vnl-navy-1),var(--vnl-navy-2));
      color:rgba(255,255,255,.9);
    }

    .prog-titulo {
      font-size:1rem; font-weight:800; color:var(--text);
      line-height:1.3; margin-bottom:3px;
    }
    .tipo-plenaria .prog-titulo { font-size:1.08rem; color:#0b2b4d; }
    .tipo-cafe .prog-titulo,
    .tipo-especial .prog-titulo { font-size:.88rem; font-weight:600; color:var(--muted); }

    /* Ponente – color teal oscuro igual que .committee-mail */
    .prog-ponente {
      font-size:.85rem; font-weight:700; color:#0f766e; margin-bottom:2px;
    }
    /* Institución – igual que .committee-inst */
    .prog-institucion {
      display:inline-flex; align-items:center;
      padding:3px 9px; border-radius:999px;
      background:rgba(11,27,46,.05); border:1px solid rgba(11,27,46,.09);
      color:rgba(11,27,46,.68); font-size:.72rem; font-weight:700;
      letter-spacing:.03em; margin-bottom:4px;
    }

    /* Botón toggle – mismo patrón que .venue-btn */
    .prog-toggle {
      display:inline-flex; align-items:center; gap:5px;
      padding:5px 11px; border-radius:8px;
      border:1px solid rgba(15,23,42,.10); background:#fff; cursor:pointer;
      font-family:'Montserrat',sans-serif; font-size:.75rem; font-weight:700;
      color:#0b2b4d;
      box-shadow:0 2px 8px rgba(2,6,23,.06); transition:all .15s; margin-top:5px;
    }
    .prog-toggle:hover {
      background:var(--vnl-teal); border-color:var(--vnl-teal);
      color:#fff; transform:translateY(-1px);
    }
    .prog-toggle svg { transition:transform .25s; }
    .prog-toggle.abierto svg { transform:rotate(180deg); }

    /* Resumen expandible */
    .prog-resumen { max-height:0; overflow:hidden; transition:max-height .38s ease,opacity .3s; opacity:0; }
    .prog-resumen.visible { max-height:500px; opacity:1; }
    .prog-resumen p {
      margin:8px 0 0; padding:10px 14px;
      border-left:3px solid var(--vnl-teal);
      background:rgba(45,212,191,.06);
      border-radius:0 8px 8px 0;
      font-size:.84rem; line-height:1.75; color:#334155;
    }
    /* MathJax no desborda */
    .prog-resumen .MJX-TEX,
    .prog-resumen mjx-container { max-width:100%; overflow-x:auto; }

    mark.hl { background:#fef08a; border-radius:3px; padding:0 2px; color:inherit; }

    .prog-empty { text-align:center; padding:2.5rem; color:var(--muted); font-size:.9rem; display:none; }

    @media(max-width:576px){
      .prog-slot { grid-template-columns:62px 1fr; }
      .prog-slot-hora { font-size:.62rem; padding:10px 4px; }
      .prog-titulo { font-size:.9rem; }
      .prog-btn-pdf { margin-left:0; width:100%; justify-content:center; }
    }

    @media print {
      .prog-toolbar,.prog-tabs,.prog-toggle { display:none!important; }
      .prog-panel { display:block!important; }
      .prog-slot.oculto { display:grid!important; }
      .prog-resumen { max-height:none!important; opacity:1!important; }
      .prog-card { border:none; box-shadow:none; }
    }

    /* ── Override: ajustar espacio del header en esta página ── */
    body.speakers-page main {
      padding-top: 120px !important; /* altura real del header: top-bar ~60px + navbar ~60px */
    }
    @media (max-width: 992px) {
      body.speakers-page main { padding-top: 100px !important; }
    }
    @media (max-width: 768px) {
      body.speakers-page main { padding-top: 80px !important; }
    }