/* ============================================================
   /BagWeb/css/construccion.css
   Unificado (site + home + ajustes template)
   - No reemplaza Bootstrap (assets/css/bootstrap.min.css)
   - Compatible con tu header: .header / #navmenu.navmenu / .mobile-nav-toggle
   ============================================================ */

/* ---------- Variables base (tema claro por defecto) ---------- */
:root{
  --bag-red:#e01e37;
  --bag-orange:#ff7a00;
  --bag-primary:#0d6efd;

  --bag-text:#24324a;
  --bag-muted:#6c757d;
  --bag-bg:#ffffff;

  --bag-shadow:0 6px 18px rgba(0,0,0,.06);
  --bag-shadow-strong:0 10px 30px rgba(0,0,0,.10);

  --bag-radius: 18px;
}

/* ---------- (Opcional) tema oscuro “habilitable” con body.theme-dark ---------- */
body.theme-dark{
  --bag-bg:#111827;
  --bag-text:#f5f5f5;
  --bag-muted:#9ca3af;
  --bag-shadow:0 10px 25px rgba(0,0,0,.40);
}

/* ---------- Reset suave ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  line-height:1.6;
  color:var(--bag-text);
  background:var(--bag-bg);
}
a{ color: var(--bag-primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Accesibilidad ---------- */
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  padding:.5rem .75rem;
  background:#000;
  color:#fff;
  z-index:2000;
  border-radius:.5rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{
  outline: 3px solid rgba(13,110,253,.55);
  outline-offset: 2px;
}

/* ---------- Helpers layout ---------- */
.main-offset{ margin-top:80px; }
@media (max-width:575.98px){
  .main-offset{ margin-top:72px; }
}

/* ============================================================
   HEADER / NAV (tu estructura actual)
   header: <header id="header" class="header ... fixed-top">
   nav:    <nav id="navmenu" class="navmenu"> ... <i class="mobile-nav-toggle ...">
   ============================================================ */
