/* =====================================================
   BSides Colombia 2026 – SAFE COLOR OVERRIDE
   (Compatible with original theme – NO HTML changes)
   ===================================================== */

/*
  IMPORTANT:
  - This file ONLY overrides color variables.
  - It does NOT redefine components, layout, spacing, or sections.
  - Load this file AFTER the original theme CSS.
*/
/* =============================
   Color Override Only – BSides 2026
   ============================= */

/* =============================
   Color Override Only – BSides 2026
   ============================= */

:root {
  /* Primary brand (replaces original blue #098dcf) */
  --bs-primary: #00FFD1;            /* Azul / Turquesa */

  /* Secondary brand (replaces original #415b78) */
  --bs-secondary: #351E1C;          /* Café */

  /* Accent / links */
  --bs-link-color: #00FFD1;         /* Azul / Turquesa */
  --bs-link-hover-color: #FF0040;   /* Rojo */

  /* Warning (si quieres mantener warning más “brand”, úsalo rojo) */
  --bs-warning: #FF0040;            /* Rojo */

  /* Neutral grays (ajustados a tu paleta, sin romper compatibilidad) */
  --bs-gray: #ECECDC;               /* Crema */
  --bs-gray-600: #ECECDC;           /* Crema */
  --bs-gray-700: #733635;           /* Marrón */
  --bs-gray-800: #2a2a2a;           /* Gris oscuro neutro (deja este estable) */
  --bs-gray-900: #121212;           /* Negro oficial */

  /* Dark / Light */
  --bs-dark: #121212;               /* Negro oficial */
  --bs-light: #ECECDC;              /* Crema (mejor que blanco puro con esta paleta) */

  /* Body */
  --bs-body-bg: #ECECDC;            /* Fondo crema */
  --bs-body-color: #121212;         /* Texto negro oficial */
}

/* =============================
   Buttons (color only) – BSides 2026
   ============================= */

.btn-primary {
  background-color: #FF0040;        /* Rojo – acción principal */
  border-color: #FF0040;
  color: #ECECDC;                   /* Crema para contraste */
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #00FFD1;        /* Azul / Turquesa */
  border-color: #00FFD1;
  color: #121212;                   /* Negro para legibilidad */
}

.btn-secondary {
  background-color: #351E1C;        /* Café */
  border-color: #351E1C;
  color: #ECECDC;                   /* Crema */
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #733635;        /* Marrón */
  border-color: #733635;
  color: #ECECDC;
}

/* =============================
   Text Utilities (safe)
   ============================= */

.text-primary {
  color: #00FFD1 !important;      /* Azul / Turquesa */
}

.text-secondary {
  color: #FF0040 !important;      /* Rojo */
}

.text-warning {
  color: #733635 !important;      /* Marrón (warning cálido, menos “amarillo”) */
}
/* ================= HEADER – BSides 2026 (Scoped & Simplified) ================= */

/* Fondo/legibilidad del header */
#header.header {
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 255, 209, 0.10);
  color: #ECECDC;
}

/* Logo */
#header .logo-icon {
  height: 34px;
  width: auto;
  display: block;
}

/* Links del nav */
#header .navbar-nav .nav-link {
  color: rgba(236, 236, 220, 0.92) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  transition: color .2s ease, background-color .2s ease, text-shadow .2s ease;
}

/* Hover / active */
#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link.active {
  color: #00FFD1 !important;
  text-shadow: 0 0 12px rgba(0, 255, 209, 0.45);
  background: rgba(0, 255, 209, 0.07);
}

/* CTA (solo el botón del header) */
#header .navbar-btn .btn {
  background-color: #FF0040 !important;
  border: none !important;
  color: #ECECDC !important;
  font-weight: 800;
  padding: 0.48rem 1.05rem;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255, 0, 64, 0.35);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

#header .navbar-btn .btn:hover,
#header .navbar-btn .btn:focus {
  background-color: #00FFD1 !important;
  color: #121212 !important;
  box-shadow: 0 0 26px rgba(0, 255, 209, 0.55);
  transform: translateY(-1px);
}

#header .navbar-btn .btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 255, 209, 0.40), 0 0 26px rgba(0, 255, 209, 0.55);
}

/* Toggler (mobile) visible en dark */
#header .navbar-toggler {
  border: 1px solid rgba(0, 255, 209, 0.25);
  border-radius: 12px;
  padding: 0.4rem 0.6rem;
  box-shadow: 0 0 16px rgba(0, 255, 209, 0.10);
}

#header .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(0, 255, 209, 0.30);
}

#header .navbar-toggler-icon {
  /* ícono hamburguesa claro */
  filter: invert(1);
  opacity: 0.95;
}

/* Dropdown – look premium dark */
#header .dropdown-menu {
  background: rgba(18, 18, 18, 0.96);
  border: 1px solid rgba(0, 255, 209, 0.16);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 22px rgba(0, 255, 209, 0.10);
}

#header .dropdown-item {
  color: rgba(236, 236, 220, 0.92);
  font-weight: 700;
  border-radius: 12px;
  padding: 0.55rem 0.8rem;
  transition: background-color .2s ease, color .2s ease, text-shadow .2s ease;
}

#header .dropdown-item:hover,
#header .dropdown-item:focus {
  background: rgba(0, 255, 209, 0.10);
  color: #00FFD1;
  text-shadow: 0 0 10px rgba(0, 255, 209, 0.35);
}

/* Mobile: menú como “panel” */
@media (max-width: 991.98px) {
  #header #navigation {
    margin-top: 12px;
  }

  #header .navbar-collapse {
    background: rgba(18, 18, 18, 0.92);
    border: 1px solid rgba(0, 255, 209, 0.10);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.40);
  }

  #header .navbar-nav .nav-link {
    padding: 0.75rem 0.9rem;
  }

  /* Dropdown full-width en mobile */
  #header .dropdown-menu {
    width: 100%;
    margin-top: 8px;
  }
}
/* =============================
   Accent usage (controlled)
   ============================= */

a.cta,
.btn-cta {
  background-color: #FF0040;     /* Rojo */
  border-color: #FF0040;
  color: #ECECDC;
}

a.cta:hover,
.btn-cta:hover {
  background-color: #733635;     /* Marrón */
  border-color: #733635;
}
/* =============================
   Footer – dark but readable
   ============================= */

.footer {
  background-color: #121212;   /* Negro oficial */
  color: #ECECDC;              /* Crema */
}

/* Links */
.footer a {
  color: #00FFD1;              /* Turquesa */
}

.footer a:hover {
  color: #FF0040;              /* Rojo */
}

/* =============================
   Footer – fix headings visibility
   ============================= */

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
  color: #ECECDC;              /* Crema */
}

/* Text content */
.footer p,
.footer li,
.footer span {
  color: rgba(236,236,220,0.85); /* Crema suavizada */
}

//* =====================================================
   HERO – BSides Colombia 2026 (PC – FIX BLUE/FUCHSIA CAST)
   Works with background-image inline on .carousel-item
   ===================================================== */

/* ===== CONTENEDOR ===== */
#hero-block {
  position: relative;
  margin-top: 70px;
  overflow: hidden;
}

/* Altura del hero */
#hero-carousel .carousel-item {
  height: 72vh;
  min-height: 460px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #121212; /* fallback neutral */
}

/* ===== OVERLAY NEUTRO + DESATURACIÓN (mata azul/fucsia) ===== */
#hero-carousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;

  /* overlay gris/negro (sin turquesa/rojo para no teñir) */
  background:
    linear-gradient(0deg, rgba(0,0,0,0.66), rgba(0,0,0,0.66)),
    linear-gradient(90deg, rgba(24,24,24,0.92), rgba(18,18,18,0.90), rgba(0,0,0,0.70));

  /* ESTA es la magia: desatura y corrige el tinte magenta/azul */
  -webkit-backdrop-filter: saturate(0.35) hue-rotate(-12deg) contrast(1.06) brightness(0.92);
  backdrop-filter: saturate(0.35) hue-rotate(-12deg) contrast(1.06) brightness(0.92);

  z-index: 1;
  pointer-events: none;
}

/* Fallback si backdrop-filter no existe: oscurece más */
@supports not ((backdrop-filter: saturate(0.35)) or (-webkit-backdrop-filter: saturate(0.35))) {
  #hero-carousel .carousel-item::before {
    background: linear-gradient(0deg, rgba(0,0,0,0.74), rgba(0,0,0,0.74));
  }
}

/* ===== POSICIÓN DEL TEXTO ===== */
#hero-carousel .carousel-caption {
  position: relative;
  top: 16%;
  left: 0;
  right: auto;
  z-index: 2;
  text-align: left;
}

/* Limpia glows/filters heredados */
#hero-carousel .carousel-caption,
#hero-carousel .carousel-caption * {
  filter: none !important;
}

/* ===== BLOQUE DE TEXTO ===== */
.hero-text-block {
  max-width: 640px;
}

/* ===== TÍTULO PRINCIPAL ===== */
.hero-text-block h1,
.hero-text-block .hero-heading {
  color: #ECECDC !important; /* Crema */
  font-size: 3.9rem;
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0,0,0,0.60);
}

/* ===== SUBTÍTULO / DESCRIPCIÓN ===== */
.hero-text-block .hero-intro {
  color: rgba(236,236,220,0.92);
  font-size: 1.25rem;
  margin-top: 12px;
}

.hero-text-block .hero-intro strong,
.hero-text-block .hero-intro span {
  color: #ECECDC;
  font-weight: 800;
}

/* ===== META (FECHA / CIUDAD) ===== */
.hero-text-block .hero-meta {
  color: rgba(236,236,220,0.92);
  font-weight: 700;
  margin-top: 14px;
}

/* iconos meta: turquesa controlado (en dark sí) */
.hero-text-block .hero-meta i {
  color: rgba(0,255,209,0.88);
  text-shadow: none;
}

/* ===== CTA ===== */
.hero-text-block .btn-primary {
  background-color: #FF0040;
  color: #ECECDC;
  border: none;
  font-weight: 900;
  padding: 0.65rem 1.6rem;
  border-radius: 6px;
  margin-top: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 18px rgba(255,0,64,0.18);
  transition: all 0.25s ease;
}

.hero-text-block .btn-primary:hover {
  background-color: #00FFD1;
  color: #121212;
  box-shadow: 0 14px 34px rgba(0,0,0,0.40), 0 0 22px rgba(0,255,209,0.28);
  transform: translateY(-1px);
}

/* HERO polish: panel para texto (más editorial) */
#hero-carousel .carousel-caption .hero-text-block{
  text-align: left !important;
  max-width: 720px;
  padding: 22px 22px;
  border-radius: 18px;
  background: rgba(18,18,18,0.35);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

/* Si backdrop-filter molesta en algún navegador, queda ok igual */

/* =====================================================
   HERO MOBILE – INFO SECTION
   ===================================================== */

#hero-info-section {
  background: linear-gradient(
    135deg,
    rgba(53, 30, 28, 0.98),   /* #351E1C Café */
    rgba(115, 54, 53, 0.92),  /* #733635 Marrón */
    rgba(18, 18, 18, 0.94)    /* #121212 Negro */
  );
  color: #ECECDC;             /* Crema */
  padding: 70px 0 60px;
}

/* TÍTULO MOBILE */
#hero-info-section .hero-heading {
  color: #ECECDC;             /* Crema */
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}

