/*
Theme Name: SETCOL
Author: SETCOL
Version: 1.0.3
Description: Tema corporativo SETCOL (custom)
*/

/* =========================
   VARIABLES
========================= */
:root{
  --bg: #050915;
  --txt: rgba(234,240,255,.92);
  --muted: rgba(234,240,255,.72);
  --line: rgba(255,255,255,.12);
  --card: rgba(255,255,255,.04);
  --shadow: 0 20px 60px rgba(0,0,0,.45);

  --primary: #3aa0ff;
  --primary2:#7c5cff;

  --radius: 18px;

  /* Escala visual unificada */
  --space-1: 10px;
  --space-2: 14px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 44px;
  --space-7: 64px;
  --space-8: 96px;

  --h1: clamp(44px, 5vw, 76px);
  --h2: clamp(30px, 3.4vw, 44px);
  --h3: clamp(20px, 2vw, 26px);
  --p:  clamp(16px, 1.15vw, 18px);

  --text-max: 720px;
  --container: 1140px;
}

/* =========================
   BASE
========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;

  /* Fondo global */
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(58,160,255,.16), transparent 65%),
    radial-gradient(1200px 700px at 88% 12%, rgba(124,92,255,.14), transparent 65%),
    var(--bg);

  color: var(--txt);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{
  max-width: var(--container);
  margin:0 auto;
  padding:0 22px;
}

/* =========================
   SECCIONES (SIN “CORTE”)
   ✅ NO usamos ::before/::after (eran tu problema)
========================= */
.section{
  padding: var(--space-8) 0;
  position: relative;
}
@media(max-width:980px){
  .section{ padding: var(--space-7) 0; }
}

.section h2{
  margin:0 0 var(--space-4);
  font-size: var(--h2);
  letter-spacing:-.02em;
}
.section p{
  margin:0;
  color: var(--muted);
  line-height:1.75;
  font-size: var(--p);
  max-width: var(--text-max);
}

.small{font-size:14px;color:rgba(234,240,255,.68)}
.kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.82);
  font-size:13px;
}

/* Secciones con imagen (CONSERVA IMAGEN + unifica) */
.bg-img{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color: rgba(5,9,21,.55);
  background-blend-mode: multiply;
}

/* =========================
   CARDS / LAYOUT
========================= */
.card{
  border:1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.grid-2{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--space-5);
}
@media(max-width:980px){
  .grid-2{grid-template-columns:1fr}
}

/* =========================
   HEADER / NAV
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(5,9,21,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{
  height:34px;width:auto;
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(0,0,0,.45));
  opacity:.95;
}
.brand span{
  font-weight:900;
  letter-spacing:.03em;
}

.nav{display:flex;align-items:center;gap:18px}
.nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
.nav a{
  color: rgba(234,240,255,.82);
  font-weight:650;
  font-size:14px;
  padding:9px 10px;
  border-radius: 12px;
}
.nav a:hover{background: rgba(255,255,255,.05); color: rgba(234,240,255,.95)}

.nav-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.92);
  border-radius: 12px;
  padding:10px 12px;
  cursor:pointer;
}
@media(max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;left:18px;right:18px;top:68px;display:none}
  .nav.open{display:block}
  .nav ul{
    flex-direction:column;
    background: rgba(5,9,21,.92);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    padding:12px;
  }
  .nav a{display:block;width:100%}
}

/* =========================
   BOTONES
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.92);
  font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06)}
.btn.primary{
  border:none;
  background: linear-gradient(135deg, rgba(58,160,255,.96), rgba(124,92,255,.88));
}
.btn.ghost{background: transparent;}
.btn.sm{padding:10px 12px; border-radius: 12px; font-weight:800}

/* =========================
   HERO (escala unificada)
========================= */
.hero{
  min-height: 85vh;
  padding: 120px 0;
  display:flex;
  align-items:center;
}
.hero-left{max-width:720px}
.hero h1{
  margin:0;
  font-size: var(--h1);
  letter-spacing:-.04em;
  line-height:1;
}
.hero p{
  margin-top: var(--space-3);
  font-size: 20px;
  color: rgba(234,240,255,.80);
  max-width: 620px;
}
.hero-actions{
  margin-top: var(--space-5);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media(max-width:980px){
  .hero{min-height:75vh; padding: 90px 0;}
}

/* =========================
   SLIDER SERVICIOS
========================= */
.sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.slider{overflow:hidden}
.slider-track{
  display:flex;
  gap: var(--space-4);
  scroll-snap-type: x mandatory;
  overflow:auto;
  padding-bottom:10px;
  -webkit-overflow-scrolling: touch;
}
.slider-track::-webkit-scrollbar{height:8px}
.slide{
  min-width: 340px;
  max-width: 340px;
  scroll-snap-align: start;
  padding: var(--space-5);
}
@media(max-width:520px){
  .slide{min-width:86vw; max-width:86vw;}
}
.slide h3{margin:0 0 8px;font-size: var(--h3);letter-spacing:-.01em}
.slide p{margin:0;color:rgba(234,240,255,.72);line-height:1.6}
.actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.slide-cta{border-color: rgba(58,160,255,.25)}
.slider-controls{display:flex;gap:10px}
.slider-dots{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.slider-dots button{
  width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}
.slider-dots button.active{
  background: linear-gradient(135deg, rgba(58,160,255,.95), rgba(124,92,255,.85));
  border-color: transparent;
}

/* ================================
   COBERTURA (MAPA + LISTA 2 COL)
   ✅ Esto ES lo que debe aplicar en /cobertura/
=============================== */
.section-cobertura{
  /* si quieres que esta sección tenga algo diferente, ok,
     pero NO uses otro gradiente vertical fuerte */
  background: transparent;
}

.cobertura-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items:start;
}
@media (max-width: 992px){
  .cobertura-grid{ grid-template-columns:1fr; gap: 24px; }
}

#mapa-colombia{
  width:100%;
  height: 420px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  margin-top: var(--space-4);
}
@media (max-width: 992px){
  #mapa-colombia{ height: 360px; }
}

.mapa-ayuda{
  display:block;
  color:#9fb4ff;
  opacity:.8;
  margin-top: 10px;
}

/* Panel de ciudades */
.cobertura-ciudades{
  background: rgba(255,255,255,0.04);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.06);
}

.cobertura-ciudades h3{ margin: 0 0 16px; }

/* ✅ 2 columnas SIEMPRE, desktop y mobile */
.ciudades-lista{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  list-style:none;
  padding:0;
  margin:0;
}

.ciudades-lista li{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  cursor:pointer;
  transition: all .22s ease;
  font-size: 13.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ciudades-lista li:hover,
.ciudades-lista li.is-active{
  background: linear-gradient(135deg, #4f7cff, #6aa6ff);
  color:#fff;
  transform: translateX(2px);
}

/* Mobile super compacto, PERO sigue en 2 columnas */
@media (max-width: 420px){
  .ciudades-lista li{
    font-size: 12.5px;
    padding: 8px 9px;
  }
}

/* =========================
   FOOTER
========================= */
.footer{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(5,9,21,.72);
  backdrop-filter: blur(10px);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
  flex-wrap:wrap;
}
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{
  display:inline-flex;gap:10px;align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.social img{width:18px;height:18px}

/* =========================
   WHATSAPP FLOTANTE
========================= */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:999;
  width:54px;height:54px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.2);
}
.wa-float img{width:26px;height:26px}