/* ============================================================
   responsive.css — Adaptación por ancho (desktop-first descendente)
   BP1 ≤1100px : header compacto
   BP2 ≤1024px : menú móvil + grillas 2 col
   BP3 ≤768px  : una columna + paneles apilados
   BP4 ≤420px  : header ultra-compacto
   BP-WIDE ≥1440px : contenedor amplio
   ============================================================ */

/* ---------- BP1: portátiles pequeños ---------- */
@media (max-width:1100px){
  .nav-link{padding:10px 8px;font-size:.88rem}
  .header-inner{gap:16px}
}

/* ---------- BP2: tablet horizontal → menú hamburguesa ---------- */
@media (max-width:1024px){
  .menu-toggle{display:flex}
  .header-inner{padding-bottom:12px}
  .brand,.header-actions{padding-bottom:0}
  /* La fila 2 pasa a ser un panel desplegable bajo el header */
  .site-nav{position:absolute;top:100%;left:0;right:0;order:0;flex:none;border-top:0;border-bottom:1px solid #2c2d30;background:#141517;box-shadow:0 30px 60px rgba(0,0,0,.5);display:none;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100vh - 72px);overflow-y:auto;padding:12px 24px 24px}
  .site-nav.open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .nav-item{flex-direction:column;align-items:stretch}
  .nav-link{width:100%;text-align:left;padding:12px 10px;font-size:1rem}
  .has-sub{flex-wrap:wrap}
  .has-sub > .nav-link{flex:1}
  .sub-toggle{padding:12px 14px;font-size:1rem}
  /* En móvil el submenú es un acordeón inline (solo por click, clase .open) */
  .has-sub:hover > .nav-sub,.has-sub:focus-within > .nav-sub{display:none}
  .has-sub.open > .nav-sub{display:block}
  .nav-sub{position:static;box-shadow:none;border:0;border-left:2px solid var(--gold);border-radius:0;margin:0 0 8px 10px;min-width:0;background:transparent;padding:4px 0 4px 8px}
  .nav-sub::before{display:none}
  .nav-sub a{padding:10px 12px}
  .nav-cta{display:block;padding:12px 0 4px}
  .nav-cta .btn{display:block;text-align:center}
  .header-cta{display:none} /* en móvil el CTA vive dentro del panel */
  /* Grillas */
  .grid-4{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-visual{order:-1}
  .hero-visual img{width:min(260px,60%)}
}

/* ---------- BP3: tablet vertical / móvil ---------- */
@media (max-width:768px){
  body{font-size:16px}
  .section{padding:52px 0}
  .section-head{margin-bottom:28px}
  .section-head-row{margin-bottom:28px}
  .grid-2,.grid-3{grid-template-columns:1fr;gap:24px}
  .cta-box{padding:40px 24px}
  .grid-2-form{grid-template-columns:1fr}
  .cookie-banner{flex-direction:column;align-items:stretch}
  .footer-bottom-row{flex-direction:column;align-items:flex-start}
  .faq-item summary{padding:16px 18px}
  .contact-form{padding:22px}
}

/* ---------- BP4: móviles pequeños ---------- */
@media (max-width:420px){
  .container{padding:0 16px}
  .header-inner{padding-left:14px;padding-right:14px;gap:8px}
  .brand-logo{width:38px;height:38px}
  .brand-name{display:none} /* el escudo identifica la marca; evita desborde con el pill de idioma */
  .language-switch{font-size:.68rem}
  .language-switch a,.lang-current{padding:4px 7px}
  .menu-label{display:none}
  .hero{padding:44px 0 32px}
  .grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px;padding:44px 16px 24px}
}

/* ---------- Pantallas anchas ---------- */
@media (min-width:1440px){
  .container{max-width:1280px}
}