/* ============================================================
   reset.css — normalize + box-sizing + variables globales
   Única fuente de custom properties del proyecto.
   ============================================================ */

/* Tipografía custom de la marca (Iskry TEST Two, laic.pl).
   ATENCIÓN: la versión TRIAL declara en el cmap 50 caracteres cuyo glifo
   está VACÍO: se renderizan como un hueco en blanco. Además de los
   acentuados (á é í ó ú ñ ü ¿ ¡) están vacíos casi todos los signos:
   & @ _ + - / ' " # $ % ( ) ; < = > [ \ ] ^ ` { | } ~
   El unicode-range de abajo lista SOLO los codepoints con glifo real
   (espacio, ! , . dígitos : ? y A-Z a-z); el resto cae a Georgia.
   Sin esta restricción se ven huecos en textos como "Nueva York & Barcelona",
   "@house_ofarchives" o el "+" del acordeón.
   Para producción: comprar la licencia completa y volver a U+0020-00FF.
   Mientras tanto, las acentuadas se componen y - – — × tienen glifo propio:
   ver el bloque 'HOA Tildes' justo debajo. */
@font-face {
  font-family: 'Iskry Two';
  src: url('../assets/fonts/iskry-two.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0021, U+002C, U+002E, U+0030-003A, U+003F, U+0041-005A, U+0061-007A;
}

/* Tildes en la Iskry de prueba — composición (js/tildes.js + 'HOA Tildes').
   'HOA Tildes' (assets/fonts/hoa-tildes.woff2, generada con
   .herramientas/hoa_tildes.py) solo trae ACENTOS SUELTOS dibujados por nosotros,
   cada uno con el avance de su letra base en Iskry y las mismas métricas
   verticales (la línea no cambia de alto). Cuando las dos fuentes han cargado,
   tildes.js envuelve cada acentuada de un texto en Iskry así:
     <span class="tl" data-b="i">í</span>
   El carácter real sigue en el DOM (copiar, buscadores, lectores de pantalla):
   lo pinta 'HOA Tildes' (solo el acento) y el ::before pinta la base con la
   Iskry de verdad, en el mismo origen. Si algo no carga no se envuelve nada y
   queda el Georgia de siempre. Con la licencia completa: borrar este bloque,
   tildes.js y el <script> de cada página, y abrir el unicode-range de arriba. */
@font-face {
  font-family: 'HOA Tildes';
  /* ?v=: las fuentes se sirven como inmutables; si se regenera, subirlo aquí y abajo */
  src: url('../assets/fonts/hoa-tildes.woff2?v=1') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+00A1, U+00BF, U+00C1, U+00C9, U+00CD, U+00D1, U+00D3, U+00DA, U+00DC, U+00E1, U+00E9, U+00ED, U+00F1, U+00F3, U+00FA, U+00FC;
}
/* Guion, semirraya, raya y ×: glifos completos del mismo archivo, metidos en la
   familia 'Iskry Two' solo para esos códigos (la prueba los trae vacíos). No
   dependen de JS: valen en cualquier texto con --font-display. */
@font-face {
  font-family: 'Iskry Two';
  src: url('../assets/fonts/hoa-tildes.woff2?v=1') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+002D, U+00D7, U+2013, U+2014;
}
.tl { font-family: 'HOA Tildes', var(--font-display); }
.tl::before {
  content: attr(data-b);
  content: attr(data-b) / "";          /* el lector de pantalla no lee la base dos veces */
  font-family: var(--font-display);
  letter-spacing: 0;                    /* el espaciado lo pone la letra real */
  position: relative;                   /* se pinta encima del fondo de selección */
}
/* Al seleccionar texto, tildes.js marca las letras seleccionadas: la base toma
   el color de ::selection (más abajo), como el acento */
.tl--sel::before { color: var(--text-light); }
/* La base vuelve atrás exactamente su avance (hmtx de Iskry / 2048) */
.tl[data-b="a"]::before { margin-right: -0.51514em; }
.tl[data-b="e"]::before { margin-right: -0.60010em; }
.tl[data-b="i"]::before { margin-right: -0.28564em; }
.tl[data-b="o"]::before { margin-right: -0.62500em; }
.tl[data-b="u"]::before { margin-right: -0.57373em; }
.tl[data-b="n"]::before { margin-right: -0.64844em; }
.tl[data-b="A"]::before { margin-right: -0.73730em; }
.tl[data-b="E"]::before { margin-right: -0.58154em; }
.tl[data-b="I"]::before { margin-right: -0.27051em; }
.tl[data-b="O"]::before { margin-right: -0.78027em; }
.tl[data-b="U"]::before { margin-right: -0.67871em; }
.tl[data-b="N"]::before { margin-right: -0.75098em; }
/* í: la i de Iskry trae punto; se corta entre el palo (1169) y el punto (1347),
   a 1258 u = 0.39697em bajo el tope de la caja (ascendente 2071) */
.tl[data-b="i"]::before { clip-path: polygon(-1em 0.39697em, 3em 0.39697em, 3em 3em, -1em 3em); }
/* ¿ ¡: el ? / ! de Iskry girado 180°. Caja de alto 0 (line-height 0): su tope
   queda a (2071-387)/2 u sobre la línea base; se gira sobre (avance/2, 578 u)
   para que el punto quede arriba a la altura x y el gancho baje a -280 u. */
.tl[data-b="?"], .tl[data-b="!"] { white-space: nowrap; }
.tl[data-b="?"]::before,
.tl[data-b="!"]::before {
  display: inline-block;
  width: 0;
  line-height: 0;
  text-align: left;
  text-indent: 0;
  transform: rotate(180deg);
}
.tl[data-b="?"]::before { transform-origin: 0.21509em 0.12891em; }
.tl[data-b="!"]::before { transform-origin: 0.12622em 0.12891em; }
/* En cursiva sintética (inclinación 1/4) el giro invierte la inclinación del
   origen: se compensa con 2 × ¼ × 578 u */
.tl--it[data-b="?"]::before,
.tl--it[data-b="!"]::before { transform: translateX(0.14111em) rotate(180deg); }

/* Archivo variable — copiada localmente para que el sitio funcione offline
   (sin depender de Google Fonts). Soporta todo el rango 100-900. */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Paleta de marca, muestreada del wordmark original */
  --bg:         #f3efeb;   /* crema cálido */
  --bg-dark:    #181818;   /* negro neutro */
  --text:       #181818;
  --text-light: #f3efeb;
  --mid:        #57544e;   /* gris cálido para texto secundario — AA sobre las secciones translúcidas (4.57:1) */
  --border:     #d8d3cc;   /* borde fino sobre crema */
  --accent:     #181818;

  /* Derivados (variantes mínimas del eje cream/black) */
  --bg-soft:    #eff2ee;
  --bg-warm:    #f2eeea;
  --red:        #b30000;   /* rojo oficial: muestreado del wordmark de marca */
  --red-bright: #e9504f;   /* rojo brillante para fondos oscuros — AA 4.84:1 sobre #181818 */
  --gold:       #8a857d;   /* gris cálido neutro: la marca no usa oro */
  --shadow:     0 18px 40px -22px rgba(24, 24, 24, 0.45);
  --shadow-sm:  0 10px 26px -18px rgba(24, 24, 24, 0.4);
  --glass:      rgba(243, 239, 235, 0.72);
  --glass-dark: rgba(24, 24, 24, 0.55);

  /* Tipografía:
     - Display: Iskry TEST Two (serif de la marca, local @font-face)
     - Body:    Archivo (la misma que la tienda) */
  --font-display: 'Iskry Two', Georgia, 'Times New Roman', serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala / ritmo */
  --container: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(5rem, 12vw, 9rem);

  /* Etiquetas / kickers */
  --kicker-size: clamp(0.6875rem, 0.9vw, 0.75rem);
  --tracking: 0.22em;
  --tracking-wide: 0.26em;

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --t-fast: 0.25s var(--ease);
  --t-med: 0.45s var(--ease);
  --t-slow: 0.7s var(--ease);

  /* Radios */
  --r-sm: 2px;
  --r-md: 4px;
}

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

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

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

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

/* Énfasis editorial:
   - itálica (Iskry sintetizada / Archivo nativa)
   - color rojo oficial de la marca (samplado del wordmark)
   Sobre fondos oscuros se usa la versión más clara via override. */
em {
  font-style: italic;
  font-weight: 400;
  color: var(--red);
}

::selection {
  background: var(--bg-dark);
  color: var(--text-light);
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 1px;
}

/* En fondos oscuros el outline negro sería invisible — usamos uno claro */
.nav :focus-visible,
.split--dark :focus-visible,
.final-cta :focus-visible,
.footer :focus-visible {
  outline-color: var(--text-light);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Sólo para lectores de pantalla: encabezados que la jerarquía necesita
   pero el diseño no muestra. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}