/* META MOBILE */
#hero-info-section .hero-meta {
  color: rgba(236,236,220,0.92);
  font-size: 0.95rem;
}

#hero-info-section .hero-meta i {
  color: #00FFD1;             /* Turquesa */
  text-shadow: 0 0 10px rgba(0,255,209,0.35);
}

/* INTRO MOBILE */
#hero-info-section .hero-intro {
  color: rgba(236,236,220,0.92);
}

/* CTA MOBILE */
#hero-info-section .btn {
  background-color: #FF0040;  /* Rojo */
  color: #ECECDC;             /* Crema */
  border: none;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(255,0,64,0.22);
  transition: all 0.25s ease;
}

#hero-info-section .btn:hover {
  background-color: #00FFD1;  /* Turquesa */
  color: #121212;             /* Negro */
  box-shadow: 0 0 24px rgba(0,255,209,0.40);
  transform: translateY(-1px);
}

/* ===== SOLO MOBILE ===== */
@media (min-width: 768px) {
  #hero-info-section {
    display: none !important;
  }
}

/* === HERO FORCE LEFT ALIGN === */
#hero-carousel .carousel-caption,
#hero-carousel .carousel-caption *,
.hero-text-block,
.hero-text-block * {
  text-align: left !important;
}

/* === HERO LEFT, BUT OFFSET RIGHT (EDITORIAL) === */
#hero-carousel .carousel-caption {
  position: relative;
  top: 16%;
  margin-left: 8%;
  margin-right: auto;
  z-index: 2;
  text-align: left;
}

/* ================= STATS – BSides 2026 (DARK GRADIENT) ================= */

.stats-section,
.stats-block {
  background: linear-gradient(
    135deg,
    #121212 0%,
    #1a1a1a 55%,
    #351E1C 100%
  );
  color: #ECECDC;
  padding: 4.5rem 0;
}

/* Individual stat item */
.stats-block .item {
  position: relative;
  text-align: center;
}

/* Number */
.stats-block .number {
  font-size: 2.8rem;
  font-weight: 800;
  color: #00FFD1; /* Turquesa */
  text-shadow:
    0 0 18px rgba(0,255,209,0.22),
    0 0 26px rgba(255,0,64,0.10); /* toque rojo sutil */
}

/* Unit / label */
.stats-block .unit {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
  color: rgba(236,236,220,0.82); /* Crema suavizada */
  letter-spacing: 0.03em;
}

/* Optional subtle divider */
.stats-block .item::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin: 14px auto 0;
  background: rgba(236,236,220,0.18); /* Crema sutil */
}


/* =============================
   Countdown – force light (NEW PALETTE)
   ============================= */

.countdown,
#countdown,
.countdown-section {
  background-color: #ECECDC;  /* Crema */
  color: #121212;             /* Negro */
}

.countdown .number,
.countdown .count,
#countdown .number {
  color: #FF0040;             /* Rojo (para que “cuente” como CTA visual) */
}


/* =============================
   STATS – BSides 2026 (FINAL – SOLID VARIANT)
   ============================= */

.stats-block {
  background-color: #121212;  /* Negro */
  padding: 3.5rem 0;
  text-align: center;
}

/* Número principal */
.stats-block .number,
.stats-block strong {
  color: #00FFD1; /* Turquesa */
  font-weight: 800;
}

/* Texto / unidad */
.stats-block .unit,
.stats-block span,
.stats-block p {
  color: rgba(236,236,220,0.82); /* Crema suavizada */
}

/* === Divider visible (sin pseudo-elementos) === */
.stats-block > div {
  position: relative;
  padding-bottom: 14px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(
    90deg,
    rgba(0,255,209,0.10),  /* Turquesa suave */
    rgba(0,255,209,0.65),  /* Turquesa fuerte */
    rgba(255,0,64,0.22)    /* Rojo sutil al final */
  ) 1;
}
/* =============================
   Header – BSides 2026 identity
   ============================= */

.header {
  background-color: #121212;  /* Negro */
  color: rgba(236,236,220,0.88); /* Crema suavizada */
}

/* Logo / brand */
.header .navbar-brand {
  color: #ECECDC;             /* Crema */
}

.header .navbar-brand:hover {
  color: #00FFD1;             /* Turquesa */
}

/* Navigation links */
.header .nav-link {
  color: rgba(236,236,220,0.82); /* Crema suavizada */
}

.header .nav-link:hover,
.header .nav-link:focus {
  color: #00FFD1;             /* Turquesa */
}

/* Active menu item */
.header .nav-link.active {
  color: #00FFD1;             /* Turquesa */
  font-weight: 600;
  text-shadow: 0 0 12px rgba(0,255,209,0.25);
}

/* Header buttons (if any) */
.header .btn {
  color: #ECECDC;
}

/* Secondary button (ej: Obtener tiquetes) */
.header .btn-secondary {
  background-color: transparent;
  border-color: #00FFD1;      /* Turquesa */
  color: #00FFD1;
}

.header .btn-secondary:hover {
  background-color: #00FFD1;  /* Turquesa */
  color: #121212;             /* Negro */
}
/* ===== DARK → LIGHT transition (Stats -> Countdown) ===== */
.stats-block + #countdown-section {
  border-top: 1px solid rgba(0, 255, 209, 0.18);
  position: relative;
}

/* línea superior (tech, lineal, sutil) */
.stats-block + #countdown-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: linear-gradient(
    90deg,
    rgba(0,255,209,0.00),
    rgba(0,255,209,0.28),
    rgba(0,255,209,0.00)
  );
}
/* ============================================================
   COUNTDOWN – BSides Colombia 2026
   Light premium / NO CYAN
============================================================ */

#countdown-section {
  --countdown-black: #121212;
  --countdown-cream: #ECECDC;
  --countdown-red: #FF0040;
  --countdown-brown: #733635;
  --countdown-brown-dark: #351E1C;

  position: relative;
  overflow: hidden;
  padding: 92px 0 98px;

  background:
    radial-gradient(circle at 50% 0%, rgba(115,54,53,0.10) 0%, rgba(115,54,53,0.00) 40%),
    linear-gradient(180deg, #f2f0e7 0%, #ECECDC 100%);

  color: var(--countdown-black);
  border-top: 1px solid rgba(53,30,28,0.10);
  border-bottom: 1px solid rgba(53,30,28,0.10);
}

/* editorial separator */
#countdown-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(
    90deg,
    rgba(53,30,28,0.00),
    rgba(115,54,53,0.25),
    rgba(255,0,64,0.12),
    rgba(53,30,28,0.00)
  );
}

/* subtle texture */
#countdown-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(53,30,28,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.35;
  pointer-events: none;
}

#countdown-section .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   HEAD
============================================================ */

.countdown-head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.countdown-eyebrow {
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--countdown-brown);
}

.countdown-title {
  margin: 0 0 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem,4vw,3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--countdown-brown-dark);
}

.countdown-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(53,30,28,0.85);
}

.countdown-intro strong {
  color: var(--countdown-brown-dark);
}

/* ============================================================
   COUNTDOWN GRID
============================================================ */

.countdown-box {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px,1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}

/* cards */

.countdown-item {
  position: relative;
  text-align: center;
  padding: 24px 18px 20px;
  border-radius: 22px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.60));

  border: 1px solid rgba(53,30,28,0.14);

  box-shadow:
    0 16px 34px rgba(53,30,28,0.10),
    inset 0 1px 0 rgba(255,255,255,0.6);

  transition: transform .22s ease,
              box-shadow .22s ease,
              border-color .22s ease;
}

.countdown-item:hover {
  transform: translateY(-4px);
  border-color: rgba(115,54,53,0.28);

  box-shadow:
    0 22px 40px rgba(53,30,28,0.14),
    0 0 0 4px rgba(115,54,53,0.08);
}

/* accent line */

.countdown-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(115,54,53,0.15),
    rgba(115,54,53,0.55),
    rgba(255,0,64,0.35)
  );
}

/* numbers */

.countdown-number {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.3rem,5vw,3.1rem);
  font-weight: 900;
  line-height: 1;

  color: var(--countdown-red);

  letter-spacing: -0.03em;
  text-shadow: 0 0 14px rgba(255,0,64,0.16);
}

/* labels */

.countdown-label {
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--countdown-brown-dark);
}

/* ============================================================
   META
============================================================ */

.countdown-meta {
  margin-top: 28px;
  text-align: center;

  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: rgba(115,54,53,0.70);
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

  .countdown-box {
    grid-template-columns: repeat(2,1fr);
    max-width: 560px;
  }

}

@media (max-width: 767px) {

  #countdown-section {
    padding: 70px 0 78px;
  }

  .countdown-box {
    gap: 14px;
  }

  .countdown-item {
    padding: 20px 14px 18px;
  }

  .countdown-number {
    font-size: clamp(2rem,10vw,2.4rem);
  }

}

/* ============================================================
   ABOUT – BSides Colombia 2026
   Light premium / editorial without cyan emphasis
============================================================ */

#about-section {
  --about-black: #121212;
  --about-cream: #ECECDC;
  --about-white: rgba(255,255,255,0.72);
  --about-brown-dark: #351E1C;
  --about-brown: #733635;
  --about-red: #FF0040;

  position: relative;
  overflow: hidden;
  padding: 100px 0 108px;
  background:
    radial-gradient(circle at 10% 0%, rgba(115,54,53,0.08) 0%, transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(53,30,28,0.06) 0%, transparent 35%),
    linear-gradient(180deg, #F2F0E7 0%, #ECECDC 100%);
  color: var(--about-black);
  border-top: 1px solid rgba(53,30,28,0.10);
  border-bottom: 1px solid rgba(53,30,28,0.10);
}

#about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(53,30,28,0.045) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.38;
  pointer-events: none;
}

#about-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    90deg,
    rgba(53,30,28,0.00),
    rgba(115,54,53,0.18),
    rgba(255,0,64,0.10),
    rgba(53,30,28,0.00)
  );
}

#about-section .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   HEAD
============================================================ */

#about-section .about-head {
  max-width: 820px;
  margin: 0 auto 34px;
  text-align: center;
}

#about-section .about-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--about-brown);
}

#about-section .about-title {
  margin: 0 0 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--about-brown-dark);
  text-shadow: 0 10px 24px rgba(53,30,28,0.08);
}

#about-section .about-intro,
#about-section .about-intro-secondary {
  margin: 0 auto;
  max-width: 760px;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(18,18,18,0.84);
}

#about-section .about-intro {
  margin-bottom: 12px;
}

#about-section .about-intro strong,
#about-section .about-intro-secondary strong {
  color: var(--about-red);
  font-weight: 800;
}

/* ============================================================
   CALLOUT
============================================================ */

#about-section .about-callout {
  max-width: 760px;
  margin: 0 auto 42px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(53,30,28,0.12);
  box-shadow: 0 14px 28px rgba(53,30,28,0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  text-align: center;
}

#about-section .about-callout-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--about-brown);
}

#about-section .about-callout-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--about-brown-dark);
}

/* ============================================================
   FEATURES
============================================================ */

#about-section .about-features-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

#about-section .about-features-title {
  margin: 0 0 24px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--about-brown-dark);
}

#about-section .about-features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

#about-section .about-feature-card {
  position: relative;
  padding: 24px 18px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.60));
  border: 1px solid rgba(53,30,28,0.12);
  box-shadow:
    0 16px 32px rgba(53,30,28,0.08),
    inset 0 1px 0 rgba(255,255,255,0.65);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

