/* =========================================================================
   ENERGY ALLIANCE — ESTILOS RESPONSIVOS
   ========================================================================= */

/* El menú principal cambia a formato "drawer" (panel deslizante) en
   cualquier ancho igual o menor a 1024px. Este umbral se eligió porque el
   número de elementos del nav (Inicio, Soluciones, Método, Experiencia,
   Ecosistema ALLIANCE, Contacto, selector de idioma) no cabe en una sola
   línea horizontal por debajo de ese ancho sin desbordarse. */
@media (max-width: 1024px) {
  .header-inner { flex-wrap: nowrap; }
  .main-nav {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 86vw);
    max-width: 86vw;
    background: #fff; box-shadow: -8px 0 30px rgba(10,31,68,0.15);
    transform: translateX(100%); transition: transform 0.3s ease;
    padding: 90px 28px 28px;
    padding-right: max(28px, env(safe-area-inset-right));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    overflow-y: auto; z-index: 1000;
    visibility: hidden;
    /* Anula el display:flex en fila definido para escritorio (css/style.css):
       en el drawer, los enlaces y el selector de idioma se apilan en columna. */
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .main-nav.open { transform: translateX(0); visibility: visible; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; flex-wrap: wrap; }
  .main-nav ul li { width: 100%; }
  .main-nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--ea-border); width: 100%; font-size: 0.95rem; }
  .main-nav a.nav-cta { text-align: center; margin-top: 14px; }
  .menu-toggle {
    display: flex;
    width: 44px; height: 44px;
    min-width: 44px;
  }
  /* Barra superior en móvil/tablet: solo logo + hamburguesa (el selector de
     idioma fue reubicado por JS dentro de .main-nav). */
  .header-actions { gap: 0; }

  /* Dropdown en móvil/tablet: expandido inline, sin flotante */
  .nav-item-dropdown { width: 100%; }
  .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--ea-border); font-size: 0.95rem; }
  .nav-dropdown-panel {
    display: none; position: static; box-shadow: none; border: none; border-radius: 0;
    background: var(--ea-bg-soft); padding: 4px 0 4px 14px; min-width: 0;
  }
  .nav-item-dropdown.open .nav-dropdown-panel { display: block; }
  .nav-dropdown-panel a { border-bottom: 1px solid var(--ea-border); border-radius: 0; padding: 12px 4px; }

  .lang-switch-group {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ea-border);
    width: 100%;
    flex-wrap: wrap;
  }
  .lang-switch-group .lang-switch { padding: 7px 14px; font-size: 0.85rem; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(10,31,68,0.4); z-index: 950; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }
}

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding: 48px 24px 56px; }
  .hero-copy { order: -1; }
  .hero-media { margin-top: 32px; }
  .split-block, .case-block { grid-template-columns: 1fr; }
  .case-media { order: -1; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  section { padding: 64px 0; }
}

@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; }
  .step-item { grid-template-columns: 1fr; gap: 6px; }
  h1 { line-height: 1.2; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  section { padding: 48px 0; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric-box .metric-value { font-size: 1.9rem; }
}