/* Común a las cinco opciones: fuente, colores, tamaños, cajas de foto, selector. */
@import url(fonts.css);

/* Claro u oscuro según el sistema: cada color una vez, con light-dark(claro, oscuro). */
:root {
  color-scheme: light dark;
  --papel: light-dark(#f1efea, #0f0f0e);
  --tinta: light-dark(#141414, #ebe8e2);
  --gris: light-dark(#8a8780, #8d8a84);
  --caja: light-dark(#d9d6cf, #262624);
  --linea: light-dark(#d6d3cc, #2b2a28);
  --punto: light-dark(#c2beb6, #4a4945);
  --rotulo-caja: light-dark(#7d7a73, #77746e);
  --chico: 11px;
  --base: 15px;
  --grande: clamp(24px, 1.2rem + 1.6vw, 40px);
  --m: clamp(16px, 4vw, 56px);       /* margen lateral: nunca menos de 16px */
  --aire: clamp(64px, 14vh, 180px);  /* separación entre bloques */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--papel); -webkit-text-size-adjust: 100%; }
body {
  color: var(--tinta);
  font: 400 var(--base)/1.55 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  padding-bottom: 72px;             /* lugar para el selector */
}
a { color: inherit; text-decoration: none; }
h1 { font-weight: 300; font-size: var(--grande); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }

.rotulo { font-size: var(--chico); letter-spacing: .14em; text-transform: uppercase; }
.gris { color: var(--gris); }

/* Barra superior y pie: marca a la izquierda, contacto a la derecha, siempre dentro del margen. */
.barra { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 24px var(--m) 0; }
.barra .marca { font-weight: 500; }
.pie { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: var(--aire) var(--m) 24px; }

/* Caja donde iría una foto. */
.ph { position: relative; background: var(--caja); width: 100%; }
.ph::after { content: attr(data-r); position: absolute; left: 10px; bottom: 8px;
  font-size: var(--chico); letter-spacing: .14em; color: var(--rotulo-caja); }
.r32 { aspect-ratio: 3 / 2; }   .r32::after { content: "foto 3:2"; }
.r11 { aspect-ratio: 1; }       .r11::after { content: "foto 1:1"; }
.r45 { aspect-ratio: 4 / 5; }   .r45::after { content: "foto 4:5"; }
.r219 { aspect-ratio: 21 / 9; } .r219::after { content: "foto 21:9"; }
.r169 { aspect-ratio: 16 / 9; } .r169::after { content: "foto 16:9"; }

/* La lista de cuatro: número, título, línea. Se apila sola cuando no entra. */
.lista { list-style: none; width: 100%; }
.lista li { display: grid; grid-template-columns: 2.4rem minmax(0, 9rem) minmax(0, 1fr); column-gap: 12px;
  padding: 16px 0; border-top: 1px solid var(--linea); align-items: baseline; }
.lista li:last-child { border-bottom: 1px solid var(--linea); }
.lista .n { font-size: var(--chico); color: var(--gris); font-variant-numeric: tabular-nums; }
.lista b { font-weight: 500; }
@media (max-width: 520px) {
  .lista li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .lista li > span:last-child { grid-column: 2; }
}

.enlace { border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity .3s; }
.enlace:hover { opacity: .5; }

/* Selector entre opciones (sólo para comparar; no va en la web final). */
.selector { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 4px;
  padding: 6px; background: var(--tinta); border-radius: 999px; z-index: 9; }
.selector a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--papel); font-size: 12px; letter-spacing: .08em; }
.selector a[aria-current] { background: var(--papel); color: var(--tinta); }