#about-section .about-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(115,54,53,0.24);
  box-shadow:
    0 22px 40px rgba(53,30,28,0.12),
    0 0 0 4px rgba(115,54,53,0.05);
}

#about-section .about-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(115,54,53,0.15),
    rgba(115,54,53,0.55),
    rgba(255,0,64,0.28)
  );
}

#about-section .about-feature-title {
  margin: 0 0 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.35;
  color: var(--about-brown-dark);
}

#about-section .about-feature-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.65;
  color: rgba(18,18,18,0.74);
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {
  #about-section {
    padding: 86px 0 92px;
  }

  #about-section .about-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {
  #about-section {
    padding: 72px 0 78px;
  }

  #about-section .about-head {
    margin-bottom: 26px;
  }

  #about-section .about-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
  }

  #about-section .about-title {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
    margin-bottom: 12px;
  }

  #about-section .about-intro,
  #about-section .about-intro-secondary {
    font-size: 0.95rem;
    line-height: 1.68;
  }

  #about-section .about-callout {
    margin-bottom: 30px;
    padding: 14px 14px;
    border-radius: 14px;
  }

  #about-section .about-callout-kicker {
    width: 100%;
    font-size: 0.62rem;
  }

  #about-section .about-callout-text {
    font-size: 0.88rem;
  }

  #about-section .about-features-title {
    font-size: 1.02rem;
    margin-bottom: 18px;
  }

  #about-section .about-features-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #about-section .about-feature-card {
    padding: 20px 16px 16px;
    border-radius: 18px;
  }

  #about-section .about-feature-card::before {
    left: 16px;
    right: 16px;
  }

  #about-section .about-feature-title {
    font-size: 0.88rem;
  }

  #about-section .about-feature-text {
    font-size: 0.82rem;
    line-height: 1.58;
  }
}

/* ============================================================
   WHY PEREIRA – BSides Colombia
============================================================ */

#why-pereira-section{
  --pereira-black: #121212;
  --pereira-cream: #ECECDC;
  --pereira-cyan: #00FFD1;
  --pereira-red: #FF0040;
  --pereira-brown: #733635;
  --pereira-brown-dark: #351E1C;

  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(53,30,28,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0,255,209,0.07) 0%, transparent 60%),
    linear-gradient(160deg, #121212 0%, #1a1010 50%, #0e0e0e 100%);
  color: var(--pereira-cream);
  padding: 110px 0 120px;
  position: relative;
  overflow: hidden;
}

/* subtle grid */
#why-pereira-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(236,236,220,0.04) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}

/* decorative text */
#why-pereira-section::after{
  content:"PEREIRA";
  position:absolute;
  bottom:-20px;
  right:-10px;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(80px,14vw,180px);
  font-weight:900;
  color:rgba(255,255,255,0.025);
  letter-spacing:-0.04em;
  pointer-events:none;
  user-select:none;
}

/* ============================================================
   GRID
============================================================ */

#why-pereira-section .pereira-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}

/* ============================================================
   TEXT
============================================================ */

#why-pereira-section .pereira-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color: var(--pereira-cyan);
  opacity:0.82;
  margin-bottom:20px;
}

#why-pereira-section .pereira-title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2.2rem,4vw,3.2rem);
  font-weight:900;
  color: var(--pereira-cream);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin-bottom:32px;
  text-shadow: 0 12px 32px rgba(0,0,0,0.28);
}

#why-pereira-section .pereira-title span{
  color: var(--pereira-cyan);
}

#why-pereira-section .pereira-body p{
  font-size:0.97rem;
  color: rgba(236,236,220,0.78);
  line-height:1.8;
  margin-bottom:14px;
}

#why-pereira-section .pereira-body p:last-child{
  margin-bottom:0;
}

#why-pereira-section .pereira-accent{
  color: var(--pereira-cyan);
  font-weight:700;
}

#why-pereira-section .pereira-body strong{
  color: var(--pereira-cream);
  font-weight:800;
}

/* ============================================================
   CONNECTIVITY
============================================================ */

#why-pereira-section .pereira-connectivity{
  margin-top:36px;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 16px 32px rgba(0,0,0,0.22);
}

#why-pereira-section .pereira-connectivity-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color: var(--pereira-red);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
}

#why-pereira-section .pereira-connectivity-label::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,0,64,0.25);
}

#why-pereira-section .route-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

#why-pereira-section .route-item:last-child{
  border-bottom:none;
}

#why-pereira-section .route-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--pereira-cyan);
  flex-shrink:0;
  box-shadow:0 0 10px rgba(0,255,209,0.55);
}

#why-pereira-section .route-from{
  font-family:'Montserrat',sans-serif;
  font-size:0.82rem;
  font-weight:900;
  color: var(--pereira-cream);
  min-width:90px;
}

#why-pereira-section .route-arrow{
  color:rgba(236,236,220,0.28);
  font-size:0.7rem;
}

#why-pereira-section .route-details{
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  color:rgba(236,236,220,0.58);
}

/* ============================================================
   IMAGE
============================================================ */

#why-pereira-section .pereira-visual{
  display:flex;
  flex-direction:column;
  gap:20px;
}

#why-pereira-section .pereira-img-wrap{
  position:relative;
  border-radius:18px;
  overflow:hidden;
}

#why-pereira-section .pereira-img-wrap img{
  width:100%;
  display:block;
  border-radius:18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.65),
    0 0 0 1px rgba(0,255,209,0.12);
}

#why-pereira-section .pereira-img-wrap::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  background:linear-gradient(0deg,rgba(18,18,18,0.58),transparent);
}

#why-pereira-section .pereira-img-caption{
  position:absolute;
  bottom:14px;
  left:16px;
  z-index:2;
  font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;
  font-weight:700;
  color: rgba(236,236,220,0.78);
  letter-spacing:0.1em;
}

/* ============================================================
   THANKS
============================================================ */

#why-pereira-section .pereira-thanks{
  background:rgba(255,0,64,0.06);
  border:1px solid rgba(255,0,64,0.18);
  border-radius:12px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:14px;
}

#why-pereira-section .pereira-thanks-icon{
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(255,0,64,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--pereira-red);
  font-size:0.9rem;
  flex-shrink:0;
}

#why-pereira-section .pereira-thanks-text{
  font-size:0.82rem;
  color:rgba(236,236,220,0.72);
  line-height:1.5;
}

#why-pereira-section .pereira-thanks-text strong{
  color: var(--pereira-cream);
  font-weight:700;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 900px){

  #why-pereira-section .pereira-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  #why-pereira-section .pereira-img-wrap img{
    max-height:260px;
    object-fit:cover;
  }

  #why-pereira-section::after{
    display:none;
  }
}

@media (max-width: 480px){

  #why-pereira-section{
    padding:60px 0 70px;
  }

  #why-pereira-section .pereira-title{
    font-size:2rem;
  }

  #why-pereira-section .route-item{
    flex-wrap:wrap;
    gap:4px;
  }

  #why-pereira-section .pereira-connectivity{
    padding:16px;
  }

  #why-pereira-section .pereira-thanks{
    flex-direction:column;
    text-align:center;
    gap:10px;
    padding:14px 16px;
  }
}

/* =============================
   SPEAKERS – BSides 2026 (LIGHT – PREMIUM, WITH ACCENTS)
   ============================= */

#speakers-section,
.speakers-section {
  background-color: #ECECDC;  /* Crema */
  color: #121212;
  padding: 100px 0;
}

/* =============================
   Section heading (Café + underline tech)
   ============================= */

#speakers-section .section-heading,
.speakers-section .section-heading {
  color: #351E1C;             /* Café */
  font-weight: 900;
  letter-spacing: 0.01em;
  position: relative;
}

/* underline: lineal (cyan) + remate rojo sutil */
#speakers-section .section-heading::after,
.speakers-section .section-heading::after {
  content: "";
  display: block;
  width: 120px;
  height: 5px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0,255,209,0.95),
    rgba(0,255,209,0.35),
    rgba(255,0,64,0.35)  /* rojo solo al final */
  );
  box-shadow: 0 10px 24px rgba(0,255,209,0.14);
}

/* Intro (si aplica en speakers) */
#speakers-section .section-intro,
.speakers-section .section-intro {
  color: rgba(18,18,18,0.82);
  max-width: 860px;
  line-height: 1.75;
}

/* =============================
   Speaker card (premium)
   ============================= */

.speaker-card,
#speakers-section .card,
.speakers-section .card {
  background-color: rgba(255,255,255,0.70);
  border: 1px solid rgba(53,30,28,0.14);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(53,30,28,0.10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow: hidden;
}

/* Hover: lift + borde cyan sutil */
.speaker-card:hover,
#speakers-section .card:hover,
.speakers-section .card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,255,209,0.30);
  box-shadow: 0 18px 40px rgba(53,30,28,0.16);
}

/* Speaker image */
.speaker-card img,
#speakers-section img,
.speakers-section img {
  border-radius: 12px;
}

/* Speaker name */
.speaker-card h5,
#speakers-section h5,
.speakers-section h5 {
  color: #121212;
  font-weight: 900;
}

/* Speaker role / company */
.speaker-card p,
.speaker-card .speaker-role,
#speakers-section p,
.speakers-section p {
  color: rgba(115,54,53,0.88); /* Marrón */
  font-size: 0.95rem;
}

/* =============================
   ICONS / SOCIALS (LIGHT: make them pop)
   ============================= */

/* anchor as circular button */
#speakers-section a,
.speakers-section a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* badge icon style (works for <i> and FA svg) */
#speakers-section i,
#speakers-section .svg-inline--fa,
.speakers-section i,
.speakers-section .svg-inline--fa {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #351E1C !important; /* café */
  font-size: 1rem;

  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(53,30,28,0.14);
  border-radius: 999px;

  box-shadow: 0 8px 18px rgba(53,30,28,0.10);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, background-color .2s ease;
}

/* hover: cyan icon + rojo sutil en borde */
#speakers-section a:hover i,
#speakers-section a:hover .svg-inline--fa,
.speakers-section a:hover i,
.speakers-section a:hover .svg-inline--fa {
  transform: translateY(-2px);
  color: #00FFD1 !important;           /* cyan */
  border-color: rgba(255,0,64,0.28);   /* rojo sutil */
  background-color: #121212;           /* contraste */
  box-shadow: 0 12px 26px rgba(53,30,28,0.14);
}

/* Optional: make social row breathe (if container exists) */
#speakers-section .social-icons,
.speakers-section .social-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


/* ============================================================
   CALLS TO ACTION – BSides Colombia 2026
   Dark premium / editorial participation section
============================================================ */

#calls-section {
  --calls-black: #121212;
  --calls-cream: #ECECDC;
  --calls-cyan: #00FFD1;
  --calls-red: #FF0040;
  --calls-brown: #733635;
  --calls-brown-dark: #351E1C;

  position: relative;
  overflow: hidden;
  padding: 104px 0 112px;
  background:
    radial-gradient(circle at 0% 0%, rgba(115,54,53,0.22) 0%, transparent 30%),
    radial-gradient(circle at 100% 20%, rgba(0,255,209,0.08) 0%, transparent 26%),
    linear-gradient(145deg, #121212 0%, #171717 55%, #351E1C 100%);
  color: var(--calls-cream);
}

