/* Al Alimón Studio — reproducción del montaje de Cargo (WebSit 492) con código propio.
   Medidas: genérico a 1440/390 (referencia/medidas-generico.json) + montaje de Álvaro a 2560
   (referencia/medidas-cargo-alvaro.md). Las fórmulas de escala están ajustadas a los tres puntos.
   Tipografía: Inter (OFL, autoalojada, subconjunto latino) por decisión de Álvaro. Ninguna línea proviene de Cargo. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #111111;
  --ink-90: rgba(255,255,255,.9);
  --ink-80: rgba(255,255,255,.8);
  --ink-75: rgba(255,255,255,.75);
  --ink-50: rgba(255,255,255,.5);
  --red: #e8392c;
  --gutter: max(9px, calc(4.86px + .357vw));                 /* 9 @390 · 10 @1440 · 14 @2560 */
  --bar-pad: max(7px, calc(2.86px + .357vw));                /* 7 · 8 · 12 */
  --ui: max(13.45px, calc(5.64px + .5986vw));                /* 13,45 · 14,26 · 20,96 */
  --ui-lh: 1.15;
  --cap: max(8.5px, calc(3.63px + .378vw));                  /* 8,56 · 9,07 · 13,3 */
  --media-h: min(72vh, 980px);                               /* 648 @900 de alto · 953–981 en la pantalla de Álvaro */
  --row-to-media: max(27px, 2.3vw);                          /* 27 · 33 */
  --media-to-cap: 9px;
  --cap-to-row: max(82px, 28svh);   /* v7: +25–35 % (Álvaro) */                                        /* 82 @1440 y @2560 (ritmo 1175 ≈ 1174 de Álvaro) · 87 móvil */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink-75);
  font-family: var(--font); font-weight: 650; letter-spacing: -.0386em;   /* medido: con −0,55 px @14,26 las cajas de Inter coinciden con las de Diatype */ font-size: var(--ui); line-height: var(--ui-lh);
  font-feature-settings: "ss01" 0; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid var(--ink-90); outline-offset: 2px; }
img { display: block; }

/* el cuadrado de las etiquetas: ■ + dos espacios (medido) */
.sq::before { content: "\25A0\00A0\00A0"; position: relative; top: -1px; }   /* el ■ de Inter cae 1 px respecto a Diatype (contraste visual) */
.sq--after::after { content: "\00A0\00A0\25A0"; position: relative; top: -1px; }

/* ---- barras fijas ---- */
.bar {
  position: fixed; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: var(--bar-pad) var(--gutter) 0;
  pointer-events: none;
}
.bar > * { pointer-events: auto; margin: 0; }
.bar-top { top: 0; }
.bar-bottom { bottom: 0; top: auto; grid-template-columns: 1fr 1fr; padding-bottom: var(--bar-pad); align-items: end; }
.bar .c { text-align: center; }
.bar .r { text-align: right; }

/* ---- página 1: wordmark (medido en el montaje de Álvaro: 20,4 vw, 800, 0,775, −0,043 em, caja al 82 % del ancho) ---- */
.page-hero {
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center;   /* v7: centrado en la primera vista (Álvaro) */
  padding: 0 7%;   /* «Al Alimón» en Inter mide el 85 % del ancho: con 8 % desbordaba 7,6 px a la derecha (medido por Josep, v6) */   /* arriba 98·104·152 · abajo 65·68·106 (@390·1440·2560) */              /* arriba 104 @1440 · 152 @2560 · 98 @390; abajo 66 · 105 (116 en el montaje de Álvaro) */
  text-align: center;
}
.wordmark {
  margin: 0;
  font-weight: 800;
  font-size: 20.4vw;   /* medido en el montaje de Álvaro (522 px @2560); «Al Alimón» mide 4,1 em tanto en Diatype 800 como en Inter 800 → mismo ajuste al ancho */
  line-height: .775;                         /* medido */
  letter-spacing: -.043em;                   /* medido */
  color: var(--ink-90);
}
.wordmark .l1 { white-space: nowrap; }
/* v7: sello «Closed» superpuesto a «dio» de Studio: solo borde, en rojo (Álvaro) */
.wordmark .dio { position: relative; display: inline-block; }
.closed {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-8deg);
  padding: .32em .7em .36em;   /* más aire para que el texto quepa en la elipse */
  font-size: .3em; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); background: none;
  border: .07em solid var(--red); border-radius: 100%;
  white-space: nowrap; pointer-events: none;
}

/* ---- página 2: proyectos ---- */
.page-work { padding: 10px var(--gutter) 0; }
.projects { list-style: none; margin: 0; padding: 0; counter-reset: project; }
.project { counter-increment: project; padding-bottom: var(--cap-to-row); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 2fr minmax(0, 1fr); gap: 6px; line-height: var(--ui-lh); align-items: start; }
.row .left { display: flex; flex-direction: column; align-items: flex-start; }
.row .left .num { align-self: flex-start; }
.row .desc { text-align: left; max-width: 34ch; margin: calc(var(--ui) * var(--ui-lh)) 0 0; padding-left: 0; }   /* v7: alineada con el ■, como el ejemplo de Álvaro */
.row .desc strong { font-weight: inherit; }
.row .desc .desc-note { color: var(--ink-50); }   /* v7: rótulo legal de Paco de Lucía en gris, a continuación de la leyenda (Álvaro) */
.row .num::after { content: counter(project, decimal-leading-zero); }
.media figcaption .counter::after { content: counter(project, decimal-leading-zero) "\00A0/\00A0" var(--total, "10"); }
.projects { --total: "10"; }   /* si se retira Paco de Lucía: --total: "09" */
.row .title { margin: 0; font: inherit; text-align: center; }
.row .kind { text-align: right; }

