/* ============================================================
   responsive.css — media queries.
   IMPORTANTE: se carga al final para que estas reglas
   sobrescriban a las de base/layout/sections por orden de origen.
   ============================================================ */

/* ---- Header ----
   La nav horizontal (marca + 6 enlaces + 2 botones) pide ~1090px. El ancho útil
   es min(viewport,--maxw) - 48, así que por debajo de ~1140 deja de caber y se
   recortaba contra el overflow-x:hidden del body: los últimos enlaces y los CTA
   desaparecían sin scrollbar que lo delatara, desde 1200px hasta 681px.
   Se pasa a burger en cuanto deja de caber, no a 680px. */
@media(max-width:1140px){
  .nav-links{position:fixed;inset:70px 0 auto 0;background:var(--paper);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line);transform:translateY(-140%);transition:transform .3s;box-shadow:var(--shadow);max-height:calc(100dvh - 70px);overflow-y:auto}
  .nav-links.open{transform:none}
  .nav-links a{width:100%;padding:13px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
}
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:44px;padding:56px 0 70px}
  .hero-panel{max-width:460px}
  .fiscal-inner,.contact-inner,.mob-inner{grid-template-columns:1fr;gap:40px;padding:64px 0}
  .ledger-grid{grid-template-columns:repeat(2,1fr)}
  .ledger .cell:nth-child(2){border-right:none}
  .ledger .cell{border-bottom:1px solid var(--line-dk)}
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .pillars,.tgrid{grid-template-columns:1fr}
  .forms{grid-template-columns:1fr}
  .req-wrap{grid-template-columns:1fr;gap:32px}
  .req-copy{position:static}
  /* el footer no colapsaba: sus 4 columnas se salían del viewport y quedaban
     recortadas por el overflow-x:hidden del body. */
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:680px){
  /* las reglas de la nav en modo burger están en el bloque de 1140 */
  .nav-cta .btn-ghost{display:none}
  .mod-grid,.sectors,.steps{grid-template-columns:1fr}
  .logo-cell{width:128px;height:76px;padding:12px}
  .logo-cell img{max-height:50px}
  .frow{grid-template-columns:1fr}
  .section{padding:64px 0}
  .hero .lead{font-size:17px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-brand p{max-width:none}
}
/* Móviles estrechos (iPhone SE/12/13/14 estándar): ni siquiera en modo burger
   cabían marca + CTA + burger en 342px útiles, y el burger quedaba recortado. */
@media(max-width:430px){
  .nav{gap:10px}
  .brand{font-size:17px;gap:8px}
  .brand .mark{width:30px;height:30px;font-size:15px;border-radius:8px}
  .brand-logo{height:30px}
  .nav-cta{gap:2px}
  .nav-cta .btn{padding:11px 13px;font-size:13.5px}
  .burger{padding:8px 0 8px 6px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}