/* ══════════════════════════════════════════════
   SETEC Theme – responsive.css
   Breakpoints: mobile <640px | tablet 640–1023px | desktop ≥1024px
══════════════════════════════════════════════ */

/* ─── GLOBAL ─── */
body { overflow-x: hidden; }

/* ══════════════════════════════════════════════
   HEADER / NAV
══════════════════════════════════════════════ */
#setec-nav-mobile-btn { display: none; }

/* Menú slide-in — siempre en DOM, JS abre/cierra */
#setec-mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 9998;
  padding: 24px 24px 40px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
}
#setec-mobile-menu.open { transform: translateX(0); }

/* Mobile + Tablet (<1024px): hamburguesa visible, nav naranja oculto */
@media (max-width: 1023px) {
  #setec-nav-mobile-btn { display: flex; }
  .setec-search-form,
  nav.bg-brand-orange { display: none !important; }
  #site-header .flex.items-center.gap-4 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Desktop: ocultar menú mobile */
@media (min-width: 1024px) {
  #setec-mobile-menu { display: none !important; }
}

/* ══════════════════════════════════════════════
   HOME / FRONT-PAGE
══════════════════════════════════════════════ */

/* Hero slider */
@media (max-width: 639px) {
  #hero { height: 300px !important; }
  #hero .absolute.bottom-16 { bottom: 24px !important; padding-left: 20px !important; padding-right: 20px !important; max-width: 100% !important; }
  #hero h1 { font-size: 30px !important; line-height: 1.1 !important; margin-bottom: 8px !important; }
  #hero p { font-size: 13px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #hero { height: 420px !important; }
  #hero .absolute.bottom-16 { padding-left: 40px !important; max-width: 500px !important; }
  #hero h1 { font-size: 44px !important; }
}

/* Tecnología y Sostenibilidad (banner naranja) */
@media (max-width: 1023px) {
  /* Reglas .bg-brand-orange .grid.grid-cols-2 eliminadas (2026-06-28):
     el banner ahora usa `grid-cols-1 lg:grid-cols-2`, así que esas reglas ya no
     lo afectaban y SOLO rompían el FOOTER (también .bg-brand-orange y con la clase
     literal grid-cols-2): lo forzaban a 1 columna y metían padding al primer hijo
     (Productos). Sin ellas, el footer respeta su `grid-cols-2 lg:grid-cols-4`. */
  .bg-brand-orange h2 { font-size: 28px !important; }
}

/* Audiencias */
@media (max-width: 1023px) {
  .grid.grid-cols-2.h-\[360px\] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .grid.grid-cols-2.h-\[360px\] > div {
    height: 200px;
  }
  .grid.grid-cols-2.border-t {
    grid-template-columns: 1fr !important;
  }
  .grid.grid-cols-2.border-t > div:first-child {
    border-right: none !important;
    border-bottom: 1px solid #e5e7eb;
    padding: 32px 20px !important;
  }
  .grid.grid-cols-2.border-t > div:last-child {
    padding: 32px 20px !important;
  }
}

/* ══════════════════════════════════════════════
   HERO GENÉRICO (setec-hero)
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .setec-hero { height: 260px !important; }
  .setec-hero h1 { font-size: 32px !important; margin-bottom: 12px !important; }
  .setec-hero-inner { padding-right: 20px !important; padding-left: 20px !important; justify-content: center !important; }
  .setec-hero-inner > div { text-align: center !important; max-width: 100% !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .setec-hero { height: 300px !important; }
  .setec-hero h1 { font-size: 44px !important; }
  .setec-hero-inner { padding-right: 48px !important; }
}

/* ══════════════════════════════════════════════
   INTRO
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .setec-intro { padding: 32px 20px !important; }
  .setec-intro h2 { font-size: 22px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .setec-intro { padding: 48px 40px !important; }
}

/* ══════════════════════════════════════════════
   SECCIONES DE SERVICIO
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .svc-grid { grid-template-columns: 1fr !important; }
  .svc-panel { padding: 36px 20px !important; }
  .svc-panel h2 { font-size: 22px !important; }
  .svc-img { height: 200px !important; min-height: 200px !important; }
  .svc-btn { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  #instalacion .svc-img { order: 2; }
  #instalacion .svc-panel { order: 1; }
  .svc-panel-isotipo { width: 190px !important; right: -24px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .svc-panel { padding: 48px 36px !important; }
  .svc-btn { width: 100% !important; max-width: 320px !important; }
}

/* ══════════════════════════════════════════════
   CTA
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .setec-cta { padding: 48px 20px !important; }
  .setec-cta h2 { font-size: 26px !important; }
}

/* ══════════════════════════════════════════════
   SOBRE SETEC
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .sobre-hero-img img { max-height: 240px !important; }
  .sobre-isotipo-wrap { display: none !important; }
  .sobre-hero-text { padding: 36px 20px !important; }
  .sobre-hero-text h1 { font-size: 34px !important; }
  .mv-card-inner { padding: 20px 16px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .sobre-isotipo-wrap { display: none !important; }        /* el isotipo (~390px) se solapaba con el texto en tablet */
  .sobre-hero-text { padding: 48px !important; }           /* sin el offset izq que era para el isotipo */
  .mv-card-inner { padding: 28px !important; }
}