#calls-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(236,236,220,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.32;
  pointer-events: none;
}

#calls-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(
    90deg,
    rgba(0,255,209,0.00),
    rgba(0,255,209,0.22),
    rgba(255,0,64,0.12),
    rgba(0,255,209,0.00)
  );
}

#calls-section .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   HEAD
============================================================ */

#calls-section .calls-head {
  max-width: 800px;
  margin: 0 auto 42px;
  text-align: center;
}

#calls-section .calls-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--calls-cyan);
  opacity: 0.84;
}

#calls-section .calls-title {
  margin: 0 0 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--calls-cream);
  text-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

#calls-section .calls-intro {
  margin: 0 auto;
  max-width: 760px;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(236,236,220,0.78);
}

/* ============================================================
   LAYOUT
============================================================ */

#calls-section .calls-grid {
  display: grid;
  gap: 20px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

#calls-section .calls-grid-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 20px;
}

#calls-section .calls-grid-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ============================================================
   CARD
============================================================ */

#calls-section .call-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px 22px 22px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.045));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  backdrop-filter: blur(8px);
}

#calls-section .call-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,255,209,0.24);
  box-shadow:
    0 24px 48px rgba(0,0,0,0.42),
    0 0 0 4px rgba(0,255,209,0.06);
}

#calls-section .call-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0,255,209,0.14),
    rgba(0,255,209,0.55),
    rgba(255,0,64,0.30)
  );
}

#calls-section .call-card-featured {
  border-color: rgba(255,0,64,0.18);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,0,64,0.10) inset;
}

#calls-section .call-card-featured::before {
  background: linear-gradient(
    90deg,
    rgba(255,0,64,0.18),
    rgba(255,0,64,0.65),
    rgba(0,255,209,0.24)
  );
}

#calls-section .call-card-closed {
  opacity: 0.9;
}

#calls-section .call-card-closed:hover {
  transform: none;
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ============================================================
   CARD CONTENT
============================================================ */

#calls-section .call-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

#calls-section .call-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--calls-red);
  background: rgba(255,0,64,0.10);
  border: 1px solid rgba(255,0,64,0.24);
}

#calls-section .call-badge-soft {
  color: rgba(236,236,220,0.78);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

#calls-section .call-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 1.15rem;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

#calls-section .call-title {
  margin: 0 0 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.28;
  color: var(--calls-cream);
}

#calls-section .call-text {
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.68;
  color: rgba(236,236,220,0.74);
  flex-grow: 1;
}

/* ============================================================
   BUTTONS
============================================================ */

#calls-section .call-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  border: 1px solid var(--calls-red);
  background: var(--calls-red);
  color: var(--calls-cream);
  box-shadow: 0 14px 30px rgba(255,0,64,0.24);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

#calls-section .call-button:hover {
  transform: translateY(-1px);
  background: var(--calls-cyan);
  border-color: var(--calls-cyan);
  color: #121212;
  box-shadow: 0 16px 34px rgba(0,255,209,0.24);
}

#calls-section .call-button-secondary {
  background: transparent;
  color: var(--calls-cream);
  border-color: rgba(255,255,255,0.18);
  box-shadow: none;
}

#calls-section .call-button-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.26);
  color: var(--calls-cream);
  box-shadow: 0 14px 28px rgba(0,0,0,0.24);
}

#calls-section .call-button-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(236,236,220,0.52);
  cursor: not-allowed;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {
  #calls-section {
    padding: 88px 0 96px;
  }

  #calls-section .calls-grid-primary,
  #calls-section .calls-grid-secondary {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {
  #calls-section {
    padding: 74px 0 82px;
  }

  #calls-section .calls-head {
    margin-bottom: 30px;
  }

  #calls-section .calls-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
  }

  #calls-section .calls-title {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
    margin-bottom: 12px;
  }

  #calls-section .calls-intro {
    font-size: 0.95rem;
    line-height: 1.68;
  }

  #calls-section .calls-grid {
    gap: 14px;
  }

  #calls-section .calls-grid-primary {
    margin-bottom: 14px;
  }

  #calls-section .call-card {
    padding: 20px 16px 18px;
    border-radius: 20px;
  }

  #calls-section .call-card::before {
    left: 16px;
    right: 16px;
  }

  #calls-section .call-card-top {
    margin-bottom: 14px;
  }

  #calls-section .call-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.05rem;
  }

  #calls-section .call-title {
    font-size: 1rem;
  }

  #calls-section .call-text {
    font-size: 0.88rem;
    line-height: 1.62;
    margin-bottom: 18px;
  }

  #calls-section .call-button,
  #calls-section .call-button-secondary,
  #calls-section .call-button-disabled {
    width: 100%;
    min-height: 44px;
    font-size: 0.84rem;
  }
}

/* ================= TRAINING – BSides 2026 (LIGHT – PREMIUM, ICONS POP) ================= */

/* Light background (not flat white) */
#training-section {
  background-color: #ECECDC !important; /* Crema */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0,255,209,0.10) 0%, rgba(0,255,209,0.00) 42%),
    radial-gradient(circle at 88% 22%, rgba(255,0,64,0.07) 0%, rgba(255,0,64,0.00) 40%),
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.10));
  color: #121212;
}

/* Main heading */
#training-section .section-heading {
  color: #351E1C;             /* Café (alto contraste en light) */
  font-weight: 900;
  letter-spacing: 0.01em;
}

/* Intro */
#training-section .section-intro {
  color: rgba(18,18,18,0.82);
  max-width: 760px;
  line-height: 1.75;
}

/* Main paragraph */
#training-section p {
  color: rgba(18,18,18,0.82);
  line-height: 1.75;
}

/* Highlight key concepts */
#training-section strong {
  color: #FF0040;             /* Rojo (highlight controlado) */
  font-weight: 800;
}

/* List items */
#training-section ul li {
  color: rgba(18,18,18,0.82);
  margin-bottom: 0.75rem;

  /* layout para que el icono/badge no se vea “pegado” */
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* =============================
   ICONS POP (LIGHT) – Badge + contraste real
   Works for <i> and FontAwesome SVG
   ============================= */

#training-section ul li i,
#training-section ul li .svg-inline--fa {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #351E1C !important;                 /* Café (legible) */
  font-size: 1.05rem;

  background: rgba(255,255,255,0.75);        /* Badge claro */
  border: 1px solid rgba(0,255,209,0.22);    /* Cyan sutil */
  border-radius: 999px;

  box-shadow: 0 10px 22px rgba(53,30,28,0.10);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, background-color .2s ease;
}

/* Hover: cyan sí se ve porque ahora hay contraste (badge dark) */
#training-section ul li:hover i,
#training-section ul li:hover .svg-inline--fa {
  transform: translateY(-2px);
  color: #00FFD1 !important;                 /* Cyan */
  background-color: #121212;                 /* Contraste real */
  border-color: rgba(255,0,64,0.25);         /* Rojo MUY sutil */
  box-shadow: 0 14px 30px rgba(53,30,28,0.14);
}

/* If you have "feature boxes" or cards inside training, this makes them premium */
#training-section .card,
#training-section .border,
#training-section .training-card {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(53,30,28,0.14);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(53,30,28,0.10);
}

/* Footer note / disclaimer – readable and intentional */
#training-section small {
  display: block;
  margin-top: 12px;
  color: rgba(53,30,28,0.78) !important;  /* Café suave */
  font-style: italic;
  padding-left: 12px;
  border-left: 3px solid rgba(255,0,64,0.35); /* Rojo sutil */
}

/* ============================================================
   BSides NextGen – layout opción 1
   Programa especial / dos columnas
============================================================ */

#bsidesmini-section{
  --nextgen-black:#121212;
  --nextgen-cream:#ECECDC;
  --nextgen-cyan:#00FFD1;
  --nextgen-red:#FF0040;
  --nextgen-gold:#F2A900;
  --nextgen-brown:#733635;
  --nextgen-brown-dark:#351E1C;

  position:relative;
  overflow:hidden;
  padding:84px 0 92px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,255,209,0.08) 0%, transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(115,54,53,0.08) 0%, transparent 30%),
    linear-gradient(180deg, #f3f1e9 0%, #ECECDC 100%);
  color:var(--nextgen-black);
  border-top:1px solid rgba(53,30,28,0.10);
  border-bottom:1px solid rgba(53,30,28,0.10);
}

#bsidesmini-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(53,30,28,0.04) 1px, transparent 1px);
  background-size:30px 30px;
  opacity:.26;
  pointer-events:none;
}

#bsidesmini-section .container{
  position:relative;
  z-index:1;
}

/* ============================================================
   HERO
============================================================ */

#bsidesmini-section .nextgen-hero{
  display:grid;
  grid-template-columns: .95fr 1.25fr;
  gap:28px;
  align-items:stretch;
  margin-bottom:34px;
}

#bsidesmini-section .nextgen-hero-logo,
#bsidesmini-section .nextgen-hero-content{
  min-width:0;
}

#bsidesmini-section .nextgen-logo-panel{
  height:100%;
  min-height:100%;
  padding:28px 24px;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62));
  border:1px solid rgba(53,30,28,0.12);
  box-shadow:
    0 18px 36px rgba(53,30,28,0.08),
    inset 0 1px 0 rgba(255,255,255,0.62);
  display:flex;
  align-items:center;
  justify-content:center;
}

#bsidesmini-section .nextgen-title-img{
  max-width:100%;
  width:100%;
  height:auto;
  display:block;
}

#bsidesmini-section .nextgen-hero-content{
  padding:28px 28px 24px;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62));
  border:1px solid rgba(53,30,28,0.12);
  box-shadow:
    0 18px 36px rgba(53,30,28,0.08),
    inset 0 1px 0 rgba(255,255,255,0.62);
}

#bsidesmini-section .nextgen-eyebrow{
  display:inline-block;
  margin-bottom:14px;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--nextgen-brown);
}

#bsidesmini-section .nextgen-title{
  margin:0 0 12px;
  font-family:'Montserrat', sans-serif;
  font-size:clamp(1.85rem, 3.8vw, 2.7rem);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-0.02em;
  color:var(--nextgen-brown-dark);
}

#bsidesmini-section .nextgen-intro{
  margin:0 0 10px;
  color:rgba(18,18,18,0.82);
  line-height:1.7;
  font-size:1rem;
}

#bsidesmini-section .nextgen-intro-secondary{
  margin-bottom:18px;
}

#bsidesmini-section .nextgen-intro strong{
  color:var(--nextgen-red);
  font-weight:800;
}

/* ============================================================
   BADGES + DATE
============================================================ */

#bsidesmini-section .nextgen-badges{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}

#bsidesmini-section .nextgen-badge{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:9px 16px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:800;
  border:1px solid transparent;
  box-shadow:0 10px 20px rgba(53,30,28,0.08);
}

#bsidesmini-section .badge-free{
  background:#00FFD1;
  color:#121212;
}

#bsidesmini-section .badge-register{
  background:#FF0040;
  color:#ECECDC;
}

#bsidesmini-section .badge-adult{
  background:#351E1C;
  color:#ECECDC;
}

#bsidesmini-section .nextgen-date{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 18px;
  border-radius:999px;
  background:#121212;
  color:#ECECDC;
  font-weight:900;
  font-size:1rem;
  box-shadow:0 12px 24px rgba(18,18,18,0.20);
}

/* ============================================================
   GRID
============================================================ */

#bsidesmini-section .nextgen-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;
  margin-bottom:28px;
}

