/* ═══════════════════════════════════════════════════════════════════════════
   TRIPLESHOT — responsive.css
   Mobile-first breakpoints: sm(576) md(768) lg(992) xl(1200) xxl(1440)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BASE MOBILE (< 576px) ─────────────────────────────────────────────── */
.hero--inicio .hero__inner      { grid-template-columns: 1fr; text-align: center; }
.hero__image-wrap               { display: none; }
.hero__content                  { max-width: 100%; }
.hero__subtitle                 { max-width: 100%; }

.service-highlight              { grid-template-columns: 1fr; gap: var(--sp-sm); }
.services-intro__triple-text h2 { font-size: 1.9rem; }

.tools-radar__svg-wrap          { max-width: 320px; }
.tool-icon                      { width: 42px; height: 42px; }

.blog-preview                   { grid-template-columns: 1fr; }
.blog-preview__cards            { grid-template-columns: 1fr; }

.cta-banner                     { grid-template-columns: 1fr; text-align: center; }
.cta-banner__logo               { display: none; }
.cta-banner__chat               { display: none; }

.faq__grid                      { grid-template-columns: 1fr; }

.footer__contact-section        { grid-template-columns: 1fr; }
.footer__bottom-inner           { flex-direction: column; text-align: center; }
.footer__nav                    { justify-content: center; }

.ceo-section__inner             { grid-template-columns: 1fr; }
.ceo-img                        { max-width: 280px; margin-inline: auto; }

.branding-section               { grid-template-columns: 1fr; }
.blog-featured                  { grid-template-columns: 1fr; }
.blog-grid                      { grid-template-columns: 1fr; }
.contact-info-section           { grid-template-columns: 1fr; }

.nav-overlay                    { flex-direction: column; }
.nav-overlay__left              { flex: 0 0 35%; padding: var(--sp-md); }
.nav-overlay__logo              { font-size: 2.5rem; }

.objetivo-section__title        { font-size: 2.2rem; }

.whatsapp-btn                   { bottom: 25vh; right: 20px; width: 60px; height: 60px; font-size: 1.6rem; }

/* ─── SM (≥ 576px) ──────────────────────────────────────────────────────── */
@media (min-width: 576px) {
  .hero__image-wrap { display: flex; opacity: 0.4; }
  .blog-preview__cards { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-banner__chat { display: flex; }
  .footer__contact-section { grid-template-columns: 1fr 1fr; }
}

/* ─── MD (≥ 768px) ──────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hero--inicio .hero__inner { grid-template-columns: 1fr 1fr; text-align: left; }
  .hero__image-wrap { display: flex; opacity: 1; }
  .hero__content { max-width: 560px; }

  .service-highlight { grid-template-columns: 1fr 1fr; }
  .cta-banner { grid-template-columns: 1fr auto 1fr; }
  .cta-banner__logo { display: block; }

  .faq__grid { grid-template-columns: 1fr 1fr; }
  .footer__contact-section { grid-template-columns: 1fr 1fr; }

  .ceo-section__inner { grid-template-columns: 1fr 1fr; }
  .branding-section { grid-template-columns: 1fr 1fr; }
  .blog-featured { grid-template-columns: 1fr 1fr; }
  .contact-info-section { grid-template-columns: 1fr 1fr; }

  .tools-radar__svg-wrap { max-width: 600px; }
  .tool-icon { width: 56px; height: 56px; }
}

/* ─── LG (≥ 992px) ──────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-preview { grid-template-columns: 1fr 1.6fr; }
  .tools-radar__svg-wrap { max-width: 750px; }
  .tool-icon { width: 62px; height: 62px; }

  .nav-overlay__left { padding-left: var(--sp-xl); }
  .nav-overlay__logo { font-size: 3.5rem; }
}

/* ─── XL (≥ 1200px) ────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .hero__dart { display: block; }
  .tools-radar__svg-wrap { max-width: 800px; }
}

/* ─── XXL (≥ 1440px) ───────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root { --container: 1360px; }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}