/* ============================================================================
   OPLAK — Ajustes para tablet y celular
   ========================================================================== */

/* ─────────────────────────────────────── Pantallas medianas (≤ 1180px) ── */
@media (max-width:1180px){
  .nav{gap:16px}
  .nav__link{padding:10px 9px;font-size:1rem}
  .nav__link::after{left:9px;right:9px}
  .nav__icon.is-ig{display:none}
  .reels{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .srv{gap:56px}
}

/* Pie (≤ 1240px): el logo y los íconos ocupan su propia fila para que los
   íconos de contacto y redes entren en una sola línea */
@media (max-width:1240px){
  .footer__grid{grid-template-columns:repeat(3,1fr)}
  .footer__brand{grid-column:1/-1}
}

/* ──────────────────────────────────────── Menú de celular (≤ 1080px) ── */
@media (max-width:1080px){
  .burger{display:block;z-index:95}
  .nav{
    position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(360px,86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:24px;
    padding:calc(var(--header-h) + 20px) 26px 30px;
    background:var(--navy-950);box-shadow:-20px 0 60px rgba(0,0,0,.35);
    transform:translateX(100%);transition:transform .4s var(--ease);overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .nav__link,body.is-scrolled .nav__link{
    padding:14px 6px;font-size:1.3rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav__link::after{display:none}
  body.is-scrolled .nav__link:hover,body.is-scrolled .nav__link.is-active,.nav__link.is-active{color:var(--brand-300)}
  .nav__extra{flex-wrap:wrap}
  .nav__icon,.nav__icon.is-ig,.nav__icon.is-fb,.nav__icon.is-li{display:grid}
  .nav__icon{width:46px;height:46px}
  body.is-scrolled .nav__icon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
  body.is-scrolled .nav__icon.is-wa,body.is-scrolled .nav__icon.is-ig,
  body.is-scrolled .nav__icon.is-fb,body.is-scrolled .nav__icon.is-li{color:#fff}
  .nav__cta{flex:1 1 100%;margin-left:0} /* botón en su propia fila, debajo de los íconos */
  /* Facebook y LinkedIn: desde acá se ven en el menú, no en la barra superior */
  .topbar__social{display:none}
  body.nav-open .burger{background:rgba(255,255,255,.1)}
  body.nav-open .burger span{background:#fff}
  body.nav-open{overflow:hidden}

  .contact{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .about{gap:56px}
}

/* Notebooks de pantalla baja (1366x768, 1280x720...): portada más compacta */
@media (min-width:1081px) and (max-height:820px){
  .hero__in{padding-top:calc(var(--topbar-h) + var(--header-h) + 18px);padding-bottom:28px}
  .hero__eyebrow{margin-bottom:16px}
  .hero__sub{margin-top:16px}
  .hero__actions{margin-top:20px}
  .hero__quick{margin-top:16px}
}

/* El email de la barra superior no entra por debajo de ~980px */
@media (max-width:980px){
  .topbar__mail{display:none}
}

/* ─────────────────────────────────────────────── Tablet (≤ 900px) ── */
@media (max-width:900px){
  .section{padding:88px 0}
  .shead{margin-bottom:40px}
  .shead--split{grid-template-columns:1fr;gap:14px}

  .topbar__mail{display:none}

  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:20px 22px}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .hero__scroll{display:none}

  .areas{grid-template-columns:1fr}
  .srv,.srv--rev{grid-template-columns:1fr;gap:64px;padding-top:80px}
  .srv--rev .srv__media{order:0}
  .srv__media{position:relative;top:auto;max-width:560px;margin-inline:auto;width:calc(100% - 28px)}
  .srv__media > img:first-child{aspect-ratio:4/3}
  .srv__media-sm{right:-20px;width:34%}
  .srv--rev .srv__media-sm{left:auto;right:-20px}

  .reels{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 16px;scrollbar-width:none;
  }
  .reels::-webkit-scrollbar{display:none}
  .reel{flex:0 0 min(42vw,260px);scroll-snap-align:start}
  .reel:nth-child(even){margin-top:0}

  .catalog{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(240px,40vw,360px)}

  .about{grid-template-columns:1fr}
  .about__media{max-width:520px;margin-inline:auto;width:100%}
  .why-wrap{margin-top:88px}

  .footer__grid{grid-template-columns:1fr 1fr;gap:40px}
  .footer__brand{grid-column:1/-1}
}

/* ─────────────────────────────────────────────── Celular (≤ 760px) ── */
@media (max-width:760px){
  :root{--gut:18px;--header-h:68px;--topbar-h:36px}
  body{font-size:16px}
  .section{padding:72px 0}

  .topbar{font-size:.8rem}
  .topbar__links a span{display:none}
  .topbar__links a{padding:6px 8px}
  .topbar__links .ic{width:17px;height:17px}
  .topbar .status{display:none}

  .hero__exp{font-size:.9rem;padding-top:12px}
  .hero__exp .ic{width:18px;height:18px}

  .brand__img{height:44px}

  .hero{min-height:max(640px,100svh)}
  .hero__media{grid-template-columns:1fr}
  .hero__col:nth-child(n+2){display:none}
  .hero__shade{
    background:
      linear-gradient(180deg,rgba(5,11,31,.8) 0%,rgba(5,11,31,.35) 30%,rgba(5,11,31,.55) 55%,rgba(5,11,31,.96) 100%);
  }
  .hero__in{padding-top:calc(var(--topbar-h) + var(--header-h) + 36px);padding-bottom:32px;align-items:flex-end}
  .hero__eyebrow{font-size:.82rem;letter-spacing:.08em;margin-bottom:16px}
  .hero__title{font-size:clamp(2.35rem,11vw,3.3rem)}
  .hero__sub{margin-top:18px;font-size:1rem;letter-spacing:.05em}
  .hero__text{font-size:1rem}
  .hero__actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero__actions .btn{width:100%}
  .hero__quick{gap:10px 18px;font-size:.92rem}
  .stat{padding:16px 14px}
  .stat:nth-child(odd){padding-left:0}
  .stat__n{font-size:2.3rem}
  .stat__n--txt{font-size:1.35rem}
  .stat__l{font-size:.8rem}

  .clients{padding:34px 0 30px}
  .client{height:70px;padding:0 18px}

  .srv__num{font-size:3.4rem}
  .srv__cols{grid-template-columns:1fr;gap:22px}
  .srv__actions .btn{flex:1 1 100%}
  .srv__media{width:calc(100% - 16px);margin-inline:0}
  .srv__media-sm{right:-14px;bottom:-30px;border-width:4px}
  .srv--rev .srv__media-sm{right:-14px}
  .srv__badge{font-size:.82rem;padding:7px 12px;left:12px;top:12px}

  .reel{flex-basis:64vw}
  .videos__foot{margin-top:40px}
  .videos__foot .btn{white-space:normal;text-align:center}

  .filters{
    flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 8px;scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none}
  .catalog{grid-template-columns:repeat(2,1fr);gap:10px;grid-auto-rows:clamp(200px,62vw,300px)}
  .gcard__ov{left:12px;right:12px;bottom:12px;gap:6px}
  .gcard__t{font-size:1.05rem}
  .gcard.is-feature .gcard__t{font-size:1.45rem}
  .gcard__c{font-size:.68rem}

  .steps{grid-template-columns:1fr;gap:12px}
  .step{padding:22px 22px 22px 84px;min-height:0}
  .step__n{position:absolute;left:22px;top:22px;font-size:2.2rem}

  .about__media{padding:0 24px 48px 0}
  .about__years{left:-6px;top:20px;padding:14px 16px}
  .about__years strong{font-size:2.6rem}
  .about__years span{font-size:.86rem}
  .why{grid-template-columns:1fr;gap:12px}
  .why__i{padding:20px}

  .band{padding:88px 0}
  .band__actions{flex-direction:column;align-items:stretch}

  .contact__form{padding:24px 20px;border-radius:16px}
  .grid2{grid-template-columns:1fr;gap:16px}
  .channel{padding:12px 14px 12px 12px;gap:14px}
  .app{width:44px;height:44px;border-radius:12px}
  .channel--static{flex-wrap:wrap}
  .channel--static .status{margin-left:58px}

  .footer{padding-top:64px}
  .footer__grid{grid-template-columns:1fr;gap:34px}
  .footer__bottom{flex-direction:column;margin-top:44px;padding-bottom:96px}

  .wa-float{right:16px;bottom:16px;width:58px;height:58px}
  .wa-float .ic{width:30px;height:30px}

  .lb{padding:70px 12px 60px}
  .lb__nav{top:auto;bottom:14px;transform:none;width:46px;height:46px}
  .lb__nav--prev{left:calc(50% - 56px)}
  .lb__nav--next{right:calc(50% - 56px)}
  .lb__fig img{max-height:calc(100vh - 210px)}
  .lb__fig figcaption{font-size:1.05rem;flex-direction:column;gap:6px}
}

/* ─────────────────────────────────────────── Celular chico (≤ 400px) ── */
@media (max-width:400px){
  .topbar__hours span[data-cfg="hours-short"]{font-size:.74rem}
  .hero__eyebrow{font-size:.74rem}
  .btn--lg{padding:15px 20px;font-size:1rem}
  /* Los 7 íconos del pie en una sola fila en celulares de 360px */
  .footer__social{gap:6px}
  .footer__social .app{width:38px;height:38px}
}