/* ==========================================================================
   SAFERSOL SAC — Media queries
   Desktop-first. Breakpoints: 1200 · 992 · 768 · 560 px
   ========================================================================== */

/* ==========================================================================
   ≤ 1200px — Portátil
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --fs-4xl: 2.75rem; --sp-24: 5rem; }

  .nav__link { padding: var(--sp-3) var(--sp-3); }
  .logo__tag { display: none; }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   ≤ 992px — Tablet: aparece el menú hamburguesa
   ========================================================================== */
@media (max-width: 992px) {
  :root { --fs-4xl: 2.25rem; --fs-3xl: 1.875rem; --sp-24: 4rem; --sp-16: 3rem; }

  .burger { display: flex; }

  /* Menú lateral deslizante */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 250;
    width: min(320px, 86vw);
    padding: var(--sp-16) var(--sp-5) var(--sp-6);
    background: #fff;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform var(--transition);
  }
  .nav.is-open { transform: translateX(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__item { border-bottom: 1px solid var(--border); }

  .nav__link {
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-3);
    font-size: var(--fs-base);
  }

  /* En móvil el submenú se despliega en el flujo, no flotando */
  .nav__sub {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--light);
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: max-height var(--transition), padding var(--transition);
  }
  .nav__sub.is-open { max-height: 320px; padding: var(--sp-2); margin-bottom: var(--sp-3); }
  .nav__item:hover > .nav__sub { max-height: 0; padding: 0; }
  .nav__item:hover > .nav__sub.is-open { max-height: 320px; padding: var(--sp-2); }

  /* Capa oscura tras el menú abierto */
  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(22, 34, 74, .55);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
  }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }

  .header__phone { display: none; }

  .hero__slides { height: 520px; }
  .hero__arrow { width: 42px; height: 42px; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; gap: var(--sp-12); }
  .split .about-media { order: -1; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .counters { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10); }

  .logo-grid { grid-template-columns: repeat(3, 1fr); }

  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ≤ 768px — Tablet vertical / móvil grande
   ========================================================================== */
@media (max-width: 768px) {
  :root { --fs-4xl: 2rem; --fs-3xl: 1.625rem; --fs-2xl: 1.5rem; }

  .container { padding-inline: var(--sp-4); }

  /* El topbar se apila y las cuñas estorban: fuera */
  .topbar::before, .topbar::after { display: none; }
  .topbar__inner { flex-direction: column; gap: var(--sp-2); padding-block: var(--sp-3); }
  .topbar__list { justify-content: center; gap: var(--sp-4); }
  .topbar__list li:first-child { display: none; }

  .hero__slides { height: 460px; }
  .hero__arrow { display: none; }
  .hero__text { font-size: var(--fs-sm); }

  .grid--3, .grid--4 { grid-template-columns: 1fr; }

  .about-media { padding: var(--sp-6) var(--sp-6) var(--sp-6) 0; }
  .about-badge { position: static; margin-top: var(--sp-4); }

  .cta__inner { flex-direction: column; text-align: center; }

  .form--card { padding: var(--sp-6); }
}

/* ==========================================================================
   ≤ 560px — Móvil
   ========================================================================== */
@media (max-width: 560px) {
  :root { --fs-4xl: 1.75rem; }

  .header__inner { min-height: 70px; }
  .logo__mark { width: 34px; height: 38px; font-size: var(--fs-base); }
  .logo__name { font-size: var(--fs-lg); }

  .hero__slides { height: 440px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }

  .features-grid { grid-template-columns: 1fr; }

  .counters { grid-template-columns: 1fr; gap: var(--sp-8); }

  .logo-grid { grid-template-columns: repeat(2, 1fr); }

  .footer__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer__bottom { flex-direction: column; text-align: center; }

  .to-top { right: var(--sp-4); bottom: var(--sp-4); }
  .wa { left: var(--sp-4); bottom: var(--sp-4); }
}

/* ==========================================================================
   Impresión
   ========================================================================== */
@media print {
  .topbar, .header, .hero__arrow, .hero__dots, .to-top, .wa, .cta, .form { display: none !important; }
  body { color: #000; background: #fff; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .section { padding-block: var(--sp-6); page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}