/* ==========================================================================
   RESPONSIVE — Mobile first, ajustes por breakpoint
   ========================================================================== */

/* Base (< 768px) ya está resuelta con clamp() en variables.css.
   Aquí ajustamos los layouts de grid que en desktop son multi-columna. */

.nav-links,
.nav-cta-desktop { display: none; }

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

.hero-headline { max-width: none; }
.hero-main { max-width: none; margin-top: var(--space-lg); }
.hero-bottom-row { flex-direction: column; align-items: flex-start; }
.hero-text-col { max-width: none; }
.hero { min-height: min(100vh, 760px); }
.hero-eyebrow-row { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }

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

.emotional-block { grid-template-columns: 1fr; }
.emotional-visual { order: -1; aspect-ratio: 16 / 10; }

.about-block { grid-template-columns: 1fr; }
.about-media { position: static; aspect-ratio: 16 / 10; }
.about-facts { grid-template-columns: 1fr; }

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

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

.footer-top { grid-template-columns: 1fr; }

.float-whatsapp {
  width: 50px; height: 50px;
  right: var(--space-2xs);
  bottom: var(--space-2xs);
}

/* --- Tablet vertical (>= 640px) --- */
@media (min-width: 40em) {
  .practice-grid { grid-template-columns: repeat(3, 1fr); }
  .differentials-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet horizontal / desktop pequeño (>= 768px) --- */
@media (min-width: 48em) {
  .menu-toggle { display: none; }
  .nav-links { display: flex; }
  .nav-cta-desktop { display: inline-flex; }

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

  .hero-headline { max-width: 22ch; }
  .hero-main { max-width: 30ch; }
  .hero-bottom-row { flex-direction: row; align-items: flex-end; }
  .hero { min-height: min(96vh, 980px); }
  .hero-eyebrow-row { flex-direction: row; align-items: center; }

  .emotional-block { grid-template-columns: 1.1fr 0.9fr; }
  .emotional-visual { order: 0; aspect-ratio: 1 / 1; }

  .about-block { grid-template-columns: 0.85fr 1.15fr; }
  .about-media { position: sticky; top: calc(var(--space-lg) + 60px); aspect-ratio: 3 / 4; }
  .about-facts { grid-template-columns: repeat(2, 1fr); }

  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* --- Desktop grande (>= 64em / 1024px) --- */
@media (min-width: 64em) {
  .differentials-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 0.8fr 1.2fr; }
}

/* --- Desktop XL (>= 90em / 1440px) --- */
@media (min-width: 90em) {
  :root { --gutter: 4rem; }
}

/* --- Ajustes ultra pequeños (<= 375px) --- */
@media (max-width: 23.4375em) {
  .hero-ctas .btn,
  .cta-final-buttons .btn { width: 100%; }
  .cookie-actions .btn { width: 100%; }
}

/* Honorarios: móvil apilado, desktop en grid */
.pricing-grid { grid-template-columns: 1fr; }
.pricing-extra { grid-template-columns: 1fr; }
@media (min-width: 40em) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .pricing-grid { grid-template-columns: repeat(4, 1fr); }
  .pricing-extra { grid-template-columns: repeat(2, 1fr); }
}

.contact-direct-data { grid-template-columns: 1fr; }
@media (min-width: 40em) {
  .contact-direct-data { grid-template-columns: repeat(3, 1fr); }
}