#bsidesmini-section .nextgen-card{
  background:#ffffff;
  padding:24px 20px 20px;
  border-radius:22px;
  box-shadow:
    0 14px 28px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
  transition:transform .24s ease, box-shadow .24s ease;
  height:100%;
  border:1px solid rgba(18,18,18,0.06);
}

#bsidesmini-section .nextgen-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

#bsidesmini-section .card-steam{ border-top:4px solid #00FFD1; }
#bsidesmini-section .card-cyber{ border-top:4px solid #FF0040; }
#bsidesmini-section .card-games{ border-top:4px solid #F2A900; }
#bsidesmini-section .card-team{  border-top:4px solid #733635; }

#bsidesmini-section .nextgen-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  background:#f6f6f6;
  border-radius:16px;
  margin:0 0 14px 0;
  font-size:1.5rem;
  box-shadow:0 8px 18px rgba(53,30,28,0.06);
}

#bsidesmini-section .nextgen-card h4{
  margin:0 0 8px;
  font-family:'Montserrat', sans-serif;
  font-size:1rem;
  font-weight:900;
  color:#351E1C;
}

#bsidesmini-section .nextgen-card p{
  margin:0;
  color:rgba(18,18,18,0.76);
  line-height:1.62;
  font-size:.9rem;
}

/* ============================================================
   CALLOUT
============================================================ */

#bsidesmini-section .nextgen-callout{
  background: linear-gradient(135deg, #121212 0%, #0c0c0c 45%, #003a33 100%);
  color:#ECECDC;
  padding:34px 30px;
  border-radius:28px;
  box-shadow:0 20px 40px rgba(0,0,0,0.30);
}

#bsidesmini-section .nextgen-callout h5{
  margin:0 0 10px;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-size:1.55rem;
  color:#ECECDC;
}

#bsidesmini-section .nextgen-callout h5 span{
  color:#00FFD1;
  text-shadow:0 0 12px rgba(0,255,209,0.24);
}

#bsidesmini-section .nextgen-callout p{
  margin:0 0 10px;
  color:rgba(236,236,220,0.86);
  line-height:1.65;
}

#bsidesmini-section .nextgen-disclaimer{
  margin-top:14px;
  font-size:.92rem;
  color:rgba(236,236,220,0.78);
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px){
  #bsidesmini-section .nextgen-hero{
    grid-template-columns:1fr;
    gap:18px;
  }

  #bsidesmini-section .nextgen-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  #bsidesmini-section .nextgen-logo-panel{
    min-height:auto;
  }
}

@media (max-width: 767px){
  #bsidesmini-section{
    padding:72px 0 78px;
  }

  #bsidesmini-section .nextgen-hero{
    margin-bottom:22px;
  }

  #bsidesmini-section .nextgen-logo-panel,
  #bsidesmini-section .nextgen-hero-content{
    padding:22px 18px;
    border-radius:22px;
  }

  #bsidesmini-section .nextgen-title-img{
    max-width:300px;
    margin:0 auto;
  }

  #bsidesmini-section .nextgen-title{
    font-size:clamp(1.65rem, 8vw, 2.15rem);
  }

  #bsidesmini-section .nextgen-intro{
    font-size:.95rem;
    line-height:1.68;
  }

  #bsidesmini-section .nextgen-badges{
    gap:10px;
  }

  #bsidesmini-section .nextgen-badge{
    width:100%;
    justify-content:center;
    font-size:.84rem;
  }

  #bsidesmini-section .nextgen-date{
    width:100%;
  }

  #bsidesmini-section .nextgen-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  #bsidesmini-section .nextgen-card{
    padding:20px 16px 16px;
    border-radius:18px;
  }

  #bsidesmini-section .nextgen-icon{
    width:52px;
    height:52px;
    font-size:1.3rem;
  }

  #bsidesmini-section .nextgen-callout{
    padding:26px 20px;
    border-radius:22px;
    text-align:center;
  }

  #bsidesmini-section .nextgen-callout h5{
    font-size:1.3rem;
  }
}

/* ================= SOCIAL MEDIA – BSides 2026 (LIGHT – PREMIUM) ================= */

.social-white {
  background-color: #ECECDC; /* Crema */
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,255,209,0.10) 0%, rgba(0,255,209,0.00) 42%),
    radial-gradient(circle at 82% 24%, rgba(255,0,64,0.06) 0%, rgba(255,0,64,0.00) 40%),
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.10));
  color: #121212;
  padding: 90px 0;
}

/* =============================
   Section heading
   ============================= */

.social-white .section-heading {
  color: #351E1C; /* Café */
  font-weight: 900;
}

/* Intro text */
.social-white .section-intro {
  color: rgba(18,18,18,0.82);
  font-size: 1.05rem;
  max-width: 760px;
  margin-inline: auto;
}

/* Highlighted keyword */
.social-white strong {
  color: #FF0040; /* Rojo (acción / comunidad) */
  font-weight: 800;
}

/* =============================
   Social icons container
   ============================= */

.social-icons {
  margin-top: 22px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =============================
   Icons – LIGHT SYSTEM
   ============================= */

.social-icons a {
  font-size: 38px;
  color: #351E1C;             /* Café oscuro (alto contraste) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  box-shadow:
    0 10px 24px rgba(53,30,28,0.12),
    0 0 0 1px rgba(53,30,28,0.12);
  transition:
    transform .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}

/* =============================
   Hover – tech + emotion
   ============================= */

.social-icons a:hover {
  color: #00FFD1;             /* Turquesa */
  background-color: #121212;  /* Dark contrast */
  transform: translateY(-6px);
  box-shadow:
    0 16px 36px rgba(0,0,0,0.45),
    0 0 0 2px rgba(0,255,209,0.45);
}

/* ============================================================
   PROGRAMACIÓN – BSides Colombia 2026
   Optimizado para móvil + desktop
============================================================ */

#schedule-section {
  --schedule-black: var(--black, #0b0b0b);
  --schedule-cream: var(--cream, #ececdc);
  --schedule-cyan: var(--cyan, #00ffd1);
  --schedule-red: var(--red, #ff0040);
  --schedule-brown: var(--brown, #733635);

  position: relative;
  overflow: hidden;
  padding: 96px 0 112px;
  background:
    radial-gradient(circle at 50% -8%, rgba(0,255,209,0.10) 0%, rgba(0,255,209,0.00) 42%),
    linear-gradient(180deg, #0a0a0a 0%, #101010 100%);
  color: var(--schedule-cream);
}

#schedule-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,209,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,209,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

#schedule-section::after {
  content: "";
  position: absolute;
  top: -280px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 90vw);
  height: 680px;
  background: radial-gradient(circle, rgba(0,255,209,0.10) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

#schedule-section .container {
  position: relative;
  z-index: 1;
}

#schedule-section .schedule-heading-wrap,
#schedule-section .training-banner,
#schedule-section .schedule-tabs-wrap,
#schedule-section .schedule-board,
#schedule-section .schedule-legend {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   HEADING
============================================================ */

#schedule-section .schedule-heading-wrap {
  text-align: center;
  margin-bottom: 52px;
}

#schedule-section .schedule-eyebrow {
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--schedule-cyan);
  opacity: 0.82;
}

#schedule-section .schedule-title {
  margin: 0 0 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--schedule-cream);
  text-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

#schedule-section .schedule-title span {
  color: var(--schedule-cyan);
}

#schedule-section .schedule-intro {
  max-width: 660px;
  margin: 0 auto;
  color: rgba(236,236,220,0.76);
  font-size: 1rem;
  line-height: 1.75;
}

/* ============================================================
   TRAINING BANNER
============================================================ */

#schedule-section .training-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 38px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,255,209,0.22);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  backdrop-filter: blur(8px);
}

#schedule-section .training-banner-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,255,209,0.14);
  border: 1px solid rgba(0,255,209,0.28);
  font-size: 1.1rem;
}

#schedule-section .training-banner-text h4 {
  margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--schedule-cream);
  letter-spacing: -0.01em;
}

#schedule-section .training-banner-text p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(236,236,220,0.78);
}

#schedule-section .training-banner-text strong {
  color: var(--schedule-cream);
  font-weight: 900;
}

/* ============================================================
   TABS
============================================================ */

#schedule-section .schedule-tabs-wrap {
  margin-bottom: 28px;
}

#schedule-section .day-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#schedule-section .day-tab {
  appearance: none;
  border: 1px solid rgba(0,255,209,0.26);
  background: rgba(255,255,255,0.02);
  color: rgba(236,236,220,0.72);
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.22s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

#schedule-section .day-tab:hover {
  border-color: rgba(0,255,209,0.55);
  color: var(--schedule-cream);
  transform: translateY(-1px);
}

#schedule-section .day-tab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,255,209,0.18),
    0 0 0 1px rgba(0,255,209,0.70) inset;
}

#schedule-section .day-tab.active {
  background: var(--schedule-cyan);
  border-color: var(--schedule-cyan);
  color: #0b0b0b;
  box-shadow: 0 0 26px rgba(0,255,209,0.25);
}

/* ============================================================
   BOARD
============================================================ */

#schedule-section .schedule-board {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  backdrop-filter: blur(8px);
}

#schedule-section .day-pane {
  display: none;
}

#schedule-section .day-pane.active {
  display: block;
}

/* ============================================================
   TRACK HEADERS
============================================================ */

#schedule-section .track-headers {
  display: grid;
  grid-template-columns: 92px 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 2px;
}

#schedule-section .track-header {
  padding: 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(236,236,220,0.44);
}

#schedule-section .track-header-time {
  color: rgba(0,255,209,0.62);
}

/* ============================================================
   ROWS
============================================================ */

#schedule-section .schedule-row {
  display: grid;
  grid-template-columns: 92px 1fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

#schedule-section .schedule-row:last-child {
  margin-bottom: 0;
}

#schedule-section .time-cell {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 16px;
}

#schedule-section .time-label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  color: rgba(0,255,209,0.78);
}

/* ============================================================
   TRACK CARD
============================================================ */

#schedule-section .track-card {
  position: relative;
  min-height: 96px;
  padding: 15px 16px 15px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#schedule-section .track-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,255,209,0.22);
  background: rgba(255,255,255,0.055);
  box-shadow: 0 10px 26px rgba(0,0,0,0.26);
}

#schedule-section .track-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  border-radius: 14px 0 0 14px;
  background: rgba(255,255,255,0.12);
}

#schedule-section .track-card.track-main::before,
#schedule-section .track-card.track-keynote::before {
  background: var(--schedule-cyan);
}

#schedule-section .track-card.track-keynote::before {
  box-shadow: 0 0 16px rgba(0,255,209,0.45);
}

#schedule-section .track-card.track-workshop::before {
  background: var(--schedule-red);
}

#schedule-section .track-card.track-community::before {
  background: var(--schedule-brown);
}

#schedule-section .track-card.track-wardriving {
  background: rgba(255,0,64,0.05);
  border-color: rgba(255,0,64,0.18);
}

#schedule-section .track-card.track-wardriving::before {
  background: var(--schedule-red);
}

#schedule-section .track-card.empty {
  min-height: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

#schedule-section .track-card.empty::before {
  display: none;
}

/* ============================================================
   TRACK LABELS / SESSION CONTENT
============================================================ */

#schedule-section .track-mobile-label {
  display: none;
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236,236,220,0.52);
}

