/* ===========================
   css/style.css — GLOBAL
   =========================== */

/* Paleta global (si ya las tienes en otra hoja, deja una sola versión) */
:root{
  --blue-dark:#0c2c65;
  --blue-accent:#2E86FF;
  --blue-accent-dark:#1B6DE0;
  --beige:#e9e6df;
}

/* Reset mínimo + anti scroll horizontal */
*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ width:100%; max-width:100%; overflow-x:hidden; }
:where(img, video){ max-width:100%; height:auto; display:block; }

/* Guard-rails de layout genéricos (baja especificidad con :where) */
:where(.hero-wrap, .site-banner, .carrusel-container, .carrusel){
  max-width:100vw;
}

/* Flex items que a veces desbordan en vistas pequeñas */
:where(.hero-left, .hero-right){ min-width:0; }

/* Evitar que botones de carrusel “asomen” fuera en móviles */
@media (max-width:768px){
  :where(.carrusel-btn.prev){ left:5px; }
  :where(.carrusel-btn.next){ right:5px; }
  /* Por si algún bloque arrastra márgenes grandes en móvil */
  :where(.hero-right){ margin-right:0 !important; max-width:100%; }
}