/* ============================================================
   VYH2 — RESPONSIVE GLOBAL OVERRIDES
   Breakpoints: 1280px | 1024px | 768px | 480px | 360px
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1280px — WIDE LAPTOP
══════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .container { padding-inline: var(--space-8); }
}

/* ══════════════════════════════════════════════════════════
   1024px — TABLET LANDSCAPE / SMALL LAPTOP
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Layout ── */
  .section { padding-block: var(--space-16); }

  /* ── Header ── */
  :root { --header-h: 64px; }

  /* ── Hero ── */
  .hero__content { padding-block: var(--space-24) var(--space-16); }
  .hero__stats   { gap: var(--space-6); }

  /* ── About ── */
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* ── Services ── */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Ultrasep ── */
  .ultrasep__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .ultrasep__right { max-width: 560px; }

  /* ── Portfolio ── */
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .portfolio-item--large {
    grid-column: span 2;
    aspect-ratio: 16/9;
  }

  /* ── Clients stats ── */
  .stats-strip { grid-template-columns: repeat(2, 1fr); }

  /* ── Contact ── */
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* ── CTA strip ── */
  .cta-strip__actions { gap: var(--space-3); }

  /* ── Footer ── */
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .footer__brand { grid-column: span 2; }
}

/* ══════════════════════════════════════════════════════════
   768px — TABLET PORTRAIT
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Layout ── */
  .section { padding-block: var(--space-12); }
  .container { padding-inline: var(--space-5); }

  /* ── Section headers ── */
  .section-title    { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); }
  .section-subtitle { font-size: var(--text-base); }
  .section-header   { margin-bottom: var(--space-10); }

  /* ── Topbar ── */
  #topbar { display: none; } /* ocultar en tablet pequeño — info ya está en footer */

  /* ── Header ── */
  :root { --header-h: 60px; }
  #header { top: 0; }
  body { padding-top: var(--header-h); }

  /* ── Hero ── */
  #hero { min-height: 100svh; }
  .hero__content { padding-block: var(--space-20) var(--space-12); }
  .hero__content .container { gap: var(--space-8); }
  .hero__eyebrow { font-size: 10px; }
  .hero__title   { font-size: clamp(var(--text-3xl), 7vw, var(--text-4xl)); }
  .hero__description { font-size: var(--text-base); }
  .hero__stats   { gap: var(--space-4); }
  .hero__stat-value { font-size: var(--text-2xl); }
  .hero__card-grid  { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .hero__mini-card--accent { grid-column: span 2; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1; justify-content: center; }

  /* ── About ── */
  .about__lead { font-size: var(--text-base); }
  .about__mission-vision { grid-template-columns: 1fr; gap: var(--space-3); }

  /* ── Services ── */
  .services__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .service-card   { padding: var(--space-6); }

  /* ── Pilar cards ── */
  .pilar-card { padding: var(--space-4) var(--space-5); }

  /* ── Ultrasep ── */
  .ultrasep__title  { font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl)); }
  .ultrasep__right  { max-width: 100%; }
  .ultrasep__product-card { padding: var(--space-6); }
  .ultrasep__specs  { grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
  .spec-item        { padding: var(--space-3); }
  .spec-item__value { font-size: var(--text-xl); }
  .ultrasep__cta    { flex-wrap: wrap; }
  .ultrasep__cta .btn { flex: 1 1 140px; justify-content: center; }

  /* ── Portfolio ── */
  .portfolio__filters { gap: var(--space-2); }
  .filter-btn { font-size: var(--text-xs); padding: 6px var(--space-4); }

  /* ── Clients ── */
  .stats-strip { gap: var(--space-3); }
  .stat-block  { padding: var(--space-6) var(--space-4); }
  .clients__certs { gap: var(--space-3); flex-direction: column; align-items: center; }

  /* ── PDF Modal ── */
  .pdf-modal__header { padding: var(--space-3) var(--space-5); }
  .pdf-modal__title  { white-space: normal; line-height: var(--leading-tight); }

  /* ── CTA strip ── */
  #cta-strip { padding-block: var(--space-16); }
  .cta-strip__title { font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl)); }
  .cta-strip__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-strip__actions .btn { width: 100%; justify-content: center; }

  /* ── Contact form ── */
  .contact__form-wrap { padding: var(--space-6); }
  .contact__form-title { font-size: var(--text-xl); margin-bottom: var(--space-6); }

  /* ── Footer ── */
  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .footer__brand { grid-column: span 1; }
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
  }
  .footer__bottom-links { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   480px — MOBILE LANDSCAPE / LARGE PHONE
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Layout ── */
  .section { padding-block: var(--space-10); }
  .container { padding-inline: var(--space-4); }

  /* ── Header ── */
  :root { --header-h: 56px; }
  /* Ocultar texto del logo para ganar espacio */
  /* .header__logo-tagline { display: none; } */
  .header__logo-name    { font-size: var(--text-lg); }
  /* Colapsar el botón "Cotizar" (texto) a solo icono WA */
  .header__actions .btn-primary { display: none; }
  /* WA button: solo icono */
  .header__actions .btn-tech { padding: 6px 10px; gap: 0; }
  .header__actions .btn-tech .btn-label { display: none; }
  .header__hamburger { display: flex; }

  /* ── Hero ── */
  .hero__content { padding-block: var(--space-16) var(--space-10); }
  .hero__title   { font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl)); }
  .hero__title-sub { font-size: 0.45em; }
  .hero__description { font-size: var(--text-sm); }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__stats   { flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-4); }
  .hero__stat    { flex: 1 1 80px; }
  .hero__card-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .hero__mini-card--accent { grid-column: span 1; }
  .hero__mini-card { padding: var(--space-4); }
  .hero__scroll { display: none; }

  /* ── About ── */
  .pilar-card { flex-wrap: wrap; }

  /* ── Services ── */
  .service-card { gap: var(--space-4); }
  .service-card__title { font-size: var(--text-lg); }

  /* ── Ultrasep ── */
  .ultrasep__specs { grid-template-columns: 1fr 1fr; }
  .ultrasep__cta .btn { width: 100%; }

  /* ── Portfolio ── */
  .portfolio__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .portfolio-item--large {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }
  .portfolio__filters {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portfolio__filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; }

  /* ── Clients ── */
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .client-card { min-height: 64px; padding: var(--space-3); }

  /* ── PDF Modal — centered on mobile ── */
  .pdf-modal { align-items: center; }
  .pdf-modal__panel {
    width: min(92vw, 100%);
    height: min(88vh, 88dvh);
    border-radius: var(--radius-xl);
    transform: translateY(24px);
  }
  .pdf-modal.is-open .pdf-modal__panel { transform: translateY(0); }
  .pdf-modal__header {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .pdf-modal__title  { font-size: var(--text-sm); flex-basis: 100%; order: -1; }
  .pdf-modal__actions { width: 100%; justify-content: space-between; }
  .pdf-modal__open   { flex: 1; text-align: center; }

  /* ── Contact ── */
  .contact__quick-actions .btn { flex: 1; justify-content: center; }
  .form-row { grid-template-columns: 1fr; }
  .contact__form-wrap { padding: var(--space-5); border-radius: var(--radius-xl); }

  /* ── Lightbox ── */
  .lightbox { padding: var(--space-4); }
  .lightbox__nav--prev { left: var(--space-1); }
  .lightbox__nav--next { right: var(--space-1); }
  .lightbox__close { top: -44px; }
  .lightbox__title { font-size: var(--text-lg); }

  /* ── Footer ── */
  #footer { padding-top: var(--space-12); }
  .footer__social { gap: var(--space-2); }
  .footer__social-link { width: 40px; height: 40px; }

  /* ── CTA strip ── */
  #cta-strip { padding-block: var(--space-12); }
  .cta-strip__sub { font-size: var(--text-sm); }

  /* ── WhatsApp float ── */
  .whatsapp-float { bottom: var(--space-4); right: var(--space-4); width: 50px; height: 50px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
  .whatsapp-float__tooltip { display: none; }
}

/* ══════════════════════════════════════════════════════════
   360px — PEQUEÑO (Samsung Galaxy, etc.)
══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

  :root {
    --space-6: 1.25rem;
    --text-base: 0.9375rem;
  }

  .container { padding-inline: var(--space-3); }
  .section   { padding-block: var(--space-8); }

  .hero__title { font-size: clamp(var(--text-2xl), 9vw, var(--text-3xl)); }
  .section-title { font-size: clamp(var(--text-xl), 7vw, var(--text-2xl)); }

  .btn { padding: var(--space-3) var(--space-5); font-size: var(--text-xs); }
  .btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }

  .stats-strip { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .stat-block  { padding: var(--space-4) var(--space-3); }
  .stat-block__number { font-size: var(--text-2xl); }

  .service-card  { padding: var(--space-5); }
  .form-group    { gap: var(--space-1); }
}

/* ══════════════════════════════════════════════════════════
   TOUCH / HOVER IMPROVEMENTS
══════════════════════════════════════════════════════════ */
@media (hover: none) {
  /* En dispositivos táctiles los hovers no son persistentes */
  .portfolio-item__overlay { opacity: 1; background: linear-gradient(to top, rgba(6,13,26,0.85) 0%, transparent 50%); }
  .portfolio-item__zoom    { display: none; }
  .card:hover, .service-card:hover, .pilar-card:hover { transform: none; }
  .btn:hover::after { background: rgba(255,255,255,0); }
}

/* ══════════════════════════════════════════════════════════
   MOBILE NAV — asegurar que ocupa toda la pantalla
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .header__mobile-nav {
    top: var(--header-h);
    padding: var(--space-5) var(--space-5) var(--space-8);
  }
  .mobile-nav__link {
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-lg);
  }
  .mobile-nav__cta {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }
  .mobile-nav__cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════ */
@media print {
  #topbar, .header__hamburger, .whatsapp-float,
  .hero__scroll, .lightbox, #cta-strip { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
  a { color: #000; text-decoration: underline; }
}