/* Responsive — menú móvil y layout 100% */

html, body {
  max-width: 100%;
  overflow-x: clip;
}
img, video, iframe, svg {
  max-width: 100%;
}
.wrap, .wrap-wide { min-width: 0; }

@media (max-width: 1100px) {
  .cards-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .nav { gap: 1rem; }
}

@media (max-width: 1100px) {
  .site-header {
    height: auto;
    z-index: 200;
  }
  .header-inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    overflow: visible !important;
    min-height: 52px;
    padding: 0.25rem 0.45rem 0.25rem 0.85rem;
    border-radius: 18px;
  }
  .brand-logo {
    height: 28px;
    max-width: min(168px, 52vw);
  }
  .header-cta { display: none !important; }
  .header-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
  }
  .header-inner > .nav { display: none; }
  .nav-toggle {
    display: grid !important;
    place-items: center;
    position: fixed !important;
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    z-index: 10000 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    margin: 0;
    background: #1a3a4a !important;
    border: 0 !important;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(26, 58, 74, 0.28);
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    background: #f6f1e8 !important;
  }

  .nav,
  .nav.nav-panel {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.2rem;
    padding: calc(5.2rem + env(safe-area-inset-top)) 1.4rem calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: rgba(251, 248, 243, 0.96) !important;
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    z-index: 240 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav,
  body.nav-open .nav.nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.nav-open .site-header { z-index: 250; }
  body.nav-open .nav-toggle,
  body.nav-open .brand { z-index: 260; }

  .nav-list {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0 !important;
  }
  .nav > a,
  .nav-list > .menu-item > a,
  .nav-drop > button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    font-size: 1.45rem !important;
    font-family: var(--font-serif);
    padding: 0.35rem 0.2rem;
    border-bottom: 1px solid rgba(228, 220, 208, 0.7);
  }
  .nav-drop { width: 100%; }
  .nav-drop > button { justify-content: space-between; }
  .nav-drop > button::after {
    width: 8px;
    height: 8px;
    margin-left: auto;
    transform: rotate(45deg);
    transition: transform 0.25s;
  }
  .nav-drop.is-open > button::after {
    transform: rotate(225deg);
  }
  .nav-drop-menu,
  .nav-list .sub-menu {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    top: auto !important;
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    min-width: 0 !important;
    width: 100%;
    margin: 0;
    padding: 0.2rem 0 0.8rem 0.8rem !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
  }
  .nav-drop-menu::before,
  .nav-list .sub-menu::before { display: none !important; }
  .nav-drop.is-open .nav-drop-menu,
  .menu-item-has-children.is-open > .sub-menu {
    display: block !important;
  }
  .nav-drop-menu a,
  .nav-list .sub-menu a {
    font-family: var(--font-sans) !important;
    font-size: 1.02rem !important;
    min-height: 44px;
    padding: 0.55rem 0.2rem !important;
    white-space: normal !important;
    border-bottom: 0;
  }
  .nav-mobile-cta {
    display: flex !important;
    margin-top: 1.4rem;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-visual {
    min-height: min(62svh, 520px);
    order: -1;
    border-radius: 0 0 28px 28px !important;
  }
  .hero-copy {
    padding: 1.8rem 1.15rem 2.6rem;
    min-width: 0;
    overflow: visible;
  }
  .hero-copy > *,
  .hero-page .wrap > *,
  .split > *,
  .page-intro,
  .stack-lg > * {
    min-width: 0;
    max-width: 100%;
  }
  .hero-copy h1,
  .hero-page h1,
  .hero-copy .lead,
  .hero-page .lead,
  h2, p {
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
  }
  .hero-copy::before { inset: 0; border-radius: 22px; }
  .hero-page {
    min-height: 52svh;
    padding: 5.2rem 0 2.4rem;
    border-radius: 0 0 24px 24px;
  }
  .hero-page h1 { max-width: 14ch; }
  .btn-row { gap: 0.6rem; }
  .btn { min-height: 46px; padding: 0.75rem 1.15rem; }
  .section { padding: 3.4rem 0; }
  .section-tight { padding: 2.6rem 0; }
  .cta-band .wrap { padding: 2.2rem 1.1rem !important; }
}

@media (max-width: 720px) {
  .cards-5,
  .cards-3,
  .cards-2 { grid-template-columns: 1fr !important; }
  .pillars,
  .timeline,
  .values,
  .axes { grid-template-columns: 1fr !important; }
  .mosaic:not([data-carousel]) { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .equip-card { grid-template-columns: 1fr; }
  .equip-meta { grid-template-columns: 1fr; }
  .panel-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .map-wrap iframe { height: 280px; }
  .media { min-height: 0; }
  .flow { gap: 0.4rem; }
}

@media (max-width: 560px) {
  .wrap, .wrap-wide { padding-inline: 1rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  h1, .h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .hero-copy .lead { font-size: 1rem; }
  .wa-float {
    width: 50px;
    height: 50px;
    bottom: max(1rem, env(safe-area-inset-bottom));
    right: max(0.9rem, env(safe-area-inset-right));
  }
  .chip { font-size: 0.84rem; }
}

@media (max-width: 380px) {
  .brand-logo { height: 24px; max-width: 46vw; }
}

/* Fuera de query: el botón tiene que existir en móvil aunque el viewport se reporte mal */
.nav-toggle {
  position: fixed !important;
  top: max(0.7rem, env(safe-area-inset-top));
  right: max(0.7rem, env(safe-area-inset-right));
  display: grid !important;
  place-items: center;
  width: 48px !important;
  height: 48px !important;
  background: #1a3a4a !important;
  z-index: 10000 !important;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(26, 58, 74, 0.3);
}
@media (min-width: 1101px) {
  .nav-toggle {
    position: relative !important;
    display: none !important;
    box-shadow: none;
    top: auto;
    right: auto;
    width: 44px !important;
    height: 44px !important;
  }
}