:root{
  --papel:#ffffff;
  --tinta:#111111;
  --tinta-suave:#6b6b6b;
  --linea:#dcdcdc;

  --display:"Space Grotesk",system-ui,sans-serif;
  --texto:"Space Grotesk",system-ui,sans-serif;

  --aire-1:8px; --aire-2:16px; --aire-3:26px;
  --aire-4:44px; --aire-5:72px; --aire-6:112px;

  --ancho:1240px;
  --col-gap:14px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --papel:#0d0d0d; --tinta:#f1f1f1; --tinta-suave:#9b9b9b; --linea:#292929;
  }
}
:root[data-tema="oscuro"]{
  --papel:#0d0d0d; --tinta:#f1f1f1; --tinta-suave:#9b9b9b; --linea:#292929;
}

:root{ --curva:cubic-bezier(.16,1,.3,1) }

html.temas-suaves body,
html.temas-suaves .nav.flotante,
html.temas-suaves .tema,
html.temas-suaves .portada-centro,
html.temas-suaves .banda-centro,
html.temas-suaves section.bloque,
html.temas-suaves .enlace,
html.temas-suaves .volver,
html.temas-suaves .nav::before,
html.temas-suaves .nav::after{
  transition:background-color .35s ease, background-image .35s ease,
             color .35s ease, border-color .35s ease;
}
html.temas-suaves .nav::before,
html.temas-suaves .nav::after{
  transition:opacity .2s ease, background-image .35s ease;
}
html.temas-suaves .nav.flotante{
  transition:opacity .3s ease, transform .3s var(--curva),
             background-color .35s ease, background-image .35s ease,
             color .35s ease, border-color .35s ease;
}
@media (prefers-reduced-motion:reduce){
  html.temas-suaves *{transition:none !important}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}

.interior{max-width:var(--ancho); margin:0 auto; padding-inline:40px}   h1,h2,h3{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.035em}
.nombre{font-size:clamp(48px,9vw,132px); line-height:.92}
.rotulo{
  font-size:10px; text-transform:uppercase; letter-spacing:.22em;
  color:var(--tinta-suave); font-weight:500;
}
.titulo-seccion{font-size:clamp(28px,3.4vw,44px); line-height:1}
.titulo-pagina{font-size:clamp(34px,4.6vw,58px); line-height:1}
.encabezado-pagina{padding-block:var(--aire-4) 0}

.cabeza-seccion{
  display:flex; align-items:baseline; gap:var(--aire-3);
  flex-wrap:wrap; margin-bottom:var(--aire-2);
}
.ver-mas{
  font-size:14px; color:var(--tinta-suave); text-decoration:none;
  letter-spacing:.06em; white-space:nowrap;
}
.ver-mas:hover{color:var(--tinta)}
.siguiente-nombre{
  margin:var(--aire-1) 0 0; font-family:var(--display); font-weight:700;
  font-size:clamp(22px,2.6vw,32px); letter-spacing:-.03em;
}

.rotador{
  margin-top:var(--aire-2); height:1.25em; overflow:hidden;
  font-size:clamp(24px,3.6vw,46px); letter-spacing:.04em;
  color:var(--tinta-suave); text-transform:lowercase;
}
.rotador span{display:block; transition:opacity .35s ease}
.rotador span.saliendo{opacity:0}
@media (prefers-reduced-motion:reduce){
  .rotador span{transition:none}
}

.nav{position:relative; overflow:hidden}
.nav-riel{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--aire-3); padding-block:var(--aire-3);
  overflow-x:auto;                    scrollbar-width:none;               -ms-overflow-style:none;
}
.nav-riel::-webkit-scrollbar{display:none}
.nav-riel > *{flex:0 0 auto}          .nav{--reserva-tema:74px}
.nav::before,.nav::after{
  content:""; position:absolute; top:0; bottom:0; width:64px;
  pointer-events:none; opacity:0; transition:opacity .2s ease; z-index:2;
}
.nav::before{left:0;
  background:linear-gradient(to right, color-mix(in srgb, var(--papel) var(--barra,88%), transparent) 42%, transparent)}
.nav::after{
  right:0; width:calc(var(--reserva-tema) + 72px);
  background:linear-gradient(to left,
    color-mix(in srgb, var(--papel) var(--barra,88%), transparent) 0,
    color-mix(in srgb, var(--papel) var(--barra,88%), transparent) var(--reserva-tema),
    transparent 100%);
}
.nav.hay-izq::before{opacity:1}
.nav.hay-der::after {opacity:1}
@media (prefers-reduced-motion:reduce){
  .nav::before,.nav::after{transition:none}
}

