/* ============================================================
   PARKER SOLUTIONS — RESPONSIVE
   Single source of truth for mobile/tablet overrides.
   Loaded LAST so the cascade lets it win over everything else.

   Breakpoints:
   - 960px : tablet & below — main responsive shift
   - 640px : mobile
   - 480px : small phones
   ============================================================ */

/* ============================================================
   OVERFLOW DEFENSE
   ============================================================ */
html { overflow-x: clip; }   /* root-level: evita anchura fantasma del documento */
body {
  overflow-x: hidden;        /* fallback */
  overflow-x: clip;          /* modern: keeps sticky nav working */
}
img, svg, video { max-width: 100%; }

/* ============================================================
   NAV — HAMBURGER + OVERLAY
   ============================================================ */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--nav-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-body);
  transition: all var(--transition-fast);
  padding: 0;
}
.nav-burger:hover {
  color: var(--text-strong);
  background: rgba(107, 125, 245, 0.10);
  border-color: rgba(107, 125, 245, 0.35);
}
.nav-burger svg { width: 18px; height: 18px; display: block; }

.nav-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;            /* nunca más ancho que el viewport, pase lo que pase */
  max-width: 100vw;
  z-index: 100;
  background: rgba(14, 14, 30, 0.97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease, visibility 0s linear 0s;
}
.nav-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.nav-overlay-brand { display: inline-flex; align-items: center; }
.nav-overlay-brand img { height: 24px; width: auto; }
.nav-overlay-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--transition-fast);
}
.nav-overlay-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}
.nav-overlay-close svg { width: 18px; height: 18px; }

.nav-overlay-links {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 16px 0;
}
.nav-overlay-links a {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: 10px 24px;
  letter-spacing: -0.01em;
  text-align: center;
  transition: color var(--transition-fast);
}
.nav-overlay-links a.active,
.nav-overlay-links a:hover { color: var(--parker-primary-light); }
.nav-overlay-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(107, 125, 245, 0.2);
}
.nav-overlay-actions .btn { justify-content: center; }

body.nav-open { overflow: hidden; touch-action: none; }

/* ============================================================
   ACCORDION COMPONENT
   Activo SOLO en ≤960px. En desktop, se renderiza expandido sin
   chevron ni interacción. Permite empaquetar bloques densos en
   móvil sin perder información ni cambiar la estructura HTML.

   Uso:
     <div class="accordion">
       <div class="accordion-item">
         <button class="accordion-header" aria-expanded="false">
           Título
           <svg class="accordion-chevron" ...></svg>
         </button>
         <div class="accordion-panel">
           <div class="accordion-panel-inner">
             ...contenido...
           </div>
         </div>
       </div>
       ...
     </div>
   ============================================================ */
.accordion-header {
  all: unset;
  cursor: default;
  display: block;
  width: 100%;
}
.accordion-chevron { display: none; }
/* En desktop el contenido siempre visible y el header se renderiza como heading */

/* ROI wizard: chrome oculto en desktop (solo aparece ≤960px) */
.roi-wz-progress, .roi-wz-nav, .roi-wz-result { display: none; }

@media (max-width: 960px) {
  .accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .accordion-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    overflow: hidden;
  }
  .accordion-header {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 18px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-1);
    text-align: left;
    line-height: 1.3;
    transition: background var(--transition-fast);
  }
  .accordion-header:hover { background: rgba(107, 125, 245, 0.05); }
  .accordion-chevron {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--fg-3);
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
  }
  .accordion-header[aria-expanded="true"] .accordion-chevron {
    transform: rotate(180deg);
  }
  .accordion-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 320ms cubic-bezier(.4,0,.2,1);
  }
  .accordion-header[aria-expanded="true"] + .accordion-panel {
    max-height: 2000px; /* generoso, los items reales son más cortos */
  }
  .accordion-panel-inner {
    padding: 4px 18px 18px;
    color: var(--fg-2);
    font-size: 14px;
    line-height: 1.6;
  }
  .accordion-panel-inner > :first-child { margin-top: 0; }
  .accordion-panel-inner > :last-child { margin-bottom: 0; }
}

/* ============================================================
   TABLET & MOBILE (≤ 960px) — main responsive breakpoint
   ============================================================ */