#schedule-section .session-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#schedule-section .badge-keynote {
  color: var(--schedule-cyan);
  background: rgba(0,255,209,0.12);
  border: 1px solid rgba(0,255,209,0.35);
}

#schedule-section .badge-workshop {
  color: var(--schedule-red);
  background: rgba(255,0,64,0.12);
  border: 1px solid rgba(255,0,64,0.34);
}

#schedule-section .badge-osint {
  color: #d08c8b;
  background: rgba(115,54,53,0.20);
  border: 1px solid rgba(115,54,53,0.42);
}

#schedule-section .badge-community {
  color: #c99392;
  background: rgba(115,54,53,0.16);
  border: 1px solid rgba(115,54,53,0.34);
}

#schedule-section .badge-nextgen {
  color: rgba(0,255,209,0.82);
  background: rgba(0,255,209,0.08);
  border: 1px solid rgba(0,255,209,0.24);
}

#schedule-section .badge-wardriving {
  color: rgba(255,0,64,0.88);
  background: rgba(255,0,64,0.09);
  border: 1px solid rgba(255,0,64,0.24);
}

#schedule-section .session-title {
  margin-bottom: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--schedule-cream);
}

#schedule-section .session-meta {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(236,236,220,0.62);
}

/* ============================================================
   FULL SPAN ROWS
============================================================ */

#schedule-section .schedule-row.full-span {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

#schedule-section .full-time-cell {
  flex: 0 0 92px;
  display: flex;
  align-items: center;
}

#schedule-section .full-span-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 78px;
  padding: 18px 22px;
  border-radius: 14px;
}

#schedule-section .full-span-card.type-registration {
  background: rgba(0,255,209,0.06);
  border: 1px solid rgba(0,255,209,0.20);
}

#schedule-section .full-span-card.type-lunch {
  background: rgba(115,54,53,0.20);
  border: 1px solid rgba(115,54,53,0.32);
}

#schedule-section .full-span-card.type-close {
  background: linear-gradient(90deg, rgba(255,0,64,0.08), rgba(0,255,209,0.06));
  border: 1px solid rgba(255,0,64,0.22);
}

#schedule-section .full-span-icon {
  font-size: 1.05rem;
  opacity: 0.78;
}

#schedule-section .full-span-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schedule-cream);
  opacity: 0.9;
  text-align: center;
}

/* ============================================================
   LEGEND
============================================================ */

#schedule-section .schedule-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 22px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

#schedule-section .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(236,236,220,0.62);
}

#schedule-section .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

#schedule-section .legend-main {
  background: var(--schedule-cyan);
}

#schedule-section .legend-workshop {
  background: var(--schedule-red);
}

#schedule-section .legend-community {
  background: var(--schedule-brown);
}

#schedule-section .legend-nextgen {
  background: rgba(0,255,209,0.52);
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {
  #schedule-section {
    padding: 82px 0 92px;
  }

  #schedule-section .schedule-board {
    padding: 16px;
  }

  #schedule-section .track-headers,
  #schedule-section .schedule-row {
    grid-template-columns: 78px 1fr 1fr 1fr;
  }

  #schedule-section .full-time-cell {
    flex-basis: 78px;
  }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {
  #schedule-section {
    padding: 70px 0 82px;
  }

  #schedule-section .schedule-heading-wrap {
    margin-bottom: 36px;
  }

  #schedule-section .schedule-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
  }

  #schedule-section .schedule-title {
    font-size: clamp(1.8rem, 9vw, 2.4rem);
    margin-bottom: 12px;
  }

  #schedule-section .schedule-intro {
    font-size: 0.94rem;
    line-height: 1.68;
    color: rgba(236,236,220,0.8);
  }

  #schedule-section .training-banner {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin-bottom: 28px;
    border-radius: 14px;
  }

  #schedule-section .training-banner-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  #schedule-section .training-banner-text h4 {
    font-size: 0.96rem;
  }

  #schedule-section .training-banner-text p {
    font-size: 0.86rem;
    line-height: 1.62;
  }

  #schedule-section .schedule-tabs-wrap {
    margin-bottom: 20px;
  }

  #schedule-section .day-tabs {
    gap: 8px;
  }

  #schedule-section .day-tab {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }

  #schedule-section .schedule-board {
    padding: 14px;
    border-radius: 18px;
  }

  #schedule-section .track-headers {
    display: none;
  }

  #schedule-section .schedule-row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }

  #schedule-section .time-cell {
    padding-top: 0;
    margin-bottom: 2px;
  }

  #schedule-section .time-label {
    font-size: 0.73rem;
    line-height: 1.35;
    padding-left: 2px;
  }

  #schedule-section .track-card {
    min-height: auto;
    padding: 14px 14px 14px 16px;
    border-radius: 13px;
  }

  #schedule-section .track-card.empty {
    display: none;
  }

  #schedule-section .track-mobile-label {
    display: block;
  }

  #schedule-section .session-badge {
    font-size: 0.6rem;
  }

  #schedule-section .session-title {
    font-size: 0.84rem;
    line-height: 1.38;
  }

  #schedule-section .session-meta {
    font-size: 0.76rem;
    color: rgba(236,236,220,0.7);
  }

  #schedule-section .schedule-row.full-span {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
  }

  #schedule-section .full-time-cell {
    flex: none;
  }

  #schedule-section .full-span-card {
    min-height: 72px;
    padding: 16px;
    gap: 10px;
  }

  #schedule-section .full-span-label {
    font-size: 0.82rem;
    letter-spacing: 0.07em;
  }

  #schedule-section .schedule-legend {
    gap: 12px 16px;
    margin-top: 18px;
    padding-top: 20px;
  }

  #schedule-section .legend-item {
    font-size: 0.72rem;
    color: rgba(236,236,220,0.58);
  }
}
/* EVENTO PRINCIPAL TITLE */

#schedule-section .schedule-main-event{
  text-align: center;
  margin: 10px auto 28px;
  max-width: 720px;
}

#schedule-section .schedule-main-event h4{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--cream);
  margin-bottom: 6px;
}

#schedule-section .schedule-main-event p{
  font-size: 0.85rem;
  color: rgba(236,236,220,0.60);
  margin: 0;
}



/* ================= SPONSORS – BSides 2026 (DARK / PREMIUM – LINEAR) ================= */

.sponsors-bg {
  background: linear-gradient(135deg, #121212 0%, #351E1C 45%, #733635 100%) !important;
  color: rgba(236, 236, 220, 0.88);
}

/* =============================
   SPONSORS – SECTION TITLE (CYAN)
   ============================= */

.sponsors-bg .section-heading {
  color: #00ffd1;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(0, 255, 209, 0.3), 0 0 32px rgba(0, 255, 209, 0.14);
  position: relative;
}

.sponsors-bg .section-heading::after {
  content: "";
  display: block;
  width: 120px;
  height: 5px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 255, 209, 0.95), rgba(0, 255, 209, 0.35), rgba(0, 255, 209, 0.12));
  box-shadow: 0 10px 24px rgba(0, 255, 209, 0.16);
}

.sponsors-bg .section-intro {
  color: rgba(236, 236, 220, 0.78);
}

/* =============================
   LEVEL TITLE + DECORATIVE LINES
   ============================= */

.sponsors-bg .sponsor-level {
  position: relative;
  margin: 18px auto 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sponsors-bg .sponsor-level::before,
.sponsors-bg .sponsor-level::after {
  content: "";
  height: 1px;
  width: min(140px, 22vw);
  background: rgba(0, 255, 209, 0.22) !important;
  display: block;
}

.sponsors-bg .sponsor-level::before {
  margin-right: 16px;
}

.sponsors-bg .sponsor-level::after {
  margin-left: 16px;
}

/* =============================
   Level title base
   ============================= */

.sponsors-bg .sponsor-level h5 {
  margin: 0;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(0, 255, 209, 0.25);
  color: #ececdc !important;
  box-shadow: 0 0 18px rgba(0, 255, 209, 0.12);
  border-radius: 999px;
  padding: 10px 18px 10px 38px;

  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
}

.sponsors-bg .sponsor-level h5::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff0040;
  opacity: 0.85;
}

/* ================= LEVEL TITLES – FORCE WHITE ================= */

.sponsors-bg .sponsor-level.titanium h5,
.sponsors-bg .sponsor-level.gold h5,
.sponsors-bg .sponsor-level.silver h5,
.sponsors-bg .sponsor-level.bronze h5,
.sponsors-bg .sponsor-level.community h5,
.sponsors-bg .sponsor-level.academic h5,
.sponsors-bg .sponsor-level.host h5 {
  color: #ffffff !important;
}

/* Titanium – elite */
.sponsors-bg .sponsor-level.titanium h5 {
  border-color: rgba(0, 255, 209, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 255, 209, 0.18), 0 0 26px rgba(0, 255, 209, 0.18);
}

/* Gold – prestige */
.sponsors-bg .sponsor-level.gold h5 {
  border-color: rgba(236, 236, 220, 0.35);
  box-shadow: 0 0 0 1px rgba(236, 236, 220, 0.12), 0 0 22px rgba(236, 236, 220, 0.1);
}

/* Silver – solid */
.sponsors-bg .sponsor-level.silver h5 {
  border-color: rgba(236, 236, 220, 0.22);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
}

/* Bronze – community */
.sponsors-bg .sponsor-level.bronze h5 {
  border-color: rgba(115, 54, 53, 0.65);
  box-shadow: 0 0 0 1px rgba(115, 54, 53, 0.18), 0 0 22px rgba(115, 54, 53, 0.14);
}

/* ================= PLACEHOLDER ================= */

.sponsors-bg .sponsor-placeholder {
  border: 2px dashed rgba(0, 255, 209, 0.45) !important;
  color: rgba(236, 236, 220, 0.88) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 209, 0.1), 0 0 22px rgba(0, 255, 209, 0.12);

  padding: 22px 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ================= LOGO FRAME (NEW) =================
   Objetivo:
   - centrar perfecto
   - estabilidad de layout entre logos anchos/altos
   - jerarquía por nivel sin “logos gigantes”
   =================================================== */

.sponsors-bg a {
  text-decoration: none;
  outline: none;
}

.sponsors-bg .sponsor-logo-wrap {
  width: 100%;
  border-radius: 18px;
  padding: 16px 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 255, 209, 0.18);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 209, 0.06), 0 10px 28px rgba(0, 0, 0, 0.35);

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Alturas por nivel (control de “marco”) */
.sponsors-bg .sponsor-logo-wrap--host {
  min-height: 150px;
}

.sponsors-bg .sponsor-logo-wrap--gold {
  min-height: 165px;
}

.sponsors-bg .sponsor-logo-wrap--bronze {
  min-height: 140px;
}

.sponsors-bg .sponsor-logo-wrap--community {
  min-height: 135px;
}

.sponsors-bg .sponsor-logo-wrap--academic {
  min-height: 145px;
  border-color: rgba(236, 236, 220, 0.22);
}

/* Hover premium (sobre el frame + logo) */
.sponsors-bg a:hover .sponsor-logo-wrap,
.sponsors-bg a:focus .sponsor-logo-wrap {
  transform: translateY(-2px);
  border-color: rgba(0, 255, 209, 0.42);
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 209, 0.1),
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(0, 255, 209, 0.14);
}

/* ================= LOGOS – UNIFORM SYSTEM ================= */

