/* ==========================================================================
   RematoHastaMiSuegra.cl — base: reinicio, tipografía, utilidades
   ========================================================================== */

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

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

/* El zoom nunca se bloquea: no hay user-scalable=no en ninguna página. */

body {
  margin: 0;
  background: var(--rm-papel);
  color: var(--rm-texto);
  font-family: var(--rm-fuente-texto);
  font-variation-settings: var(--rm-texto-var);
  font-size: var(--rm-t-cuerpo);
  line-height: var(--rm-lh-cuerpo);
  -webkit-font-smoothing: antialiased;
}

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

/* Muchos componentes de acá declaran display:flex o grid, que le gana a la
   regla por defecto de [hidden]. Sin esto, un panel «oculto» se ve igual. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--rm-fuente-cartel);
  font-variation-settings: var(--rm-cartel-var);
  text-transform: uppercase;
  letter-spacing: var(--rm-track-cartel);
  line-height: var(--rm-lh-titulo);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--rm-t-cartel-l); }
h2 { font-size: var(--rm-t-cartel-m); }
h3 { font-size: var(--rm-t-cartel-s); }
h4 { font-size: var(--rm-t-cuerpo); letter-spacing: var(--rm-track-micro); }

p { margin: 0; max-width: var(--rm-medida); }

/* Más aire encima de un título que debajo. */
* + h2 { margin-top: var(--rm-e7); }
* + h3 { margin-top: var(--rm-e5); }
h2 + *, h3 + * { margin-top: var(--rm-e3); }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* Foco visible en todo lo enfocable. Nunca se quita sin reemplazo. */
:focus-visible {
  outline: var(--rm-foco-ancho) solid var(--rm-foco);
  outline-offset: var(--rm-foco-offset);
  border-radius: 2px;
}
.rm-sobre-oscuro :focus-visible,
.rm-btn--principal:focus-visible,
.rm-btn--tinta:focus-visible { outline-color: var(--rm-foco-inv); outline-offset: -5px; }

/* --------------------------------------------------------------- estructura */
.rm-cont {
  width: 100%;
  max-width: var(--rm-ancho);
  margin-inline: auto;
  padding-inline: var(--rm-e4);
}
@media (min-width: 900px) { .rm-cont { padding-inline: var(--rm-e6); } }

.rm-angosto { max-width: var(--rm-ancho-angosto); }

.rm-pila     { display: flex; flex-direction: column; gap: var(--rm-e4); }
.rm-pila-s   { display: flex; flex-direction: column; gap: var(--rm-e2); }
.rm-pila-l   { display: flex; flex-direction: column; gap: var(--rm-e6); }
.rm-fila     { display: flex; align-items: center; gap: var(--rm-e3); flex-wrap: wrap; }
.rm-fila-sep { display: flex; align-items: center; justify-content: space-between; gap: var(--rm-e3); }

/* --------------------------------------------------------------- tipografía */
.rm-cartel {
  font-family: var(--rm-fuente-cartel);
  font-variation-settings: var(--rm-cartel-var);
  text-transform: uppercase;
  letter-spacing: var(--rm-track-cartel);
  line-height: var(--rm-lh-cartel);
}
.rm-cifra { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.rm-micro {
  font-size: var(--rm-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--rm-track-micro);
  font-variation-settings: "wdth" 100, "wght" 700;
  color: var(--rm-texto-2);
}
.rm-s   { font-size: var(--rm-t-cuerpo-s); }
.rm-t2  { color: var(--rm-texto-2); }
.rm-t3  { color: var(--rm-texto-3); }
.rm-fuerte { font-variation-settings: "wdth" 100, "wght" 700; }

/* Sólo para lectores de pantalla */
.rm-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Salto al contenido */
.rm-saltar {
  position: absolute; left: var(--rm-e4); top: -100px; z-index: 100;
  background: var(--rm-campo-tinta); color: var(--rm-sobre-tinta);
  padding: var(--rm-e3) var(--rm-e4); border-radius: var(--rm-r-panel);
}
.rm-saltar:focus { top: var(--rm-e4); }

/* ------------------------------------------------------------- movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}