/* ============================================================
   Vector Empresarial — Correcciones responsive (móvil/tablet)
   Se carga DESPUÉS del CSS de cada página para sobreescribir.
   Objetivo: que ningún grid de 2 columnas ni retrato fuerce un
   ancho mayor que la pantalla (causa del texto cortado en móvil).
   ============================================================ */

/* Salvaguarda global anti-desborde horizontal */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; }

@media (max-width: 820px) {

  /* Grids de 2 columnas → 1 sola, y permitir que encojan
     (min-width:0 evita el ancho mínimo de contenido del grid) */
  .hero-grid,
  .antonio-grid,
  .resources,
  .compare-grid,
  .booking-embed,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-grid > *,
  .antonio-grid > *,
  .resources > *,
  .booking-embed > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Retratos / composiciones del hero: que no fuercen ancho fijo */
  .composition,
  .portrait,
  .portrait.big,
  .portrait.square,
  .hero-right,
  .antonio-portrait {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Tarjetas flotantes del hero: que no se salgan */
  .float-card { max-width: calc(100% - 24px); }

  /* Texto: nunca permitir que un max-width en ch supere la pantalla */
  .hero-intro, .hero-h1, .hero-h2, .signature, .lead, .sub {
    max-width: 100% !important;
  }

  /* Botones grandes: que no fuercen ancho con su texto; envolver y full-width */
  .btn-lg,
  .hero-ctas .btn,
  .hero-ctas > a,
  .cta-final .btn,
  .cta-wrap .btn,
  .btn-block {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center;
  }
  .hero-ctas { flex-wrap: wrap; }
}

/* En móvil estrecho, el embed de Cal.com a pantalla completa */
@media (max-width: 600px) {
  #cal-inline-diagnostico { min-height: 600px; }
  .be-card { position: static !important; }
}