/* SisQuetzal - Corporate (Serio) */
:root{
  --sq-primary:#0f172a;
  --sq-secondary:#1e293b;
  --sq-accent:#2563eb;
  --sq-accent-2:#0ea5e9;
  --sq-bg:#f8fafc;
  --sq-surface:#ffffff;
  --sq-border:#e2e8f0;
  --sq-text:#0b1220;
  --sq-muted:#64748b;
  --sq-shadow: 0 10px 28px rgba(2, 6, 23, .10);
}

html,body{
  background: var(--sq-bg);
  color: var(--sq-text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{ color: var(--sq-accent); }
a:hover{ color: #1d4ed8; text-decoration:none; }

.section{ padding: 84px 0; }

.section-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sq-primary);
  font-size: 2.0rem;
  margin-bottom: 14px;
}

.section-subtitle{
  color: var(--sq-muted);
  font-size: 1.05rem;
  max-width: 920px;
  margin: 0 auto 28px auto;
}

.sq-hero{
  background: radial-gradient(1100px 600px at 15% 15%, rgba(37, 99, 235, .18), transparent 60%),
              radial-gradient(900px 500px at 85% 25%, rgba(14, 165, 233, .14), transparent 65%),
              linear-gradient(135deg, var(--sq-primary), var(--sq-secondary));
  color: #fff;
  padding: 120px 0 84px 0;
  position: relative;
  overflow: hidden;
}

.sq-hero .sq-hero-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 34px 28px;
  backdrop-filter: blur(6px);
}

.sq-hero h1{
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 12px 0 10px 0;
}

.sq-hero p{
  color: rgba(255,255,255,.86);
  font-size: 1.05rem;
  margin: 0 0 22px 0;
}

.sq-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 18px;
}

.sq-badge{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .9rem;
}

.sq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: .2s ease;
}

.sq-btn-primary{
  background: var(--sq-accent);
  color:#fff !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.25);
}
.sq-btn-primary:hover{
  background:#1d4ed8;
  transform: translateY(-1px);
}

.sq-btn-ghost{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color:#fff !important;
}
.sq-btn-ghost:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.sq-card{
  background: var(--sq-surface);
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  box-shadow: var(--sq-shadow);
}

.sq-card.padded{ padding: 22px; }

.sq-feature{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding: 16px;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  background: #fff;
}

.sq-feature i{
  font-size: 1.2rem;
  color: var(--sq-accent);
  margin-top: 2px;
}

.sq-feature h4{
  font-size: 1rem;
  margin: 0 0 4px 0;
  font-weight: 800;
  color: var(--sq-primary);
}

.sq-feature p{
  margin:0;
  color: var(--sq-muted);
  font-size: .95rem;
}

.sq-grid{ display:grid; gap: 14px; }

@media (min-width: 992px){
  .sq-grid.cols-2{ grid-template-columns: 1.2fr .8fr; }
  .sq-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
}

.sq-divider{ height: 1px; background: var(--sq-border); margin: 18px 0; }

/* Contact */
.sq-contact{ background: linear-gradient(180deg, #ffffff, #f1f5f9); }

.sq-contact .contact-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--sq-border);
  background:#fff;
}

.sq-contact .contact-item i{ color: var(--sq-accent); margin-top: 2px; }

.sq-small{ color: var(--sq-muted); font-size: .95rem; }

/* Legacy headings consistency */
.speaker-title, .sponsor-title, .about-title{
  font-weight: 900 !important;
  color: var(--sq-primary) !important;
  letter-spacing: -0.02em;
}

/* =========================
   NAVBAR – Corporate override
   ========================= */
header, .topbar, .navbar, nav {
  background: #0f172a !important;      /* azul oscuro corporativo */
  color: #e5e7eb !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar a, nav a, header a {
  color: #e5e7eb !important;
  text-decoration: none;
  font-weight: 600;
  opacity: .92;
}

.navbar a:hover, nav a:hover, header a:hover {
  opacity: 1;
}

.navbar .active, nav .active, header .active {
  color: #ffffff !important;
}

/* Opcional: altura + alineación */
.navbar, nav {
  min-height: 64px;
  padding: 10px 18px;
}

/* Si el verde viene de clases bootstrap */
.bg-success, .bg-green, .green, .navbar-success {
  background: #0f172a !important;
}