@font-face{font-family:"Archivo Black";src:url("/assets/fuentes/ArchivoBlack-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fuentes/Newsreader.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fuentes/Newsreader-Italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
:root{
  --papel:#f1ede3; --tinta:#1a2652; --tinta-2:#3d4c7d; --lapiz:#6f7384; --tenue:#9a9ca6;
  --titulo:"Archivo Black","Helvetica Neue",Arial,sans-serif;
  --texto:"Newsreader",Georgia,"Times New Roman",serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --papel:#f1ede3; --tinta:#1a2652; } }
:root[data-theme="dark"]{ --papel:#f1ede3; --tinta:#1a2652; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--papel)}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:1.12rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:1px solid var(--tinta);outline-offset:5px}
::selection{background:rgba(26,38,82,.18)}

#rio{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* cabecera */
.cabecera{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 20px) 5vw 16px;transition:background .8s}
.cabecera.baja{background:linear-gradient(rgba(241,237,227,.9),rgba(241,237,227,.6) 55%,rgba(241,237,227,0))}
.marca-chica{display:block;height:20px;opacity:0;transform:translateY(-6px);transition:opacity .8s,transform .8s}
.cabecera.baja .marca-chica{opacity:1;transform:none}
.marca-chica img{height:100%;display:block}
.indice{display:flex;gap:1.8rem}
.indice a{font-family:var(--titulo);font-size:.78rem;letter-spacing:.04em;text-decoration:none;color:var(--lapiz);min-height:44px;display:inline-flex;align-items:center;transition:color .4s}
.indice a:hover,.indice a[aria-current="true"]{color:var(--tinta)}

/* vistas */
.vista{position:relative;z-index:2;transition:opacity .75s ease,filter .75s ease,transform .9s cubic-bezier(.3,.6,.2,1)}
.vista.hundir{opacity:0;filter:blur(10px);transform:scale(1.02)}
.vista.emerger{opacity:0;filter:blur(10px);transform:translateY(3vh)}
.vista[hidden]{display:none}

/* nacimiento */
#nacimiento{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:30vh 6vw 0;text-align:center}
#logo-grande{width:min(520px,76vw);height:auto;display:block}

/* secciones */
.seccion{padding:18vh 5vw 12vh;position:relative}
.rotulo{font-family:var(--titulo);font-size:.82rem;letter-spacing:.04em;color:var(--lapiz);margin:0 0 3vh}

/* filtros */
.filtros{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;margin:0 0 16vh;max-width:56rem;background:radial-gradient(ellipse at 30% 50%,rgba(241,237,227,.9),rgba(241,237,227,0) 75%)}
.filtros button{font-family:var(--titulo);font-size:.8rem;letter-spacing:.03em;color:var(--tenue);min-height:44px;display:inline-flex;align-items:baseline;gap:.35rem;border-bottom:1px solid transparent;transition:color .4s,border-color .4s}
.filtros button sup{font-family:var(--texto);font-size:.75rem;font-style:italic}
.filtros button:hover{color:var(--lapiz)}
.filtros button[aria-pressed="true"]{color:var(--tinta);border-bottom-color:var(--tinta)}
.vacio{font-style:italic;color:var(--lapiz);margin:0 0 30vh}

/* obras a la orilla del río */
.corriente{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26vh}
.obra{width:var(--ancho-tarjeta,420px);transition:margin-left 2.6s cubic-bezier(.45,.05,.35,1)}
.obra a{display:grid;grid-template-columns:clamp(96px,9vw,150px) minmax(0,1fr);gap:1.3rem;align-items:end;text-decoration:none;transition:opacity .7s ease,filter .7s ease,transform .9s cubic-bezier(.3,.6,.2,1)}
.obra.hundiendo a{opacity:0;filter:blur(10px);transform:translateY(5vh)}
.obra.saliendo a{opacity:0;filter:blur(10px);transform:translateY(-3vh)}
.cartel{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:#ddd;filter:grayscale(1) contrast(1.02);box-shadow:0 18px 30px rgba(26,38,82,.18),0 2px 4px rgba(26,38,82,.12);transform:rotate(var(--giro,-1deg));transition:transform 1s cubic-bezier(.2,.7,.2,1),box-shadow 1s}
.obra a:hover .cartel,.obra a:focus-visible .cartel{transform:rotate(0) translateY(-6px);box-shadow:0 26px 40px rgba(26,38,82,.24),0 2px 4px rgba(26,38,82,.12)}
.obra h3{font-family:var(--titulo);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.02;margin:0;letter-spacing:-.005em}
.obra .sub{display:block;font-family:var(--titulo);font-size:.95rem;color:var(--tinta-2);margin-top:.4rem;line-height:1.2}
.obra .datos{display:flex;flex-wrap:wrap;gap:.1rem 1rem;margin-top:.7rem;color:var(--lapiz);font-style:italic;font-size:1rem}
.estado{font-style:normal;font-family:var(--titulo);font-size:.68rem;letter-spacing:.05em;color:var(--papel);background:var(--tinta);padding:.15rem .5rem;align-self:center}

/* texto largo */
.prosa{max-width:36rem}
.prosa p{margin:0 0 1.2em;font-size:clamp(1.1rem,1.4vw,1.28rem);font-weight:300}
.acerca .en{color:var(--lapiz);font-size:1.02rem;margin-top:3rem}
.idioma{font-family:var(--titulo);font-size:.72rem;letter-spacing:.05em;color:var(--tenue);display:block;margin-bottom:.4rem}
.contacto{min-height:80vh}
.contacto ul{list-style:none;margin:0;padding:0;display:grid;gap:1.3rem}
.contacto a{font-family:var(--titulo);font-size:clamp(1.4rem,3.6vw,2.8rem);text-decoration:none;line-height:1.1;border-bottom:1px solid rgba(26,38,82,.25)}
.contacto a:hover{border-bottom-color:var(--tinta)}
.desembocadura{height:70vh}

/* página de proyecto */
.obra-pagina{padding:18vh 5vw 10vh;max-width:min(64rem,70vw)}
.volver{font-family:var(--titulo);font-size:.78rem;letter-spacing:.04em;color:var(--lapiz);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;margin-bottom:5vh}
.volver:hover{color:var(--tinta)}
.cabeza-obra{display:grid;grid-template-columns:clamp(160px,20vw,280px) minmax(0,1fr);gap:clamp(1.4rem,3.5vw,3.2rem);align-items:end}
.obra-pagina h1{font-family:var(--titulo);font-weight:400;font-size:clamp(2.4rem,6.4vw,5.6rem);line-height:.96;margin:0;letter-spacing:-.01em}
.obra-pagina .sub{display:block;font-family:var(--titulo);font-size:clamp(1rem,2vw,1.6rem);color:var(--tinta-2);margin-top:.6rem;line-height:1.15}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem 2.6rem;margin:7vh 0 8vh;padding:1.4rem 0;border-top:1px solid rgba(26,38,82,.2);border-bottom:1px solid rgba(26,38,82,.2)}
.ficha dt{font-family:var(--titulo);font-size:.7rem;letter-spacing:.05em;color:var(--tenue)}
.ficha dd{margin:.2rem 0 0;font-size:1.05rem}
.bloque{display:grid;grid-template-columns:minmax(8rem,12rem) 1fr;gap:1rem 4vw;margin-bottom:8vh}
.bloque h2{font-family:var(--titulo);font-weight:400;font-size:.8rem;letter-spacing:.04em;color:var(--lapiz);margin:.45rem 0 0}
.bloque p{margin:0;max-width:38rem;font-size:clamp(1.12rem,1.5vw,1.3rem);font-weight:300}
.bloque dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 2rem}
.bloque dl dt{color:var(--lapiz);font-style:italic}.bloque dl dd{margin:0}
.bloque ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}
.fotogramas{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.2rem}
.fotograma{aspect-ratio:16/9;background:rgba(26,38,82,.06);border:1px solid rgba(26,38,82,.14);display:grid;place-items:center;color:var(--lapiz);font-style:italic;font-size:.95rem}
.cortos{display:grid;gap:2rem}
.cortos h3{font-family:var(--titulo);font-weight:400;font-size:1.25rem;margin:0}
.cortos p{font-size:1.02rem;margin:.2rem 0 0;color:var(--lapiz)}
.enlace{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;padding:.6rem 1.2rem;border:1px solid rgba(26,38,82,.45);text-decoration:none;font-family:var(--titulo);font-size:.85rem;letter-spacing:.03em}
.enlace:hover{background:rgba(26,38,82,.06)}
.rio-abajo{margin-top:12vh;padding-top:2.6rem;border-top:1px solid rgba(26,38,82,.2)}
.rio-abajo span{display:block;font-style:italic;color:var(--lapiz);margin-bottom:.4rem}
.rio-abajo a{font-family:var(--titulo);font-size:clamp(1.5rem,4vw,3.2rem);line-height:1;text-decoration:none}

@media (max-width:760px){
  .indice{gap:1.1rem}.indice a{font-size:.7rem}
  .indice a:first-child{display:none}
  .obra{width:auto;margin-left:0!important}
  .obra{max-width:70vw}
  .obra a{grid-template-columns:80px minmax(0,1fr);gap:.9rem}
  .obra h3{font-size:1.35rem}
  .corriente{gap:18vh}
  .prosa,.contacto ul,.filtros{max-width:72vw}
  .contacto a{font-size:1.3rem}
  .obra-pagina{max-width:none}
  .obra-pagina>*{position:relative}
  .obra-pagina{max-width:80vw;padding-right:0}
  .cabeza-obra{grid-template-columns:1fr}.cabeza-obra .cartel{width:56%}
  .bloque{grid-template-columns:1fr;gap:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .vista{transition:opacity .3s}
  .vista.hundir,.vista.emerger{filter:none;transform:none}
  .obra{transition:none}
}

/* páginas: la corriente disuelve una página en la otra */
main{position:relative;z-index:2;transition:opacity .6s ease,filter .6s ease;animation:emerger .9s ease both}
body.yendo main{opacity:0;filter:blur(8px)}
@keyframes emerger{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
html{scroll-behavior:smooth}
.perdida{font-size:1.25rem;font-weight:300;max-width:34rem;margin-top:2rem}
@media (prefers-reduced-motion:reduce){main{animation:none;transition:opacity .2s}body.yendo main{filter:none}html{scroll-behavior:auto}}
/* imágenes con tamaño declarado: que respeten su proporción */
#logo-grande,.cartel{height:auto}
.marca-chica img{width:auto}

/* GRUTA, en la desembocadura */
.gruta{min-height:50vh}
.gruta-enlace{display:inline-grid;gap:.7rem;text-decoration:none;max-width:72vw}
.gruta-enlace .rotulo{margin:0 0 .6rem}
.gruta-nombre{font-family:var(--texto);font-style:italic;font-weight:500;font-size:clamp(3.2rem,8vw,6.4rem);line-height:.95;letter-spacing:.03em}
.gruta-logo{display:block;width:min(240px,56vw);height:auto;border-radius:50%;box-shadow:0 24px 50px rgba(26,38,82,.22);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gruta-enlace:hover .gruta-logo{transform:rotate(-3deg) scale(1.02)}
.gruta-lema{font-style:italic;color:var(--lapiz);font-size:1.1rem}
.gruta-ir{font-family:var(--titulo);font-size:.85rem;letter-spacing:.03em;border-bottom:1px solid rgba(26,38,82,.3);justify-self:start;padding-bottom:.15rem;transition:border-color .4s}
.gruta-enlace:hover .gruta-ir{border-bottom-color:var(--tinta)}
.desembocadura{height:40vh}