/* ------------------------------------------------------------------
   Nicolás Iglesias Penas — portfolio
   Lienzo 1920 × 1080 (Unigrid 16:9: borde 30, celdas de 60, 31 × 17).
   Las posiciones y los tamaños los pone js/web.js a partir de
   js/diseno.js; aquí solo están el color, el tipo y las transiciones.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Replica Pro";
  src: url("../fonts/ReplicaPro-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Replica Pro";
  src: url("../fonts/ReplicaPro-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: block;
}

:root {
  --papel: #FFFFFF;
  --tinta: #000000;
  --gris: #E6E6E6;
  --gris-texto: #4D4D4D;
  --familia: "Replica Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --color: #000000;      /* carpeta abierta */
  --tinta-c: #FFFFFF;    /* texto sobre la carpeta */
  --acento: #000000;     /* texto sobre la barra blanca */
  --k: 1;
  color-scheme: light;
}

html, body { height: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--familia); overflow: hidden; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#marco { position: fixed; inset: 0; }
/* El lienzo mide lo que diga js/web.js: 31 columnas y las filas que quepan (o la retícula de móvil) */
#escenario {
  --ancho: 1920px; --alto: 1080px; --lw: 1920px; --lh: 1080px;
  position: absolute; left: 50%; top: 50%;
  width: var(--ancho); height: var(--alto);
  transform: translate(-50%, -50%) scale(var(--k));
  overflow: hidden; background: var(--papel);
}
/* Todo el sistema; js/web.js lo escala desde el centro según el margen general */
#lienzo { position: absolute; left: 0; top: 0; width: var(--lw); height: var(--lh); transform-origin: 0 0; }

/* Cada línea de texto se coloca por su línea base */
.t { position: absolute; display: block; white-space: nowrap; line-height: 1; font-weight: 400; pointer-events: none; }

#carpeta {
  position: absolute; background: var(--color);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition: width 560ms cubic-bezier(.65, 0, .35, 1);
}

#pestanas { position: absolute; z-index: 3; }
.pestana {
  position: absolute; left: 0; display: block; margin: 0; padding: 0; border: 0; cursor: pointer;
  transition: top 560ms cubic-bezier(.65, 0, .35, 1), opacity 200ms ease;
}
.n-pestana { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 200ms ease; }
.flecha-pestana { position: absolute; inset: 0; pointer-events: none; transition: opacity 200ms ease; }
.pestana[aria-pressed="true"] .flecha-pestana { transition: opacity 260ms ease 380ms; }
/* Móvil, en un proyecto: la n de la carpeta en su color, sobre blanco; lleva a la portada */
.pestana-n {
  position: absolute; left: 0; margin: 0; padding: 0; border: 0; background: var(--papel); cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.pestana-n.visible { opacity: 1; visibility: visible; transition: opacity 300ms ease 420ms, visibility 0s; }
.pestana-n svg { position: absolute; inset: 0; pointer-events: none; }
.pestana-n:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; }
.pestana:focus-visible { outline: 4px solid var(--tinta); outline-offset: -4px; box-shadow: inset 0 0 0 8px var(--papel); }

/* El menú se recorta con la carpeta (clip-path lo pone js/web.js) */
#menu {
  position: absolute; inset: 0; pointer-events: none; color: var(--tinta-c); z-index: 2;
  transition: clip-path 560ms cubic-bezier(.65, 0, .35, 1);
}
.fantasma { position: absolute; pointer-events: none; }

/* Transiciones en tres tiempos (js/web.js): el texto se apaga, la carpeta se mueve, el texto aparece */
[data-fase="saliendo"] #menu > *, [data-fase="saliendo"] #proyecto > *, [data-fase="saliendo-p"] #proyecto > * {
  opacity: 0; transition: opacity 150ms ease;
}
[data-fase="moviendo"] #menu > *, [data-fase="moviendo"] #proyecto > *, [data-fase="moviendo-p"] #proyecto > * { opacity: 0; }

