/* ═══════════════════════════════════════════════════════════
   licia-styles.css  –  Design System LICIA
   Overrides sobre el template th- para la marca de licitaciones
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --licia-navy:   #0a1628;
  --licia-blue:   #1a3a6e;
  --licia-accent: #2563eb;
  --licia-light:  #e8f0fe;
  --licia-slate:  #64748b;
  --licia-white:  #ffffff;
  --licia-border: rgba(37, 99, 235, 0.15);
  --licia-glow:   rgba(37, 99, 235, 0.10);
}

/* ── BASE ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'DM Sans', sans-serif; }

/* ── NAV ──────────────────────────────────────────────────── */
.th-header .main-menu ul li a,
.th-header .main-menu.style2 ul li a {
  color: rgba(255,255,255,0.82) !important;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
.th-header .main-menu ul li a:hover,
.th-header .main-menu ul li.active > a {
  color: #60a5fa !important;
}
/* Header glassmorphism base (sobre hero oscuro) */
.menu-area {
  background: rgba(6,14,31,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Header sticky */
.sticky-wrapper.sticky {
  background: rgba(6,14,31,0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(99,153,255,0.12) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

/* ── HERO ─────────────────────────────────────────────────── */
.th-hero-wrapper.hero-8 {
  background: linear-gradient(135deg, #060e1f 0%, #0a1628 55%, #0d1f42 100%);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
/* Canvas de partículas */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; width: 100%; }

/* Orbes decorativos */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  z-index: 0;
}
.hero-orb-1 {
  width: 500px; height: 500px;
  top: -100px; right: -80px;
  background: radial-gradient(circle, rgba(37,99,235,0.22) 0%, transparent 70%);
}
.hero-orb-2 {
  width: 320px; height: 320px;
  bottom: 0; left: -60px;
  background: radial-gradient(circle, rgba(16,50,140,0.30) 0%, transparent 70%);
}

/* Títulos hero – blancos brillantes */
.hero-style8 .hero-title {
  color: #ffffff !important;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}
.hero-style8 .hero-title h4 {
  color: rgba(255,255,255,0.72) !important;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  margin-top: 16px;
  letter-spacing: 0;
}

/* Pill badge */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37,99,235,0.18);
  border: 1px solid rgba(99,153,255,0.35);
  color: #93b4fd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
}
.hero-pill i { font-size: 10px; color: #60a5fa; }

/* Hero stats glassmorphism */
.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 36px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  width: fit-content;
}
.hero-stat { display: flex; flex-direction: column; gap: 3px; }
.hero-stat strong {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.04em;
}
.hero-stat span {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-stat-divider {
  width: 1px;
  background: rgba(255,255,255,0.10);
  align-self: stretch;
}

/* ── PAINS SECTION ────────────────────────────────────────── */
#pains-section {
  background: linear-gradient(180deg, #f5f8ff 0%, #edf2ff 100%);
  padding-top: 100px;
  padding-bottom: 80px;
}
#pains-section .box-item {
  background: #ffffff;
  border: 1px solid rgba(37,99,235,0.12);
}
#pains-section .box-item .text h4 { color: #1e293b; }
#pains-section .box-item .icon   { color: var(--licia-accent); }

/* ── BOX ITEMS (global) ───────────────────────────────────── */
.box-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 18px;
  border-radius: 12px;
  border: 1px solid var(--licia-border);
  background: rgba(255,255,255,0.03);
  transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
  margin-bottom: 16px;
}
.box-item:hover {
  border-color: rgba(37,99,235,0.40);
  background: var(--licia-glow);
  box-shadow: 0 6px 28px rgba(37,99,235,0.12);
  transform: translateY(-2px);
}
.box-item .icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(37,99,235,0.20), rgba(37,99,235,0.06));
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,0.22);
  color: var(--licia-accent);
  font-size: 17px;
  transition: transform 0.25s ease;
}
.box-item .text { flex: 1; }
.box-item .text h4 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

/* ── SEGMENTS SECTION ─────────────────────────────────────── */
#segments-section { padding: 0; overflow: hidden; }
#segments-section > .container {
  padding-top: 100px;
  padding-bottom: 48px;
}
#segments-section > .container .text-center img { margin-bottom: 20px; }
#segments-section > .container img { opacity: 0.92; }

