/* ═══════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — Pase completo claudiaacosta.ar
   Breakpoints: 768px y 480px
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .hero,
  section:first-of-type {
    padding-top: var(--space-12) !important;
  }

   /* Tipos de eventos moderacion */
  [style*="padding: var(--space-6) var(--space-7)"] {
    padding: var(--space-5) var(--space-6) !important;
  }

  /* ── Nav burger → X ─────────────────────────────────── */
  .nav__burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__burger.is-open span:nth-child(2) {
    opacity: 0;
  }
  .nav__burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Grillas → 1 columna ────────────────────────────── */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* ── Hero home ──────────────────────────────────────── */
  .hero__inner {
    grid-template-columns: 1fr !important;
  }
  .hero__visual { display: none !important; }
  .hero__content {
    max-width: 100% !important;
    text-align: center;
  }
  .hero__logo { margin-inline: auto !important; }
  .hero__actions {
    justify-content: center !important;
    flex-direction: column;
    align-items: center;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Clientes logos 2x2 ─────────────────────────────── */
  .clients__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4);
  }

  /* ── Grids inline styles → 1 columna ───────────────── */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: 240px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Sin overflow horizontal ────────────────────────── */
  body { overflow-x: hidden; }
  .container { overflow-x: hidden; }

  /* ── Sidebars sticky → static ───────────────────────── */
  [style*="position: sticky"] {
    position: static !important;
  }

  /* ── Formularios ─────────────────────────────────────── */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── CTA actions ─────────────────────────────────────── */
  .cta-banner__actions {
    flex-direction: column;
    align-items: center;
  }
  .cta-banner__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Service card principal horizontal → vertical ───── */
  .service-card[style*="flex-direction: row"] {
    flex-direction: column !important;
  }

  /* ── Footer ──────────────────────────────────────────── */
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
  .footer__legal { justify-content: center; }

  /* ── Padding secciones ───────────────────────────────── */
  .section { padding-block: var(--space-12) !important; }
  [style*="padding-block: var(--space-20)"] {
    padding-block: var(--space-12) !important;
  }
  [style*="padding-block: var(--space-24)"] {
  padding-block: var(--space-10) var(--space-16) !important;
}
  [style*="padding-block: var(--space-16)"] {
    padding-block: var(--space-10) !important;
  }

  /* ── Gap secciones ───────────────────────────────────── */
  [style*="gap: var(--space-16)"] {
    gap: var(--space-8) !important;
  }
  [style*="gap: var(--space-12)"] {
    gap: var(--space-6) !important;
  }

  /* ── Tipografía ──────────────────────────────────────── */
  h1 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.375rem, 5vw, 2rem) !important; }

  /* ── Nav mobile ──────────────────────────────────────── */
  .nav__menu { display: none !important; }
  .nav__actions .btn--primary { display: none !important; }
  .nav__burger { display: flex !important; }
  .nav__mobile { display: none !important; }
  .nav__mobile.is-open { display: block !important; }

  /* ── AI widget ───────────────────────────────────────── */
  .ai-widget__panel { width: calc(100vw - 2rem) !important; }
  .ai-widget__trigger span { display: none; }
  .ai-widget__trigger {
    padding: 0.875rem !important;
    border-radius: 50% !important;
  }
  .ai-widget {
    bottom: 1rem !important;
    right: 0.75rem !important;
  }

  /* ── Stats 4 cols → 2 cols ───────────────────────────── */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Carrusel testimonios ────────────────────────────── */
  .testimonio-slide { min-width: 100% !important; }

  /* ── Flex rows → column ──────────────────────────────── */
  [style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
  }

  /* ── Imagen hero moderacion ──────────────────────────── */
  .sobre-hero-foto { display: none !important; }

}

@media (max-width: 480px) {
  :root { --container-pad: 1rem; }

  .btn--lg {
    padding: 0.75rem 1.25rem !important;
    font-size: var(--text-base) !important;
  }

  h1 { font-size: clamp(1.5rem, 8vw, 2rem) !important; }

  /* ── Speakers 1 col ──────────────────────────────────── */
  #speakers-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Modal speakers fullscreen ───────────────────────── */
  #speaker-modal > div {
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: var(--radius-lg) !important;
    margin: var(--space-4) !important;
  }

  /* ── Proceso steps 1 col ─────────────────────────────── */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  #speakers-grid,
[style*="grid-template-columns: repeat(3, 1fr)"],
[style*="grid-template-columns: repeat(2, 1fr)"] {
  grid-template-columns: 1fr !important;
}

/* Evitar overflow en cards con grid-column: span */
[style*="grid-column: span"] {
  grid-column: span 1 !important;
}

#speaker-modal .btn {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
}