:root{
  /*
    Adaptamos la paleta de colores de este tema oscuro para que coincida con el aspecto
    luminoso del sitio principal. El fondo y las superficies pasan a ser blancos y los
    colores de texto se oscurecen para asegurar un contraste adecuado.
  */
  --brand:#0B2545;
  --brand-2:#1f2937;
  --bg:#ffffff;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#0B2545;
  --radius:14px;
  --shadow:0 8px 30px rgba(0,0,0,.1);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{
  margin:0;
  /* Utilizamos un fondo sólido y claro en lugar de un degradado oscuro para mantener la claridad en todas las páginas que usan este tema. */
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
.container{width:min(1100px,92%);margin-inline:auto}
section{padding:56px 0}
h1,h2,h3{line-height:1.15;margin:0 0 .5em 0;letter-spacing:.2px}
h1{font-size:clamp(28px,5vw,42px);font-weight:800}
h2{font-size:clamp(22px,4vw,34px);font-weight:700}
h3{font-size:clamp(18px,3vw,24px);font-weight:700}
p{margin:0 0 1em 0;color:var(--text)}
.lead{font-size:1.125rem;color:#cfd4da}
.card{
  /* Tarjetas con fondo blanco sólido y bordes suaves para integrarse con el diseño claro. */
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: none;
}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.15rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,var(--brand),#0B2545);color:white;text-decoration:none;font-weight:700;transition:.25s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(11,95,255,.25)}
.btn.secondary{background:transparent;color:var(--text)}
.input, input[type=text], input[type=email], input[type=tel], textarea, select{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);color:var(--text);outline:none;transition:.2s ease}
textarea{min-height:140px;resize:vertical}
label{display:block;margin:.3rem 0 .5rem;color:#d1d5db;font-weight:600}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:800px){.form-row{grid-template-columns:1fr}}
.navbar{
  /* Un fondo semitransparente claro para mantener la legibilidad del texto sobre un fondo blanco. */
  background: rgba(255,255,255,0.8);
  backdrop-filter: saturate(130%) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.footer{
  border-top: 1px solid rgba(0,0,0,0.1);
  padding: 28px 0;
  background: #f9fafb;
  color: #4b5563;
}
/* Namespaced Event Modal */
.nr-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9999}
.nr-modal-backdrop.nr-show{display:flex}
.nr-modal{background:#ffffff;border:1px solid rgba(0,0,0,0.1);border-radius:20px;
/*
  Reducimos el tamaño máximo del modal para que su contenido se pueda apreciar
  cómodamente en una sola pantalla y ajustamos la altura. Además, mantenemos
  un margen de 8 % del viewport para evitar que el modal ocupe toda la anchura.
*/
max-width:min(400px,85%);
max-height:90vh;
overflow:auto;
box-shadow:var(--shadow)}
.nr-modal__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,0.1);
  color: var(--text);
}
.nr-modal__header h3{margin:0}
.nr-modal__body{
  padding:16px;
  color: var(--text);
}
.nr-modal__body img{
  /*
    Hacemos que las imágenes del modal se ajusten al tamaño máximo disponible
    sin desbordar la altura del modal. Esto permite que la imagen se vea completa
    sin necesidad de desplazarse verticalmente.
  */
  max-width:100%;
  max-height:70vh;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  display:block;
}
.nr-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:16px;
  border-top:1px solid rgba(0,0,0,0.1);
}
.nr-modal__close{
  background:transparent;
  border:0;
  color: var(--text);
  font-size:20px;
  cursor:pointer;
}



/* === Responsive & Stacking fixes for header === */
.site-header{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 5000; /* above all layout content; modals remain higher */
}

.header-inner{
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  overflow: hidden; /* prevent accidental horizontal overflow */
}

.site-header img,
.site-header .logo,
.site-header .brand img{
  height: auto;
  max-height: 96px;
  max-width: 100%;
  width: auto;
}

@media (max-width: 768px){
  .site-header img,
  .site-header .logo,
  .site-header .brand img{
    max-height: 56px; /* keep logo inside viewport on small screens */
  }
  .header-inner{
    padding-left: 12px;
    padding-right: 12px;
  }
  .main-nav{
    max-width: 100%;
    overflow-x: auto;
  }
}
/* === End header fixes === */