/* ═══════════════════════════════════════════════════════════
   AGENCIA SM · MOBILE RESPONSIVE FIXES
   Carga DESPUÉS de brand.css y landing.css para sobreescribir
   ═══════════════════════════════════════════════════════════ */

/* ─── GLOBAL OVERFLOW GUARDS ─── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after {
  max-width: 100%;
}
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}
img { display: block; }

/* Containers bleed-safe padding */
.sm-container, .sm-container-wide {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  box-sizing: border-box;
  width: 100%;
}

/* ═══════════ TABLET & DOWN (≤1024px) ═══════════ */
@media (max-width: 1024px) {
  .sm-nav-links { display: none !important; }
  .sm-nav-phone { display: none !important; }
  .sm-nav-inner { gap: 12px; }
  .sm-nav-logo-text span { display: none; }
  .sm-nav-actions { gap: 6px; }
  .sm-nav-actions .sm-btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* ═══════════ MOBILE BREAKPOINT (≤768px) ═══════════ */
@media (max-width: 768px) {
  :root {
    --sm-radius-xl: 20px;
    --sm-radius-lg: 14px;
  }

  /* Sections — less vertical padding */
  .sm-section {
    padding-top: clamp(48px, 10vw, 64px);
    padding-bottom: clamp(48px, 10vw, 64px);
  }

  /* Typography scale down */
  h1, .sm-h1, .hero-title, .c-hero h1 {
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
  }
  h2, .sm-h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.08 !important;
  }
  h3 { font-size: 19px !important; }
  .sm-lead, .hero-sub, .c-hero p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  .sm-eyebrow { font-size: 11px; letter-spacing: 0.12em; }

  /* ─── NAV MOBILE ─── */
  .sm-nav { padding: 12px 0; }
  .sm-nav-logo img { width: 44px; height: 44px; }
  .sm-nav-logo-text strong { font-size: 13px; }
  .sm-nav-actions .sm-btn {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
  .sm-lang-toggle { margin-right: 2px; }
  .sm-nav-burger { display: inline-flex; }

  /* ─── HERO ─── */
  .hero { padding-top: 90px !important; padding-bottom: 40px !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero-form {
    padding: 24px !important;
    border-radius: 20px !important;
  }
  .hero-form h3 { font-size: 20px !important; }
  .hero-seg {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .hero-seg button {
    padding: 10px 8px !important;
    font-size: 12px !important;
    justify-content: center;
  }
  .hero-seg button svg { width: 14px !important; height: 14px !important; }
  .hero-form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-actions .sm-btn { width: 100%; justify-content: center; }
  .hero-trust {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .hero-trust-num { font-size: 28px !important; }
  .hero-trust-lbl { font-size: 12px !important; }

  /* ─── CONTACT HERO ─── */
  .c-hero { padding-top: calc(80px + 32px) !important; padding-bottom: 48px !important; }
  .c-hero-chips { gap: 8px; }
  .c-hero-chip { font-size: 12px; padding: 6px 12px; }

  /* ─── BUTTONS mobile tap targets ─── */
  .sm-btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 14px;
  }
  .sm-btn-big {
    padding: 14px 22px !important;
    font-size: 15px !important;
    min-height: 52px;
  }
  .sm-lead-form-submit, .c-form-submit {
    min-height: 52px;
    font-size: 15px !important;
  }

  /* ─── FORM FIELDS mobile ─── */
  .sm-field input,
  .sm-field select,
  .sm-field textarea,
  .c-form textarea {
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 13px 14px !important;
  }
  .sm-field label { font-size: 12px !important; }

  /* ─── SERVICES GRID ─── */
  .services-head {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .service-card {
    padding: 24px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .service-card h3 { font-size: 22px !important; }
  .service-card p { font-size: 14px !important; }

  /* ─── TRUST BAR ─── */
  .trust-bar-inner {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center;
  }
  .trust-bar-logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 20px !important;
  }
  .trust-logo { font-size: 14px !important; }

  /* ─── PROCESS / VALUES / TESTIMONIALS ─── */
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .process-card { padding: 24px 20px !important; }
  .process-card::before { font-size: 42px !important; margin-bottom: 12px !important; }

  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .values-sticky { position: static !important; }
  .value-row {
    grid-template-columns: 40px 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  .value-row-icon { display: none !important; }
  .value-row:hover { padding-left: 0 !important; }
  .value-row-body h3 { font-size: 20px !important; }
  .value-row-body p { font-size: 14px !important; }

  .testi-head {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
  }
  .testi-rating { align-items: flex-start !important; }
  .testi-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .testi-card { padding: 24px !important; }
  .testi-card blockquote { font-size: 15px !important; }

  /* ─── ABOUT ─── */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .about-badge {
    position: static !important;
    margin-top: 16px !important;
    max-width: none !important;
  }
  .about-features { grid-template-columns: 1fr !important; }

  /* ─── FAQ ─── */
  .faq-q { font-size: 15px !important; padding: 20px 16px !important; }
  .faq-q-plus { flex-shrink: 0; }
  .faq-a > div { font-size: 14px !important; padding: 0 16px 20px !important; }

  /* ─── CTA STRIPE ─── */
  .sm-cta-stripe {
    padding: 36px 24px !important;
    border-radius: 20px !important;
  }
  .sm-cta-stripe-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .sm-cta-stripe-actions {
    flex-direction: column !important;
    width: 100%;
  }
  .sm-cta-stripe-actions .sm-btn {
    width: 100%;
    justify-content: center;
  }
  .sm-cta-stripe p { font-size: 15px !important; }

  /* ─── FOOTER ─── */
  .sm-footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center;
    font-size: 13px;
  }
  .sm-footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
  }
  .sm-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ─── CONTACTO ─── */
  .c-methods-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .c-method { padding: 28px 22px !important; }
  .c-method h3 { font-size: 20px !important; }
  .c-method-value { font-size: 17px !important; }

  .c-form-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .c-form-wrap { padding: 28px 22px !important; border-radius: 18px !important; }
  .c-form .sm-lead-form-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .c-form-head h2 { font-size: 26px !important; }

  .c-office { padding: 22px !important; }
  .c-office h4 { font-size: 18px !important; }

  .c-map { height: 340px !important; }
  .c-map-inner { padding: 24px !important; }
  .c-map h3 { font-size: 20px !important; }
  .c-map address { font-size: 12px; padding: 8px 14px; }

  /* ─── LANDING SPECIFIC ─── */
  .lp-hero { padding-top: 100px !important; padding-bottom: 40px !important; }
  .lp-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .lp-hero h1 { font-size: clamp(34px, 9vw, 48px) !important; }
  .lp-hero-trust {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .lp-plans-grid,
  .lp-benefits-grid,
  .lp-problem-grid,
  .lp-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .lp-plan, .lp-benefit, .lp-problem-card, .lp-card {
    padding: 24px 22px !important;
  }
  .lp-testi-grid { grid-template-columns: 1fr !important; }
  .lp-final-cta {
    padding: 40px 24px !important;
    border-radius: 20px !important;
  }
  .lp-final-cta h2 { font-size: clamp(28px, 7vw, 36px) !important; }

  /* ─── WHATSAPP FAB ─── */
  .sm-wa {
    bottom: 16px !important;
    right: 16px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  .sm-wa span { display: none; }
  .sm-wa svg { margin: 0 !important; }

  /* ─── I18N PROGRESS ─── */
  .sm-i18n-progress {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    justify-content: center;
  }
}

/* ═══════════ SMALL PHONES (≤400px) ═══════════ */
@media (max-width: 400px) {
  .sm-container, .sm-container-wide {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sm-nav-logo-text { display: none; }
  .sm-nav-actions .sm-btn span { display: none; }
  h1, .sm-h1, .hero-title, .c-hero h1 {
    font-size: 34px !important;
  }
  h2, .sm-h2 { font-size: 24px !important; }
  .hero-trust { grid-template-columns: 1fr !important; }
  .hero-form { padding: 20px !important; }
  .hero-seg { grid-template-columns: repeat(2, 1fr) !important; }
  .c-hero h1 br { display: none; }
  .c-method-value { font-size: 15px !important; }
}

/* ═══════════ MOBILE MENU PANEL ═══════════ */
.sm-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(15,20,40,0.5);
  z-index: 998;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.sm-nav-overlay.open { opacity: 1; pointer-events: all; }

.sm-nav-mobile {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--sm-paper);
  padding-top: 60px;
  max-height: 100dvh;
  overflow-y: auto;
  transform: translateY(-110%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
}
.sm-nav-mobile.open { transform: translateY(0); }

@media (min-width: 1025px) {
  .sm-nav-mobile,
  .sm-nav-overlay { display: none !important; }
}

.sm-nav-mobile-inner {
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sm-nav-mobile-group { display: flex; flex-direction: column; gap: 1px; }
.sm-nav-mobile-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sm-blue);
  padding: 8px 14px 4px;
}
.sm-nav-mobile-link {
  display: block;
  padding: 9px 14px;
  font-size: 14px; color: var(--sm-ink);
  border-radius: 8px;
  transition: background 0.15s;
  text-decoration: none;
}
.sm-nav-mobile-link:hover,
.sm-nav-mobile-link:active { background: var(--sm-cream); }
.sm-nav-mobile-main { font-size: 16px; font-weight: 500; }
.sm-nav-mobile-sep {
  height: 1px; background: var(--sm-line-soft);
  margin: 8px 0;
}
.sm-nav-mobile-cta {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sm-line-soft);
}
.sm-nav-mobile-cta-btn {
  width: 100% !important;
  justify-content: center !important;
  min-height: 48px !important;
}
.sm-nav-burger.open { background: var(--sm-cream); }

/* ═══════════ SECTION HEAD CENTERING (mobile) ═══════════ */
@media (max-width: 768px) {
  .sm-section-head {
    text-align: center;
  }
  .sm-section-head .sm-eyebrow,
  .sm-section-head h2,
  .sm-section-head h3 {
    text-align: center;
  }
  .sm-section-head .sm-lead,
  .sm-section-head > p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ═══════════ LANDSCAPE PHONES ═══════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-top: 90px !important; padding-bottom: 32px !important; }
  .c-hero { padding-top: 100px !important; padding-bottom: 32px !important; }
  .hero-title, .c-hero h1 { font-size: 36px !important; }
}

/* ═══════════ LONG-WORD BREAKS ═══════════ */
h1, h2, h3, h4, p, a, span, div, li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.c-method-value,
.c-office-lines a,
input, textarea {
  word-break: break-word;
}

/* ═══════════ TAP TARGETS (accessibility) ═══════════ */
@media (max-width: 768px) {
  a, button, .sm-btn, input[type="submit"] {
    touch-action: manipulation;
  }
  .sm-lang-toggle button {
    min-width: 40px;
    min-height: 32px;
  }
}

/* ═══════════ MOBILE MENU — more breathing room at top ═══════════ */
.sm-nav-mobile-inner {
  padding-top: 20px;
}

/* ═══════════ FORMACIONES TEASER — single column on mobile ═══════════ */
@media (max-width: 768px) {
  .fm-teaser-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Reduce heading so it doesn't wrap word-by-word */
  .fm-teaser-grid h2.sm-h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
  }
  /* Right column: hide all <div> children (label + checkmarks), keep <a> button + <p> date */
  .fm-teaser-grid > div:last-child > div {
    display: none !important;
  }
  .fm-teaser-grid > div:last-child {
    min-width: unset !important;
    gap: 10px !important;
  }
}