/* =====================================================================
   responsive.css — adaptación móvil + tipografía mayor en desktop
   Se carga DESPUÉS de Tailwind; usa !important para ganar a las utilidades.
   ===================================================================== */

html, body { max-width: 100%; overflow-x: hidden; }
img, .ph { max-width: 100%; }

/* ---------------- TABLET (≤1024px) ---------------- */
@media (max-width: 1024px) {
  .px-16 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
  .grid-cols-5 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid-cols-6 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ---------------- MÓVIL (≤768px) ---------------- */
@media (max-width: 768px) {
  /* Padding lateral compacto */
  .px-16 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Ritmo vertical reducido */
  .py-24 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
  .py-20 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
  .py-16 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .pt-28, .pt-24 { padding-top: 2rem !important; }
  .mt-16 { margin-top: 2.5rem !important; }
  .mb-14 { margin-bottom: 2.25rem !important; }

  /* Todas las rejillas multicolumna → una sola columna */
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-12 {
    grid-template-columns: 1fr !important;
  }
  [class*="col-span-"] { grid-column: auto !important; }
  .gap-14, .gap-12, .gap-10 { gap: 1.75rem !important; }

  /* Divisores verticales → líneas superiores apiladas */
  [class*="divide-x"] > * + * { border-left-width: 0 !important; border-top: 1px solid var(--color-border) !important; }

  /* Filas de dos columnas en flex que deben apilarse */
  .stack-mobile { flex-direction: column !important; }
  .stack-mobile > * { flex: 1 1 auto !important; width: 100% !important; }

  /* Héroes: altura según contenido */
  header[style] { min-height: auto !important; }

  /* Figuras grandes más bajas */
  figure[style*="min-height"], .liftcard[style*="min-height"] { min-height: 260px !important; }

  /* ----- NAV: el logo y el botón arriba, los enlaces centrados debajo ----- */
  nav { flex-wrap: wrap !important; row-gap: .5rem; padding: .7rem 1.25rem !important; }
  nav > a { order: 1; }
  nav > a.btn { order: 2; }
  nav > div { order: 3; width: 100%; justify-content: center !important; flex-wrap: wrap; gap: 1rem !important; font-size: 13px; }

  /* ----- Footer apilado ----- */
  footer .flex.justify-between.items-start { flex-direction: column; gap: 2rem !important; }
  footer .flex.gap-16 { gap: 2rem !important; flex-wrap: wrap; }
  footer .flex.justify-between.items-center { flex-direction: column; gap: .5rem; text-align: center; }

  /* Formulario a una columna */
  form .grid-cols-2 { grid-template-columns: 1fr !important; }

  /* Cita / titulares muy anchos: sin desbordes */
  h1, h2, p { word-break: break-word; }
}

/* ---------------- Móvil pequeño (≤420px) ---------------- */
@media (max-width: 420px) {
  .px-16 { padding-left: 1rem !important; padding-right: 1rem !important; }
  nav .uppercase.tracking-widest { font-size: 13px !important; letter-spacing: .12em !important; }
}