/* Carpeta abierta: cada título es un objeto (barra + texto) que crece desde su línea base */
#lista-vis { position: absolute; inset: 0; pointer-events: none; }
.m-fila { position: absolute; left: 0; top: 0; transition: translate 520ms cubic-bezier(.22, .8, .2, 1); }
.m-grupo { position: absolute; left: 0; top: 0; display: block; transition: transform 520ms cubic-bezier(.22, .8, .2, 1), opacity 200ms ease; }
.m-grupo .barra { position: absolute; display: block; background: var(--papel); opacity: 0; transition: opacity 160ms ease; }
.m-grupo .rot { color: var(--tinta-c); transition: color 200ms ease; }
.m-fila.grande .barra { opacity: 1; transition: opacity 240ms ease; }
.m-fila.grande .rot { color: var(--acento); }
.m-grupo.doble { opacity: 0; }
.m-fila.grande .m-grupo.doble { opacity: 1; }
.m-fila .peq { transition: opacity 160ms ease; }
.m-fila.grande .peq { opacity: 0; }
#lista { list-style: none; margin: 0; padding: 0; }
#nombre-carpeta, .entrada {
  position: absolute; margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  cursor: pointer; pointer-events: auto; overflow: visible;
}
.entrada .barra { position: absolute; background: var(--papel); }
.entrada .sobre-barra { color: var(--acento); }
#nombre-carpeta:focus-visible, .entrada:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* La capa del proyecto ocupa todo el lienzo pero no tapa la tira: solo sus bloques reciben el ratón */
#proyecto { position: absolute; inset: 0; visibility: hidden; pointer-events: none; z-index: 2; }
[data-vista="proyecto"] #proyecto { visibility: visible; }
#volver { position: absolute; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; }
#volver:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; }
#p-titulo, #p-subtitulo { position: absolute; margin: 0; font-weight: 400; }
.bloque { position: absolute; pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.bloque::-webkit-scrollbar { display: none; }
.bloque:focus, .bloque:focus-visible { outline: none; }   /* sin marco al pulsar o usar el teclado sobre el texto y las imágenes */
#p-imagenes .lienzo { position: relative; }
.imagen {
  position: absolute; margin: 0; box-sizing: border-box; overflow: hidden;
  background: var(--tinta); color: var(--papel);
  display: flex; align-items: flex-end; padding: 8px; font-size: 14px; line-height: 1;
}
.imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#p-texto .columnas { position: relative; }
#p-texto .pagina { position: absolute; scroll-snap-align: start; }
#p-texto { scroll-snap-type: y proximity; }
.deslizador { position: absolute; background: var(--gris); }
.deslizador span { position: absolute; left: 0; right: 0; background: var(--tinta); cursor: grab; pointer-events: auto; }
.deslizador span::before { content: ""; position: absolute; left: -8px; right: -8px; top: 0; bottom: 0; }
.deslizador span:active { cursor: grabbing; }

#extras { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.extra { position: absolute; box-sizing: border-box; overflow: hidden; }
.extra img { width: 100%; height: 100%; object-fit: cover; display: block; }

#logo, #reticula { position: absolute; left: 0; top: 0; width: var(--lw); height: var(--lh); pointer-events: none; overflow: visible; }
#logo { z-index: 4; }
.capa { transition: transform 560ms cubic-bezier(.65, 0, .35, 1), opacity 160ms linear 420ms; }
[data-vista="inicio"] .capa { transition: transform 560ms cubic-bezier(.65, 0, .35, 1), opacity 200ms linear; }
#reticula { z-index: 5; }
#reticula[hidden] { display: none; }

.sin-transicion, .sin-transicion * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  #escenario * { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* Subrayado de las plantillas: una raya de 2 px bajo la línea base */
.subrayado { position: absolute; background: currentColor; pointer-events: none; }