/* ==========================================================================
   Base: reset, tipografía y elementos nativos
   Depende de tokens.css. Nada de valores literales acá: solo variables.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--sf-superficie-calida); /* dirección A: marfil en todo el sitio */
  color: var(--sf-texto-principal);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m);
  line-height: var(--sf-cuerpo-m-alto);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* --- Titulares -----------------------------------------------------------
   H1 a H3 en Bodoni, siempre peso 400 (los pesos altos se ven pesados en pantalla).
   Desde H4 manda Montserrat en 600.                                         */

/* El color de los titulares es el texto principal, casi negro, NO el azul de la
   marca. Medido contra el artefacto el 01-09-2026: ahi `.sc__t` y `.ct__t` son
   #0D1114 y el azul #1F5878 aparece solo en enlaces y acciones (`.sc__v`). Con
   los titulares en azul, la pagina tenia dos jerarquias del mismo color y el
   enlace dejaba de leerse como enlace. `--sf-texto-marca` sigue donde
   corresponde: el logotipo, el hover de los enlaces y las piezas de marca. */
h1, h2, h3 {
  font-family: var(--sf-fuente-titulos);
  font-weight: var(--sf-titulos-peso);
  font-optical-sizing: none;
  font-variation-settings: 'opsz' var(--sf-marca-opsz);
  color: var(--sf-texto-principal);
  letter-spacing: var(--sf-titulos-tracking);
  margin: 0 0 var(--sf-esp-4);
}

h4, h5, h6 {
  font-family: var(--sf-fuente-ui);
  font-weight: 600;
  color: var(--sf-texto-principal);
  margin: 0 0 var(--sf-esp-3);
}

h1 { font-size: var(--sf-h1); line-height: var(--sf-h1-alto); }
h2 { font-size: var(--sf-h2); line-height: var(--sf-h2-alto); }
h3 { font-size: var(--sf-h3); line-height: var(--sf-h3-alto); }
h4 { font-size: var(--sf-h4); line-height: var(--sf-h4-alto); }
h5 { font-size: var(--sf-h5); line-height: var(--sf-h5-alto); }
h6 { font-size: var(--sf-h6); line-height: var(--sf-h6-alto); }

p { margin: 0 0 var(--sf-esp-4); }

.sf-cuerpo-l { font-size: var(--sf-cuerpo-l); line-height: var(--sf-cuerpo-l-alto); }
.sf-cuerpo-s { font-size: var(--sf-cuerpo-s); line-height: var(--sf-cuerpo-s-alto); }

.sf-etiqueta {
  font-size: var(--sf-etiqueta);
  line-height: var(--sf-etiqueta-alto);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

/* --- Enlaces y foco ------------------------------------------------------ */

a {
  color: var(--sf-texto-marca);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover { color: var(--sf-accion-primaria-hover); }

/* Los titulares que son enlace no van subrayados: el subrayado es para texto corrido. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; color: inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  text-decoration: underline;
}

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

.sf-superficie-inversa :focus-visible { outline-color: var(--sf-foco-inverso); }

/* --- Medios y tablas ----------------------------------------------------- */

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

table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left;
  padding: var(--sf-esp-3);
  border-bottom: 1px solid var(--sf-borde-sutil);
}
th { font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--sf-borde-sutil); margin: var(--sf-esp-8) 0; }

/* --- Layout -------------------------------------------------------------- */

.sf-contenido {
  width: 100%;
  max-width: var(--sf-contenido-max);
  margin-inline: auto;
  padding-inline: var(--sf-esp-4);
}

@media (min-width: 900px) {
  .sf-contenido { padding-inline: var(--sf-esp-8); }
}

/* Tira a ancho de ventana. La usa la cabecera: el grid de 12 columnas del
   contenido se queda en 1280, pero logo, menu, buscador e iconos necesitan
   mas ancho para caber en una sola fila. */
.sf-contenido--ancho { max-width: var(--sf-cabecera-max); }

.sf-seccion { padding-block: var(--sf-seccion-aire); }

@media (min-width: 900px) {
  .sf-seccion { padding-block: var(--sf-esp-9); }
}

/* En la tienda lo primero son las migas de pan: van pegadas al menú. */
.sf-seccion--tienda { padding-top: var(--sf-esp-4); }

@media (min-width: 900px) {
  .sf-seccion--tienda { padding-top: var(--sf-esp-6); }
}

/* --- Superficies --------------------------------------------------------- */

/* La regla del sitio es marfil de fondo y bloques blancos encima. En la ficha
   de producto se invierte: ahí manda la foto y el fondo va en blanco. */
body.sf-superficie-clara {
  background: var(--sf-superficie-base);
  --sf-superficie-bloque: var(--sf-superficie-calida);
}

body.sf-superficie-clara .sf-superficie-base { background: var(--sf-superficie-calida); }

.sf-superficie-base   { background: var(--sf-superficie-base); }
.sf-superficie-calida { background: var(--sf-superficie-calida); }

.sf-superficie-inversa {
  background: var(--sf-superficie-inversa);
  color: var(--sf-texto-inverso);
}

.sf-superficie-inversa h1,
.sf-superficie-inversa h2,
.sf-superficie-inversa h3,
.sf-superficie-inversa h4,
.sf-superficie-inversa h5,
.sf-superficie-inversa h6 { color: var(--sf-texto-inverso); }

.sf-superficie-inversa a { color: var(--sf-texto-inverso); }
.sf-superficie-inversa a:hover { color: var(--sf-acento-inverso); }
.sf-superficie-inversa .sf-etiqueta { color: var(--sf-texto-inverso-tenue); }

/* --- Accesibilidad ------------------------------------------------------- */

.sf-solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sf-saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: var(--sf-esp-2);
  z-index: 100;
  background: var(--sf-superficie-base);
  color: var(--sf-texto-marca);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  border: 1px solid var(--sf-borde-medio);
}

.sf-saltar-al-contenido:focus { left: var(--sf-esp-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}