/* ==========================================================================
   responsive.css — breakpoints do projeto (KB): 768 / 480 / 360
   Mobile-first nos componentes; aqui só ajustes. Carregado por ÚLTIMO
   (sobrescreve componentes nos breakpoints). @media print no fim.
   ========================================================================== */

/* ---- >768: pequenos ajustes de respiro em telas médias ---- */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:var(--f-34)}
  .roas{max-width:460px}
  .contact-grid{grid-template-columns:1fr}
  .sticky-split{grid-template-columns:1fr;gap:var(--f-34)}
  .sticky-aside{position:static}
  .sticky-index{display:none}
  .footer-top{grid-template-columns:1fr;gap:var(--f-34)}
  .pd-more{grid-template-columns:1fr 1fr}
}

/* ---- 768: TABLET ---- */
@media (max-width:768px){
  .grid--4{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:1fr 1fr}
  .machine{grid-template-columns:1fr}
  .node__flow{display:none}
  .pd__grid{grid-template-columns:1fr}
  .calc__inputs{grid-template-columns:1fr}

  /* menu mobile */
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-block-end:1px solid var(--line);padding:var(--f-13);box-shadow:var(--shadow-md);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform var(--t-base),opacity var(--t-base)}
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:var(--f-13);font-size:1.05rem}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-block-start:var(--f-8)}
  .nav-toggle{display:block}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .kpi-band{grid-template-columns:1fr 1fr;gap:var(--f-21)}
  .trust{gap:var(--f-13)}
  .footer-cols{grid-template-columns:1fr 1fr;gap:var(--f-21)}
  .footer-col--social .footer-contacts{flex-direction:row;flex-wrap:wrap}
  .footer-col--social .footer-pill{width:auto}
}

/* ---- 480: MOBILE ---- */
@media (max-width:480px){
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .pd-more{grid-template-columns:1fr}
  .gauge-row{flex-direction:column;align-items:flex-start}
  .post-item{flex-direction:column;gap:var(--f-5)}
  .post-item__date{width:auto}
  .footer-cols{grid-template-columns:1fr;gap:var(--f-21)}
  .footer-bottom{flex-direction:column;gap:var(--f-8)}
  .hero__cta{width:100%}
  .hero__cta .btn{width:100%;justify-content:center}
  .trust{gap:var(--f-21)}
  .timeline-item{padding-inline-start:var(--f-34);padding-block-end:var(--f-34)}
  .compare th,.compare td{padding:var(--f-8) var(--f-13);font-size:.86rem}
}

/* ---- 360: MOBILE PEQUENO ---- */
@media (max-width:360px){
  .kpi-band{grid-template-columns:1fr}
  :root{--gut:16px}
  .brand__word{font-size:1rem}
}

/* ---- PRINT ---- */
@media print{
  .site-header,.site-footer,.scrollbar-top,.bg-orbs,.bg-mesh,.bg-dots::before,.spotlight,.nav-toggle,.marquee{display:none!important}
  *{color:#000!important;background:#fff!important;box-shadow:none!important}
  a{text-decoration:underline}
  .section{padding-block:var(--f-21)}
}