.sponsors-bg .sponsor-logo {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;

  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(0, 255, 209, 0.12));

  transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}

/* Hover premium (logo) */
.sponsors-bg a:hover .sponsor-logo,
.sponsors-bg a:focus .sponsor-logo {
  transform: scale(1.04);
  opacity: 0.96;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 18px rgba(0, 255, 209, 0.2));
}

/* ================= TAMAÑOS POR NIVEL (IMÁGENES) ================= */

/* Host */
.sponsors-bg .host-logo {
  max-height: 135px;
}

/* Titanium – dominante */
.sponsors-bg .titanium-logo {
  max-height: 170px;
}

/* Gold – fuerte pero debajo */
.sponsors-bg .gold-logo {
  max-height: 150px;
}

/* Silver – intermedio */
.sponsors-bg .silver-logo {
  max-height: 135px;
}

/* Bronze – con presencia */
.sponsors-bg .bronze-logo {
  max-height: 120px;
}

/* Community – casi Bronze+ */
.sponsors-bg .community-logo {
  max-height: 115px;
}

/* Académico (institucional) */
.sponsors-bg .academic-logo {
  max-height: 120px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}

/* Para logos verticales/horizontales extremos (si lo necesitas luego) */
.sponsors-bg .logo-compact {
  max-height: 110px !important;
}
.sponsors-bg .logo-tall {
  max-height: 125px !important;
}
.sponsors-bg .logo-wide {
  max-height: 105px !important;
}

/* Ajuste específico para Microsoft (mejor controlado que “scale 1.5”) */
.sponsors-bg .microsoft-logo {
  max-height: 150px;
}

/* ================= BUTTONS (scoped to Sponsors only) ================= */

.sponsors-bg .btn-primary {
  background-color: #ff0040;
  border-color: #ff0040;
  color: #ececdc;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.sponsors-bg .btn-primary:hover,
.sponsors-bg .btn-primary:focus {
  background-color: #00ffd1;
  border-color: #00ffd1;
  color: #121212;
  box-shadow: 0 0 24px rgba(0, 255, 209, 0.2);
  transform: translateY(-1px);
}

.sponsors-bg .btn-outline-primary {
  color: #00ffd1;
  border-color: rgba(0, 255, 209, 0.65);
  background: transparent;
  font-weight: 800;
  transition: all 0.25s ease;
}

.sponsors-bg .btn-outline-primary:hover,
.sponsors-bg .btn-outline-primary:focus {
  background-color: rgba(0, 255, 209, 0.12);
  border-color: #00ffd1;
  color: #ececdc;
}

/* ================= MOBILE TWEAKS ================= */

@media (max-width: 576px) {
  .sponsors-bg .sponsor-level::before,
  .sponsors-bg .sponsor-level::after {
    width: 18vw;
  }

  .sponsors-bg .sponsor-logo-wrap {
    padding: 14px 14px;
    border-radius: 16px;
  }
}

/* =====================================================
   PROGRAMACIÓN – TRAINING NOTICE (BSides 2026 – PREMIUM)
   Café unificado (sin marrón)
   ===================================================== */

.training-notice {
  background:
    radial-gradient(
      900px 260px at 20% 0%,
      rgba(0,255,209,0.18),
      rgba(0,255,209,0.00) 55%
    ),
    linear-gradient(
      135deg,
      #121212,
      #351E1C,
      #351E1C
    );
  border: 1px solid rgba(0,255,209,0.35);   /* Turquesa sutil */
  border-left: 6px solid #FF0040;           /* Rojo (importancia) */
  border-radius: 14px;
  padding: 1.75rem;
  color: rgba(236,236,220,0.90);            /* Crema */
  box-shadow:
    0 14px 34px rgba(0,0,0,0.45),
    0 0 0 1px rgba(0,255,209,0.10);
}

/* Título */
.training-notice h5 {
  color: #00FFD1;               /* Turquesa */
  font-weight: 900;
  margin-bottom: 8px;
  text-shadow: 0 0 18px rgba(0,255,209,0.22);
}

/* Fecha / énfasis dentro del párrafo */
.training-notice p strong {
  color: #ECECDC;
  font-weight: 900;
  border-bottom: 2px solid rgba(255,0,64,0.55); /* Rojo sutil */
  padding-bottom: 1px;
}

/* Texto principal */
.training-notice p {
  color: rgba(236,236,220,0.88);
  line-height: 1.65;
  margin-bottom: 0.6rem;
}

/* Disclaimer */
.training-notice small,
.training-notice em {
  display: block;
  margin-top: 6px;
  color: rgba(236,236,220,0.72);
  font-style: italic;
}

/* Links dentro del notice */
.training-notice a {
  color: #00FFD1;
  text-decoration-color: rgba(0,255,209,0.35);
  font-weight: 800;
}

.training-notice a:hover {
  color: #FF0040;
}

/* Responsive */
@media (max-width: 767px) {
  .training-notice {
    padding: 1.25rem;
  }
}

/* =============================
   HEADER/NAV – FORCE BLACK (NO BLUE)
   ============================= */

header,
.header,
.header .navbar,
#header,
#navbar,
.navbar {
  background-color: #121212 !important;
  background-image: none !important;
}

/* Si Bootstrap está metiendo bg-primary */
.navbar.bg-primary,
.bg-primary {
  background-color: #121212 !important;
}

/* Links */
.header .navbar-brand,
.header .nav-link,
.navbar .navbar-brand,
.navbar .nav-link {
  color: rgba(236,236,220,0.88) !important;
}

.header .nav-link:hover,
.navbar .nav-link:hover {
  color: #00FFD1 !important;
}
/* ===== STATS: kill theme primary (blue) ===== */
.stats-block.theme-bg-primary {
  background: #121212 !important;
  color: #ECECDC !important;
}
/* ============================================================
VILLAGES SECTION
============================================================ */

#villages-section{

padding:110px 0;

background:
radial-gradient(circle at 100% 0%, rgba(53,30,28,.5), transparent 40%),
radial-gradient(circle at 0% 100%, rgba(0,255,209,.08), transparent 35%),
linear-gradient(145deg,#121212 0%,#181818 60%,#351E1C 100%);

color:#ECECDC;
position:relative;

}


/* ============================================================
HEADER
============================================================ */

.villages-head{
max-width:860px;
margin:auto;
margin-bottom:60px;
}

.villages-eyebrow{

font-family:'JetBrains Mono',monospace;
font-size:12px;
letter-spacing:.22em;
text-transform:uppercase;

color:#00FFD1;

margin-bottom:12px;

}

.villages-title{

font-family:'Montserrat',sans-serif;
font-size:clamp(2rem,4vw,3rem);
font-weight:900;

color:#ECECDC;

margin-bottom:14px;

text-shadow:
0 0 18px rgba(0,255,209,.25),
0 8px 28px rgba(0,0,0,.4);

}

.villages-lead{

font-size:clamp(1.05rem,2.2vw,1.25rem);
color:rgba(236,236,220,.95);
margin-bottom:8px;

}

.villages-sub{

color:rgba(236,236,220,.75);
line-height:1.7;

}


/* ============================================================
GRID
============================================================ */

.villages-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;

}


/* ============================================================
CARD
============================================================ */

.village-card{

background:rgba(255,255,255,.05);

border:1px solid rgba(0,255,209,.22);

border-radius:18px;

padding:22px;

box-shadow:0 18px 40px rgba(0,0,0,.4);

transition:all .25s ease;

}

.village-card:hover{

transform:translateY(-6px);

border-color:rgba(0,255,209,.45);

box-shadow:
0 24px 60px rgba(0,0,0,.5),
0 0 22px rgba(0,255,209,.12);

}


/* ============================================================
CARD HEADER
============================================================ */

.village-head{

display:flex;
gap:14px;
align-items:center;

margin-bottom:14px;

}

.village-icon{

width:46px;
height:46px;

border-radius:14px;

display:grid;
place-items:center;

background:rgba(0,255,209,.12);

border:1px solid rgba(0,255,209,.4);

color:#00FFD1;

font-size:18px;

flex:0 0 auto;

}


/* ============================================================
TITLE
============================================================ */

.village-titlewrap{

display:flex;
justify-content:space-between;
align-items:flex-start;

gap:10px;

width:100%;

}

.village-title{

font-weight:800;
color:#ECECDC;

}


/* ============================================================
BADGES
============================================================ */

.village-badges{

display:flex;
gap:8px;

flex-wrap:wrap;

}

.village-badge{

font-size:11px;
padding:4px 10px;

border-radius:999px;

font-weight:700;

letter-spacing:.05em;

}

.village-badge.confirmed{

background:rgba(255,0,64,.12);

color:#FF0040;

border:1px solid rgba(255,0,64,.35);

}

.village-badge.new{

background:rgba(236,236,220,.08);

color:#00FFD1;

border:1px solid rgba(236,236,220,.35);

}


/* ============================================================
DESCRIPTION
============================================================ */

.village-desc{

color:rgba(236,236,220,.78);

line-height:1.6;

margin:0;

}


/* ============================================================
FOOTER
============================================================ */

.villages-footer{

text-align:center;

margin-top:40px;

color:rgba(236,236,220,.65);

font-size:14px;

}


/* ============================================================
RESPONSIVE
============================================================ */

@media(max-width:991px){

.villages-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

#villages-section{
padding:80px 0;
}

.villages-grid{
grid-template-columns:1fr;
}

.villages-title{
font-size:32px;
}

}

/* ============================================================
   ACTIVIDADES – BSides Colombia 2026
   Light premium / wide images version
============================================================ */

#activities-section{
  --activities-black:#121212;
  --activities-cream:#ECECDC;
  --activities-white:rgba(255,255,255,0.78);
  --activities-brown-dark:#351E1C;
  --activities-brown:#733635;
  --activities-red:#FF0040;

  position:relative;
  overflow:hidden;
  padding:100px 0 108px;

  background:
    radial-gradient(circle at 0% 0%, rgba(115,54,53,0.08) 0%, transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(53,30,28,0.06) 0%, transparent 32%),
    linear-gradient(180deg, #f4f2ea 0%, #ECECDC 100%);

  color:var(--activities-black);
  border-top:1px solid rgba(53,30,28,0.10);
  border-bottom:1px solid rgba(53,30,28,0.10);
}

#activities-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(53,30,28,0.04) 1px, transparent 1px);
  background-size:30px 30px;
  opacity:.32;
  pointer-events:none;
}

#activities-section::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:8px;
  background:linear-gradient(
    90deg,
    rgba(53,30,28,0.00),
    rgba(115,54,53,0.16),
    rgba(255,0,64,0.08),
    rgba(53,30,28,0.00)
  );
}

#activities-section .container{
  position:relative;
  z-index:1;
}

/* ============================================================
   HEAD
============================================================ */

#activities-section .activities-head{
  max-width:820px;
  margin:0 auto 40px;
}

#activities-section .activities-eyebrow{
  display:inline-block;
  margin-bottom:14px;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--activities-brown);
}

#activities-section .activities-title{
  margin:0 0 12px;
  font-family:'Montserrat', sans-serif;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:900;
  line-height:1.04;
  letter-spacing:-0.02em;
  color:var(--activities-brown-dark);
  text-shadow:0 10px 24px rgba(53,30,28,0.08);
}

#activities-section .activities-intro{
  margin:0 auto;
  max-width:760px;
  font-size:1rem;
  line-height:1.75;
  color:rgba(18,18,18,0.82);
}

