div.clear  { clear: both; }
div.clear_1  { clear: both; padding-top: 15px;}
div.clear_2  { clear: both; padding-top: 30px;}
div.clear_3  { clear: both; padding-top: 40px;}
div.clear_4  { clear: both; padding-top: 10px;}
div.clear_5  { clear: both; padding-top: 50px;}
div.clear_barra_top  { clear: both; padding-top: 90px;}
div.clear_esp_1  { clear: both; padding-top: 70px;}
div.clear_resp  { clear: both; padding-top: 0px;}
div.clear_resp_2  { clear: both; padding-top: 15px;}
.clear_movil  { clear: none;}




/*
  CAMP Congreso — Estilos modernos (Bootstrap 5)
  ------------------------------------------------
  - Mobile-first
  - Paleta corporativa
  - Tipografías Montserrat (títulos) y Lato (cuerpo)
  - Sin romper la lógica de Django
*/

/* ===== Variables y tema ===== */
:root {
  /* Paleta base (ajustable a branding final) */
  --brand-primary: #0d6efd;   /* Azul Bootstrap por defecto (puede personalizarse) */
  --brand-secondary: #0bb5a7; /* Acento turquesa para CTAs y detalles */
  --brand-dark: #111827;      /* Gris muy oscuro (texto/footers) */
  --brand-muted: #6c757d;     /* Texto secundario */

  /* Bootstrap CSS vars */
  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-secondary);
  --bs-body-font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --bs-body-color: #1f2937;
  --bs-body-bg: #ffffff;
}

h1, h2, h3, h4, h5, h6, .navbar-brand span { font-family: "Montserrat", sans-serif; }

/* Accesibilidad */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position: static; width: auto; height: auto; padding:.5rem 1rem; background:#000; color:#fff; z-index: 10000; }

/* ===== Navbar ===== */
#mainNavbar { transition: box-shadow .2s ease, background-color .2s ease; }
#mainNavbar.navbar-scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.06); background: #fff; }
#mainNavbar .nav-link { padding: .5rem .75rem; font-weight: 600; color: #334155; }
#mainNavbar .nav-link:hover, #mainNavbar .nav-link:focus { color: var(--brand-primary); }

/* Botón CTA principal */
.btn-cta { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); border: none; color: #fff; }
.btn-cta:hover, .btn-cta:focus { filter: brightness(0.95); color: #fff; }

/* Offcanvas */
.offcanvas .nav-link { font-weight: 600; }

/* ===== Secciones ===== */
.section-pad { padding: 4rem 0; }
@media (min-width: 992px) { .section-pad { padding: 5rem 0; } }

/* ===== Hero ===== */
.hero-section {
  position: relative;
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  color: #fff;
  background: linear-gradient(rgba(0,20,50,.65), rgba(0,20,50,.65)), var(--hero-bg, none) center/cover no-repeat fixed;
}
.hero-portrait { width: 260px; height: 260px; object-fit: cover; }

/* Countdown */
.countdown { display: inline-flex; gap: .5rem; align-items: center; }
.countdown-box { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width: 64px; padding:.35rem .5rem; border-radius:.75rem; background: rgba(255,255,255,.15); backdrop-filter: blur(3px); font-weight:800; font-size:1.25rem; }
.countdown-box span { font-size:.75rem; font-weight:700; opacity:.9; }

/* ===== Feature cards (por qué asistir) ===== */
.feature-card { background: #fff; border-radius: 1rem; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 10px 30px rgba(0,0,0,.04); }
.icon-wrap { width: 56px; height: 56px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(13,110,253,.12); color: var(--brand-primary); font-size: 1.5rem; }

/* ===== Sponsors ===== */
.sponsors-grid { --gap: 1rem; }
.sponsor-logo { filter: grayscale(100%) contrast(1.05); opacity: .85; transition: filter .2s ease, opacity .2s ease, transform .2s ease; max-height: 72px; object-fit: contain; }
.sponsor-logo:hover { filter: none; opacity: 1; transform: translateY(-2px); }

/* ===== Footer ===== */
.footer-modern { background: #0b1324; }
.footer-link { color: rgba(255,255,255,.75); text-decoration: none; }
.footer-link:hover { color: #fff; text-decoration: underline; }
.footer-social { color: rgba(255,255,255,.8); font-size: 1.25rem; }
.footer-social:hover { color: #fff; }

/* ===== Utilidades varias ===== */
.rounded-pill { border-radius: 999px !important; }
.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.06) !important; }

/* ===== CTA strip final ===== */
.cta-strip { background: linear-gradient(135deg, #0b1a3a, #133a5e); }

/* ===== Formularios (compatible con crispy-forms BS5) ===== */
.form-label { font-weight: 600; }
.form-control, .form-select { border-radius: .75rem; }
.form-check-input { border-radius: .4rem; }

/* ===== Imágenes responsivas con bordes suaves ===== */
img.rounded { border-radius: 1rem !important; }

/* ===== Ajustes responsivos finos ===== */
@media (max-width: 575.98px) {
  .hero-portrait { width: 200px; height: 200px; }
}