/* ============================================================
   www.tecnopacific.com — components.css   Botones, secciones, banners
   ============================================================ */

/* ── BOTONES ── */
.btn-primary { background:var(--orange); color:#fff; padding:13px 32px; border-radius:8px; font-weight:700; font-size:14px; border:none; cursor:pointer; box-shadow:0 4px 18px rgba(232,123,30,.3); transition:.3s; display:inline-block; }
.btn-primary:hover { background:var(--orange-lt); transform:translateY(-2px); box-shadow:0 8px 28px rgba(232,123,30,.38); }
.btn-outline { background:transparent; color:var(--blue-mid); padding:13px 32px; border-radius:8px; font-weight:600; font-size:14px; border:2px solid var(--blue-mid); cursor:pointer; transition:.3s; display:inline-block; }
.btn-outline:hover { background:var(--blue-mid); color:#fff; }
.btn-ghost { background:rgba(6, 136, 17, 0.488); color:#fff; padding:13px 32px; border-radius:8px; font-weight:600; font-size:14px; border:2px solid rgba(255,255,255,.35); cursor:pointer; transition:.3s; display:inline-block; }
.btn-ghost:hover { background:rgba(255,255,255,.18); border-color:#fff; }
.btn-sm { padding:9px 20px; font-size:13px; border-radius:6px; }

/* ── SECCIONES ── */
.sec-tag { display:inline-block; color:var(--orange); font-size:16px; letter-spacing:3px; text-transform:uppercase; font-weight:700; margin-bottom:10px; }
.sec-head { text-align:center; margin-bottom:56px; }
.sec-head h2 { font-family:'Montserrat',sans-serif; font-size:clamp(26px,4vw,46px); font-weight:800; color:var(--text); letter-spacing:-1px; }
.sec-head p { color:var(--muted); font-size:15px; margin-top:12px; line-height:1.75; max-width:500px; margin-left:auto; margin-right:auto; }
.sec { padding:96px 56px; }
.sec.alt { background:var(--bg); }
.sec-inner { max-width:1180px; margin:0 auto; }

/* ── PAGE BANNER ── */
.pg-banner { padding:108px 56px 56px; background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%); position:relative; overflow:hidden; }
.pg-banner::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(91,168,212,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(91,168,212,.06) 1px,transparent 1px); background-size:44px 44px; }
.pg-banner::after { content:''; position:absolute; top:-80px; right:-80px; width:320px; height:320px; border-radius:50%; border:60px solid rgba(91,168,212,.06); }
.pg-banner-inner { position:relative; z-index:2; max-width:1180px; margin:0 auto; }
.pg-banner-tag { color:rgba(245,160,82,.85); font-size:16px; letter-spacing:3px; text-transform:uppercase; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--orange); display:inline-block; animation:pulse 2s infinite; }
.pg-banner h1 { font-family:'Montserrat',sans-serif; font-size:clamp(28px,5vw,58px); font-weight:800; line-height:1.05; letter-spacing:-1.5px; color:#fff; margin-bottom:14px; }
.pg-banner h1 span { color:var(--orange); }
.pg-banner p { color:rgba(255,255,255,.62); font-size:15px; line-height:1.75; max-width:560px; }
.breadcrumb-banner { display:flex; align-items:center; gap:8px; margin-top:24px; font-size:12px; }
.breadcrumb-banner a { color:rgba(255,255,255,.5); text-decoration:none; transition:.2s; }
.breadcrumb-banner a:hover { color:var(--orange-lt); }
.breadcrumb-banner span { color:rgba(255,255,255,.3); }
.breadcrumb-banner strong { color:rgba(255,255,255,.8); }

/* ── CTA DARK ── */
.cta-dark { background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%); padding:80px 56px; text-align:center; position:relative; overflow:hidden; }
.cta-dark::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(91,168,212,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,168,212,.05) 1px,transparent 1px); background-size:40px 40px; }
.cta-dark-inner { position:relative; z-index:2; }
.cta-dark h2 { font-family:'Montserrat',sans-serif; font-size:clamp(24px,4vw,46px); font-weight:800; color:#fff; margin-bottom:12px; letter-spacing:-1px; }
.cta-dark p { color:rgba(255,255,255,.65); font-size:15px; line-height:1.75; margin-bottom:32px; max-width:520px; margin-left:auto; margin-right:auto; }
.cta-dark .btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ── SIDEBAR CARDS ── */
.svc-sidebar-block { background:#fff; border:1.5px solid var(--border); border-radius:var(--card-r); padding:24px; margin-bottom:20px; }
.svc-sidebar-block h4 { font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; color:var(--text); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.svc-nav-link { display:block; padding:9px 0; font-size:13px; color:var(--muted); border-bottom:1px solid #F0F4F8; transition:.2s; text-decoration:none; }
.svc-nav-link:last-child { border:none; }
.svc-nav-link:hover, .svc-nav-link.active { color:var(--orange); }
.svc-nav-link.active { font-weight:700; }


/* ══ RESET Y BASE ══ */
*, *::before, *::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

#app { padding-top:var(--nav-h); }

/* ══ HERO ══ */
.hero {
  min-height:calc(100vh - var(--nav-h));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding:80px 56px;
  background:#fff;
  position:relative;
  overflow:hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 48%;
  height: 100%;
  /* La imagen se inyecta dinámicamente por components.js
     según la hora local del visitante:
     🌅 Día  (6–18h): Buenaventura-futuro-dia.jpeg
     🌙 Noche (19–5h): Buenaventura-futuro.jpeg        */
  background: linear-gradient(135deg, #F5F7FF, #EBF0FF); /* fallback */
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
  transition: width .4s ease, clip-path .4s ease;
}

.hero-left { position:relative; z-index:2; }
.hero-right { position:relative; z-index:2; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--orange-bg); border:1px solid rgba(232,123,30,.2);
  padding:6px 16px; border-radius:100px;
  font-size:11px; font-weight:600; color:var(--orange);
  letter-spacing:1px; text-transform:uppercase; margin-bottom:24px;
}
.hero h1 {
  font-family:'Montserrat',sans-serif;
  font-size:clamp(34px,5vw,62px);
  font-weight:800; line-height:1.04;
  letter-spacing:-2px; margin-bottom:20px;
}
.hero h1 .o { color:var(--orange); }
.hero h1 .b { color:var(--blue-mid); }
.hero-sub {
  font-size:15px; line-height:1.85;
  color:var(--text);
   max-width:440px; 
   margin-bottom:36px;
   font-weight: bold;
}
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.hero-trust {
  display:flex; align-items:center; gap:18px;
  margin-top:40px; padding-top:30px;
  border-top:1px solid var(--border); flex-wrap:wrap;
}
.ht-item .ht-n {
  font-family:'Montserrat',sans-serif;
  font-size:24px; font-weight:800;
  color:var(--blue-mid); line-height:1;
}
.ht-item .ht-l {
  font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; margin-top:2px;
}
.ht-div { width:1px; height:28px; background:var(--border); }

/* Hero derecha — grid de servicios */
.hero-svc-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.hero-svc-card {
  background:#fff; border:1.5px solid var(--border);
  border-radius:12px; padding:18px 16px;
  cursor:pointer; transition:.3s;
  position:relative; overflow:hidden;
  text-decoration:none; display:block;
}
.hero-svc-card:hover {
  border-color:transparent; transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(0,0,0,.09);
}
.hero-svc-icon { font-size:24px; margin-bottom:8px; display:block; }
.hero-svc-title {
  font-family:'Montserrat',sans-serif;
  font-size:13px; font-weight:700;
  color:var(--text); margin-bottom:4px; line-height:1.2;
}
.hero-svc-sub { font-size:11px; color:var(--muted); line-height:1.4; }

/* ══ SECCIÓN POR QUÉ ELEGIRNOS ══ */
.por-que-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.val-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:24px;
}
.val-card {
  background:var(--bg); border-radius:12px;
  padding:18px 16px; border:1.5px solid var(--border);
  transition:.25s;
}
.val-card:hover { border-color:var(--orange); }
.val-card-title {
  font-family:'Montserrat',sans-serif;
  font-size:13px; font-weight:700;
  color:var(--blue-mid); margin-bottom:4px;
}
.val-card-desc { font-size:12px; color:var(--muted); line-height:1.5; }
.por-que-img {
  border-radius:20px; overflow:hidden;
  box-shadow:0 20px 56px rgba(26,37,112,.15);
}
.por-que-img img {
  width:100%; height:460px; object-fit:cover;
}

/* ══ SERVICIOS GRID ══ */
.svc-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:40px;
}
.svc-card {
  background:#fff; border:1.5px solid var(--border);
  border-radius:var(--card-r); overflow:hidden;
  transition:.35s; text-decoration:none; display:block;
}
.svc-card:hover {
  border-color:transparent; transform:translateY(-6px);
  box-shadow:0 20px 56px rgba(0,0,0,.1);
}
.svc-card-img { height:180px; overflow:hidden; position:relative; }
.svc-card-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s;
}
.svc-card:hover .svc-card-img img { transform:scale(1.06); }
.svc-card-color {
  position:absolute; bottom:0; left:0; right:0; height:4px;
}
.svc-card-body { padding:20px 22px; }
.svc-card-body h3 {
  font-family:'Montserrat',sans-serif;
  font-size:15px; font-weight:700;
  margin-bottom:7px; color:var(--text);
}
.svc-card-body p {
  font-size:13px; color:var(--muted); line-height:1.6;
}
.svc-card-link {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:14px; font-size:12px; font-weight:700;
  color:var(--orange);
}

/* ══ CASOS PREVIEW ══ */
.casos-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.caso-card {
  border:1.5px solid var(--border); border-radius:var(--card-r);
  overflow:hidden; transition:.35s;
  text-decoration:none; display:block;
}
.caso-card:hover {
  border-color:transparent; transform:translateY(-4px);
  box-shadow:0 14px 44px rgba(0,0,0,.1);
}
.caso-img-w { height:210px; position:relative; overflow:hidden; }
.caso-img-w img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s;
}
.caso-card:hover .caso-img-w img { transform:scale(1.05); }
.caso-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.08));
}
.caso-badge {
  position:absolute; top:12px; left:12px;
  color:#fff; padding:3px 12px; border-radius:100px;
  font-size:10px; font-weight:700;
}
.caso-foot { position:absolute; bottom:12px; left:12px; right:12px; }
.caso-lugar { font-size:10px; color:rgba(255,255,255,.55); margin-bottom:3px; }
.caso-title {
  font-family:'Montserrat',sans-serif;
  font-size:17px; font-weight:700;
  color:#fff; line-height:1.2;
}
.caso-body { padding:18px 20px; }
.caso-result {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bg); border-radius:7px;
  padding:6px 12px; font-size:12px;
}


