/* ==========================================================================
   coverage-landing.css — Cobertura (100% mobile-first)
   Requiere Bootstrap. Opcional: AOS. Sin Swiper.
   ========================================================================== */

/* --------------------- Variables y base --------------------- */
:root{
  --brand:#2563eb;          /* azul */
  --brand-2:#60a5fa;        /* azul claro (degradé / progress) */
  --accent:#f97316;         /* naranja */
  --ink:#0f172a;            /* texto principal */
  --muted:#64748b;          /* texto secundario */
  --line:#e2e8f0;           /* bordes suaves */
  --bg:#ffffff;             /* fondo base */
  --bg-soft:#f8fafc;        /* secciones suaves */

  --radius-2xl: 1.25rem;
  --shadow-sm: 0 6px 16px rgba(2,6,23,.06);
  --shadow-md: 0 14px 40px rgba(2,6,23,.10);

  --success:#16a34a;
  --danger:#dc2626;

  /* Logos (si usas el marquee) */
  --brand-logo-h: 44px;
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior:smooth; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin:0;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--brand); }
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset:2px;
}
.fw-extrabold{ font-weight:800 !important; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* --------------------- Preloader --------------------- */
.preloader{
  position:fixed; inset:0; display:grid; place-items:center;
  background:#fff; z-index:10000;
  transition: opacity .3s ease, visibility .3s ease;
}
.preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.spinner{
  width:56px; height:56px; border-radius:50%;
  border:4px solid #e2e8f0; border-top-color: var(--brand);
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* --------------------- Reading progress --------------------- */
.reading-progress{
  position:fixed; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform-origin:0 50%; transform: scaleX(0);
  z-index:1200; will-change: transform;
}

/* --------------------- Header --------------------- */
#header{
  position:sticky; top:0; z-index:900;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom:1px solid rgba(2,6,23,.06);
}
#header .nav-link{ font-weight:600; }
.btn-cta{ border-radius:999px; padding:.6rem 1rem; font-weight:800; }
#header .nav-link.active,
#header .nav-link:hover{ color: var(--brand); }
#header .nav-link.active{ position:relative; }
#header .nav-link.active::after{
  content:""; position:absolute; left:.4rem; right:.4rem; bottom:.2rem;
  height:2px; background: var(--brand); border-radius:2px;
}

/* Offcanvas */
.offcanvas .list-unstyled a{ color: var(--ink); }
.offcanvas .list-unstyled a:hover{ color: var(--brand); }

/* --------------------- HERO con mapa de fondo --------------------- */
/* Rutas relativas desde /assets/css/ hacia /assets/img/cobertura */
:root{
  --hero-map-size-desktop: min(70vw, 1200px);
  --hero-map-pos-desktop: right center;
  --hero-map-size-mobile: 160%;
  --hero-map-pos-mobile: center 18%;
}
.cl-hero{
  position:relative; overflow:hidden;
  padding-block: clamp(40px, 6vw, 88px);
  min-height: clamp(420px, 72vh, 820px);
  background-image: url("../img/cobertura/mapa.jpg");
  background-repeat:no-repeat;
  background-size: var(--hero-map-size-desktop);
  background-position: var(--hero-map-pos-desktop);
}
.cl-hero > .container{ position:relative; z-index:1; }
.cl-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.78) 22%,
    rgba(255,255,255,.40) 40%,
    rgba(255,255,255,0) 58%);
  pointer-events:none;
}
@media (max-width: 991.98px){
  .cl-hero{
    min-height: 64vh;
    background-size: var(--hero-map-size-mobile);
    background-position: var(--hero-map-pos-mobile);
  }
  .cl-hero::after{
    background: linear-gradient(180deg,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.70) 32%,
      rgba(255,255,255,.16) 72%,
      rgba(255,255,255,0) 100%);
  }
}

/* Texto del hero */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.9rem; letter-spacing:.02em;
  color: var(--brand);
  background:#eef2ff; border:1px solid #e2e8f0;
  padding:.35rem .6rem; border-radius:999px;
}
.display-title{
  font-weight:800;
  font-size: clamp(32px, 5.5vw, 56px);
  line-height:1.05; letter-spacing:-.02em;
  text-wrap: balance;
}
.lead-muted{ color: var(--muted); font-size: clamp(.98rem, 2.6vw, 1.08rem); }
.accent{ color: var(--brand); }

/* Chips de confianza */
.trust-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .75rem; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-weight:600; font-size:.95rem;
}

/* --------------------- KPIs --------------------- */
.cl-kpis{ padding:28px 0; }
.kpi{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px; display:flex; flex-direction:column; gap:.25rem;
  box-shadow: var(--shadow-sm);
}
.kpi i{ color: var(--brand); font-size:1.4rem; }
.kpi h3{ margin:0; font-weight:800; }

