/* =====================================================================
   BTS — Best Technology Service
   responsive.css — adaptación a laptop, tablet y celular
   Se carga DESPUÉS de style.css
   ===================================================================== */

/* ---------------------- Laptop chico / tablet grande ---------------------- */
@media (max-width:1100px){
  :root{--header-h:84px}

  .section{padding:76px 0}
  .split{gap:44px}
  .hero-grid{gap:40px}
  .cta{padding:44px}

  .grid--4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .step:not(:last-child)::after{display:none}

  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}

/* ---------------------- Tablet: aquí entra el menú móvil ---------------------- */
@media (max-width:992px){
  .topbar-info span.topbar-hide{display:none}

  .nav-toggle{display:block;order:3}

  .nav{
    position:fixed;top:0;right:0;z-index:99;
    width:min(340px,86vw);height:100dvh;
    padding:96px 26px 32px;
    background:#fff;box-shadow:-10px 0 40px rgba(10,37,64,.18);
    transform:translateX(100%);
    transition:transform .38s var(--ease);
    overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px}
  .nav-link{padding:15px 14px;font-size:1rem;border-bottom:1px solid var(--line);border-radius:0}
  .nav-link::after{display:none}
  .nav-link.is-active{background:var(--bg-soft);border-left:3px solid var(--green-500)}

  .header-cta{display:none}
  .nav .header-cta{display:block;margin:26px 0 0}
  .nav .header-cta .btn{width:100%}

  /* Hero apilado */
  .hero{padding:72px 0 84px}
  .hero::after{right:-10%;opacity:.12}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-text{max-width:none}
  .hero-media{max-width:560px;margin-inline:auto}
  .hero-media::before{inset:-12px -12px 18px 18px}

  .hero-strip ul{grid-template-columns:repeat(2,1fr)}
  .hero-strip li:nth-child(2n){border-right:0}
  .hero-strip li{border-bottom:1px solid rgba(255,255,255,.07)}

  /* Split apilado */
  .split{grid-template-columns:1fr;gap:44px}
  .split--reverse .split-media{order:0}

  .collage{padding-bottom:56px;max-width:520px;margin-inline:auto}
  .collage-badge{left:0}

  .grid--3{grid-template-columns:repeat(2,1fr)}

  /* Galería: la foto grande y la ancha ocupan toda la fila */
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;gap:14px}

  /* Las tarjetas dejan de superponerse a la banda */
  .band-bg{height:260px}
  .band-cards{margin-top:-120px;grid-template-columns:1fr;gap:44px;max-width:520px;margin-inline:auto}

  .form-grid{grid-template-columns:1fr}
  .form-wrap{padding:30px}

  .cta-inner{flex-direction:column;align-items:flex-start}
}

/* ---------------------- Celular ---------------------- */
@media (max-width:640px){
  :root{--header-h:76px}

  body{font-size:15.5px}
  .container{padding-inline:18px}

  .section{padding:60px 0}
  .section--tight{padding:48px 0}
  .section-head{margin-bottom:40px}

  /* Topbar: solo el teléfono */
  .topbar{font-size:.8rem}
  .topbar .container{justify-content:center}
  .topbar-tag,.topbar-info a[href^="mailto"]{display:none}

  .brand img{height:48px}
  .header.is-stuck .brand img{height:44px}

  .hero{padding:56px 0 68px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-proof{gap:12px}

  .hero-strip ul{grid-template-columns:1fr}
  .hero-strip li{border-right:0;padding:20px 18px}

  .page-hero{padding:56px 0 50px}

  .grid{gap:22px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:18px}
  .steps{grid-template-columns:1fr;row-gap:30px}

  .gallery{grid-auto-rows:150px;gap:10px}
  .gallery-item figcaption{padding:30px 12px 10px;font-size:.76rem}
  .gallery-item figcaption::before{width:18px;margin-bottom:6px}
  .gallery-item--lg figcaption{padding:44px 16px 14px;font-size:.9rem}

  .band-strip{height:260px}
  .band-strip p{font-size:1rem;padding-bottom:28px}
  .band-bg{height:200px}
  .band-cards{margin-top:-90px;gap:42px}
  .service-card{padding:46px 22px 28px}

  .solution-card,.contact-card,.why-card{flex-direction:column;gap:16px;padding:24px}

  .collage-inset{width:64%;right:0;border-width:6px}
  .collage-badge{padding:13px 17px}
  .collage-badge b{font-size:.95rem}

  .tab-btns{gap:18px}
  .tab-btn{font-size:.88rem}

  .cta{padding:34px 24px;border-radius:var(--radius)}
  .cta-actions{width:100%;flex-direction:column}
  .cta-actions .btn{width:100%}

  .acc-btn{padding:18px 20px;font-size:.95rem}
  .acc-panel-inner{padding:0 20px 20px}

  .form-wrap{padding:24px 20px}

  .footer{padding-top:56px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-logo{padding:11px 14px}
  .footer-logo img{height:52px}
  .footer-bottom{flex-direction:column;text-align:center;margin-top:40px}

  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  .wa-float svg{width:27px;height:27px}
  .to-top{right:17px;bottom:80px;width:42px;height:42px}
}

/* ---------------------- Celular pequeño ---------------------- */
@media (max-width:380px){
  h1{font-size:1.85rem}
  h2{font-size:1.5rem}
  .btn{padding:14px 22px;font-size:.86rem}
  .hero-badge{font-size:.7rem;padding:7px 14px 7px 8px}
}

/* ---------------------- Impresión ---------------------- */
@media print{
  .topbar,.header,.nav,.wa-float,.to-top,.footer,.cta,.hero-actions{display:none !important}
  .hero,.page-hero,.section--dark{background:#fff !important;color:#000 !important}
  .hero h1,.page-hero h1,.section--dark h2,.section--dark h3{color:#000 !important}
  .reveal{opacity:1 !important;transform:none !important}
  .section{padding:20px 0;page-break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}