@media (max-width: 960px) {

  /* TYPOGRAPHY scales */
  :root {
    --fs-display-xl: 36px;
    --fs-display-l: 28px;
    --fs-h1: 24px;
    --fs-h2: 20px;
    --fs-h3: 17px;
    --fs-h4: 15px;
  }

  /* CONTAINER — solo horizontal (no pisamos el padding vertical de .section) */
  .container { padding-left: 22px; padding-right: 22px; }

  /* NAV — hide desktop links, show burger */
  .site-header { padding: 0 16px; top: 12px; }
  .site-header-inner { padding: 10px 14px; }
  .site-nav { display: none; }
  .site-actions .hide-mobile { display: none; }
  .nav-burger { display: inline-flex; }
  .site-actions { gap: 8px; }
  .theme-toggle { width: 36px; height: 36px; }
  .lang-switch:not(.lang-switch-lg) { height: 36px; }

  /* TOP FADE smaller */
  body::before { height: 90px; }

  /* HERO */
  .hero {
    padding: 40px 22px;
    margin: 16px 16px 0;
    border-radius: 18px;
  }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-title { font-size: 34px; line-height: 1.08; }
  .hero-lede { font-size: 15px; max-width: 100%; }
  .hero-cta { flex-wrap: wrap; }
  .hero-product { max-width: 100%; }
  .hero-product-card { padding: 14px; }
  /* Disclaimer monoespaciado oculto en móvil — info legal queda en footer */
  .hero-fineprint { display: none; }

  /* SECTIONS — solo vertical (horizontal lo gestiona .container) */
  .section { padding-top: 44px; padding-bottom: 16px; }
  .section-head { margin-bottom: 28px; }
  .section-title { font-size: 24px; }
  .section-lede { font-size: 15px; }
  .section-eyebrow { font-size: 10px; }

  /* GRIDS que colapsan a 1 columna */
  .pricing-grid,
  .plan-grid,
  .feature-list,
  .stat-band-grid,
  .module-pick-grid,
  .vertical-grid,
  .site-footer-inner,
  .module-hero-grid,
  .module-vs-grid,
  .module-replace-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Configurador: grid items necesitan min-width:0 para respetar el track 1fr */
  .module-pick-grid { min-width: 0; }
  .module-pick { min-width: 0; }
  .vertical-grid { min-width: 0; }
  .vertical-pick { min-width: 0; }
  /* Bundle card "Set de operaciones": flex-shrink:0 en el precio lo corta → wrap */
  .module-pick.bundle-member [style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  /* El precio en bundle puede encoger en móvil */
  .module-pick.bundle-member [style*="flex-shrink:0"] {
    flex-shrink: 1 !important;
    min-width: 0;
  }

  /* ── SWIPE CAROUSELS ────────────────────────────────────────
     Grids de ≥3 cards → carrusel horizontal con scroll snap.
     Sangran hasta el borde de pantalla (negative margin trick)
     mostrando ~85% de la primera card + peek de la siguiente
     como affordance natural de swipe.
  ─────────────────────────────────────────────────────────── */
  .feature-grid,
  .sector-grid,
  .showcase-grid,
  .testimonial-grid,
  .impact-grid,
  /* Clases con nombre en formaciones */
  .form-step-grid,
  .form-team-grid,
  .form-premium-pack-grid,
  /* Inline repeat(3+) — excluir social-stats, replace-chips y feature-list (usa acordeón propio) */
  [style*="grid-template-columns:repeat(3,1fr)"]:not(.replace-chips):not(.social-stats):not(.feature-list),
  [style*="grid-template-columns:repeat(3, 1fr)"]:not(.replace-chips):not(.social-stats):not(.feature-list),
  [style*="grid-template-columns:repeat(3,minmax"]:not(.replace-chips):not(.social-stats):not(.feature-list),
  [style*="grid-template-columns:repeat(4,1fr)"]:not(.social-stats),
  [style*="grid-template-columns:repeat(4, 1fr)"]:not(.social-stats),
  [style*="grid-template-columns:repeat(4,minmax"]:not(.social-stats),
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(5,minmax"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns:repeat(6, 1fr)"] {
    /* Convertir a flex horizontal */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    /* Scroll horizontal con snap */
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px !important;
    /* Sangrar hasta los bordes de pantalla */
    margin-left: -22px;
    margin-right: -22px;
    padding: 4px 22px 20px;
    /* Fade lateral: derecha indica más contenido, izquierda al hacer scroll */
    -webkit-mask: linear-gradient(to right,
      transparent 0,
      black 16px,
      black calc(100% - 100px),
      transparent 100%
    );
    mask: linear-gradient(to right,
      transparent 0,
      black 16px,
      black calc(100% - 100px),
      transparent 100%
    );
  }
  .feature-grid::-webkit-scrollbar,
  .sector-grid::-webkit-scrollbar,
  .showcase-grid::-webkit-scrollbar,
  .testimonial-grid::-webkit-scrollbar,
  .impact-grid::-webkit-scrollbar,
  .form-step-grid::-webkit-scrollbar,
  .form-team-grid::-webkit-scrollbar,
  .form-premium-pack-grid::-webkit-scrollbar,
  [style*="grid-template-columns:repeat(3,"]::-webkit-scrollbar,
  [style*="grid-template-columns:repeat(4,"]::-webkit-scrollbar,
  [style*="grid-template-columns:repeat(5,"]::-webkit-scrollbar,
  [style*="grid-template-columns:repeat(6,"]::-webkit-scrollbar { display: none; }

  /* Cards: ocupa ~83vw → muestra inicio de la siguiente */
  .feature-grid > *,
  .sector-grid > *,
  .showcase-grid > *,
  .testimonial-grid > *,
  .impact-grid > *,
  .form-step-grid > *,
  .form-team-grid > *,
  .form-premium-pack-grid > *,
  [style*="grid-template-columns:repeat(3,"]:not(.replace-chips):not(.social-stats):not(.feature-list) > *,
  [style*="grid-template-columns:repeat(4,"]:not(.social-stats) > *,
  [style*="grid-template-columns:repeat(5,"] > *,
  [style*="grid-template-columns:repeat(6,"] > * {
    flex: 0 0 min(78vw, 300px) !important;
    width: auto !important;
    max-width: none !important;
    scroll-snap-align: center;
    /* Resetear cualquier width inline heredado */
    box-sizing: border-box;
  }


  /* MODULE GRID — 2 cols en tablet portrait */
  .module-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* SHOWCASE / dark feature sections */
  .showcase {
    margin: 28px 16px;
    padding: 40px 22px;
    border-radius: 20px;
    overflow: hidden; /* mantener para que border-radius recorte el contenido */
  }
  /* showcase-grid: scroll dentro del showcase, sin sangrado (ya está recuadrado) */
  .showcase-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .showcase-grid > * {
    flex: 0 0 min(88%, 320px) !important;
  }
  .showcase-tile { padding: 20px 18px; }
  .showcase-tile-h { font-size: 18px; }

  /* STAT BAND */
  .stat-band {
    margin: 0 16px;
    padding: 36px 22px;
    border-radius: 20px;
  }
  .stat-band-grid { gap: 24px; }
  .stat-band-number { font-size: 38px; }

  /* PRICING */
  .pricing-grid { max-width: 100%; }
  .pricing-card { padding: 24px 20px; }
  .pricing-amount { font-size: 34px; }

  /* PLAN GRID (precios page) */
  .plan-grid { max-width: 100%; }
  .plan-card { padding: 24px 20px; }
  .plan-card-price { font-size: 30px; }

  /* SECTOR / APP / ARCH HERO */
  .sector-hero,
  .app-hero,
  .arch-hero {
    margin: 16px 16px 0;
    padding: 40px 22px;
    border-radius: 20px;
  }
  .sector-hero-inner,
  .app-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* min-width:0 en grid items para que 1fr respete el ancho del container */
  .app-hero-inner > * { min-width: 0; }
  .sector-hero-inner > * { min-width: 0; }

  /* App hero: eyebrow largo → permite wrap (inline-flex no envuelve por defecto) */
  .app-hero .eyebrow {
    display: inline-block;
    white-space: normal;
    line-height: 1.5;
    max-width: 100%;
  }
  /* Botones sin margin-bottom en app-hero → wrap */
  .app-hero [style*="gap:14px"] { flex-wrap: wrap !important; }
  /* Stats con gap:24px → columna vertical */
  .app-hero [style*="gap:24px"][style*="padding-top:24px"] {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    max-width: 100% !important;
  }

  .sector-hero h1,
  .app-hero h1 { font-size: 32px; }

  /* Sector hero: lede y CTAs */
  .sector-hero-lede { font-size: 15px; line-height: 1.65; }
  /* Botones del hero sin margin-bottom → wrap igualmente */
  .sector-hero [style*="gap:14px"],
  .app-hero  [style*="gap:14px"] { flex-wrap: wrap !important; }
  .sector-hero [style*="gap:14px"] .btn,
  .app-hero  [style*="gap:14px"] .btn { white-space: normal; text-align: center; }

  /* Stack recomendado: filas con precios largos */
  .sector-stack-mod { flex-wrap: wrap; gap: 8px; }
  .sector-stack-mod-meta {
    flex-basis: 100%;          /* precio en su propia línea */
    margin-left: 38px;         /* alineado bajo el texto (icono 26px + gap 12px) */
    font-size: 10px;
    white-space: nowrap;
  }
  .sector-stack-head { flex-wrap: wrap; gap: 6px; }
  .arch-hero { padding: 44px 22px 36px; }
  .arch-hero h1 { font-size: 32px; }
  .arch-hero-meta { flex-wrap: wrap; gap: 24px; }

  /* CTA STRIP */
  .cta-strip {
    margin: 32px 16px 0;
    padding: 32px 22px;
    border-radius: 20px;
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .cta-strip h3 { font-size: 22px; }
  .cta-strip-actions {
    justify-self: stretch;
    min-width: 0;
    flex-direction: column;
  }
  .cta-strip-actions .btn { width: 100%; justify-content: center; }

  /* FORMS */
  .form-card { padding: 24px 20px; border-radius: 18px; }
  .form-row { grid-template-columns: 1fr !important; }

  /* CONTACT INFO PANEL */
  .contact-info-panel { padding: 24px 20px; border-radius: 18px; }
  .contact-info-panel h4, .contact-info-panel .contact-info-panel-titulo { font-size: 17px; }

  /* COMPARATIVA TABLE — horizontal scroll */
  .compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
  }
  .compare-table { min-width: 640px; }
  .compare-table th,
  .compare-table td { padding: 12px 12px; font-size: 13px; }
  .compare-table thead th { padding: 16px 12px; }

  /* EXTRAS TABLE — 2 cols: icono | contenido (nombre + sub + precio) */
  .extras-row {
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 4px 12px !important;
    padding: 16px 18px !important;
    align-items: start !important;
  }
  /* Icono abarca 2 filas para alinearse con nombre y precio */
  .extras-row-icon {
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 2px;
  }
  /* Nombre+descripción: fila 1 col 2 (natural) */
  /* Badge Obligatorio/Opcional: oculto */
  .extras-row > :nth-child(3) { display: none !important; }
  /* Precio: fila 2 col 2 */
  .extras-row-price {
    grid-column: 2;
    font-size: 12px;
    margin-top: 2px;
  }

  /* FEATURE LIST — colapsable en mobile (JS añade .open) */
  .feature-list-item {
    padding: 14px 16px;
    cursor: pointer;
    position: relative;
    align-items: flex-start;
    padding-right: 40px;
    user-select: none;
  }
  .feature-list-item::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 24px;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--fg-3);
    border-bottom: 1.5px solid var(--fg-3);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
  }
  .feature-list-item.open::after {
    transform: translateY(2px) rotate(-135deg);
  }
  .feature-list-item .feature-list-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms cubic-bezier(.4,0,.2,1), margin-top 320ms cubic-bezier(.4,0,.2,1);
    margin-top: 0;
  }
  .feature-list-item.open .feature-list-body {
    max-height: 600px;
    margin-top: 8px;
  }
  .feature-list-item .feature-list-title {
    font-size: 14.5px;
    margin-bottom: 0;
    line-height: 1.35;
  }
  .feature-list-item .feature-list-icon {
    width: 32px;
    height: 32px;
  }
  .feature-list-item .feature-list-icon svg {
    width: 16px;
    height: 16px;
  }

  /* CONFIGURADOR */
  .config-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 18px;
  }
  .config-main { padding: 28px 20px; min-width: 0; } /* min-width:0 → 1fr respeta los 335px del track */
  .config-summary {
    padding: 28px 20px;
    position: static;
    max-height: none;
    overflow-y: visible;
    border-radius: 0 0 18px 18px;
  }
  .config-section-title { font-size: 22px; }
  .config-step-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    flex-wrap: nowrap;
  }
  .config-step { white-space: nowrap; flex-shrink: 0; }
  .preset-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* ARCH FLOW */
  .arch-section { padding: 48px 0 16px; }
  .flow-row {
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .flow-row-num { font-size: 26px; }
  .flow-row-body { grid-template-columns: 1fr; gap: 16px; }
  .flow-row-main h3 { font-size: 18px; }

  /* MOCKUPS (CSS-built) */
  .mockup-shell { grid-template-columns: 1fr; }
  .mockup-sidebar { display: none; }
  .mock-kpis { grid-template-columns: repeat(2, 1fr); }
  .mock-pipeline { grid-template-columns: 1fr; overflow-x: visible; }

  /* PHONE MOCKUP — center on mobile */
  .phone-mockup,
  .mock-phone { margin: 0 auto; }

  /* TESTIMONIALS */
  .testimonial-card { padding: 22px 20px; }

  /* FAQ — convertido en acordeón en mobile (JS añade .open) */
  .faq-item {
    border-bottom: 1px solid var(--border-1);
    padding: 0;
  }
  .faq-q-num { display: none; } /* el número 01/02… molesta con el chevron */
  .faq-q {
    font-size: 15px;
    margin-bottom: 0;
    padding: 18px 0 18px 0;
    cursor: pointer;
    position: relative;
    padding-right: 32px;
    user-select: none;
  }
  .faq-q::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--fg-3);
    border-bottom: 1.5px solid var(--fg-3);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
  }
  .faq-item.open .faq-q::after {
    transform: translateY(-30%) rotate(-135deg);
  }
  .faq-a {
    font-size: 14px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms cubic-bezier(.4,0,.2,1), padding 320ms cubic-bezier(.4,0,.2,1);
    padding: 0;
  }
  .faq-item.open .faq-a {
    max-height: 800px;
    padding: 0 0 20px 0;
  }

  /* ROI calculator cards — colapsable en mobile (solo cabecera visible) */
  .roi-glob-card {
    cursor: pointer;
    position: relative;
    padding: 14px 14px !important;
    padding-right: 40px !important;
  }
  .roi-glob-card::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 22px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--fg-3);
    border-bottom: 1.5px solid var(--fg-3);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }
  .roi-glob-card.open::after {
    transform: translateY(2px) rotate(-135deg);
  }
  /* Oculta todos los hijos excepto el primero (cabecera con icono+título) */
  .roi-glob-card > *:not(:first-child) {
    max-height: 0;
    overflow: hidden;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    opacity: 0;
    transition: max-height 320ms cubic-bezier(.4,0,.2,1), opacity 220ms ease, margin-top 320ms ease, padding-top 320ms ease;
  }
  .roi-glob-card.open > *:not(:first-child) {
    max-height: 80px;
    opacity: 1;
    margin-top: 8px !important;
  }
  /* La última fila (resultado) lleva borde superior cuando abre */
  .roi-glob-card.open > *:last-child {
    padding-top: 9px !important;
    border-top: 1px solid var(--border-1) !important;
    margin-top: 9px !important;
  }
  /* La cabecera no muestra subtítulo en móvil para ahorrar líneas */
  .roi-glob-card > *:first-child {
    margin-bottom: 0 !important;
  }

  /* ══════════════════════════════════════════════════════════
     ROI WIZARD — un paso (módulo) por pantalla + resultado
     ══════════════════════════════════════════════════════════ */
  /* La sección se ordena en columna para intercalar el chrome */
  #roi-global-modulos {
    display: flex;
    flex-direction: column;
  }
  /* header(título) → progress → grid(cards) → nav → result */
  #roi-global-modulos > div:first-child { order: 1; }      /* header */
  #roi-global-modulos > .roi-wz-progress { order: 2; }
  #roi-global-modulos > div:nth-child(2) { order: 3; }     /* main grid */
  #roi-global-modulos > .roi-wz-nav      { order: 4; }
  #roi-global-modulos > .roi-wz-result   { order: 5; }

  /* Ocultar panel de resultados de escritorio (KPIs, barras, gráfico) */
  #roi-results-col { display: none !important; }

  /* La columna de cards: solo se ve la del paso activo */
  #roi-cards-col .roi-glob-card { display: none; }
  #roi-cards-col .roi-glob-card.wizard-step-active { display: block; }

  /* En wizard, la card está totalmente expandida (sin acordeón) */
  #roi-cards-col .roi-glob-card.wizard-step-active {
    cursor: default;
    padding: 18px 18px !important;
  }
  #roi-cards-col .roi-glob-card.wizard-step-active::after { display: none; }
  #roi-cards-col .roi-glob-card.wizard-step-active > *:not(:first-child) {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-top: 8px !important;
    transition: none !important;
  }
  #roi-cards-col .roi-glob-card.wizard-step-active > *:last-child {
    padding-top: 11px !important;
    border-top: 1px solid var(--border-1) !important;
    margin-top: 11px !important;
  }
  #roi-cards-col .roi-glob-card.wizard-step-active > *:first-child {
    margin-bottom: 12px !important;
  }
  /* Sliders más cómodos al tacto */
  #roi-cards-col .roi-glob-card.wizard-step-active input[type="range"] {
    height: 22px;
  }

  /* Barra de progreso */
  .roi-wz-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  .roi-wz-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .roi-wz-label b { color: var(--parker-primary); }
  .roi-wz-dots { display: flex; gap: 6px; }
  .roi-wz-dot {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: var(--border-2);
    transition: background .3s;
  }
  .roi-wz-dot.is-active { background: var(--parker-primary); }

  /* Navegación */
  .roi-wz-nav {
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }
  .roi-wz-nav .btn { flex: 1; justify-content: center; }
  .roi-wz-nav #roi-wz-prev { flex: 0 0 auto; }

  /* Pantalla de resultado */
  .roi-wz-result { display: none; }
  .roi-wz-result.is-active {
    display: block;
    animation: roiWzIn 320ms ease both;
  }
  @keyframes roiWzIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  .roi-wz-result-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--parker-primary);
    text-align: center;
    margin-bottom: 18px;
  }
  .roi-wz-result-hero {
    text-align: center;
    background: rgba(62,207,142,0.08);
    border: 1px solid rgba(62,207,142,0.3);
    border-radius: 18px;
    padding: 24px 18px;
    margin-bottom: 14px;
  }
  .roi-wz-result-ahorro {
    display: block;
    font-family: var(--font-display);
    font-size: 40px; font-weight: 800;
    letter-spacing: -.02em; line-height: 1;
    color: var(--parker-accent-teal-dark);
    margin-bottom: 8px;
  }
  .roi-wz-result-ahorro-label {
    font-size: 13px; color: var(--fg-3);
  }
  .roi-wz-result-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .roi-wz-result-kpi {
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
  }
  .roi-wz-result-kpi-val {
    font-family: var(--font-display);
    font-size: 26px; font-weight: 700;
    color: var(--parker-primary);
    line-height: 1; margin-bottom: 5px;
  }
  .roi-wz-result-kpi-lbl {
    font-size: 11px; color: var(--fg-3); line-height: 1.3;
  }
  .roi-wz-result-note {
    font-size: 12px; color: var(--fg-3);
    text-align: center; line-height: 1.5;
    margin-bottom: 18px;
  }
  .roi-wz-result-cta {
    display: flex; flex-direction: column; gap: 12px; align-items: center;
  }
  .roi-wz-result-cta .btn { width: 100%; }
  .roi-wz-edit {
    background: none; border: none;
    font-family: var(--font-body);
    font-size: 13px; font-weight: 600;
    color: var(--fg-3); cursor: pointer;
    padding: 4px;
  }
  .roi-wz-edit:hover { color: var(--parker-primary); }

  /* ── ROI calculadora módulo-parte-carga ──────────────────── */
  /* 1. Grid items necesitan min-width:0 para que el 1fr no se infle */
  #roi-parte-carga [style*="grid-template-columns:1fr 1.3fr"] > * {
    min-width: 0;
  }
  /* 2. Filas de slider: etiqueta encima + control debajo */
  #roi-parte-carga [style*="align-items:center"][style*="gap:10px"] {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
  /* Etiqueta ocupa todo el ancho (primera línea) */
  #roi-parte-carga [style*="width:196px"][style*="flex-shrink:0"] {
    width: 100% !important;
    white-space: normal;
    flex-shrink: 1 !important;
  }
  /* Valor numérico: menos ancho en móvil */
  #roi-parte-carga [style*="width:72px"][style*="flex-shrink:0"] {
    width: 56px !important;
    flex-shrink: 0;
  }
  /* Range input: ocupa el espacio restante */
  #roi-parte-carga input[type="range"] {
    flex: 1 1 80px;
    min-width: 60px;
  }
  /* Columna derecha (KPIs) también necesita min-width:0 */
  #roi-parte-carga [style*="grid-template-columns:1fr 1.3fr"] > div:last-child {
    min-width: 0;
  }

  /* GALLERY TABS — scroll horizontal en lugar de wrap */
  .gallery-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    margin-bottom: 16px;
    scrollbar-width: none;
  }
  .gallery-tabs::-webkit-scrollbar { display: none; }
  .gallery-tab { flex-shrink: 0; white-space: nowrap; }

  /* LOGO CAROUSEL (prueba social) */
  .logo-slide { height: 70px; padding: 14px 18px; min-width: 100px; max-width: 180px; }
  .logo-slide img { height: 38px; max-width: 140px; }

  /* BREADCRUMB compact */
  .breadcrumb { font-size: 11px; flex-wrap: wrap; }
}

