/* Verben — responsive overlay
   Solo actúa por debajo de 900px. El diseño desktop queda intacto. */

/* ============ TABLET  ≤ 900px ============ */
@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; }
  img, video, iframe { max-width: 100%; }

  /* Contenedor principal */
  [style*="max-width:1180px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* Grillas repeat(n) → 2 columnas */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* Grillas de 2 zonas asimétricas → 1 columna */
  [style*="grid-template-columns:340px"],
  [style*="grid-template-columns:300px"],
  [style*="grid-template-columns:40%"],
  [style*="grid-template-columns:0.9fr"],
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns:minmax(0,0.82fr)"],
  [style*="grid-template-columns:minmax(0,45%)"],
  [style*="grid-template-columns:minmax(0,35%)"] { grid-template-columns: minmax(0,1fr) !important; }

  /* Tipografía */
  [style*="font-size:96px"] { font-size: 64px !important; }
  [style*="font-size:84px"] { font-size: 58px !important; }
  [style*="font-size:62px"] { font-size: 48px !important; }
  [style*="font-size:54px"] { font-size: 44px !important; }
  [style*="font-size:52px"] { font-size: 42px !important; }
  [style*="font-size:48px"] { font-size: 40px !important; }

  /* Paddings de secciones */
  [style*="padding:56px 40px"] { padding: 40px 26px !important; }
  [style*="padding:48px 40px"] { padding: 36px 24px !important; }
  [style*="padding:56px 56px 60px"] { padding: 40px 28px 44px !important; }
}

/* ============ MOBILE  ≤ 600px ============ */
@media (max-width: 600px) {

  /* --- Grillas: todo a una columna --- */
  [style*="grid-template-columns:repeat("] { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-column:1 / -1"] { grid-column: auto !important; }

  /* --- Contenedor y navegación --- */
  [style*="max-width:1180px"] { padding-left: 16px !important; padding-right: 16px !important; }
  nav [style*="height:72px"] { height: 62px !important; }
  nav a[href="index.html"] img { height: 30px !important; }
  nav [data-lang-btn] { padding: 4px 8px !important; font-size: 13px !important; }
  #menuDrawer { max-width: 86vw !important; overflow-y: auto !important; }
  #menuDrawer ul { padding: 20px 26px !important; gap: 18px !important; }
  #menuDrawer ul a, #menuDrawer ul span { font-size: 18px !important; }

  /* Mosaico decorativo: no debe empujar el layout */
  nav + div[style*="position:absolute"][style*="right:0"] { width: 220px !important; height: 160px !important; opacity: .5 !important; }

  /* --- Tipografía --- */
  h1, [style*="font-size:48px"] { font-size: 30px !important; line-height: 1.1 !important; }
  [style*="font-size:96px"] { font-size: 42px !important; }
  [style*="font-size:84px"] { font-size: 38px !important; }
  [style*="font-size:62px"] { font-size: 34px !important; }
  [style*="font-size:54px"] { font-size: 32px !important; }
  [style*="font-size:52px"] { font-size: 30px !important; }
  [style*="font-size:44px"] { font-size: 28px !important; }
  [style*="font-size:42px"] { font-size: 26px !important; }
  [style*="font-size:40px"] { font-size: 26px !important; }
  [style*="font-size:38px"] { font-size: 25px !important; }
  [style*="font-size:34px"] { font-size: 24px !important; }
  [style*="font-size:32px"] { font-size: 23px !important; }
  [style*="font-size:30px"] { font-size: 22px !important; }
  [style*="font-size:28px"] { font-size: 21px !important; }
  [style*="font-size:26px"] { font-size: 20px !important; }

  /* --- Paddings --- */
  [style*="padding:56px 40px"] { padding: 28px 18px !important; }
  [style*="padding:48px 40px"] { padding: 24px 16px !important; }
  [style*="padding:56px 56px 60px"] { padding: 28px 20px 34px !important; }
  [style*="padding:36px 40px"] { padding: 24px 20px !important; }
  [style*="padding:40px"] { padding: 24px !important; }
  [style*="padding:28px"] { padding: 22px !important; }

  /* --- Tarjetas con alto fijo → alto natural --- */
  [style*="min-height:300px"] { min-height: 0 !important; }

  /* --- Gaming: tabs --- */
  [data-tab] { padding: 9px 20px !important; font-size: 15px !important; flex: 1 !important; }
  [data-tab]:first-child { white-space: nowrap; }

  /* --- Gaming: mapa LATAM a ancho completo --- */
  [style*="aspect-ratio:374/573"],
  [style*="aspect-ratio:359/552"] { max-width: 100% !important; }

  /* --- Gaming: flip cards --- */
  .flip { height: 300px !important; }
  .flip-face { padding: 28px !important; }
  .flip-face h4 { max-width: 100% !important; font-size: 20px !important; }

  /* --- Gaming: galería de formatos --- */
  #stage { padding: 22px 14px !important; gap: 26px !important; perspective: none !important; }
  #phone { transform: none !important; }
  #fmtPills button { flex: 1 1 44%; padding: 10px 12px !important; font-size: 14px !important; }
  #metricCard { padding: 26px 22px !important; }
  #metricCard [style*="gap:30px 48px"] { gap: 20px 28px !important; }

  /* --- Casos de éxito / lightbox --- */
  #caseLightbox { padding: 16px !important; }
  #btnCaseClose { top: auto !important; bottom: -52px !important; right: 50% !important; transform: translateX(50%); }

  /* --- Formulario de contacto --- */
  #contactModal { padding: 24px 12px !important; }
  #cfForm { grid-template-columns: minmax(0,1fr) !important; }
  #cfSubmit { width: 100%; }
  .vbn-input { font-size: 16px !important; } /* evita el zoom automático de iOS */

  /* --- Footer --- */
  footer [style*="max-width:1180px"] { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; padding: 28px 16px !important; }

  /* --- Áreas táctiles mínimas --- */
  button { min-height: 44px; }
}

/* ============ TOUCH: flip por tap en lugar de hover ============ */
@media (hover: none) {
  .flip { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .flip:hover .flip-inner { transform: none; }
  .flip.flipped .flip-inner { transform: rotateY(180deg) !important; }
}

/* ============ MOBILE CHICO  ≤ 400px ============ */
@media (max-width: 400px) {
  #stage > div:first-child { transform: scale(.84); transform-origin: top center; margin-bottom: -100px; }
}