/* Shande Villa · mesa de luz con tira de 35 mm
   Paleta: negativo cálido, papel fotográfico y un único acento ámbar.
   Monoespaciada SOLO para el texto impreso en el borde de la tira (carrete y número de fotograma). */

@font-face {
  font-family: "SV Serif";
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SV Serif";
  src: url("../fonts/source-serif-4-italic-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SV Mono";
  src: url("../fonts/dm-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* El chino solo se descarga cuando se elige chino: únicamente html[lang="zh-Hans"] usa esta familia */
@font-face {
  font-family: "SV Han";
  src: url("../fonts/noto-serif-sc-zh.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --mesa: #15110D;      /* fondo: negro cálido de negativo */
  --tira: #0B0908;      /* cuerpo de la tira */
  --papel: #EEEAE1;     /* blanco papel fotográfico */
  --tenue: #A89F92;     /* texto secundario */
  --ambar: #E8871E;     /* único acento: base de película */
  --linea: #2B231B;     /* filetes finos */
  --margen: 28px;       /* columna de perforaciones */
  --paso: 22px;         /* distancia entre perforaciones */
  --serif: "SV Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "SV Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cjk: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", "PingFang SC", "Microsoft YaHei", serif;
}
html[lang="zh-Hans"] {
  --cjk: "SV Han", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", "PingFang SC", "Microsoft YaHei", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0;
  background: var(--mesa);
  color: var(--papel);
  font-family: var(--serif), var(--cjk);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}
html[lang="zh-Hans"] body { line-height: 1.75; letter-spacing: .02em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ol, ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }

.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 12px; top: -64px; z-index: 20;
  background: var(--ambar); color: var(--mesa); padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* Mientras llega el JSON del idioma elegido no se enseña el texto en español (el espacio se mantiene) */
html.i18n-espera [data-i18n] { visibility: hidden; }

/* ───────── Cabecera ───────── */
.barra {
  max-width: 560px; margin: 0 auto;
  padding: 6px 10px 10px calc(var(--margen) + 6px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca {
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.idioma { display: none; }
html.js .idioma { display: flex; }
.idioma button {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  font: inherit; font-size: .9375rem; letter-spacing: .06em;
  color: var(--tenue); background: none; border: 0; cursor: pointer;
}
.idioma button[aria-pressed="true"] {
  color: var(--papel); text-decoration: underline; text-decoration-color: var(--ambar);
  text-decoration-thickness: 2px; text-underline-offset: 7px;
}
.idioma button:hover { color: var(--papel); }

/* ───────── Tira ───────── */
.tira {
  position: relative;
  max-width: 560px; margin: 0 auto;
  padding: 0 calc(var(--margen) + 6px) 8px;
  background: var(--tira);
  border-inline: 1px solid var(--linea);
  /* punta de la tira: el principio del carrete */
  clip-path: polygon(0 56px, 14% 0, 86% 0, 100% 56px, 100% 100%, 0 100%);
  padding-top: 56px;
}
/* perforaciones: un SVG repetido, sin degradados */
.tira::before, .tira::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--margen);
  background: url("perforacion.svg") repeat-y center top / var(--margen) var(--paso);
  pointer-events: none;
}
.tira::before { left: 0; }
.tira::after { right: 0; }

/* Único momento de movimiento: la tira avanza un par de fotogramas y se detiene */
@media (prefers-reduced-motion: no-preference) {
  .tira { animation: avance 1.6s cubic-bezier(.16, .84, .3, 1) both; }
}
@keyframes avance {
  from { transform: translateY(15rem); }
  to   { transform: none; }
}

/* Texto impreso en el borde de la tira: lo único en monoespaciada */
.borde {
  display: flex; align-items: center; height: 24px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ambar); white-space: nowrap; overflow: hidden;
}
.portada .borde::before { content: "SV 400 · 0 · 0A"; }
.galeria > .borde::before { content: "SV 400 · HOJA DE CONTACTOS"; }
.sobre > .borde::before { content: "SV 400 · EXP 36"; }
.contacto > .borde::before { content: "SV 400 · 35A"; }
.fin::before { content: "SV 400 · 36 · END"; }
.fin {
  display: flex; align-items: center; height: 40px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ambar);
}

.titulo {
  font-size: 1.375rem; font-weight: 500; line-height: 1.25; margin: 8px 0 6px;
  text-wrap: balance;
}
.intro { color: var(--tenue); font-size: .9375rem; margin-bottom: 14px; text-wrap: pretty; }

section { padding-bottom: 26px; }

/* ───────── Portada ───────── */
.ventana { background: #000; border: 1px solid var(--linea); }
.portada .ventana { aspect-ratio: 4 / 5; }
.portada .ventana img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.frase {
  font-size: clamp(2rem, 8.6vw, 2.75rem); font-weight: 400; font-style: italic;
  line-height: 1.1; letter-spacing: -.01em; margin: 22px 0 6px; text-wrap: balance;
}
html[lang="zh-Hans"] .frase { font-style: normal; letter-spacing: .04em; line-height: 1.25; }
.bio { text-wrap: pretty; }

/* ───────── Enlaces: un fotograma panorámico por enlace, numerados ───────── */
.lista-enlaces { counter-reset: enlace; }
.enlace { counter-increment: enlace; padding-bottom: 6px; }
.enlace .borde::before { content: "SV 400 · " counter(enlace) " · " counter(enlace) "A"; }
.enlace a {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  aspect-ratio: 2.7 / 1; min-height: 6.9rem;
  padding: 12px 52px 12px 16px;
  background: #000; border: 1px solid var(--linea);
  color: var(--papel); text-decoration: none;
}
.enlace .nombre { font-size: 1.6rem; font-weight: 500; line-height: 1.15; }
.enlace .glosa { font-size: .8125rem; color: var(--tenue); font-style: italic; line-height: 1.3; }
html[lang="zh-Hans"] .enlace .glosa { display: none; }
.enlace .desc { font-size: .9375rem; color: var(--tenue); line-height: 1.35; }
.enlace .flecha {
  position: absolute; top: 12px; right: 16px; font-size: 1.4rem; line-height: 1; color: var(--ambar);
}
.enlace a:hover, .enlace a:active { border-color: var(--ambar); }
.enlace a:hover .nombre { color: var(--ambar); }

/* ───────── Galería: hoja de contactos ───────── */
.galeria { counter-reset: rollo; }
.rollo { counter-increment: rollo; margin-top: 18px; }
.rollo .borde::before { content: "SV 400 · ROLL " counter(rollo, decimal-leading-zero); }
.rollo h3 { font-size: 1.125rem; font-weight: 500; margin: 2px 0 8px; }
.hoja { --h: 92px; display: flex; flex-wrap: wrap; gap: 3px; }
.hoja li {
  flex: calc(var(--a) * 100) 1 calc(var(--a) * var(--h));
  height: var(--h); min-width: 0; background: #000;
}
.hoja::after { content: ""; flex: 1000 1 0; } /* que la última fila no se estire */
.hoja a { display: block; height: 100%; }
.hoja a:focus-visible { outline-offset: -3px; }
.hoja img { width: 100%; height: 100%; object-fit: cover; }
.hoja a:hover img { opacity: .82; }

/* ───────── Últimas entradas ───────── */
.lista-entradas { counter-reset: entrada; }
.entrada {
  counter-increment: entrada; position: relative;
  padding-bottom: 6px;
}
.entrada .borde::before { content: "SV 400 · " counter(entrada) "A"; }
.entrada article, .entrada-vacia > p:not(.borde) {
  position: relative; background: #000; border: 1px solid var(--linea); padding: 14px 16px 16px;
}
.entrada .fecha { display: block; font-size: .875rem; color: var(--tenue); margin-bottom: 4px; }
.entrada h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.25; text-wrap: balance; }
.entrada h3 a { text-decoration: none; }
.entrada h3 a::after { content: ""; position: absolute; inset: 0; }
.entrada h3 a:hover { color: var(--ambar); }
.entrada .extracto {
  color: var(--tenue); font-size: .9375rem; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.entrada article:focus-within { outline: 3px solid var(--ambar); outline-offset: 3px; }
.entrada h3 a:focus-visible { outline: none; }
.todas { margin-top: 6px; font-size: .9375rem; }
.todas a { text-decoration-color: var(--ambar); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ───────── Contacto ───────── */
.contacto p { text-wrap: pretty; }
.correo { margin-top: 14px; font-size: 1.3rem; overflow-wrap: anywhere; }
.correo a { text-decoration-color: var(--ambar); text-decoration-thickness: 2px; text-underline-offset: 5px; }

.pie {
  max-width: 560px; margin: 0 auto; padding: 22px calc(var(--margen) + 6px) 48px;
  color: var(--tenue); font-size: .875rem; text-align: center;
}
.pie p + p { margin-top: 4px; }

/* ───────── Visor ───────── */
.visor {
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; background: #000; color: var(--papel);
}
.visor[open] { display: flex; flex-direction: column; }
.visor::backdrop { background: #000; }
.visor-barra { display: flex; justify-content: flex-end; padding: 4px 6px; }
.visor-foto { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; touch-action: pan-y; }
.visor-foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.visor-pie { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.visor-cuenta { color: var(--tenue); font-size: .9375rem; }
.visor button {
  min-width: 48px; min-height: 48px; font: inherit; font-size: 1.6rem; line-height: 1;
  color: var(--papel); background: none; border: 0; cursor: pointer;
}
.visor button:hover { color: var(--ambar); }
html.visor-abierto { overflow: hidden; }

@media (min-width: 700px) {
  :root { --margen: 36px; }
  .hoja { --h: 108px; }
  .frase { font-size: 2.9rem; }
}
@media (max-width: 340px) {
  .enlace .nombre { font-size: 1.4rem; }
}