/* ============================================================
   RESPONSIVE — container queries. Token overrides go on .site,
   never :root (which sits outside the container).
   ============================================================ */
@media (max-width:1180px){
  .site{--gut:28px;--sec:92px}
  .topacts .pill span.lbl{display:none}
  .topacts .pill{padding:7px;gap:0}
  .cov{gap:36px}
  .svc{gap:36px}
  .tiks{grid-template-columns:repeat(4,1fr)}
  .ftr-g{grid-template-columns:1.5fr 1fr 1fr;gap:34px}
  .ftr-4{grid-column:1/-1;border-top:1px solid var(--stroke);padding-top:28px}
}
@media (max-width:980px){
  .navcap{display:none}
  .burger{display:grid}
  /* Nav column collapses; wordmark stays left, actions stay right */
  .topbar{grid-template-columns:1fr auto}
  .frame-in{padding:130px 30px 34px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .tiks{grid-template-columns:repeat(3,1fr)}
  .srow{grid-template-columns:auto 1fr auto;gap:18px}
  .srow-d{grid-column:2/4;margin-top:8px}
}
@media (max-width:820px){
  .site{--sec:76px}
  .cov,.svc,.split2,.split2--wide{grid-template-columns:1fr;gap:28px}
  /* Image leads every service block: photo -> name -> detail -> CTA */
  .svc-m,.svc.flip .svc-m{order:-1}
  .g3{grid-template-columns:1fr}
  /* Cinco tarjetas 9:16 en columna son 3000px de scroll muerto. A esta anchura
     el vídeo vertical se lee mejor como tira horizontal, que es su gesto nativo. */
  .tiks{
    display:flex;overflow-x:auto;gap:12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scrollbar-width:none;
  }
  .tiks::-webkit-scrollbar{display:none}
  .tik{flex:0 0 46%;scroll-snap-align:start}
  .shead{grid-template-columns:1fr;gap:22px;margin-bottom:32px}
  .panel{padding:30px}
  .fgrid{grid-template-columns:1fr}
  .svc ul{grid-template-columns:1fr}
  .ftr-g{grid-template-columns:1fr 1fr;gap:30px}
  .ftr-1{grid-column:1/-1}
  .ftr-4{grid-column:1/-1}
  .hero-row{gap:26px}
  .hero-ctrl{order:-1}
}
@media (max-width:640px){
  /* --- app mode --- */
  .site{--gut:16px;--sec:52px;--r-xl:26px;--r-lg:20px}
  /* g4 previously stopped at two columns, which left 4-word lines at 390px */
  .g2,.g3,.g4{grid-template-columns:1fr}
  /* La banda 21:9 del equipo a 390px son 146px de alto: las caras quedan a ~20px
     y la foto está ahí para dar confianza. Pasa al recorte 4:3, que ya existe. */
  .shot--teamcine{aspect-ratio:4/3;background-image:var(--team-43)}
  .tik{flex:0 0 64%}
  .grid{gap:12px}
  .hide-sm{display:none !important}

  /* Services collapse from six tall cards (~1500px of scroll) into compact,
     fully tappable rows: icon, name, chevron. Detail lives on the Services page. */
  .svc-grid{gap:10px}
  .card--svc{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    gap:14px;padding:14px 16px;border-radius:18px;
  }
  .card--svc .card-ico{width:44px;height:44px;margin-bottom:0;border-radius:13px}
  .card--svc .card-ico svg{width:21px;height:21px}
  .card--svc h3{font-size:1.02rem;letter-spacing:-.025em}
  .card--svc p,.card--svc .card-n{display:none}
  .card--svc .alink{margin:0;padding:0;gap:0}
  .card--svc .alink .lbl{display:none}
  .card--svc .alink svg{width:19px;height:19px}
  .card--svc .alink::after{content:"";position:absolute;inset:0}

  /* Inner pages: each service becomes a discrete card instead of one long
     scroll divided by hairlines. Photo leads, then name, detail, CTA. */
  .svc{
    background:var(--panel);border:1px solid var(--stroke);border-radius:22px;
    padding:14px 14px 22px;margin-bottom:12px;gap:18px;
  }
  .svc--first{padding-top:14px;border-top:1px solid var(--stroke)}
  .svc-m{border-radius:16px}
  .svc .r-43{aspect-ratio:16/10}
  .svc-b{padding:0 4px}
  .svc ul{gap:9px 16px}
  .svc ul li{font-size:.88rem}

  /* Three stat panels become one compact row, like the hero stats */
  .grid.statgrid{grid-template-columns:repeat(3,1fr);gap:8px}
  .statgrid .statcard{padding:18px 8px;border-radius:16px}
  .statgrid .bignum--stat{font-size:2.15rem;letter-spacing:-.05em}
  .statgrid .d4{font-size:.76rem;margin-top:8px;line-height:1.25}
  .statgrid .sm{display:none}

  /* One-line cards read better as two-line rows than as stacked blocks */
  .card--row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px}
  .card--row .card-ico{width:40px;height:40px;border-radius:12px;margin-bottom:0;grid-row:span 2}
  .card--row .card-ico svg{width:19px;height:19px}
  .card--row h3{font-size:1rem;align-self:center}
  .card--row p{grid-column:2;font-size:.88rem}
  body{font-size:15.5px}
  .d1{font-size:1.98rem}
  .d2{font-size:1.72rem}
  .d3{font-size:1.16rem}
  .d4{font-size:1rem}
  .lede{font-size:1rem}
  .sm,.faq-a{font-size:.92rem}
  .eyebrow{font-size:.65rem;letter-spacing:.14em}
  .bignum{font-size:4.6rem}
  .hero-copy h1,.d1{font-size:2.1rem}
  .hero-copy p{font-size:.98rem}
  .hstat b{font-size:1.5rem}
  .hstat{padding-right:16px;margin-right:16px}
  .hstat span{font-size:.7rem}

  .topbar{top:10px;padding-top:10px;margin-bottom:-72px;grid-template-columns:1fr auto;gap:10px}
  /* Header actions drop entirely — the floating tab bar carries the CTA here,
     so the top of the screen stays wordmark + menu only. */
  .topacts .pill{display:none}
  .themetoggle{width:48px;height:48px}
  .wordmark{width:130px;height:30px}
  .burger{width:48px;height:48px}

  /* App-style hero: a clean image block on top, copy on solid ground below.
     Nothing sits over the photograph. */
  .frame{min-height:auto;border-radius:0;display:flex;flex-direction:column;background:var(--void)}
  .frame-media{position:relative;inset:auto;width:100%;aspect-ratio:1/1;flex:none;overflow:hidden}
  .frame-veil{background:linear-gradient(to bottom,rgba(8,8,10,.5) 0%,rgba(8,8,10,0) 26%,rgba(8,8,10,.1) 62%,rgba(8,8,10,.92) 100%)}
  .frame-in{padding:20px 0 26px;gap:22px}
  .hero-copy{max-width:none;gap:16px}
  .hero-copy .eyebrow{display:none}
  .hero-long{display:none}
  .hero-short{display:block;font-size:1rem;line-height:1.55;color:#B9B9C0}
  .hero-dots{display:flex}
  .hero-ctrl{display:none}
  .hero-copy .pills .pill--ghost{display:none}
  .hero-row{flex-direction:column;align-items:stretch}
  .hero-stats{justify-content:space-between}
  .hero-ctrl{order:0;justify-content:space-between;width:100%}
  .pills{width:100%}
  .pills .pill{width:100%;justify-content:space-between}

  .card{padding:20px;border-radius:20px}
  .srow{padding:20px;grid-template-columns:auto 1fr auto;gap:14px}
  .srow+.srow{margin-top:10px}
  .srow:hover{padding-left:20px}
  .srow-a{width:36px;height:36px}
  .faq summary{font-size:.98rem;padding:19px 52px 19px 20px}
  .faq-a{padding:0 20px 20px}
  .phead{padding:118px 0 var(--sec)}
  .ftr-g{grid-template-columns:1fr;gap:28px}
  .ftr{padding-bottom:0}
  .ftr-bot{flex-direction:column;gap:8px}

  .tabbar{display:block}
  .site{padding-bottom:6px}
  .card:hover,.srow:hover{transform:none}
}
@media (max-width:400px){
  .site{--gut:14px}
  .d1{font-size:1.82rem}
  .hero-copy h1,.d1{font-size:1.92rem}
  .bignum{font-size:4rem}
  .hstat b{font-size:1.35rem}
  .tab span{font-size:.55rem}
  .fab{width:52px;height:52px}
  .wordmark{width:122px;height:28px}
}
@media (max-width:640px){
}