/* ============================================================
   Salmu — Responsive CSS
   Copiado exactamente del archivo fuente source/responsive.css
   con extensiones para los nuevos componentes del tema.
   ============================================================ */

/* ============ TABLET (≤900px) ============ */
@media (max-width: 900px) {
  /* Section padding: pull horizontal in */
  .salmu-section        { padding-left: 24px !important; padding-right: 24px !important; }
  .salmu-section-pad    { padding-top: 80px !important; padding-bottom: 80px !important; }
  .salmu-hero-pad       { padding: 80px 24px 40px !important; }

  /* Two-column layouts collapse to stack */
  .salmu-two-col        { grid-template-columns: 1fr !important; gap: 48px !important; }
  .salmu-magic-grid     { grid-template-columns: 1fr !important; gap: 20px !important; }
  .salmu-three-col      { grid-template-columns: 1fr !important; }
  .salmu-juli-skills    { grid-template-columns: 1fr !important; }

  /* Hero visual shrinks */
  .salmu-hero-visual    { height: auto !important; min-height: 560px !important; padding: 20px 0 !important; }
  .salmu-floating-metric { left: 50% !important; transform: translateX(-50%) !important; bottom: 10px !important; }

  /* Typography scales */
  .salmu-h1             { font-size: clamp(36px, 8vw, 56px) !important; }
  .salmu-h2             { font-size: clamp(32px, 6vw, 48px) !important; }
  .salmu-sub            { font-size: 16px !important; }

  /* Metrics rail: 2x2 */
  .salmu-four-col       { grid-template-columns: 1fr 1fr !important; }
  .salmu-metrics-cell   { border-right: none !important; border-bottom: 1px solid rgba(128,128,128,0.15) !important; padding: 24px 20px !important; }
  .salmu-metrics-cell:nth-child(odd) { border-right: 1px solid rgba(128,128,128,0.15) !important; }
  .salmu-metrics-cell:nth-last-child(-n+2) { border-bottom: none !important; }
  .salmu-metrics-kpi    { font-size: 36px !important; }

  /* Dashboard KPI rail: 2x2 on tablet */
  .salmu-dash-kpis      { grid-template-columns: 1fr 1fr !important; }

  /* Nav: hide middle links, keep logo + CTA */
  .salmu-nav-links      { display: none !important; }
  .salmu-nav-login      { display: none !important; }
  .salmu-hamburger      { display: flex !important; }

  /* CTA row wraps cleanly */
  .salmu-cta-row        { width: 100% !important; }

  /* Final CTA tightens */
  .salmu-final-inner    { padding: 48px 24px !important; }

  /* Footer stacks */
  .salmu-footer-grid    { grid-template-columns: 1fr 1fr !important; }
  .salmu-footer         { padding: 40px 24px 24px !important; }

  /* Pricing grid: stack to column */
  .salmu-pricing-grid   { grid-template-columns: 1fr !important; max-width: 480px !important; }

  /* Chat wider on tablet */
  .salmu-chat           { width: 100% !important; max-width: 440px !important; }
}

/* ============ MOBILE (≤640px) ============ */
@media (max-width: 640px) {
  .salmu-section        { padding-left: 20px !important; padding-right: 20px !important; }
  .salmu-section-pad    { padding-top: 60px !important; padding-bottom: 60px !important; }
  .salmu-hero-pad       { padding: 60px 20px 24px !important; }

  .salmu-h1             { font-size: clamp(32px, 9vw, 44px) !important; letter-spacing: -1.5px !important; }
  .salmu-h2             { font-size: clamp(28px, 7vw, 36px) !important; letter-spacing: -1px !important; }

  .salmu-hero-visual    { min-height: 480px !important; }

  /* Metrics: 2×2 en mobile */
  .salmu-four-col       { grid-template-columns: 1fr 1fr !important; }
  .salmu-metrics-cell   { border-right: none !important; border-bottom: 1px solid rgba(128,128,128,0.15) !important; }
  .salmu-metrics-cell:nth-child(odd)  { border-right: 1px solid rgba(128,128,128,0.15) !important; }
  .salmu-metrics-cell:nth-last-child(-n+2) { border-bottom: none !important; }

  .salmu-dash-kpis      { grid-template-columns: 1fr 1fr !important; }

  /* Compare table: label | value stays 2-col but smaller */
  .salmu-compare-row    { font-size: 13px !important; }

  /* Pain subgrid stacks */
  .salmu-pain-subgrid   { grid-template-columns: 1fr !important; }

  /* CTAs full-width */
  .salmu-cta-row > *    { flex: 1 1 auto !important; }

  /* Footer full-width column */
  .salmu-footer-grid    { grid-template-columns: 1fr !important; }
  .salmu-footer-bar     { flex-direction: column !important; align-items: flex-start !important; }

  /* Phone mockup: smaller on mobile */
  .salmu-phone          { width: 180px !important; height: 380px !important; }

  /* Chat: full width */
  .salmu-chat           { width: 100% !important; }

  /* Pricing single col */
  .salmu-pricing-grid   { grid-template-columns: 1fr !important; }

  /* Final inner: tighter */
  .salmu-final-inner    { padding: 40px 20px !important; border-radius: 16px !important; }

  /* Nav inner padding */
  .salmu-nav-inner      { padding: 0 20px !important; }

  /* Juli skills: 1 col */
  .salmu-juli-skills    { grid-template-columns: 1fr !important; }
}