/* ══════════════════════════════════════════════
   PROYECTOS (patrón Z)
══════════════════════════════════════════════ */
/* El patrón Z usa Tailwind responsive + CSS order para alternar.
   Las clases lg:grid-cols-2 y order-first / lg:order-last
   gestionan el layout. Solo necesitamos overrides menores aquí. */
@media (max-width: 639px) {
  .proyecto-row { min-height: auto !important; }
}

/* ══════════════════════════════════════════════
   PRODUCTOS ARCHIVE
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Tailwind classes handle hero height and card heights now */
  .productos-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .productos-intro { padding: 32px 20px !important; }
  /* Comparison table: already wrapped in overflow-x div */
  /* CTA button: w-full handled by Tailwind */
}
@media (min-width: 640px) and (max-width: 1023px) {
  .productos-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════
   CONTACTO
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .contacto-hero { min-height: 280px !important; }
  .contacto-hero-graphic { display: none !important; }
  .contacto-hero-inner { padding: 40px 20px 48px !important; }
  .contacto-hero-title { font-size: 32px !important; }
  .contacto-main {
    grid-template-columns: 1fr !important;
    padding: 40px 20px !important;
    gap: 32px !important;
  }
  .contacto-card { padding: 28px 20px 32px !important; }
  .siguenos-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .contacto-siguenos { padding-bottom: 48px !important; }
  .cf-rect87-wrap { border-radius: 12px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .contacto-hero { min-height: 380px !important; }
  .contacto-hero-graphic { width: 480px !important; height: 480px !important; top: 40px !important; left: -120px !important; }
  .contacto-hero-graphic img { width: 480px !important; height: 480px !important; }
  .contacto-hero-inner { padding: 64px 40px 64px 320px !important; }
  .contacto-main {
    grid-template-columns: 1fr !important;
    padding: 56px 40px !important;
    gap: 40px !important;
  }
  .contacto-card { padding: 36px 32px !important; }
  .siguenos-wrap { padding-left: 40px !important; padding-right: 40px !important; }
}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 16px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 4px !important;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════
   SERVICIO AL CLIENTE
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .sac-hero-isotipo { display: none !important; }
  .sac-hero-inner { padding: 48px 20px !important; max-width: 100% !important; }
  .sac-hero-title { font-size: 24px !important; }
  .sac-hero-body { font-size: 14px !important; }
  .sac-form-wrap { padding: 0 20px !important; }
  .sac-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .sac-form-section { padding: 48px 0 56px !important; }
  .sac-form-title { font-size: 22px !important; margin-bottom: 32px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .sac-hero-inner { padding: 56px 40px !important; }
  .sac-form-wrap { padding: 0 40px !important; }
  .sac-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
}

/* ══════════════════════════════════════════════
   PREGUNTAS FRECUENTES
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .faq-hero { min-height: auto !important; padding-bottom: 20px; }
  .faq-hero-isotipo { width: 200px !important; top: -22px !important; }
  .faq-hero-inner { padding: 40px 20px !important; }
  .faq-hero-title { font-size: 40px !important; }
  .faq-section { padding: 48px 0 64px !important; }
  .faq-wrap { padding: 0 20px !important; gap: 36px !important; }
  .faq-question { font-size: 14px !important; }
  .faq-pill { padding: 14px 14px 14px 20px !important; border-radius: 50px !important; }
  .faq-category-title { font-size: 20px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .faq-hero-isotipo { width: 320px !important; top: -22px !important; }
  .faq-hero-inner { padding: 56px 40px !important; }
  .faq-hero-title { font-size: 64px !important; }
  .faq-wrap { padding: 0 40px !important; }
}

/* ══════════════════════════════════════════════
   NOTICIAS
   Responsive principal en style-noticias.css.
   Solo overrides de integración global aquí.
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .pn-hero { height: 260px !important; }
  .pn-hero__content { left: 20px !important; bottom: 32px !important; }
  .pn-featured { padding: 32px 20px !important; }
  .pn-recientes { padding: 0 20px 48px !important; }
  .pn-distinciones { padding: 48px 20px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .pn-hero { height: 360px !important; }
  .pn-featured { padding: 40px 32px !important; }
  .pn-recientes { padding: 0 32px 56px !important; }
  .pn-distinciones { padding: 56px 32px !important; }
}

/* ══════════════════════════════════════════════
   CTA CONTÁCTANOS (Sobre SETEC)
══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .cta-contactanos > div { padding-top: 40px !important; padding-bottom: 40px !important; }
  .cta-contactanos img { border-radius: 12px; }
}

/* ══════════════════════════════════════════════
   POLÍTICA DE PRIVACIDAD
══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .pp-content { padding: 40px 20px 56px; }
  .pp-h2 { font-size: 16px; margin-top: 36px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .pp-content { padding: 48px 40px 64px; }
}