/* Anexa — mobile-first responsive overrides
   IMPORTANT: this file targets real CSS classes added to the HTML, not inline
   style substrings. The site's render runtime (support.js) converts inline
   style="a:b" strings into React style OBJECTS, and the browser re-serializes
   them back to the DOM with a space after the colon ("a: b"). Any selector
   like [style*="a:b"] (no space) silently fails to match the live DOM — this
   is what broke the previous version of this file almost entirely. Classes
   are immune to that, so always add a class to an element instead of trying
   to match its inline style text. */

/* Anti overflow horizontal global */
html, body { overflow-x: hidden !important; }
img, svg, video, iframe { max-width: 100% !important; }

/* ========== TABLET ≤ 1024px ========== */
@media (max-width: 1024px) {
  .g4, .g3 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .g2 { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ========== MOBILE ≤ 768px ========== */
@media (max-width: 768px) {
  /* Header: keep the logo at its natural aspect ratio (never let the CTA
     squeeze it) and make the CTA a small pill (~35% of the header width). */
  .site-header { padding: 10px 16px !important; gap: 10px !important; }
  .hdr-logo { height: 30px !important; width: auto !important; flex-shrink: 0 !important; }
  .hdr-cta { padding: 7px 13px !important; font-size: 12px !important; gap: 5px !important; flex-shrink: 0 !important; white-space: nowrap !important; }
  .hdr-cta > span { font-size: 13px !important; }

  /* Sections: one consistent, tight rhythm instead of each section's own
     desktop padding (which ranged 60px–140px and read as huge dead space). */
  .sec { padding: 48px 20px !important; }
  #top.sec { padding-top: 32px !important; padding-bottom: 40px !important; }

  /* Breadcrumb row on legal/contacto pages */
  .breadcrumb { padding-left: 20px !important; padding-right: 20px !important; }

  /* All grids: 1 column on mobile */
  .g4, .g3, .g2, .g-legal, .footer-g { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Legal pages: hide the sticky TOC sidebar, let content take full width */
  .g-legal aside { display: none !important; }
  .g-legal article { max-width: 100% !important; }

  /* Hero title: more line-height so the underline swoosh under "50%" never
     collides with the next wrapped line, plus a tighter font size. */
  .hero-title { font-size: 34px !important; line-height: 1.3 !important; letter-spacing: -0.02em !important; }
  .hero-title svg { bottom: -2px !important; }
  .hero-eyebrow { margin-bottom: 12px !important; padding: 5px 11px !important; }
  .hero-eyebrow span { font-size: 11px !important; }

  /* Hero subtitle: smaller so it doesn't compete with the title on phones */
  .hero-sub { font-size: 14.5px !important; line-height: 1.45 !important; margin-bottom: 18px !important; }

  /* VSL: guarantee full-bleed width regardless of aspect-ratio quirks */
  .vsl-frame { width: 100% !important; max-width: 100% !important; }

  /* Generic h2 sizing; h1 already handled by .hero-title or its own clamp() */
  h2 { font-size: 28px !important; line-height: 1.15 !important; }

  /* Framework heading: each "Paso →" on its own centered line so no arrow is
     ever left stranded at a wrap boundary. */
  .fw-step { display: block !important; }
  .legal h2 { font-size: 22px !important; margin: 36px 0 14px !important; }
  .legal p, .legal ul li { font-size: 16px !important; line-height: 1.6 !important; }

  /* Section CTA pills: full-width tap targets — except the hero one, which
     stays auto-width so it doesn't dominate the first screen. */
  a[href="#calendly"]:not(.hdr-cta):not(.hero-cta),
  a[href="/#calendly"]:not(.hdr-cta):not(.hero-cta) { width: 100%; box-sizing: border-box; justify-content: center; }
  .hero-cta { padding: 13px 22px !important; font-size: 13.5px !important; gap: 7px !important; line-height: 1.25 !important; }
  .hero-cta > span { font-size: 16px !important; }

  /* Logo marquee: slightly smaller cards, tighter gap */
  .logo-card { width: 150px !important; height: 78px !important; }
  .marquee-track { gap: 28px !important; }

  /* Testimonial video cards: shorter so 3 don't feel endless on a phone */
  .testimonial-video { aspect-ratio: 4 / 5 !important; }

  /* Founder portrait: cap height so it doesn't dominate the screen before the bio */
  .founder-photo { max-height: 420px !important; }

  /* Calendly: on mobile the booking embed must come RIGHT AFTER the intro text
     (before the "Qué te llevás" info panel) so anyone tapping a CTA lands on the
     actual calendar and can pick a day. order:-1 floats it to the top of the grid. */
  .cal-embed { order: -1 !important; min-height: 620px !important; }
  #calendly-embed { min-height: 620px !important; }
  .cal-info { margin-top: 4px !important; }

  /* Footer: match the section side padding (was 40px, felt cramped at 335px) */
  .site-footer { padding: 56px 20px 32px !important; }
  .footer-g { gap: 32px !important; }

  /* Inner content cards: desktop padding was 32–48px which squeezed content
     into a ~240px column (and clipped the big serif quote). Tighten to 22px. */
  .pc { padding: 24px 22px !important; }

  /* CTA banner rows (icon/text + buttons) that were side-by-side on desktop */
  .cta-row { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; padding: 24px 22px !important; }
  .cta-row > div:last-child { width: 100% !important; }
  .cta-row a { flex: 1 !important; justify-content: center !important; }

  /* Big serif pull-quotes: cap size so long words don't overflow the card */
  .big-quote { font-size: 26px !important; line-height: 1.25 !important; }
}

/* ========== SMALL PHONE ≤ 420px ========== */
@media (max-width: 420px) {
  .hero-title { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
  .logo-card { width: 130px !important; height: 68px !important; }
}