/* ============================================================
   JÍCARA · Design System · base.css
   Reset mínimo + tipografía global. Requiere tokens.css antes.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-text);
  font-size: var(--text-md);
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--track-titulo);
  line-height: 1.15;
  color: var(--marca);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p  { margin: 0; }
p + p { margin-top: var(--sp-3); }

a {
  color: var(--marca);
  font-weight: 600;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--acento-texto); }

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

button { font: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--j-mandarina-suave); color: var(--j-tinta); }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Contenedor estándar */
.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* Sección con respiro vertical estándar */
.seccion { padding: var(--sp-8) 0; }

/* Texto secundario */
.suave { color: var(--fg-suave); }

/* Acento de texto legible en ambos temas; .oro es alias de compatibilidad. */
.acento, .oro { color: var(--acento-texto); }

/* El atributo hidden gana siempre, también sobre .btn (display:inline-flex) */
[hidden] { display: none !important; }