/* ============================================================================
   EBEN · Pisos Plásticos — base
   Fichas, color, tipografía y el motivo que sostiene toda la página: el módulo.

   La página está compuesta como un muestrario impreso: hojas de papel frío que
   llevan el argumento y la ficha, y láminas a sangre que llevan la obra. El
   módulo de la baldosa se dibuja una sola vez, como máscara, y todo lo demás
   solo cambia de color debajo.
   ========================================================================== */

/* ---------- fichas ---------- */
:root {
  /* Papel del muestrario. Gris frío de offset, nunca crema. */
  --papel: oklch(0.945 0.005 250);
  --papel-2: oklch(0.905 0.006 250);
  --papel-3: oklch(0.868 0.007 250);

  /* Tinta. Negro de imprenta con sesgo frío, nunca #000. */
  --tinta: oklch(0.200 0.015 265);
  --tinta-2: oklch(0.435 0.012 265);
  --regla: oklch(0.826 0.007 250);

  /* Lámina a sangre. */
  --plancha: oklch(0.163 0.012 265);
  --plancha-2: oklch(0.232 0.011 265);
  --niebla: oklch(0.905 0.006 250);
  --niebla-2: oklch(0.735 0.010 260);
  --regla-plancha: oklch(0.320 0.012 265);

  /* Rojo EBEN. El del logo. */
  --rojo: oklch(0.580 0.232 29);
  --rojo-hondo: oklch(0.495 0.205 29);
  --rojo-claro: oklch(0.680 0.205 29);

  /* Catálogo: los siete colores que aparecen en obra en las 22 fotos.
     Ninguno inventado. La etiqueta de cada uno se decide por su L:
     L >= 0.62 lleva texto tinta, por debajo lleva texto niebla. */
  --c-negro: oklch(0.240 0.008 265);
  --c-gris: oklch(0.545 0.006 250);
  --c-plata: oklch(0.800 0.004 250);
  --c-blanco: oklch(0.930 0.003 250);
  --c-rojo: oklch(0.580 0.232 29);
  --c-verde: oklch(0.800 0.245 142);
  --c-amarillo: oklch(0.855 0.185 92);

  /* Tipografía */
  --rotulo: 'Big Shoulders Display', 'Big Shoulders respaldo', 'Arial Narrow', system-ui, sans-serif;
  --texto: 'Archivo', 'Archivo respaldo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Retícula */
  --margen: clamp(1.15rem, 5vw, 4.5rem);
  --ancho: 74rem;
  --barra: 3.5rem;

  /* El módulo. Todo lo que dibuja piso lo usa. */
  --mod: 3.25rem;

  /* Movimiento. Nada por encima de 300 ms, nunca ease-in. */
  --rapido: 140ms cubic-bezier(0.22, 1, 0.36, 1);
  --medio: 240ms cubic-bezier(0.22, 1, 0.36, 1);

  /* z-index con nombre */
  --z-piso: 0;
  --z-contenido: 1;
  --z-pegado: 10;
  --z-barra: 20;
  --z-hoja: 30;
  --z-visor: 40;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra) + 0.75rem);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 2px;
}

.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- tipografía ---------- */
.rotulo {
  font-family: var(--rotulo);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-wrap: balance;
  text-transform: uppercase;
}

h1.rotulo { font-size: clamp(2.45rem, 12.5vw, 5.75rem); }
h2.rotulo { font-size: clamp(2.15rem, 8.5vw, 3.9rem); }
h3.rotulo { font-size: clamp(1.4rem, 4.6vw, 1.9rem); font-weight: 700; }

.entradilla {
  font-size: clamp(1.02rem, 3.4vw, 1.2rem);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--tinta-2);
}

/* Etiqueta de lámina: el pie impreso de cada plancha del muestrario.
   Va en Archivo con cifras tabulares, no en monoespaciada de disfraz. */
.pie-lamina {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}
.lamina .pie-lamina { color: var(--niebla-2); }

/* ---------- el módulo ----------
   Una sola máscara dibuja la junta (alfa 1) y el relieve en laberinto (alfa
   0.45). Encima va un velo oscuro, así que la junta sale marcada y el relieve
   apenas insinuado, igual que en la baldosa real. Cambiar el color de la
   baldosa es cambiar el fondo de debajo: la máscara no se toca.

   Antimuaré: por debajo de 40 px de lado el relieve diagonal tiembla en
   pantallas de densidad alta. A ese tamaño se cambia por --relieve-plano, que
   solo lleva la junta. Y nunca se anima background-position sobre el motivo. */
:root {
  --relieve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M0.5 0.5H99.5V99.5H0.5Z' stroke-width='3'/%3E%3Cg stroke-opacity='0.42' stroke-width='2.4'%3E%3Cpath d='M2 2 98 98M98 2 2 98'/%3E%3Crect x='15' y='15' width='70' height='70'/%3E%3Crect x='29' y='29' width='42' height='42'/%3E%3Crect x='43' y='43' width='14' height='14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --relieve-plano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0.5 0.5H99.5V99.5H0.5Z' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E");
  /* Escalón intermedio: entre 22 y 40 px de celda las líneas paralelas del
     laberinto tiemblan, pero las dos diagonales no. Así la baldosa conserva su
     cara en el teléfono en vez de quedarse en un rectángulo liso. */
  --relieve-medio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M0.5 0.5H99.5V99.5H0.5Z' stroke-width='4'/%3E%3Cpath d='M3 3 97 97M97 3 3 97' stroke-opacity='0.4' stroke-width='3.2'/%3E%3C/g%3E%3C/svg%3E");
  --relieve-hueco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M0.5 0.5H99.5V99.5H0.5Z' stroke-width='3'/%3E%3Cg stroke-opacity='0.5' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M10 12h6M25 12h6M40 12h6M55 12h6M70 12h6M85 12h6M10 26h6M25 26h6M40 26h6M55 26h6M70 26h6M85 26h6M10 40h6M25 40h6M40 40h6M55 40h6M70 40h6M85 40h6M10 54h6M25 54h6M40 54h6M55 54h6M70 54h6M85 54h6M10 68h6M25 68h6M40 68h6M55 68h6M70 68h6M85 68h6M10 82h6M25 82h6M40 82h6M55 82h6M70 82h6M85 82h6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Superficie de baldosa reutilizable: se le pasa --c y sale una pieza. */
.baldosa {
  position: relative;
  background: var(--c, var(--c-negro));
  isolation: isolate;
}
.baldosa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  -webkit-mask-image: var(--textura, var(--relieve));
  mask-image: var(--textura, var(--relieve));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

/* ---------- botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.72rem 1.35rem;
  font-family: var(--rotulo);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color var(--rapido), color var(--rapido), transform var(--rapido), border-color var(--rapido);
}
.boton:active { transform: scale(0.97); }
.boton[disabled], .boton[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.boton--rojo { background: var(--rojo); color: oklch(0.99 0 0); }
.boton--rojo:hover { background: var(--rojo-hondo); }

.boton--tinta { background: var(--tinta); color: var(--papel); }
.boton--tinta:hover { background: oklch(0.30 0.015 265); }

.boton--linea {
  border: 1.5px solid var(--regla);
  color: var(--tinta);
}
.boton--linea:hover { border-color: var(--tinta); background: var(--papel-2); }

.lamina .boton--linea {
  border-color: var(--regla-plancha);
  color: var(--niebla);
}
.lamina .boton--linea:hover { border-color: var(--niebla); background: rgb(255 255 255 / 0.06); }

.boton svg { width: 1.15em; height: 1.15em; flex: none; }

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