/* ============ TWEAKS PANEL on mobile ============ */
@media (max-width: 640px) {
  .salmu-tweaks-panel   { right: 12px !important; left: 12px !important; width: auto !important; max-width: none !important; bottom: 12px !important; }
}

/* ============================================================
   RESPONSIVE SHORTCODE GRIDS
   ============================================================ */

/* Features grid — 3 col */
.salmu-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .salmu-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .salmu-features-grid { grid-template-columns: 1fr !important; border-radius: 12px !important; }
  .salmu-features-grid > div { padding: 32px 24px !important; }
}

/* Pricing plans — 3 col */
.salmu-pricing-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .salmu-pricing-plans-grid { grid-template-columns: 1fr !important; max-width: 480px !important; }
}

/* Pricing billing toggle */
@media (max-width: 640px) {
  .salmu-billing-toggle { flex-direction: column !important; align-items: center !important; }
}

/* Team grid — 2 col */
.salmu-team-grid-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 640px) {
  .salmu-team-grid-wrap { grid-template-columns: 1fr !important; }
}

/* Values grid — 2×2 */
.salmu-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (max-width: 640px) {
  .salmu-values-grid { grid-template-columns: 1fr !important; border-left: none !important; }
  .salmu-values-grid > div { padding: 32px 20px !important; border-right: none !important; }
}

/* Juli stats — 4 col */
.salmu-juli-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .salmu-juli-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .salmu-juli-stats-grid > div { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .salmu-juli-stats-grid > div:nth-child(odd) { border-right: 1px solid var(--line) !important; }
  .salmu-juli-stats-grid > div:nth-last-child(-n+2) { border-bottom: none !important; }
}

/* Nosotros stats card — full width on mobile */
.salmu-nosotros-stats-card { width: 100%; }

/* Contact 2-col form row */
.salmu-contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .salmu-contact-form-row { grid-template-columns: 1fr !important; }
}

/* Blog featured post */
.salmu-blog-featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .salmu-blog-featured-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .salmu-blog-featured-img { display: none !important; }
}

/* Blog posts grid */
.salmu-blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .salmu-blog-posts-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .salmu-blog-posts-grid { grid-template-columns: 1fr !important; }
}

/* ── Data Capture Section ────────────────────────────────── */
@media (max-width: 900px) {
  .salmu-data-capture {
    grid-template-columns: 1fr !important;
    gap: 60px !important;
    padding: 80px 24px !important;
  }
  .salmu-dc-right {
    justify-content: center !important;
  }
  .salmu-dc-feed-card {
    position: static !important;
    width: 100% !important;
    max-width: 280px !important;
    margin-top: 20px !important;
  }
  .salmu-dc-right {
    flex-direction: column !important;
    align-items: center !important;
    min-height: auto !important;
  }
}

@media (max-width: 640px) {
  .salmu-data-capture {
    padding: 60px 16px !important;
  }
  .salmu-dc-badge {
    left: 0 !important;
    bottom: -60px !important;
    position: static !important;
    margin-top: 12px !important;
  }
}

/* ============================================================
   ELEMENTOR SECTION PADDING — MOBILE OVERRIDE
   Los JSON de Elementor tienen padding horizontal de 40–48px
   definidos como inline styles. En móvil hay que reducirlos
   agresivamente para aprovechar todo el ancho disponible.
   ============================================================ */

/* Tablet ≤900px: reducir padding horizontal a 20px */
@media (max-width: 900px) {
  .elementor-section[data-element_type="section"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-section[data-element_type="section"] > .elementor-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
}

/* Mobile ≤640px: reducir a 16px — máximo aprovechamiento de ancho */
@media (max-width: 640px) {
  .elementor-section[data-element_type="section"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .elementor-section[data-element_type="section"] > .elementor-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  /* También reducir padding vertical excesivo en mobile */
  .elementor-section[data-element_type="section"][style*="padding-top: 140"],
  .elementor-section[data-element_type="section"][style*="padding-top: 120"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .elementor-section[data-element_type="section"][style*="padding-top: 100"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .elementor-section[data-element_type="section"][style*="padding-top: 80"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* Elementor columns: force stack on mobile for 2-col sections */
@media (max-width: 767px) {
  .elementor-column { width: 100% !important; }
  .elementor-section .elementor-column-gap-default > .elementor-row { flex-wrap: wrap !important; }
}

/* General inline grid overrides for mobile */
@media (max-width: 640px) {
  /* Any inline grid with 3+ cols becomes 1 col on mobile */
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3"]  { grid-template-columns: 1fr !important; }
  /* 2-col contact/hero grids stack */
  [style*="grid-template-columns: 1fr 1fr"]  { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1.1fr"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.1fr 0.9fr"]{ grid-template-columns: 1fr !important; }
  /* Featured blog image hidden */
  .salmu-blog-feat-img { display: none !important; }
  /* Inline padding overrides */
  [style*="padding: 48px 40px"] { padding: 48px 0 !important; }
  [style*="padding:48px 40px"]  { padding: 48px 0 !important; }
  [style*="padding:72px 40px"]  { padding: 56px 0 !important; }
}