.media { margin: var(--row-to-media) 0 0; }
.media .stage { height: var(--media-h); display: flex; justify-content: center; align-items: center; perspective: 4000px; }
.media img {
  height: var(--media-h); width: auto; max-width: 100%; object-fit: contain;
  transform: rotateY(3.3deg) rotateZ(.15deg);  /* fallback sin JS: la pose medida en reposo a media altura */
  backface-visibility: hidden;
  background: #1a1a1a;
}
.media figcaption {
  margin: var(--media-to-cap) auto 0; max-width: 66%;
  text-align: center; font-size: var(--cap); line-height: 1.15; color: var(--ink-50);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;   /* Inter vs Diatype Mono: anchos medidos 92,3 / 87,1 */
}
.media figcaption .counter { display: block; letter-spacing: .04em; }
.media figcaption .legal-notice { display: block; margin-top: 10px; font-size: var(--cap); line-height: 1.3; color: var(--ink-75); }

/* ---- página 3: información + pie ---- */
.page-info { position: relative; min-height: 100vh; padding: 58px var(--gutter) calc(var(--ui) * 3.2); }
.info-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 6px; }
.info-text { grid-column: 2; margin: 0; font-size: calc(var(--ui) * 1.5); line-height: 1.15; letter-spacing: -.024em; color: var(--ink-80); }   /* −0,003 em medido + −0,021 em de compensación Inter/Diatype (anchos medidos) */
.info-text p { margin: 0; }
.info-text p + p { margin-top: 1.15em; text-indent: 2.29em; }   /* medido: 49 px hechos con seis espacios duros */
.info-text .out { display: inline-block; margin-top: 1.15em; color: var(--ink-90); }
.squares { display: grid; grid-template-columns: 1fr 1fr; margin-top: 50px; }
.squares .sq:last-child { text-align: right; }   /* medido: el segundo ■ del pie va al borde derecho (x≈1420) */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 16px; }   /* medido: columnas a 32 px del TOP de la fila de ■ (16 de línea + 16) */
.cols h2 { margin: 0 0 calc(var(--ui) * var(--ui-lh)); font: inherit; }   /* v7: el valor sin unidad daba 0 px */   /* medido: una línea en blanco entre el título y la primera línea */
.cols ul { list-style: none; margin: 0; padding: 0; }
.cols .plain { padding-left: 0; }
.cols details summary { cursor: pointer; list-style: none; }
.cols details summary::-webkit-details-marker { display: none; }
.cols details[open] summary { margin-bottom: 8px; }
.legal-body p { margin: 0 0 1em; font-weight: 450; font-size: calc(var(--ui) * .9); line-height: 1.4; color: var(--ink-50); }
.legal-body strong { color: var(--ink-75); font-weight: 650; }
.bottom-row { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 10px;   /* medido: texto a 26 px del final de página */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.bottom-row .r { text-align: right; padding-right: 1.3em; }
.bottom-row .l { padding-left: 1.3em; }   /* 18 px @14,26: el hueco del ■ de la barra fija, como el reloj del original (x=28) */
.bottom-row .c { text-align: center; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .media img { transform: none; }
}

/* ---- móvil (medido a 390) ---- */
@media (max-width: 720px) {
  :root { --cap-to-row: max(87px, 20svh); }
  .bar .c { display: none; }
  .bar-top { grid-template-columns: 1fr auto; }
  .page-hero { padding-left: 0; padding-right: 0; }
  .wordmark { font-size: 22.5vw; }   /* ajuste al ancho a 390 (372 px útiles) */
  .row { grid-template-columns: auto 1fr auto; }
  .row .left { display: contents; }
  .row .num { grid-row: 1; grid-column: 1; }
  .row .title { grid-row: 1; grid-column: 2; }
  .row .kind { grid-row: 1; grid-column: 3; }
  .row .desc { grid-row: 2; grid-column: 1 / -1; text-align: left; max-width: none; margin-top: 6px; padding-left: 0; }
  .media .stage { height: auto; display: block; }
  .media img { height: auto; width: 100%; }
  .media figcaption { max-width: 100%; }
  .info-grid { grid-template-columns: 1fr; }
  .info-text { grid-column: 1; font-size: calc(var(--ui) * 1.5); }
  .cols { grid-template-columns: 1fr; gap: 24px; }
  .bottom-row { position: static; margin-top: 60px; }
}

/* ---- 404: solo texto, con la misma voz que el pie (Álvaro, 23 sep) ---- */
.page-404 { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 0 var(--gutter); }
.page-404 h1 { margin: 0 0 calc(var(--ui) * var(--ui-lh)); font: inherit; }
.page-404 ul { list-style: none; margin: 0; padding: 0; }