.header{
  background:#fff;
  box-shadow: var(--bag-shadow);
  z-index:1030;
}
body.theme-dark .header{
  background:#1f2937;
}
.header .logo img{ max-height:40px; width:auto; display:block; }
.header .logo h1{
  margin:0;
  font-weight:800;
  letter-spacing:.2px;
  color: var(--bag-primary);
}
body.theme-dark .header .logo h1{ color:#fff; }

/* navmenu base */
.navmenu ul{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.navmenu a{
  display:block;
  padding:10px 14px;
  border-radius:10px;
  color:#374151;
  text-decoration:none;
  font-weight:600;
}
.navmenu a:hover,
.navmenu a.active{
  background:#f5f7fb;
  color: var(--bag-primary);
  text-decoration:none;
}
body.theme-dark .navmenu a{ color:#e5e7eb; }
body.theme-dark .navmenu a:hover,
body.theme-dark .navmenu a.active{
  background: rgba(255,255,255,.08);
  color: #fff;
}

.mobile-nav-toggle{
  font-size:28px;
  cursor:pointer;
  line-height:1;
}

/* Mobile behavior (si tu template usa body.mobile-nav-active) */
@media (max-width: 991.98px){
  .navmenu ul{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  body.mobile-nav-active #navmenu{
    position:fixed;
    top:70px;
    right:0;
    left:0;
    background:#fff;
    padding:10px 16px;
    box-shadow: var(--bag-shadow);
  }
  body.theme-dark.mobile-nav-active #navmenu{
    background:#1f2937;
  }
}

/* Header cuando scrolleás (si tu JS pone body.scrolled) */
body.scrolled .header{
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* ============================================================
   SECCIONES / UTILIDADES
   ============================================================ */
.section{ padding:40px 0; }
.section h2, .section h3{ font-weight:800; }
.section p{ color:#4b5563; }
body.theme-dark .section p{ color:#cbd5e1; }

.section-title h2{ font-weight:800; }

/* fondos del template (por si existen clases) */
.dark-background{ background:#0b1014; color:#fff; }
.light-background{ background:#f8f9fb; }

/* ============================================================
   HOME: HERO + BOTONES + BADGES + SERVICIOS + KPI + WORK + CTA
   (unifica tu home.css + ajustes carousel)
   ============================================================ */

/* Hero */
#hero{ position:relative; isolation:isolate; }
#hero .hero-bg{
  object-fit:cover;
  width:100%;
  height:80vh;
  min-height:520px;
  filter:brightness(0.75);
}
#hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,82,0,.60), rgba(255,0,0,.50), rgba(0,0,0,.35));
  mix-blend-mode:multiply;
  z-index:1;
}
#hero .container{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  text-align:center;
  padding:2rem;
}
#hero h1, #hero h2{
  font-weight:800;
  letter-spacing:.5px;
  text-shadow:0 6px 22px rgba(0,0,0,.35);
}
#hero .lead{
  max-width:900px;
  margin:.75rem auto 1.25rem;
  font-size:1.125rem;
  opacity:.95;
}

/* Carousel indicators (Bootstrap usa botones) */
.carousel-indicators{
  gap:8px;
}
.carousel-indicators [data-bs-target]{
  width:10px;
  height:10px;
  border-radius:50%;
  opacity:.65;
}
.carousel-indicators .active{
  opacity:1;
}

/* Botones home */
.btn-cta{
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-font-size: 1rem;
  border-radius:999px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.3px;
  box-shadow:0 10px 24px rgba(255, 86, 48, .35);
}
.btn-ghost{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  color:#fff;
}

/* Badge soft */
.badge-soft{
  background:linear-gradient(135deg, rgba(255,82,0,.12), rgba(255,0,0,.10));
  border:1px solid rgba(255,82,0,.28);
  color:#ffefe8;
  font-weight:600;
  padding:.4rem .7rem;
  border-radius:999px;
}

/* Servicios */
.service-card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:1.25rem;
  transition:transform .25s ease, box-shadow .25s ease;
  background:#fff;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}
.service-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:1.6rem;
  margin-bottom:.75rem;
  background:linear-gradient(135deg, rgba(255,82,0,.15), rgba(255,0,0,.12));
  border:1px solid rgba(255,82,0,.25);
}

/* KPI */
.kpi{
  border-radius:1rem;
  padding:1rem .9rem;
  border:1px dashed rgba(255,82,0,.25);
  background: linear-gradient(180deg, rgba(255,82,0,.06), rgba(255,82,0,.03));
}

/* Work */
.work-bg{
  object-fit:cover;
  height:460px;
}

/* CTA ribbon */
.cta-ribbon{
  background:linear-gradient(120deg, #ff3b00, #ff7a00);
  color:#fff;
  border-radius:1.25rem;
}

/* WhatsApp flotante */
.wa-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1040;
}
.wa-fab a{
  display:inline-grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  font-size:1.6rem;
  box-shadow:0 12px 28px rgba(37,211,102,.35);
  text-decoration:none;
}
.wa-fab a:hover{ filter:brightness(1.02); text-decoration:none; }
.wa-fab a:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:3px;
}

/* Back to top (tu footer lo usa) */
.back-to-top{
  position:fixed;
  right:16px;
  bottom:92px;
  width:42px;
  height:42px;
  border-radius:999px;
  background: var(--bag-primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .2s ease;
  z-index:1040;
  text-decoration:none;
}
.back-to-top.active{
  opacity:1;
  visibility:visible;
}
.back-to-top:hover{ filter:brightness(1.03); text-decoration:none; }

/* Responsive */
@media (max-width: 991.98px){
  #hero .hero-bg{ height:68vh; }
  .work-bg{ height:320px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .service-card{ transition:none; }
  .service-card:hover{ transform:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:#f8f9fb;
}
.footer a{
  color: var(--bag-primary);
}
body.theme-dark .footer{
  background:#0f161c;
}
body.theme-dark .footer,
body.theme-dark .footer a{
  color:#e5e7eb;
}