/* ============================================================
   INLINE GRID OVERRIDES — ahora a 960px (no 768)
   Casi todas las páginas usan inline `grid-template-columns:N.Mfr 1fr`
   o `repeat(N, 1fr)` directamente en el HTML.
   ============================================================ */
@media (max-width: 960px) {
  [style*="grid-template-columns:1.0fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns:1.3fr"],
  [style*="grid-template-columns:1.4fr"],
  [style*="grid-template-columns:1.5fr"],
  [style*="grid-template-columns:1.6fr"],
  [style*="grid-template-columns:1.7fr"],
  [style*="grid-template-columns:1.8fr"],
  [style*="grid-template-columns:1.9fr"],
  /* Comparativa: grids con columna fija de px → colapsan a 1 col */
  [style*="grid-template-columns:240px"],
  [style*="grid-template-columns:200px"],
  [style*="grid-template-columns:180px"],
  [style*="grid-template-columns:160px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Padding grande de las cards de comparativa */
  [style*="padding:32px 36px"] { padding: 22px 18px !important; }
  [style*="padding:32px 28px"] { padding: 22px 18px !important; }

  /* Grids de 2 cols y layouts de 2 zonas → colapsan a 1 col */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns:1fr auto 1fr"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns: auto 1fr"],
  [style*="grid-template-columns:repeat(2,"],
  [style*="grid-template-columns: repeat(2,"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── ROI: header flex-row → stack vertical ── */
  #roi-global-modulos > div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  /* La caja "Inversión anual" más compacta */
  #roi-global-modulos > div[style*="justify-content:space-between"] > div:last-child {
    padding: 8px 14px !important;
    align-self: flex-start;
  }

  /* ── ROI body: min-width:0 en grid items para que 1fr respete
     los 335px del container sin inflarse al min-content del contenido.
     (No usar overflow:hidden — recorta bordes y sombras) ── */
  #roi-global-modulos [style*="grid-template-columns:1.3fr"] > * {
    min-width: 0;
  }
  #roi-global-modulos [style*="grid-template-columns:1fr 1fr"]:not([class]) {
    min-width: 0;
  }
  /* Los accordion cards también necesitan min-width:0 */
  #roi-global-modulos .roi-glob-card {
    min-width: 0;
  }
  /* Sliders ocultos: ancho 0 mínimo para no inflar el track */
  #roi-global-modulos input[type="range"] {
    min-width: 0 !important;
    max-width: 100%;
  }
  /* Label de barras de contribución: reducir de 148px a 110px en móvil */
  #roi-global-modulos [style*="width:148px"] {
    width: 110px !important;
  }
  /* Valor de barra: reducir de 76px a 56px */
  #roi-global-modulos [style*="width:76px;text-align:right"] {
    width: 56px !important;
  }

  /* ── Newsletter: card con menos padding, form a ancho completo ── */
  #newsletter-sec > div {
    padding: 24px 22px !important;
    gap: 20px !important;
  }
  #newsletter-form {
    min-width: 0 !important;
    width: 100%;
  }
  /* Grids de ≥3 cols inline → carrusel (ver bloque SWIPE CAROUSELS) */
  /* En tablet (640-960) algunos grids quedan más densos en 2 cols.
     Los más críticos los detallamos abajo en su clase semántica. */
}