/* --------------------- Cobertura (mosaico) --------------------- */
.cl-coverage .coverage-grid{
  display:grid; gap:20px;
  grid-template-columns: 1fr;          /* Mobile */
}
@media (min-width: 992px){
  .cl-coverage .coverage-grid{ grid-template-columns: 1.6fr 1fr; }
}
.cov-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:16px 18px; box-shadow: var(--shadow-sm);
}
.cov-head, .cov-title{ display:flex; align-items:center; gap:12px; }
.cov-title i, .cov-head i{ font-size:1.5rem; color: var(--brand); }
.cov-kpis{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cov-card .chip{ font-size:.92rem; }

/* Card principal (Mérida) con más presencia en desktop */
.cov-card.metro{
  display:flex; flex-direction:column; gap:12px;
}
@media (min-width: 992px){
  .cov-card.metro{ grid-row: span 2; }
}

/* Península “En expansión” */
.cov-card.peninsula.is-soon{
  background: linear-gradient(180deg, #fff, #fffdf7);
  border-color:#ffe4b5;
}
.cov-card.peninsula .ribbon{
  position:absolute; top:12px; right:-8px;
  background:#fff7e6; color:#9a6b00;
  border:1px solid #ffd591; padding:.25rem .6rem;
  border-radius:999px; font-weight:700; font-size:.75rem;
}
.soon-chips .chip{ opacity:.75; filter:grayscale(35%); }

/* --------------------- Logos (marquee sin JS) --------------------- */
.cl-logos{ padding:50px 0 20px; background: linear-gradient(180deg,#fff 0,#f7fafc 100%); }
.marquee{ overflow:hidden; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.track{
  display:flex; align-items:center; gap:36px;
  animation: scroll 24s linear infinite; will-change: transform;
}
.track img{ height: var(--brand-logo-h); width:auto; filter:grayscale(100%); opacity:.82; }
.track img:hover{ filter:none; opacity:1; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .track{ animation:none; } }

/* --------------------- CTA “glass” --------------------- */
.cl-cta{ padding:48px 0; }
.cta-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
  backdrop-filter: blur(6px);
  border-radius:18px; padding:18px 20px; box-shadow: var(--shadow-sm);
}
.muted{ color: var(--muted); }
@supports (color: color-mix(in srgb, white, black)){
  .cta-card{ border-color: color-mix(in srgb, var(--brand) 18%, #e2e8f0); }
}

/* --------------------- Contacto --------------------- */
.cl-contact{ padding:56px 0; background:#fff; }
.contact-card{
  background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:18px; box-shadow: var(--shadow-sm);
}
.form-control, .form-select{ border:1px solid var(--line); }
.form-control:focus, .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* --------------------- Footer --------------------- */
.cl-footer{
  border-top:1px solid var(--line); background:#fff;
  padding:16px 0;
}
.cl-footer a:hover{ color: var(--brand); }

/* --------------------- Toast flotante --------------------- */
.toast-floating{
  position:fixed; left:50%; bottom:22px; transform: translateX(-50%) translateY(10px);
  opacity:0; pointer-events:none; transition: opacity .25s, transform .25s;
  z-index:2200; background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow-md); border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; gap:10px; color: var(--ink);
}
.toast-floating.show{ opacity:1; transform: translateX(-50%) translateY(0); pointer-events:auto; }
.toast-floating.success .icon{ color: var(--success); }
.toast-floating.danger .icon{ color: var(--danger); }
.toast-floating .close{ background:transparent; border:0; font-size:18px; opacity:.6; cursor:pointer; }

/* --------------------- Side rail (móvil) --------------------- */
.side-rail{
  position:fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  display:flex; flex-direction:column; gap:8px;
  z-index:1100; pointer-events:auto;
}
.rail-btn{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  touch-action: manipulation;
}
.rail-btn i{ font-size:18px; }
.rail-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
.rail-btn.brand{ background: var(--brand); color:#fff; border-color:transparent; }
.rail-btn.whatsapp{ background:#22c55e; color:#fff; border-color:transparent; }
@media (min-width: 992px){ .side-rail{ display:none !important; } }
@media (max-width: 360px){
  .side-rail{ right:8px; bottom:8px; gap:6px; }
  .rail-btn{ width:40px; height:40px; }
}

/* --------------------- Mobile tuning --------------------- */
@media (max-width: 991.98px){
  .cta-card{ padding:16px; }
}
@media (max-width: 767.98px){
  html, body{ width:100%; overflow-x:clip; }
  .cl-hero{ padding-block: 36px; }
  .kpi{ padding:14px; }
  .contact-card{ padding:16px; }
}