@font-face { font-family:'Inter'; src:url('../fonts/Inter-Variable.ttf') format('truetype-variations'); font-weight:100 900; font-style:normal; font-display:swap; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; background: #FFFFFF; }
body { background: #FFFFFF; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* Cursor circular propio con inversión sobre el contenido */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
  #cursor {
    position: fixed; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%;
    background: #FFFFFF; mix-blend-mode: difference; pointer-events: none; z-index: 9999;
    will-change: transform; opacity: 0;
    transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), opacity .25s linear;
  }
  #cursor.on { opacity: 1; }
  #cursor.big { width: 46px; height: 46px; }
  body.veil #cursor { opacity: 0; }
}
@media (hover: none), (pointer: coarse) { #cursor { display: none; } }

.reveal.armed { opacity: 0; transform: translateY(14px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.armed.in { opacity: 1; transform: none; }
.media { overflow: hidden; background: #F2F2F2; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Durante la entrada las imágenes esperan ocultas y luego aparecen escalonadas */
body.entering .pn-item { opacity: 0 !important; transform: translateY(14px) !important; }
/* Móvil: al terminar la frase, las imágenes suben desde abajo hasta su sitio */
@media (max-width: 767px) {
  body.entering .pn-item { transform: translateY(55vh) !important; }
  .pn-item { transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.16,.84,.28,1); }
}
.pn-item { transition: opacity 1.2s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pn-item .media { transition: transform .9s cubic-bezier(.16,.84,.28,1); transform-origin: center center; }
.pn-item:hover .media { transform: scale(0.93); }
/* Noticias: mismo gesto al pasar el ratón */
.news .media { transition: transform .9s cubic-bezier(.16,.84,.28,1); transform-origin: center center; }
@media (hover: hover) { .news .media:hover { transform: scale(0.93); } }

/* Campo de imágenes: apilado en móvil, libre y sin solapes en escritorio */
.pn-item { margin-bottom: 8vh; }
@media (min-width: 768px) {
  .pn-batch { position: relative; width: 100%; }
  .pn-item { position: absolute; left: var(--l); top: var(--t); width: var(--w); margin: 0; }
}

/* Listado de proyectos (Work) */
.archive .row { border-top: 1px solid #DFDFDF; }
.archive .row:last-child { border-bottom: 1px solid #DFDFDF; }
.archive .row span { transition: opacity .3s ease; }
.archive:hover .row span { opacity: .3; }
.archive .row:hover span { opacity: 1; }
#peek { position: fixed; width: 280px; aspect-ratio: 1/1; pointer-events: none; z-index: 40; opacity: 0; transform: translate(-50%,-50%) scale(.96); transition: opacity .3s ease, transform .5s cubic-bezier(.2,.7,.2,1); overflow: hidden; background:#F2F2F2; }
@media (hover: none), (pointer: coarse) { #peek { display: none !important; } }
#peek.on { opacity: 1; transform: translate(-50%,-50%) scale(1); }
#peek img { width:100%; height:100%; object-fit:cover; display:block; }

/* Marca de cierre recurrente */
@keyframes pn-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pn-endmark { overflow: hidden; }
.pn-endmark .track { display: inline-flex; white-space: nowrap; color: #6E6E6E; animation: pn-ticker 32s linear infinite; }

/* News */
.news .entry { border-top: 1px solid #DFDFDF; }
.news .entry:last-child { border-bottom: 1px solid #DFDFDF; }
.news .entry:first-child { border-top: none; }
/* Ordenador: la imagen sube a la altura del título, en la mitad derecha */
@media (min-width: 768px) {
  .news .entry { position: relative; }
  .news .entry .pn-news-img { position: absolute; top: 0.75rem; left: 52%; }
}

/* Pantalla de entrada */
#enter {
  position: fixed; inset: 0; z-index: 9990; background: var(--bgc, #000000);
  transition: opacity 1.4s cubic-bezier(.4,0,.2,1);
  --x: 50%; --y: 50%;
}
#enter .layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#enter .layer span { font-size: 6vw; line-height: 1; letter-spacing: -0.03em; }
#enter .base { color: var(--fgc, #FFFFFF); }
/* Capa invertida recortada al círculo del cursor */
#enter .inv {
  background: var(--fgc, #FFFFFF); color: var(--bgc, #000000);
  -webkit-mask-image: radial-gradient(circle 23px at var(--x) var(--y), #000 98%, transparent 100%);
  mask-image: radial-gradient(circle 23px at var(--x) var(--y), #000 98%, transparent 100%);
}
@media (max-width: 767px) { #enter .layer span { font-size: 10vw; } }
@media (hover: none), (pointer: coarse) { #enter .inv { display: none; } }

/* Menú móvil: asterisco y capa a pantalla completa */
#burger { display: none; }
#mobile-menu { display: none; }
@media (max-width: 767px) {
  #burger { display: block; line-height: 1; font-size: 42px; transform: translateY(0.33em); }
  #mobile-menu {
    display: flex; position: fixed; inset: 0; z-index: 9995; background: #FFFFFF;
    flex-direction: column; align-items: center; justify-content: center; gap: 0.6em;
    padding: 0 20px; opacity: 0; pointer-events: none;
    transition: opacity .45s cubic-bezier(.2,.7,.2,1);
  }
  #mobile-menu.on { opacity: 1; pointer-events: auto; }
  #mobile-menu a { color: #000000; white-space: nowrap; text-align: center; font-size: 34px; line-height: 1.15; letter-spacing: -0.025em; }
  body.menu-open { overflow: hidden; }
}

/* Visor de imagen ampliada */
#zoom {
  position: fixed; inset: 0; z-index: 9800; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; padding: 6vmin;
  opacity: 0; pointer-events: none; transition: opacity .45s cubic-bezier(.2,.7,.2,1);
}
#zoom.on { opacity: 1; pointer-events: auto; }
#zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
#zoom-back { position: absolute; bottom: 5vmin; left: 5vmin; display: flex; align-items: center; height: 22px; color: #000000; }

/* About: entrada de derecha a izquierda */
.slide-in { opacity: 0; transform: translateX(40px); transition: opacity 1.4s cubic-bezier(.16,.84,.28,1), transform 1.4s cubic-bezier(.16,.84,.28,1); }
.slide-in.go { opacity: 1; transform: none; }
.blk { display: block; }
.blk + .blk { margin-top: 1.4em; }
@media (max-width: 767px) { .slide-in { transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .slide-in { opacity: 1; transform: none; transition: none; } }

/* Vista ampliada: recorrido de la foto desde el campo */
#zoom { background: transparent; opacity: 1; visibility: hidden; transition: none; }
#zoom.on { visibility: visible; }
#zoom::before { content: ''; position: absolute; inset: 0; background: #FFFFFF; opacity: 0; transition: opacity .9s cubic-bezier(.4,0,.2,1); }
#zoom.on.show::before { opacity: 1; }
#zoom img { position: relative; will-change: transform; }
#zoom-back { z-index: 1; opacity: 0; transition: opacity .5s ease; }
#zoom.on.show #zoom-back { opacity: 1; transition-delay: .8s; }

/* Contacto: el texto sube desde detrás de una máscara */
.mask { display: block; overflow: hidden; padding-bottom: .08em; }
.mask > .mask-in { display: block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.mask.go > .mask-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .mask > .mask-in { transform: none; transition: none; } }

/* Ficha: texto e imágenes con scroll independiente en escritorio */
@media (min-width: 768px) {
  .pn-split { height: 100vh; overflow: hidden; }
  .pn-split .pn-col { height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .pn-split .pn-col::-webkit-scrollbar { display: none; }
}

/* Ficha: una imagen por pantalla, centrada y sin que asome la siguiente */
@media (min-width: 768px) {
  .pn-split #secuencia { scroll-snap-type: y proximity; padding: 0 !important; gap: 0 !important; }
  .pn-split #secuencia > .shot {
    scroll-snap-align: start;
    height: 100vh; flex: 0 0 100vh; box-sizing: border-box;
    padding: calc(5vw + 24px) 0 calc(3vw + 24px);
    display: flex; align-items: center; justify-content: center; background: transparent;
  }
  .pn-split #secuencia > .shot img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
}


/* Ficha: solo dos párrafos, el resto se despliega (móvil y ordenador) */
#texto:not(.open) .pn-more { display: none; }
#texto:not(.open) p:nth-child(2) { margin-bottom: 20px; }
#texto.open .pn-more-btn { display: none; }
#texto:not(.open) .pn-less-btn { display: none; }

/* News: solo dos párrafos, el resto se despliega */
.pn-fold:not(.open) .pn-more { display: none; }
.pn-fold:not(.open) p:nth-child(2) { margin-bottom: 20px; }
.pn-fold.open .pn-more-btn { display: none; }
.pn-fold:not(.open) .pn-less-btn { display: none; }

/* Imágenes: sin selección, arrastre ni menú de guardar en móvil */
img { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Portada: indicador de scroll */
#scroll-hint { position: fixed; left: 50%; bottom: 22px; z-index: 45; color: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transform: translateX(-50%); transition: opacity .8s ease; }
#scroll-hint.on { opacity: 1; }
#scroll-hint svg { display: block; animation: pn-hint 1.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes pn-hint { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(7px); opacity: .45; } }

/* Texto justificado: partición silábica en el idioma de la página para evitar huecos entre palabras */
.text-justify { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
html.pn-touch #cursor { display: none !important; }
/* Frase de la portada: negra mientras se escribe, gris muy claro cuando entran las imágenes */
#motto-line { transition: color 1.6s cubic-bezier(.2,.7,.2,1); }
#motto-line.dim { color: #E4E4E4; }

/* Aviso de cookies: banda inferior fina */
#pn-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9700; background: #FFFFFF; color: #000000;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 9px 24px; font-size: 11px; line-height: 1.35; letter-spacing: 0.01em;
  transform: translateY(100%); transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
#pn-cookies.on { transform: translateY(0); }
#pn-cookies p { margin: 0; color: #6b6b6b; text-align: left; }
#pn-cookies div { display: flex; gap: 20px; flex-shrink: 0; }
#pn-cookies button { font: inherit; color: #000000; background: none; border: 0; padding: 4px 0; cursor: inherit; }
#pn-cookies button[data-c="denied"] { color: #6b6b6b; }
@media (max-width: 767px) { #pn-cookies { padding: 8px 20px; gap: 16px; font-size: 10px; } #pn-cookies div { gap: 16px; } #pn-cookies button { padding: 10px 0; } }

/* Contact: sedes en paralelo a la altura de Instagram (Comunitat Valenciana primero, luego Madrid) */
@media (min-width: 768px) {
  .pn-contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
  .pn-contact > .c-mail { grid-column: 1 / span 5; grid-row: 1; }
  .pn-contact > .c-ig { grid-column: 1 / span 5; grid-row: 2; }
  .pn-contact > .c-val { grid-column: 8 / span 5; grid-row: 1; margin-top: 0; }
  .pn-contact > .c-mad { grid-column: 8 / span 5; grid-row: 2; }
}

/* Salto de línea solo en móvil (Contact: «escríbenos a:» en su propia línea) */
@media (min-width: 768px) { .pn-br-m { display: none; } }

/* Vídeo en la vista ampliada de la portada */
#zoom video { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; position: relative; will-change: transform; }
/* Entrada: fondo opcional (imagen o vídeo) y oscurecido para que el texto se lea */
#enter .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#enter .base { background: rgba(0,0,0,var(--dim,0)); }
#enter.invert .base { color: #FFFFFF; }
#enter.invert .base span { mix-blend-mode: difference; }