/* ============================================================
   PROCESS STRIPS / FASES / PASOS — scroll horizontal en mobile
   Detectamos el patrón "grid de 4-6 cards" y lo convertimos en
   carrusel horizontal con snap. Mejor UX que 6 cards apiladas.
   ============================================================ */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns:repeat(6, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"] {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px !important;
    padding-bottom: 8px;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    scrollbar-width: none;
    -webkit-mask: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 80px), transparent 100%);
    mask: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 80px), transparent 100%);
  }
  [style*="grid-template-columns:repeat(6,1fr)"]::-webkit-scrollbar,
  [style*="grid-template-columns:repeat(6, 1fr)"]::-webkit-scrollbar,
  [style*="grid-template-columns:repeat(5,1fr)"]::-webkit-scrollbar,
  [style*="grid-template-columns:repeat(5, 1fr)"]::-webkit-scrollbar {
    display: none;
  }
  [style*="grid-template-columns:repeat(6,1fr)"] > *,
  [style*="grid-template-columns:repeat(6, 1fr)"] > *,
  [style*="grid-template-columns:repeat(5,1fr)"] > *,
  [style*="grid-template-columns:repeat(5, 1fr)"] > * {
    flex: 0 0 78%;
    scroll-snap-align: center;
    min-width: 0;
  }
}

