/* ============================================================
   Revelant — Capa responsive (mobile-first)
   Los componentes usan grids fijos de 2+ columnas y tipografías
   grandes en estilos inline, sin breakpoints. Estas reglas
   (con !important, que gana a los estilos inline de React) hacen
   que todo colapse a una columna y escale bien en el teléfono.
   ============================================================ */

/* Header nav: horizontal por defecto (escritorio) */
.rv-nav-links { display: flex; align-items: center; gap: 2px; }

/* Nunca permitir scroll horizontal */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
* { min-width: 0; }

/* ---------- Teléfonos y tablets angostas ---------- */
@media (max-width: 860px) {

  /* 1) Todo grid inline pasa a una sola columna */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* 2) Padding de los contenedores internos de cada sección */
  section > div[style*="max-width"],
  section > div[style*="margin"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 3) Gaps grandes -> moderados */
  [style*="gap: 64"], [style*="gap:64"] { gap: 28px !important; }
  [style*="gap: 56"], [style*="gap:56"] { gap: 26px !important; }
  [style*="gap: 48"], [style*="gap:48"] { gap: 24px !important; }
  [style*="gap: 40"], [style*="gap:40"] { gap: 22px !important; }

  /* 4) Paddings verticales enormes de secciones -> más compactos */
  [style*="padding: 84px"], [style*="padding:84px"],
  [style*="padding: 96px"], [style*="padding:96px"],
  [style*="padding: 112px"], [style*="padding:112px"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  /* 5) Tipografía: escalar fluido sin importar el tamaño inline */
  h1 { font-size: clamp(30px, 9vw, 46px) !important; line-height: 1.06 !important; }
  h2 { font-size: clamp(24px, 6.5vw, 34px) !important; }
  h3 { font-size: clamp(19px, 5vw, 24px) !important; }
  [style*="font-size: 62"], [style*="font-size:62"] { font-size: clamp(30px, 9vw, 46px) !important; line-height: 1.06 !important; }
  [style*="font-size: 72"], [style*="font-size:72"] { font-size: clamp(40px, 13vw, 64px) !important; }
  [style*="font-size: 58"], [style*="font-size:58"],
  [style*="font-size: 56"], [style*="font-size:56"] { font-size: clamp(34px, 11vw, 52px) !important; }
  [style*="font-size: 52"], [style*="font-size:52"] { font-size: clamp(30px, 9vw, 46px) !important; }
  [style*="font-size: 48"], [style*="font-size:48"] { font-size: clamp(28px, 8.5vw, 44px) !important; }
  [style*="font-size: 44"], [style*="font-size:44"] { font-size: clamp(26px, 8vw, 40px) !important; }
  [style*="font-size: 40"], [style*="font-size:40"] { font-size: clamp(24px, 7vw, 36px) !important; }
  [style*="font-size: 38"], [style*="font-size:38"] { font-size: clamp(22px, 6.5vw, 34px) !important; }

  /* 6) Filas de botones / chips: que envuelvan */
  [style*="display: flex"][style*="gap: 14"],
  [style*="display: flex"][style*="gap: 12"],
  [style*="display: flex"][style*="gap: 16"] { flex-wrap: wrap !important; }

  /* 7) Resplandor decorativo del hero: que no genere ancho extra */
  .rv-hero__glow { width: 320px !important; height: 320px !important; right: -60px !important; }

  /* 8) Imágenes grandes con altura fija -> alto razonable */
  img[style*="height: 190"] { height: 130px !important; }

  /* 9) El botón flotante de WhatsApp un poco más chico/ajustado */
  a[aria-label="WhatsApp"] { right: 16px !important; bottom: 16px !important; }
}

/* ---------- Header: menú hamburguesa en móvil ---------- */
@media (max-width: 860px) {
  /* mostrar el botón hamburguesa, ocultar links inline, divisor y CTA */
  .rv-nav-toggle { display: inline-flex !important; }
  .rv-nav-divider { display: none !important; }
  .rv-nav-cta { display: none !important; }

  /* links: panel desplegable bajo el header */
  .rv-nav-links {
    position: absolute; left: 0; right: 0; top: 64px;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px 16px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .rv-header.is-open .rv-nav-links { display: flex !important; }
  .rv-nav-links a {
    font-size: 16px !important;
    padding: 12px 6px !important;
    border-bottom: 1px solid var(--border-muted);
  }
}

/* ---------- Teléfonos chicos ---------- */
@media (max-width: 420px) {
  section > div[style*="max-width"] { padding-left: 16px !important; padding-right: 16px !important; }
}