/* Fuentes, base, pantalla de carga y elementos compartidos. */
@font-face { font-family: "Afacad Flux"; src: url("fonts/AfacadFlux/AfacadFlux-Light.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Afacad Flux"; src: url("fonts/AfacadFlux/AfacadFlux-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Afacad Flux"; src: url("fonts/AfacadFlux/AfacadFlux-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Afacad Flux"; src: url("fonts/AfacadFlux/AfacadFlux-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cormorant Infant"; src: url("fonts/CormorantInfant/CormorantInfant-LightItalic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Infant"; src: url("fonts/CormorantInfant/CormorantInfant-SemiBoldItalic.woff") format("woff"); font-weight: 600; font-style: italic; font-display: swap; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { width: 100%; min-height: 100%; background: #fff; scrollbar-gutter: stable; }
body { width: 100%; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; font-family: "Afacad Flux", sans-serif; font-weight: 300; color: #303030; background: #fff; }
#website { flex: 1 0 auto; }
a { color: inherit; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
::selection { background: #d2cfc8; color: #242423; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Se crea solo desde JavaScript: nunca bloquea una página sin scripts. */
.loading-screen { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #303030; color: #000; pointer-events: auto; opacity: 1; animation: loading-screen-exit 2.5s linear both; }
/* Fondo gris primero; salida del fondo durante los últimos 500 ms. */
@keyframes loading-screen-exit {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
}
/* La marca completa desaparece entre 1600 y 2000 ms. */
.loading-screen .loading-brand { opacity: 1; animation: loading-brand-exit 2.5s ease both; }
@keyframes loading-brand-exit {
    0%, 64% { opacity: 1; }
    80%, 100% { opacity: 0; }
}
/* Primero entra la ë (200–600 ms), después atelier (650–1050 ms). */
.loading-screen .loading-brand img { animation: loading-mark-enter 2.5s ease both; }
.loading-screen .loading-brand span { animation: loading-name-enter 2.5s ease both; }
@keyframes loading-mark-enter {
    0%, 8% { opacity: 0; }
    24%, 100% { opacity: 1; }
}
@keyframes loading-name-enter {
    0%, 26% { opacity: 0; }
    42%, 100% { opacity: 1; }
}
.loading-screen img { display: block; width: 76px; height: 76px; filter: brightness(0); }
.loading-brand { display: flex; flex-direction: column; align-items: center; }
.loading-brand span { font-family: "Cormorant Infant", serif; font-style: italic; font-weight: 600; font-size: 28px; line-height: 1; margin-top: 8px; }
/* Pie compartido por todas las páginas de contenido. */
.home-page-footer { position: fixed; left: 8.3vw; bottom: 0; width: 24vw; z-index: 10; padding: 16px 0; background: transparent; color: #666; font-size: 12px; font-weight: 400; line-height: 1.4; pointer-events: none; }
.home-page-footer a { pointer-events: auto; text-decoration: none; }
.home-page-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }
.home-page-footer .home-legal { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 6px 10px; margin: 0; }
.home-page-footer .home-legal > span { margin-right: auto; }
.home-page-footer .home-legal > * { white-space: nowrap; }
@media (max-width: 900px) {
    .home-page-footer { position: static; width: auto; padding: 28px 8%; }
    .home-page-footer .home-legal { column-gap: 12px; }
}

/* Enlace de cierre para el proyecto y el blog. */
.project-detail-close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 100;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #303030;
    background: rgba(255, 255, 255, .94);
    border-radius: 50%;
}
.project-detail-close span::before,
.project-detail-close span::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 10px;
    width: 24px;
    height: 1px;
    background: currentColor;
    transform: rotate(45deg);
}
.project-detail-close span::after { transform: rotate(-45deg); }
.project-detail-close:hover { color: #000; }
.project-detail-close:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

@media (max-width: 700px) {
    .project-detail-close { top: 12px; right: 12px; }
}