/* ============================================================
   Mascotero — reset, tipografía base y utilidades
   ============================================================ */

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

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset, legend {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
fieldset { border: 0; }

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

body {
  min-height: 100dvh;
  background-color: var(--papel);
  /* Trama de papel: dos líneas casi invisibles. No debe leerse como "textura". */
  background-image:
    repeating-linear-gradient(0deg, rgba(38,18,29,.022) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(38,18,29,.014) 0 1px, transparent 1px 28px);
  color: var(--tinta);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--verde-profundo);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-base); letter-spacing: -0.01em; }

p { text-wrap: pretty; }
a { color: var(--verde-medio); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--verde-profundo); }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:disabled { cursor: not-allowed; }

/* Foco visible en todo lo interactivo. No se negocia. */
:focus-visible {
  outline: 2.5px solid var(--verde-medio);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--ocre-tenue); color: var(--tinta); }

/* --- Utilidades ------------------------------------------- */

.mono, .dato { font-family: var(--data); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.precio { font-family: var(--data); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.03em; }

.eyebrow {
  font-family: var(--data);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tinta-suave);
  font-weight: 500;
}

.suave { color: var(--tinta-suave); }
.chico { font-size: var(--t-sm); }
.mini  { font-size: var(--t-xs); }
.centro { text-align: center; }
.negrita { font-weight: 600; }

.pila     { display: flex; flex-direction: column; }
.fila     { display: flex; align-items: center; }
.entre    { justify-content: space-between; }
.wrap     { flex-wrap: wrap; }
.crece    { flex: 1 1 auto; min-width: 0; }
.g-1 { gap: var(--s-1); } .g-2 { gap: var(--s-2); } .g-3 { gap: var(--s-3); }
.g-4 { gap: var(--s-4); } .g-6 { gap: var(--s-6); } .g-8 { gap: var(--s-8); }

.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); } .mt-12 { margin-top: var(--s-12); }
.mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }

.oculto { display: none !important; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hairline { border-top: var(--hairline); }

/* Regla punteada tipo formulario en papel */
.puntos {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--linea);
  transform: translateY(-4px);
  min-width: var(--s-4);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

.icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icono--sm { width: 16px; height: 16px; }
.icono--lg { width: 28px; height: 28px; }

@media (min-width: 640px) {
  :root { --t-2xl: 3rem; --t-3xl: 4rem; }
  .contenedor { padding-inline: var(--s-6); }
}