/* Panels alternados oscuro / claro */
.segment-panel {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
/* Panel oscuro */
.segment-panel.panel-dark {
  background: linear-gradient(135deg, #07101e 0%, #0c1d3a 60%, #0e2147 100%);
  color: #ffffff;
}
.segment-panel.panel-dark .brand-title,
.segment-panel.panel-dark h2 { color: #ffffff !important; }
.segment-panel.panel-dark .t-description { color: rgba(255,255,255,0.65) !important; }
.segment-panel.panel-dark .box-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(99,153,255,0.18);
}
.segment-panel.panel-dark .box-item .text h4 { color: rgba(255,255,255,0.88); }
.segment-panel.panel-dark .box-item:hover {
  background: rgba(37,99,235,0.12);
  border-color: rgba(99,153,255,0.40);
}
/* Panel claro */
.segment-panel.panel-light {
  background: linear-gradient(135deg, #f0f5ff 0%, #e8effc 100%);
}
.segment-panel.panel-light .box-item {
  background: #ffffff;
  border-color: rgba(37,99,235,0.12);
  box-shadow: 0 2px 12px rgba(37,99,235,0.06);
}
.segment-panel.panel-light .box-item .text h4 { color: #1e293b; }

/* Número gigante decorativo */
.module-bg-number {
  position: absolute;
  font-size: clamp(120px, 18vw, 220px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.panel-dark .module-bg-number  { color: rgba(37,99,235,0.06); right: -20px; top: 20px; }
.panel-light .module-bg-number { color: rgba(37,99,235,0.07); right: -20px; top: 20px; }
.segment-panel > .container { position: relative; z-index: 1; }

/* Glow orb decorativo en panels oscuros */
.panel-dark::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.panel-dark:nth-child(odd)::before  { top: -80px; left: -80px; }
.panel-dark:nth-child(even)::before { bottom: -80px; right: -80px; }

/* Step badge */
.step-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.panel-dark  .step-badge  { color: #60a5fa; }
.panel-light .step-badge  { color: var(--licia-accent); }
.step-badge::before {
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
}
.panel-dark  .step-badge::before { background: #60a5fa; }
.panel-light .step-badge::before { background: var(--licia-accent); }

/* ── FEATURES SECTION ─────────────────────────────────────── */
#features-section {
  background: #f8faff;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* ── FOUNDER / TEAM ───────────────────────────────────────── */
#founder-section { padding-top: 100px; }
.feature-card.style2 {
  border: 1px solid rgba(37,99,235,0.12);
  border-radius: 16px;
  background: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card.style2:hover {
  box-shadow: 0 16px 48px rgba(37,99,235,0.14);
}

/* ── CTA SECTION ──────────────────────────────────────────── */
.bg-cta {
  background: linear-gradient(135deg, #060e1f 0%, #0c1d3a 50%, #1a3a6e 100%) !important;
  position: relative;
  overflow: hidden;
}
.bg-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.bg-cta::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.18) 0%, transparent 65%);
  filter: blur(80px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ── FOOTER ───────────────────────────────────────────────── */
footer { background: #060e1f; }
footer .copyright-text { color: rgba(255,255,255,0.35); font-size: 13px; }

/* ── FALLBACK: visible sin JS ─────────────────────────────── */
.hero-style8 .hero-title,
.hero-style8 .hero-title h4,
.hero-style8 .btn-group a,
.th-hero-thumb,
.th-header { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  .hero-style8 .hero-title { font-size: clamp(26px, 4vw, 40px); }
  .segment-panel { padding: 80px 0; }
}

@media (max-width: 991px) {
  .th-hero-wrapper.hero-8  { min-height: auto; padding: 120px 0 60px; }
  .hero-stats              { gap: 20px; padding: 16px 20px; }
  .hero-stat strong        { font-size: 20px; }
  /* Deshabilitar parallax en tablet/mobile */
  #hero-thumb              { margin-top: 40px; transform: none !important; }
  .hero-orb-1, .hero-orb-2{ transform: none !important; }
  #hero-canvas             { opacity: 1 !important; }
  .segment-panel           { padding: 64px 0; }
  .module-bg-number        { font-size: clamp(80px, 22vw, 140px); }
  #pains-section           { padding-top: 80px; padding-bottom: 60px; }
  #features-section        { padding-top: 80px; padding-bottom: 80px; }
  .th-header .th-btn       { font-size: 13px !important; }
}

@media (max-width: 767px) {
  .th-hero-wrapper.hero-8          { padding: 100px 0 50px; }
  .hero-style8 .hero-title         { font-size: clamp(22px, 6vw, 32px); line-height: 1.2; }
  .hero-style8 .hero-title h4      { font-size: 15px; margin-top: 12px; }
  .hero-pill                       { font-size: 10px; padding: 6px 12px; }
  .hero-stats                      { flex-wrap: wrap; gap: 16px; width: 100%; }
  .hero-stat-divider               { display: none; }
  .th-btn.style-radius             { font-size: 13px; padding: 10px 18px; }
  .segment-panel                   { padding: 50px 0; }
  .module-bg-number                { font-size: 80px; }
  .box-item                        { padding: 14px; gap: 12px; }
  .box-item .icon                  { width: 38px; height: 38px; font-size: 15px; }
  .box-item .text h4               { font-size: 13px; }
  #pains-section                   { padding-top: 60px; padding-bottom: 50px; }
  .space                           { padding-top: 60px !important; padding-bottom: 60px !important; }
  .space-bottom                    { padding-bottom: 60px !important; }
  #founder-section .feature-card-wrap2 { margin-bottom: 24px; }
  .feature-card.style2             { padding: 24px 20px !important; }
  #cta-section h2                  { font-size: clamp(20px, 5vw, 28px) !important; }
  #features-section                { padding-top: 60px; padding-bottom: 60px; }
  #segments-section > .container  { padding-top: 60px; padding-bottom: 32px; }
}

@media (max-width: 480px) {
  .hero-style8 .hero-title { font-size: 22px; }
  .hero-stats              { padding: 12px 16px; }
  .hero-stat strong        { font-size: 18px; }
  .hero-stat span          { font-size: 9px; }
  .hero-pill               { font-size: 9px; }
  .scroll-top              { bottom: 16px !important; right: 16px !important; }
}