/* ═══════════════════════════════════════════════════════════
   KUMO — Estilos base (TEMA PROVISORIO "prototipo")
   Reset, tipografía global, fondo negro con grano y utilidades.
   Requiere tokens.css cargado antes.
   Usado por: todas las apps (tienda, panel, admin).
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  /* Los drawers/modales ocultos con transform (carrito, chat) quedan
     fuera de la pantalla pero el navegador los sigue contando en el
     ancho scrolleable de la página — esto evita el scroll horizontal
     fantasma que eso genera, sobre todo en celulares. */
  overflow-x: hidden;
}

/* Fondo negro cálido con foto de marca (azul → durazno), con un
   velo oscuro encima para que el texto claro siga leyéndose, fijo
   al hacer scroll. */
body {
  font-family: var(--fuente-texto);
  font-size: var(--texto-m);
  line-height: 1.55;
  color: var(--color-texto);
  background-color: var(--fondo);
  background-image: var(--fondo-pagina), url("../assets/fondo-marca.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video {
  max-width: 100%;
  display: block;
}

/* TEMA OSCURO PROVISORIO: el isotipo Kumo (azul de marca) se pinta
   claro para verse sobre el fondo negro. Revisar con el diseño final. */
img[src$="kumo-isotipo.svg"] {
  filter: brightness(0) invert(0.93) sepia(0.05);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--ac);
  text-decoration: none;
}
a:hover { opacity: 0.85; }

ul[role="list"], ol[role="list"] { list-style: none; }

/* ── Títulos: pesados y compactos (estilo del prototipo) ── */
h1, h2, h3, .titulo {
  font-family: var(--fuente-titulos);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-texto);
}
h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-l); }
h4, h5, h6 { font-family: var(--fuente-texto); font-weight: 700; }

.texto-suave { color: var(--color-texto-suave); }
.texto-chico { font-size: var(--texto-s); }

/* ── Layout ── */
.contenedor {
  max-width: var(--max-ancho);
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 720px) {
  .contenedor { padding-inline: var(--esp-4); }
}

.seccion { padding-block: var(--esp-6); }

/* ── Accesibilidad ── */
:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: var(--radio-s);
}

.solo-lector {
  /* texto solo para lectores de pantalla */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Scrollbar fina (como el prototipo) ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radio-pastilla);
}
::-webkit-scrollbar-track { background: transparent; }