.nav.flotante{
  position:fixed; top:0; left:0; width:100%; z-index:50;
  --barra:88%;
  background:var(--papel);      background:color-mix(in srgb, var(--papel) var(--barra), transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
  opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s var(--curva);
}
.nav.flotante.visible{opacity:1; pointer-events:auto; transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .nav.flotante{transition:none; transform:none}
}
.nav a{color:var(--tinta); text-decoration:none; font-size:13px; letter-spacing:.08em}
.nav a:hover{opacity:.55}
.nav .marca{font-family:var(--display); font-weight:700; letter-spacing:-.03em; font-size:16px}
.nav .enlaces{display:flex; gap:var(--aire-3); align-items:center}
.tema-fijo{
  position:fixed; top:0; left:0; width:100%; z-index:60;
  pointer-events:none;                 }
.tema-fijo .interior{display:flex; justify-content:flex-end; padding-block:var(--aire-3)}
.tema{
  pointer-events:auto;
  display:grid; place-items:center;
  width:34px; height:34px; padding:0;
  border:1px solid var(--linea); border-radius:999px;
  color:var(--tinta-suave); cursor:pointer;
  background:var(--papel);
  background:color-mix(in srgb, var(--papel) 82%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tema:hover{color:var(--tinta); border-color:var(--tinta-suave)}
.tema svg{display:block}
.tema-hueco{display:block; width:34px; height:34px}
.nav a[aria-current="page"]{border-bottom:1px solid var(--tinta)}

header.portada{
  min-height:100svh; display:grid; place-items:center;
  padding-block:var(--aire-5);
  position:relative;
  clip-path:inset(0);      }
header.portada{--foto:.55}

.portada-centro{
  position:relative; z-index:1;   width:100%; text-align:center;
  padding:var(--aire-5) 40px;
  --franja:78%;                   background:var(--papel);        background:color-mix(in srgb, var(--papel) var(--franja), transparent);
}
.portada-centro > *{max-width:var(--ancho); margin-inline:auto}
.portada .rotador{margin-top:var(--aire-3)}
@media (max-width:560px){
  .portada-centro{padding:var(--aire-4) 16px}
}

.rejilla{
  columns:4; column-gap:var(--col-gap); margin-top:var(--aire-3);
}
.rejilla.de-tres{columns:3}
.pieza{
  break-inside:avoid; display:block; width:100%; margin:0 0 var(--col-gap);
  position:relative; border:0; padding:0; background:none;
  text-align:left; font:inherit; color:inherit; cursor:pointer;
  text-decoration:none;
}
.pieza img{width:100%; height:auto}

.letrero{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:var(--aire-3) var(--aire-2) var(--aire-2);
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));
  color:#fff; opacity:0; transition:opacity .18s ease;
}
.pieza:hover .letrero,
.pieza:focus-visible .letrero{opacity:1}
.letrero .l1{font-family:var(--display); font-weight:700; font-size:21px;
  letter-spacing:-.02em; line-height:1.1}
.letrero .l2{font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.82; margin-top:7px}

@media (hover:none){
  .letrero{opacity:1}
}

.enlace{
  display:inline-block; margin-top:var(--aire-3); font-size:15px;
  color:var(--tinta); text-decoration:none;
  border-bottom:1px solid var(--tinta); padding-bottom:3px;
}
.enlace:hover{opacity:.55}
.volver{
  display:inline-block; font-size:13px; color:var(--tinta-suave);
  text-decoration:none; letter-spacing:.06em; margin-bottom:var(--aire-3);
}
.volver:hover{color:var(--tinta)}

.creditos{
  display:flex; gap:var(--aire-4); flex-wrap:wrap;
  margin:var(--aire-3) 0 var(--aire-4);
  padding-top:var(--aire-3); border-top:1px solid var(--linea);
}
.creditos dt{font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:6px}
.creditos dd{margin:0; font-size:16px}
.portada-conjunto{margin-bottom:var(--col-gap)}
.portada-conjunto img{width:100%; height:auto}

.banda{
  position:relative;
  clip-path:inset(0);            min-height:72svh;
  margin-block:var(--aire-6);
}
.banda{display:grid; place-items:center}
.banda-fondo{
  position:fixed; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.banda-centro{
  position:relative; z-index:1;
  width:100%;
  padding-block:var(--aire-5);
  --franja:80%;
  background:var(--papel);
  background:color-mix(in srgb, var(--papel) var(--franja), transparent);
}
.acerca-texto{
  max-width:56ch; margin:var(--aire-3) 0 0;
  font-size:17px; line-height:1.65;
}
.banda{--foto:.45}
.banda-fondo{opacity:var(--foto)}
@media (max-width:560px){
  .banda{min-height:56svh}
}
@media (prefers-reduced-motion:reduce){
  .banda{clip-path:none; overflow:hidden}
  .banda-fondo{position:absolute}
}

section.bloque{padding-block:var(--aire-5); border-top:1px solid var(--linea); margin-top:var(--aire-5)}
.datos{margin:var(--aire-3) 0 0; max-width:420px}
.datos dt{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--tinta-suave)}
.datos dd{margin:4px 0 var(--aire-2); font-size:17px}
footer{padding-block:var(--aire-4) var(--aire-6)}

@media (max-width:1100px){
  .rejilla{columns:3}
}
@media (max-width:820px){
  .rejilla{columns:2}
  .rejilla.de-tres{columns:2}
}
@media (max-width:560px){
  .interior{padding-inline:16px}
  .rejilla,.rejilla.de-tres{columns:1}
  .letrero .l1{font-size:18px}
  .nav-riel{padding-block:var(--aire-2)}
  .tema-fijo .interior{padding-block:var(--aire-2)}
  .nav{--reserva-tema:50px}   .banda-centro{padding-block:var(--aire-3)}
  .banda{min-height:64svh}
}