/* Estilos base compartidos por todas las páginas públicas */
html {
  color-scheme: light;
  /* Escala todo el diseño (rem) según el ancho: 16px en móvil, ~20px en TV Full HD, ~29px en 4K */
  font-size: clamp(16px, calc(10px + 0.5vw), 32px);
}
body {
  margin: 0;
  background: #ffffff;
  color: #1f1f1f;
  font-family: Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Márgenes laterales fluidos (respetan notch / bordes seguros de TV) */
:root { --g: 1.25rem; }
@media (min-width: 40rem) { :root { --g: 2rem; } }
@media (min-width: 64rem) { :root { --g: 3rem; } }
@media (min-width: 80rem) { :root { --g: 4rem; } }
@media (min-width: 120rem) { :root { --g: 5rem; } }
:root {
  --gl: max(var(--g), env(safe-area-inset-left));
  --gr: max(var(--g), env(safe-area-inset-right));
}
.site-pad { padding-left: var(--gl); padding-right: var(--gr); }

/* Carruseles que llegan hasta el borde de la pantalla en móvil y tablet */
.bleed {
  margin-left: calc(var(--gl) * -1);
  margin-right: calc(var(--gr) * -1);
  padding-left: var(--gl);
  padding-right: var(--gr);
  scroll-padding-left: var(--gl);
}
@media (min-width: 64rem) {
  .bleed { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; scroll-padding-left: 0; }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Menú desplegable de categorías */
@keyframes menuPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu-pop { animation: menuPop .14s ease-out; }