/* Personalización del botón de cierre Lightbox */
    .lb-close {
      font-size: 28px !important;   /* más grande en PC */
      color: #fff !important;       /* blanco para contraste */
      background: rgba(0,0,0,0.6);  /* círculo semitransparente */
      border-radius: 50%;
      padding: 8px;
      right: 20px !important;
      top: 20px !important;
      z-index: 9999 !important;
      position: fixed !important;
    }
    @media (max-width: 600px) {
      .lb-close {
        font-size: 34px !important; /* aún más grande en móvil */
        padding: 12px;
      }
    }




/* ══ BLOG CATS PREVIEW ══ */
.blog-cats-prev {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.blog-cat-prev {
  border:1.5px solid var(--border); border-radius:var(--card-r);
  padding:28px 24px; text-align:center;
  transition:.3s; text-decoration:none; display:block;
}
.blog-cat-prev:hover {
  border-color:var(--orange); transform:translateY(-4px);
  box-shadow:0 12px 36px rgba(0,0,0,.08);
}
.blog-cat-prev-icon {
  width: 60px;          /* ancho fijo para todos los íconos */
  height: 60px;         /* alto fijo */
  margin: 0 auto 12px;  /* centra horizontalmente y deja espacio abajo */
  display: flex;
  align-items: center;   /* centra verticalmente */
  justify-content: center; /* centra horizontalmente */
  font-size: 36px;       /* tamaño de emoji o texto */
}

.blog-cat-prev-icon img {
  max-width: 70%;        /* evita que la imagen se desborde */
  max-height: 70%;
  display: block;
}

.blog-cat-prev h3 {
  font-family:'Montserrat',sans-serif;
  font-size:14px; font-weight:700;
  color:var(--text); margin-bottom:6px;
}
.blog-cat-prev p { font-size:12px; color:var(--muted); }

 #app {
      padding-top: var(--nav-h);
    }

    .svc-full-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .sfc {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--card-r);
      overflow: hidden;
      transition: .35s;
      text-decoration: none;
      display: block;
    }

    .sfc:hover {
      border-color: transparent;
      transform: translateY(-6px);
      box-shadow: 0 20px 56px rgba(0, 0, 0, .1);
    }

    .sfc-img {
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .sfc-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s;
    }

    .sfc:hover .sfc-img img {
      transform: scale(1.06);
    }

    .sfc-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
    }

    .sfc-body {
      padding: 24px;
    }

    .sfc-icon {
      font-size: 28px;
      margin-bottom: 12px;
    }

    .sfc-body h2 {
      font-family: 'Montserrat', sans-serif;
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 8px;
      color: var(--text);
    }

    .sfc-body p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.65;
      margin-bottom: 16px;
    }

    .sfc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 18px;
    }

    .sfc-tag {
      background: var(--bg);
      border-radius: 100px;
      padding: 3px 11px;
      font-size: 11px;
      color: var(--muted);
      font-weight: 500;
    }

    .sfc-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: var(--orange);
    }

    @media(max-width:1100px) {
      .svc-full-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:600px) {
      .svc-full-grid {
        grid-template-columns: 1fr;
      }
    }

  /* ── ÍCONO SVG SERVICIOS ── */
  .sfc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px; margin-bottom: 12px;
    border: 1.5px solid transparent; transition: transform .25s;
  }
  .sfc-icon svg { width: 26px; height: 26px; }
  .sfc:hover .sfc-icon { transform: scale(1.1); }
  .sfc-icon.tele  { background: rgba(46,58,155,0.10);  border-color: rgba(46,58,155,0.2);  }
  .sfc-icon.seg   { background: rgba(232,123,30,0.12); border-color: rgba(232,123,30,0.25);}
  .sfc-icon.sound { background: rgba(26,37,112,0.10);  border-color: rgba(26,37,112,0.2);  }
  .sfc-icon.mant  { background: rgba(91,168,212,0.13); border-color: rgba(91,168,212,0.25);}
  .sfc-icon.td    { background: rgba(46,58,155,0.10);  border-color: rgba(46,58,155,0.2);  }
  .sfc-icon.equip { background: rgba(232,123,30,0.12); border-color: rgba(232,123,30,0.25);}

  .btn-wa-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: rgba(255,255,255,0.2);
    border-radius: 6px; border: 1px solid rgba(255,255,255,0.3);
    flex-shrink: 0; vertical-align: middle; margin-right: 4px;
  }
  .btn-wa-ico svg { width: 13px; height: 13px; }


  .bc-img {
  height: 200px; /* ajusta según lo que quieras */
  overflow: hidden;
  position: relative;
}