/* ============================================================
   GRID
============================================================ */

#activities-section .activities-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
  max-width:1120px;
  margin:0 auto;
}

/* ============================================================
   CARD
============================================================ */

#activities-section .activity-card{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border-radius:24px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.64));

  border:1px solid rgba(53,30,28,0.12);

  box-shadow:
    0 18px 34px rgba(53,30,28,0.08),
    inset 0 1px 0 rgba(255,255,255,0.62);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

#activities-section .activity-card:hover{
  transform:translateY(-5px);
  border-color:rgba(115,54,53,0.24);

  box-shadow:
    0 24px 42px rgba(53,30,28,0.12),
    0 0 0 4px rgba(115,54,53,0.05);
}

/* ============================================================
   IMAGE (WIDE SAFE MODE)
============================================================ */

#activities-section .activity-image{
  position:relative;

  aspect-ratio:16 / 10;

  overflow:hidden;

  border-bottom:1px solid rgba(53,30,28,0.10);

  background:linear-gradient(
    180deg,
    #1c1c1c 0%,
    #2a2a2a 100%
  );

  display:flex;
  align-items:center;
  justify-content:center;
}

#activities-section .activity-image img{
  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center center;

  display:block;

  transition:transform .35s ease;
}

#activities-section .activity-card:hover .activity-image img{
  transform:scale(1.01);
}

#activities-section .activity-content{
  display:flex;
  flex-direction:column;
  flex-grow:1;
  padding:22px 20px 20px;
}

/* ============================================================
   BADGES
============================================================ */

#activities-section .activity-top{
  margin-bottom:12px;
}

#activities-section .activity-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#activities-section .activity-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;

  font-family:'JetBrains Mono', monospace;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

#activities-section .activity-badge.confirmed{
  background:rgba(255,0,64,0.10);
  color:var(--activities-red);
  border:1px solid rgba(255,0,64,0.24);
}

#activities-section .activity-badge.pending{
  background:rgba(53,30,28,0.08);
  color:var(--activities-brown-dark);
  border:1px solid rgba(53,30,28,0.16);
}

#activities-section .activity-badge.alert{
  background:rgba(255,255,255,0.62);
  color:var(--activities-brown-dark);
  border:1px solid rgba(53,30,28,0.12);
}

/* ============================================================
   TITLE / DESC
============================================================ */

#activities-section .activity-title{
  margin:0 0 10px;
  font-family:'Montserrat', sans-serif;
  font-size:1.12rem;
  font-weight:900;
  line-height:1.3;
  color:var(--activities-brown-dark);
}

#activities-section .activity-title span{
  font-weight:700;
  color:var(--activities-brown);
}

#activities-section .activity-desc{
  margin:0 0 18px;
  font-size:.94rem;
  line-height:1.68;
  color:rgba(18,18,18,0.76);
}

/* ============================================================
   META
============================================================ */

#activities-section .activity-meta-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
  margin-top:auto;
}

#activities-section .activity-meta-item{
  display:flex;
  flex-direction:column;
  gap:2px;

  min-height:78px;

  padding:12px 14px;

  border-radius:14px;

  background:rgba(236,236,220,0.56);

  border:1px solid rgba(53,30,28,0.08);
}

#activities-section .activity-meta-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--activities-brown);
}

#activities-section .activity-meta-value{
  font-size:.86rem;
  font-weight:700;
  line-height:1.45;
  color:var(--activities-brown-dark);
}

/* ============================================================
   NOTE
============================================================ */

#activities-section .activity-note{
  margin-top:0;
  padding:14px;
  border-radius:14px;

  background:rgba(255,255,255,0.54);

  border:1px solid rgba(53,30,28,0.10);

  font-size:.82rem;
  line-height:1.58;

  color:rgba(18,18,18,0.72);
}

/* ============================================================
   FOOTER NOTE
============================================================ */

#activities-section .activities-footer-note{
  max-width:920px;
  margin:30px auto 0;

  padding:16px 18px;

  border-radius:16px;

  background:rgba(255,255,255,0.52);

  border:1px solid rgba(53,30,28,0.10);

  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:10px 14px;

  text-align:center;
}

#activities-section .activities-footer-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--activities-red);
}

#activities-section .activities-footer-text{
  font-size:.84rem;
  line-height:1.6;
  color:rgba(18,18,18,0.72);
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px){

  #activities-section{
    padding:86px 0 92px;
  }

  #activities-section .activities-grid{
    grid-template-columns:1fr;
  }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px){

  #activities-section{
    padding:72px 0 78px;
  }

  #activities-section .activities-head{
    margin-bottom:26px;
  }

  #activities-section .activities-eyebrow{
    font-size:.66rem;
    letter-spacing:.18em;
  }

  #activities-section .activities-title{
    font-size:clamp(1.8rem, 8vw, 2.35rem);
    margin-bottom:10px;
  }

  #activities-section .activities-intro{
    font-size:.95rem;
    line-height:1.68;
  }

  #activities-section .activities-grid{
    gap:14px;
  }

  #activities-section .activity-card{
    border-radius:20px;
  }

  #activities-section .activity-image{
    aspect-ratio:16 / 9;
  }

  #activities-section .activity-content{
    padding:18px 16px 16px;
  }

  #activities-section .activity-title{
    font-size:1rem;
  }

  #activities-section .activity-desc{
    font-size:.88rem;
    line-height:1.62;
    margin-bottom:16px;
  }

  #activities-section .activity-meta-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  #activities-section .activity-meta-item{
    min-height:auto;
    padding:11px 12px;
    border-radius:12px;
  }

  #activities-section .activity-note{
    font-size:.8rem;
    padding:12px;
  }

  #activities-section .activities-footer-note{
    margin-top:20px;
    padding:14px;
    border-radius:14px;
  }

  #activities-section .activities-footer-text{
    font-size:.8rem;
  }

}

/* ================= EDICIONES ANTERIORES – BSides 2026 ================= */

#past-sessions-section{
  background: linear-gradient(
    135deg,
    #121212 0%,
    #1a1a1a 45%,
    #351E1C 70%,
    #733635 100%
  );

  color: rgba(236,236,220,0.88);
  padding:90px 0;

  border-top:1px solid rgba(236,236,220,0.06);
}

/* ===== Section title ===== */

#past-sessions-section .section-heading{

  color:#00FFD1;
  font-weight:900;
  letter-spacing:.02em;

  text-transform:uppercase;

  text-shadow:
    0 0 16px rgba(0,255,209,0.28),
    0 0 32px rgba(0,255,209,0.12);

  position:relative;
}

/* underline accent */

#past-sessions-section .section-heading::after{

  content:"";
  display:block;

  width:120px;
  height:5px;

  margin:14px auto 0;

  border-radius:999px;

  background:linear-gradient(
    90deg,
    rgba(0,255,209,.95),
    rgba(0,255,209,.35),
    rgba(0,255,209,.12)
  );

  box-shadow:0 10px 24px rgba(0,255,209,.18);
}

/* ===== Intro text ===== */

#past-sessions-section .section-intro{

  color:rgba(236,236,220,.75);

  font-size:1.05rem;

  max-width:760px;

}

/* ===== Buttons container ===== */

#past-sessions-section .d-flex{

  gap:14px;
}

/* ===== Year buttons ===== */

#past-sessions-section .btn-outline-primary{

  color:#00FFD1;

  border:2px solid rgba(0,255,209,.65);

  background:rgba(255,255,255,0.03);

  font-weight:800;

  letter-spacing:.02em;

  border-radius:999px;

  padding:12px 26px;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

/* Hover */

#past-sessions-section .btn-outline-primary:hover{

  background:#FF0040;

  border-color:#FF0040;

  color:#ECECDC;

  transform:translateY(-2px);

  box-shadow:
    0 12px 30px rgba(255,0,64,.24),
    0 0 20px rgba(255,0,64,.18);
}

/* Active click */

#past-sessions-section .btn-outline-primary:active{

  transform:translateY(0);
}

/* ===== Mobile ===== */

@media (max-width:768px){

  #past-sessions-section .btn-outline-primary{

    padding:10px 20px;

    font-size:.95rem;

  }

}


/* ================================================
WORKSHOPS SECTION
================================================ */

#workshops-section{
padding:100px 0;
background:#ECECDC;
border-top:1px solid rgba(53,30,28,.10);
border-bottom:1px solid rgba(53,30,28,.10);
}

/* header */

.workshops-header{
max-width:780px;
margin:auto;
margin-bottom:30px;
}

.workshops-eyebrow{
font-family:'JetBrains Mono', monospace;
font-size:12px;
letter-spacing:.2em;
text-transform:uppercase;
color:#733635;
margin-bottom:12px;
}

.workshops-title{
font-family:'Montserrat',sans-serif;
font-size:40px;
font-weight:900;
color:#351E1C;
margin-bottom:10px;
}

.workshops-intro{
color:rgba(18,18,18,.80);
line-height:1.7;
}

/* status */

.workshops-status{
text-align:center;
margin-bottom:40px;
}

.workshops-status-badge{
display:inline-block;
padding:6px 12px;
border-radius:20px;
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
background:rgba(255,0,64,.10);
border:1px solid rgba(255,0,64,.25);
color:#FF0040;
margin-right:10px;
}

.workshops-status-text{
font-size:14px;
color:#351E1C;
}

/* grid */

.workshops-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}

/* card */

.workshop-card{
background:#fff;
border-radius:18px;
border:1px solid rgba(18,18,18,.06);
box-shadow:0 18px 36px rgba(0,0,0,.10);
overflow:hidden;
display:flex;
flex-direction:column;
transition:transform .25s ease;
}

.workshop-card:hover{
transform:translateY(-6px);
}

/* image */

.workshop-image{
aspect-ratio:4/3;
overflow:hidden;
}

.workshop-image img{
width:100%;
height:100%;
object-fit:cover;
}

/* content */

.workshop-content{
padding:24px;
display:flex;
flex-direction:column;
flex:1;
}

.workshop-card-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.workshop-name{
font-weight:800;
font-size:18px;
color:#351E1C;
}

.workshop-badge{
font-size:11px;
padding:5px 10px;
border-radius:20px;
background:rgba(255,0,64,.10);
border:1px solid rgba(255,0,64,.20);
color:#FF0040;
}

.workshop-description{
font-size:14px;
color:rgba(18,18,18,.75);
margin-bottom:18px;
}

/* meta */

.workshop-meta{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:16px;
}

.workshop-meta-item{
background:rgba(236,236,220,.60);
padding:12px;
border-radius:10px;
border:1px solid rgba(18,18,18,.06);
}

.meta-label{
font-size:10px;
letter-spacing:.15em;
text-transform:uppercase;
color:#733635;
display:block;
}

.meta-value{
font-size:13px;
font-weight:700;
color:#351E1C;
}

/* note */

.workshop-note{
background:rgba(236,236,220,.70);
border:1px solid rgba(18,18,18,.06);
padding:12px;
border-radius:10px;
font-size:13px;
color:rgba(18,18,18,.75);
margin-top:auto;
}

/* footer */

.workshops-footer{
text-align:center;
margin-top:40px;
font-size:13px;
color:rgba(18,18,18,.65);
}

/* responsive */

@media(max-width:991px){

.workshops-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.workshops-grid{
grid-template-columns:1fr;
}

.workshops-title{
font-size:32px;
}

}