/* En tablet (641-960px): carruseles muestran 2 cards + peek */
@media (min-width: 641px) and (max-width: 960px) {
  /* SWIPE CAROUSELS en tablet: 2 cards visibles + peek de la tercera */
  .feature-grid > *,
  .sector-grid > *,
  .showcase-grid > *,
  .testimonial-grid > *,
  .impact-grid > *,
  .form-step-grid > *,
  .form-team-grid > *,
  .form-premium-pack-grid > *,
  [style*="grid-template-columns:repeat(3,"]:not(.replace-chips):not(.social-stats):not(.feature-list) > *,
  [style*="grid-template-columns:repeat(4,"]:not(.social-stats) > *,
  [style*="grid-template-columns:repeat(5,"] > *,
  [style*="grid-template-columns:repeat(6,"] > * {
    flex: 0 0 min(45vw, 280px) !important;
  }
  /* Ajustar sangrado al padding de container en tablet (22px) */
  .feature-grid,
  .sector-grid,
  .showcase-grid,
  .testimonial-grid,
  .impact-grid,
  .form-step-grid,
  .form-team-grid,
  .form-premium-pack-grid,
  [style*="grid-template-columns:repeat(3,"]:not(.replace-chips):not(.social-stats):not(.feature-list),
  [style*="grid-template-columns:repeat(4,"]:not(.social-stats),
  [style*="grid-template-columns:repeat(5,"],
  [style*="grid-template-columns:repeat(6,"] {
    margin-left: -22px;
    margin-right: -22px;
    padding-left: 22px;
    padding-right: 22px;
  }

  /* ROI cards en home: 2x2 en tablet, 1 col en móvil */
  #roi-global-modulos [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Phase grid en sector-catering (6 fases): ya es carousel, saltar regla de grid */
  /* 4-col grids ahora son carrusel — no necesitan 2-col override
     Mantenemos solo para social-stats que tiene su propio tratamiento */
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   INLINE STYLE OVERRIDES — paddings, font-sizes, gaps
   ============================================================ */
@media (max-width: 960px) {
  /* Paddings de cards/secciones grandes */
  [style*="padding:48px 56px"],
  [style*="padding:48px 64px"],
  [style*="padding:56px 64px"],
  [style*="padding:64px 56px"] {
    padding: 28px 22px !important;
  }
  [style*="padding:40px 44px"],
  [style*="padding:40px 48px"],
  [style*="padding:44px 48px"] {
    padding: 26px 20px !important;
  }
  [style*="padding:32px 40px"],
  [style*="padding:32px 36px"] {
    padding: 22px 18px !important;
  }
  /* Padding top/bottom de secciones inline */
  [style*="padding-top:96px"][style*="padding-bottom:32px"],
  [style*="padding-top:96px"][style*="padding-bottom:48px"],
  [style*="padding-top:80px"] {
    padding-top: 40px !important;
  }
  [style*="padding-top:64px"][style*="padding-bottom:48px"] {
    padding-top: 36px !important;
    padding-bottom: 24px !important;
  }
  [style*="padding-top:48px"][style*="padding-bottom:48px"] {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  /* Gaps grandes de grids inline */
  [style*="gap:64px"] { gap: 28px !important; }
  [style*="gap:48px"] { gap: 24px !important; }
  [style*="gap:40px"] { gap: 22px !important; }
}

/* ============================================================
   MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

  :root {
    --fs-display-xl: 30px;
    --fs-display-l: 24px;
    --fs-h1: 22px;
    --fs-h2: 19px;
  }

  /* CONTAINER ≤640px */
  .container { padding-left: 20px; padding-right: 20px; }

  /* Newsletter ≤640px: form en columna, botón full-width */
  #newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }
  #newsletter-form input { width: 100%; }
  #newsletter-form button { width: 100%; justify-content: center; }

  /* SWIPE CAROUSELS ≤640px — ajustar sangrado al nuevo padding de 20px */
  .feature-grid,
  .sector-grid,
  .showcase-grid,
  .testimonial-grid,
  .impact-grid,
  .form-step-grid,
  .form-team-grid,
  .form-premium-pack-grid,
  [style*="grid-template-columns:repeat(3,"]:not(.replace-chips):not(.social-stats):not(.feature-list),
  [style*="grid-template-columns:repeat(4,"]:not(.social-stats),
  [style*="grid-template-columns:repeat(5,"],
  [style*="grid-template-columns:repeat(6,"] {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* HERO */
  .hero {
    padding: 36px 18px;
    margin: 12px 12px 0;
    border-radius: 16px;
  }
  .hero-title { font-size: 30px; line-height: 1.1; }
  .hero-lede { font-size: 14.5px; line-height: 1.6; }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-cta .btn {
    justify-content: center;
    padding: 12px 22px;
  }

  /* SECTIONS ≤640px — solo vertical */
  .section { padding-top: 36px; padding-bottom: 12px; }
  .section-head { margin-bottom: 22px; }
  .section-title { font-size: 22px; }
  .section-lede { font-size: 14px; }

  /* MODULE GRID — 1 col en phone */
  .module-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* STAT BAND */
  .stat-band {
    margin: 0 12px;
    padding: 32px 18px;
  }
  .stat-band-grid { gap: 22px; }
  .stat-band-number { font-size: 34px; }

  /* PRICING */
  .pricing-card { padding: 22px 18px; }
  .pricing-amount { font-size: 30px; }

  /* SECTOR / APP / ARCH HERO */
  .sector-hero,
  .app-hero {
    margin: 12px 12px 0;
    padding: 32px 18px;
    border-radius: 16px;
  }
  .sector-hero h1,
  .app-hero h1 { font-size: 26px; }
  .sector-hero-lede { font-size: 14px; }
  /* Botones del hero en columna en móvil */
  .sector-hero [style*="gap:14px"],
  .app-hero  [style*="gap:14px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .sector-hero [style*="gap:14px"] .btn,
  .app-hero  [style*="gap:14px"] .btn {
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .arch-hero { padding: 36px 18px 28px; margin: 12px 12px 0; }
  .arch-hero h1 { font-size: 26px; }
  .arch-hero-meta { gap: 16px; padding-top: 18px; }
  .arch-hero-meta-item strong { font-size: 17px; }

  /* SHOWCASE */
  .showcase {
    margin: 20px 12px;
    padding: 32px 18px;
    border-radius: 16px;
  }

  /* CTA STRIP */
  .cta-strip {
    margin: 28px 12px 0;
    padding: 28px 18px;
  }
  .cta-strip h3 { font-size: 20px; }

  /* PHONE MOCKUP smaller */
  .phone-mockup { width: 220px; }

  /* CONFIGURADOR */
  .config-main { padding: 22px 14px; }
  .config-summary { padding: 22px 14px; }

  /* FOOTER */
  .site-footer { padding: 40px 0 20px; margin-top: 44px; }
  .site-footer-inner { gap: 24px; }
  .site-footer-base {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* TOP FADE — más pequeño */
  body::before { height: 72px; }

  /* SITE HEADER — tighter */
  .site-header { padding: 0 12px; top: 10px; }
  .site-logo-img { height: 1.6rem; }

  /* MOCKUP BROWSER on hero */
  .hero-erp-frame { border-radius: 12px; }
  .mockup-chrome { padding: 8px 10px; }
  .mockup-url { font-size: 9px; padding: 3px 8px; }
  .mockup-traffic span { width: 8px; height: 8px; }

  /* FORMS */
  .form-pills { gap: 6px; }
  .form-pill { font-size: 11px; padding: 6px 10px; }

  /* LOGO CAROUSEL — más pequeño en móvil */
  .logo-slide { height: 60px; padding: 12px 14px; min-width: 88px; max-width: 150px; }
  .logo-slide img { height: 32px; max-width: 110px; }

  /* Buttons full-width pattern */
  .btn-lg { padding: 12px 20px; font-size: 14px; }
}

/* ============================================================
   INLINE TYPOGRAPHY OVERRIDES — h1 grandes y paddings extra
   ============================================================ */

/* Tablet (641-960px): headings grandes → 32px (h1) / 26px (h2).
   Cubre todas las variantes de font-size encontradas en módulos,
   sectores, comparativa, configurador y contacto. */
@media (max-width: 960px) {
  h1[style*="font-size:52px"],
  h1[style*="font-size:56px"],
  h1[style*="font-size:48px"],
  h1[style*="font-size:44px"],
  h1[style*="font-size:40px"] {
    font-size: 32px !important;
    line-height: 1.12 !important;
  }
  h2[style*="font-size:38px"],
  h2[style*="font-size:36px"] {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  p[style*="font-size:17px"] { font-size: 15px !important; }

  /* Fila stats de módulo (PRECIO / SUSTITUYE / AHORRO) → columna vertical */
  [style*="gap:32px"][style*="padding-top:24px"][style*="border-top"] {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  /* Grid items de heroes de módulo: min-width:0 para que 1fr no se infle */
  [style*="grid-template-columns:1.3fr"] > *,
  [style*="grid-template-columns:1.4fr"] > *,
  [style*="grid-template-columns:1.5fr"] > * {
    min-width: 0;
  }

  /* Botones de módulo hero: wrap si no caben en una fila.
     Los módulos usan gap:14px con margin-bottom variable (28px, 32px, 16px). */
  [style*="gap:14px"][style*="margin-bottom:28px"],
  [style*="gap:14px"][style*="margin-bottom:32px"],
  [style*="gap:14px"][style*="margin-bottom:16px"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 640px) {
  h1[style*="font-size:52px"],
  h1[style*="font-size:56px"],
  h1[style*="font-size:48px"],
  h1[style*="font-size:44px"],
  h1[style*="font-size:40px"] {
    font-size: 26px !important;
    line-height: 1.12 !important;
  }
  h2[style*="font-size:38px"],
  h2[style*="font-size:36px"],
  h2[style*="font-size:32px"],
  h2[style*="font-size:30px"],
  h2[style*="font-size:28px"] {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
  h3[style*="font-size:24px"],
  h3[style*="font-size:22px"] {
    font-size: 18px !important;
  }
  p[style*="font-size:17px"] { font-size: 14.5px !important; }
  p[style*="font-size:16px"] { font-size: 14px !important; }

  /* Pricing/numeric displays muy grandes */
  [style*="font-size:42px"],
  [style*="font-size:48px"],
  [style*="font-size:52px"] {
    font-size: 28px !important;
  }
  [style*="font-size:36px"],
  [style*="font-size:32px"] {
    font-size: 24px !important;
  }
}

/* ============================================================
   SMALL PHONES (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

  :root {
    --fs-display-xl: 26px;
  }

  .hero-title { font-size: 26px; }
  .hero-product-card { padding: 12px; }

  .nav-overlay-links a { font-size: 22px; padding: 8px 18px; }

  .section-title { font-size: 20px; }
  /* SECTIONS ≤480px — solo vertical */
  .section { padding-top: 32px; padding-bottom: 10px; }

  .pricing-card,
  .plan-card { padding: 20px 16px; }

  .compare-table { min-width: 540px; }
  .compare-table th,
  .compare-table td { padding: 10px; font-size: 12px; }

  /* Iconos grandes mockup, etc. más comprimidos */
  .stat-band-number { font-size: 30px; }
  .arch-hero h1 { font-size: 24px; }
  .sector-hero h1, .app-hero h1 { font-size: 24px; }
}

/* ============================================================
   REUSABLE GRID LAYOUTS (clases base — sin breakpoint)
   ============================================================ */
.module-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 24px;
}
.module-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.module-replace-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* Áreas táctiles de 24 px como mínimo en móvil (pie, ruta de navegación y casillas) */
@media (max-width: 960px) {
  .site-footer ul a { display: inline-block; padding: 4px 0; min-height: 24px; }
  .breadcrumb a { display: inline-block; padding: 6px 0; }
  input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }
  .ps-socio a { display: inline-block; padding: 4px 0; }
}

/* Más zona táctil (24 px) sin cambiar el aspecto: enlaces de listas y tarjetas, barras del reproductor y casillas */
@media (max-width: 960px) {
  [data-page="privacidad"] li > a, [data-page="aviso-legal"] li > a, [data-page="politica-cookies"] li > a,
  .legal-company-card a, .legal-highlight a, .cs-area, .fx-item a, .kd-cat a, .pf-item div a,
  .contact-info-value, .cf-mod a { display: inline-block; padding-top: 4px; padding-bottom: 4px; min-height: 24px; }
  .cs-area { padding-top: 6px; padding-bottom: 6px; }
  input[type="checkbox"] { width: 24px; height: 24px; }
  .ct-marcas button { padding-top: 10px !important; padding-bottom: 10px !important; background-clip: content-box !important; box-sizing: content-box; }
  .ct-marcas button em { top: 10px !important; bottom: 10px !important; }
}

/* Cabecera en portátiles pequeños: el menú completo no cabe en una línea */
@media (min-width: 961px) and (max-width: 1260px) {
  .site-actions .hide-mobile.btn-ghost-dark { display: none; }
}
@media (min-width: 961px) and (max-width: 1120px) {
  .site-nav { display: none; }
  .site-actions .hide-mobile { display: none; }
  .nav-burger { display: inline-flex; }
}