.bc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* llena el espacio sin deformarse */
  transition: transform .5s;
}

.blog-card:hover .bc-img img {
  transform: scale(1.06); /* efecto zoom al pasar el mouse */
}

.bc-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
}
/* ══════════════════════════════════════
   RESPONSIVE — BREAKPOINTS COMPLETOS
   ══════════════════════════════════════ */

/* ── TABLETS GRANDES / LAPTOPS PEQUEÑOS (max 1100px) ── */
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 72px 28px 56px;
    min-height: auto;
    gap: 40px;
  }
  /* Imagen lateral expandida, clip diagonal reducido */
  .hero::before {
    width: 55%;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    background:
      linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.12) 42%),
      url('/assets/img/general/Inicio/Buenaventura-futuro.jpeg') center/cover no-repeat;
  }
  .hero-right {
    max-width: 600px;
    margin: 0 auto;
  }
  .hero-svc-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
   .svc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .por-que-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .por-que-img img {
    height: 360px;
  }
  .casos-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .blog-cats-prev {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }
}

/* ── TABLETS (max 900px) ── */
@media (max-width: 900px) {
  .hero {
    padding: 60px 24px 48px;
    gap: 32px;
  }
  .hero h1 {
    font-size: clamp(30px, 7vw, 46px);
    letter-spacing: -1.5px;
  }
  .hero-sub {
    font-size: 14px;
    max-width: 100%;
  }
  .hero-svc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .svc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .svc-card-img {
    height: 160px;
  }
  .por-que-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .por-que-img img {
    height: 320px;
  }
  .val-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .casos-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .caso-img-w {
    height: 200px;
  }
  .blog-cats-prev {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

/* ── MÓVILES GRANDES (max 768px) ── */
@media (max-width: 768px) {
  /* Móvil: imagen cubre fondo completo, capa blanca difumina */
  .hero {
    grid-template-columns: 1fr;
    min-height: 100svh;
    padding: 56px 20px 40px;
    gap: 28px;
    background: #fff;
  }
  .hero::before {
    width: 100%;
    height: 100%;
    top: 0; right: 0;
    clip-path: none;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0.82) 0%,
        rgba(255,255,255,0.72) 60%,
        rgba(255,255,255,0.90) 100%
      ),
      url('/assets/img/general/Inicio/Buenaventura-futuro.jpeg') center/cover no-repeat;
  }
  .hero h1 {
    font-size: clamp(28px, 9vw, 40px);
    letter-spacing: -1px;
  }
  .hero-eyebrow {
    font-size: 10px;
    padding: 5px 12px;
    margin-bottom: 18px;
  }
  .hero-sub {
    font-size: 13.5px;
    margin-bottom: 28px;
    line-height: 1.75;
  }
  .hero-btns {
    flex-direction: column;
    gap: 10px;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    text-align: center;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .hero-trust {
    gap: 14px;
    margin-top: 28px;
    padding-top: 20px;
  }
  .ht-item .ht-n {
    font-size: 20px;
  }
  .hero-svc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .hero-svc-card {
    padding: 14px 12px;
  }
  .hero-svc-icon {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .hero-svc-title {
    font-size: 12px;
  }
  .hero-svc-sub {
    font-size: 10px;
  }
  .svc-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .svc-card-img {
    height: 180px;
  }
  .svc-card-body {
    padding: 18px 16px;
  }
  .svc-card-body h3 {
    font-size: 14px;
  }
  .svc-card-body p {
    font-size: 12.5px;
  }
  .por-que-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .por-que-img img {
    height: 280px;
  }
  .val-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .val-card {
    padding: 16px 14px;
  }
  .casos-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .caso-img-w {
    height: 190px;
  }
  .caso-title {
    font-size: 15px;
  }
  .caso-body {
    padding: 14px 16px;
  }
  .blog-cats-prev {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .blog-cat-prev {
    padding: 20px 16px;
  }
  .blog-cat-prev-icon {
    font-size: 28px;
    margin-bottom: 8px;
  }
  .blog-cat-prev h3 {
    font-size: 13px;
  }
  .blog-cat-prev p {
    font-size: 11px;
  }
}

/* ── MÓVILES MEDIANOS (max 576px) ── */
@media (max-width: 576px) {
  /* Teléfonos pequeños y Z Flip cerrado */
  .hero {
    padding: 48px 16px 36px;
    gap: 24px;
    min-height: 100svh;
  }
  .hero::before {
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0.86) 0%,
        rgba(255,255,255,0.78) 55%,
        rgba(255,255,255,0.93) 100%
      ),
      url('/assets/img/general/Inicio/Buenaventura-futuro.jpeg') center/cover no-repeat;
  }
  .hero h1 {
    font-size: clamp(26px, 8.5vw, 36px);
    letter-spacing: -0.8px;
    margin-bottom: 16px;
  }
  .hero-sub {
    font-size: 13px;
    margin-bottom: 24px;
  }
  .hero-eyebrow {
    font-size: 9px;
    padding: 4px 10px;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
  }
  .hero-trust {
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
  }
  .ht-item .ht-n {
    font-size: 18px;
  }
  .ht-item .ht-l {
    font-size: 9px;
  }
  .ht-div {
    height: 24px;
  }
  .hero-svc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hero-svc-card {
    padding: 12px 10px;
    border-radius: 10px;
  }
  .hero-svc-icon {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .hero-svc-title {
    font-size: 11px;
    margin-bottom: 2px;
  }
  .hero-svc-sub {
    font-size: 9.5px;
    line-height: 1.3;
  }
  .svc-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .svc-card-img {
    height: 160px;
  }
  .svc-card-body {
    padding: 16px 14px;
  }
  .svc-card-body h3 {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .svc-card-body p {
    font-size: 12px;
    line-height: 1.55;
  }
  .svc-card-link {
    font-size: 11px;
    margin-top: 10px;
  }
  .por-que-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .por-que-img img {
    height: 240px;
    border-radius: 14px;
  }
  .por-que-img {
    border-radius: 14px;
  }
  .val-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .val-card {
    padding: 14px 12px;
  }
  .val-card-title {
    font-size: 12px;
  }
  .val-card-desc {
    font-size: 11px;
  }
  .casos-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .caso-img-w {
    height: 180px;
  }
  .caso-badge {
    font-size: 9px;
    padding: 2px 10px;
    top: 10px;
    left: 10px;
  }
  .caso-lugar {
    font-size: 9px;
  }
  .caso-title {
    font-size: 14px;
  }
  .caso-body {
    padding: 12px 14px;
  }
  .caso-result {
    font-size: 11px;
    padding: 5px 10px;
  }
  .blog-cats-prev {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .blog-cat-prev {
    padding: 18px 12px;
  }
  .blog-cat-prev-icon {
    font-size: 26px;
    margin-bottom: 6px;
  }
  .blog-cat-prev h3 {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .blog-cat-prev p {
    font-size: 10px;
  }
}

/* ── MÓVILES PEQUEÑOS (max 400px) ── */
@media (max-width: 400px) {
  .hero {
    padding: 40px 12px 32px;
    gap: 20px;
  }
  .hero h1 {
    font-size: clamp(24px, 8vw, 32px);
    letter-spacing: -0.5px;
    margin-bottom: 14px;
  }
  .hero-sub {
    font-size: 12.5px;
    line-height: 1.7;
    margin-bottom: 20px;
  }
  .hero-eyebrow {
    font-size: 8.5px;
    padding: 4px 9px;
    margin-bottom: 14px;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    font-size: 13px;
    padding: 12px 16px;
  }
  .hero-trust {
    gap: 10px;
    margin-top: 20px;
    padding-top: 14px;
  }
  .ht-item .ht-n {
    font-size: 16px;
  }
  .ht-item .ht-l {
    font-size: 8px;
  }
  .ht-div {
    height: 20px;
  }
  .hero-svc-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hero-svc-card {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: row;
  }
  .hero-svc-icon {
    font-size: 22px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .hero-svc-title {
    font-size: 12px;
  }
  .hero-svc-sub {
    font-size: 10px;
  }
  .svc-card-img {
    height: 140px;
  }
  .svc-card-body {
    padding: 14px 12px;
  }
  .svc-card-body h3 {
    font-size: 13px;
  }
  .svc-card-body p {
    font-size: 11.5px;
  }
  .por-que-img img {
    height: 200px;
  }
  .caso-img-w {
    height: 160px;
  }
  .caso-foot {
    bottom: 10px;
    left: 10px;
    right: 10px;
  }
  .caso-title {
    font-size: 13px;
  }
  .blog-cats-prev {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .blog-cat-prev {
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
  }
  .blog-cat-prev-icon {
    font-size: 28px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .blog-cat-prev h3 {
    font-size: 13px;
    margin-bottom: 2px;
  }
  .blog-cat-prev p {
    font-size: 11px;
  }
}

/* ── PANTALLAS MUY GRANDES (min 1400px) ── */
@media (min-width: 1400px) {
  .hero {
    padding: 100px 80px;
    gap: 80px;
  }
  .hero h1 {
    font-size: 64px;
  }
  .hero-sub {
    font-size: 16px;
    max-width: 480px;
  }
  .svc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
  .por-que-grid {
    gap: 90px;
  }
  .por-que-img img {
    height: 520px;
  }
  .blog-cats-prev {
    gap: 24px;
  }
}

.art-hero {
  position: relative;
  height: 420px;
  overflow: hidden;   /* recorta lo que sobresale */
}

.art-hero img {
  position: absolute;
  inset: 0;           /* pega la imagen a los 4 bordes */
  width: 100%;
  height: 100%;
  object-fit: cover;  /* cubre sin deformar, recortando los bordes */
}

    /* ─────────────────────────────────────────
       TARJETA DE CADA CASO
    ───────────────────────────────────────── */
    .case-card {
      border-radius: 12px;
      overflow: hidden;
      border: 1.5px solid var(--border);
      transition: transform .3s, box-shadow .3s;
      background: var(--bg);
    }

    .case-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, .1);
      border-color: transparent;
    }

    /* ─────────────────────────────────────────
       IMAGEN DE CADA CASO
       - height: 220px define la altura uniforme
       - Cámbiala si quieres fotos más altas o bajas
    ───────────────────────────────────────── */
    .case-card a {
      display: block;
      overflow: hidden;
    }

    .case-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
      transition: transform .4s;
    }

    .case-card:hover img {
      transform: scale(1.06);
    }

    /* ─────────────────────────────────────────
       DESCRIPCIÓN DEBAJO DE CADA IMAGEN
    ───────────────────────────────────────── */
    .case-desc {
      padding: 14px 16px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
      border-top: 1px solid var(--border);
    }

    /* ─────────────────────────────────────────
       TEXTO EXPLICATIVO AL FINAL
    ───────────────────────────────────────── */
    .final-desc {
      margin-top: 50px;
      padding: 32px;
      background: var(--bg);
      border-radius: 16px;
      border: 1.5px solid var(--border);
      font-size: 15px;
      line-height: 1.8;
      color: var(--text);
    }

    .final-desc h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: 18px;
      font-weight: 800;
      color: var(--blue-mid);
      margin-bottom: 12px;
    }

    
    /* ─────────────────────────────────────────
       TABS DE NAVEGACIÓN ENTRE CATEGORÍAS
    ───────────────────────────────────────── */
    .ctabs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }

    .ctab {
      padding: 7px 16px;
      border-radius: 100px;
      border: 1.5px solid var(--border);
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      transition: .2s;
    }

    .ctab:hover,
    .ctab.active {
      background: var(--orange);
      border-color: var(--orange);
      color: #fff;
    }

    /* ─────────────────────────────────────────
       GRID DE IMÁGENES
       - 3 columnas en escritorio
       - 2 columnas en tablet
       - 1 columna en móvil
    ───────────────────────────────────────── */
    .cases-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 40px;
    }

.btn-next-blog {
  background: #4da6ff; /* azul claro */
  color: #fff;
  padding: 13px 32px; /* igual que .btn-ghost */
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid rgba(255,255,255,.35);
  cursor: pointer;
  transition: .3s;
  display: inline-block;
  text-decoration: none;
}

.btn-next-blog:hover {
  background: #3399ff; /* tono más intenso al pasar el mouse */
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════
   PANTALLAS PLEGABLES Y EXTENDIDAS (Z Flip, Z Fold, tablets)
   Rango 390px – 768px: imagen siempre visible, overlay ajustado
   ══════════════════════════════════════════════════════════ */

/* Z Flip cerrado / teléfonos muy angostos */
@media (max-width: 390px) {
  .hero {
    padding: 44px 14px 32px;
    min-height: 100svh;
  }
  .hero::before {
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0.88) 0%,
        rgba(255,255,255,0.80) 50%,
        rgba(255,255,255,0.94) 100%
      ),
      url('/assets/img/general/Inicio/Buenaventura-futuro.jpeg') center/cover no-repeat;
  }
  .hero h1 {
    font-size: clamp(24px, 8vw, 32px);
    letter-spacing: -0.6px;
  }
}

/* Z Flip abierto / tablets angostas en portrait */
@media (min-width: 600px) and (max-width: 768px) {
  .hero::before {
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0.78) 0%,
        rgba(255,255,255,0.65) 55%,
        rgba(255,255,255,0.85) 100%
      ),
      url('/assets/img/general/Inicio/Buenaventura-futuro.jpeg') center/cover no-repeat;
  }
}

/* Tablets en landscape o pantallas extendidas (769–1100px):
   conservan el diseño laptop — imagen lateral con clip diagonal */
@media (min-width: 769px) and (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--nav-h));
    padding: 72px 40px;
    background: #fff;
  }
  .hero::before {
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 50%;
    height: 100%;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
    background:
      linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.1) 35%),
      url('/assets/img/general/Inicio/Buenaventura-futuro.jpeg') center/cover no-repeat;
  }
  .hero-right {
    display: block;
  }
}