@charset "UTF-8";
/* ==========================================================================
   porlosrincones.com
   Un negativo de 35 mm sobre la mesa de luz: fondo oscuro y calido, el ambar
   del soporte de la pelicula como unico acento, y los bordes de la pagina
   convertidos en la tira perforada que devuelve el laboratorio.
   Todo el fichero es ASCII a proposito: ni un acento en el CSS.
   ========================================================================== */

:root{
  /* La mesa de luz apagada: negro calido, nunca negro puro. */
  --fondo:#131110;
  --fondo2:#1C1917;
  --fondo3:#252120;
  --luzblanca:#F2EDE4;        /* el texto, del color de la luz del negatoscopio */
  --gris:#8C847A;
  --gris2:#5E574F;

  /* El soporte de la pelicula revelada, ese naranja del C-41. */
  --ambar:#D9822B;
  --ambar-claro:#F0A85C;
  --ambar-oscuro:#A85D17;

  --filete:rgba(242,237,228,.14);
  --filete2:rgba(242,237,228,.28);
  --sombra:0 30px 64px -24px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.5);
  --sombra-alta:0 40px 80px -22px rgba(0,0,0,.95);

  --display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --texto:"Newsreader",Georgia,"Times New Roman",serif;
  --curva:cubic-bezier(.16,.85,.24,1);

  /* Tira de 35 mm a escala real: paso de 4,75 mm y hueco de 2,79 x 1,98 mm. */
  --tira:44px;
  --canal:26.4px;
  --paso:28.5px;
  --perf:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726.4%27%20height%3D%2728.5%27%3E%3Crect%20x%3D%274.83%27%20y%3D%278.31%27%20width%3D%2716.74%27%20height%3D%2711.88%27%20rx%3D%272.4%27%20fill%3D%27%23131110%27%2F%3E%3C%2Fsvg%3E");

  --margen:clamp(16px,3.2vw,40px);
  --luz:rgba(217,130,43,.16);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--fondo); color:var(--luzblanca);
  font-family:var(--texto); font-weight:300; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  /* Deja libres los dos canales de la pelicula. */
  padding:0 var(--tira);
}
img{ display:block; max-width:100%; }
figure{ margin:0; }        /* el margen lateral de 40px del navegador descuadra las rejillas */
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--ambar); outline-offset:3px; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--ambar); color:var(--fondo); padding:12px 18px;
  font-family:var(--display); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
}
.saltar:focus{ left:calc(var(--tira) + 8px); top:8px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

.etq{
  font-family:var(--display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gris); margin:0;
}
h1,h2,h3{ text-wrap:balance; overflow-wrap:anywhere; }

/* ==========================================================================
   LA TIRA DE 35 MM
   Dos bandas fijas, una por borde. Cada una lleva el soporte ambar, el canal
   perforado y las marcas de canto, como el negativo que vuelve del lab.
   ========================================================================== */
.pelicula{
  position:fixed; top:0; bottom:0; width:var(--tira); z-index:90;
  pointer-events:none;
  /* El soporte no es un naranja plano: tiene el degradado del revelado. */
  background:
    linear-gradient(90deg,
      var(--ambar-oscuro) 0%, var(--ambar) 38%,
      var(--ambar) 62%, var(--ambar-oscuro) 100%);
}
.pelicula--izq{ left:0; }
.pelicula--der{ right:0; }
/* El canal perforado: los huecos dejan ver el fondo de la mesa. */
.pelicula::before{
  content:""; position:absolute; top:0; bottom:0; width:var(--canal);
  background-image:var(--perf);
  background-repeat:repeat-y;
  background-size:var(--canal) var(--paso);
  /* Se desplaza medio paso para que las dos bandas no queden simetricas,
     igual que en una tira real cortada por cualquier sitio. */
  background-position:0 0;
}
.pelicula--izq::before{ left:0; }
.pelicula--der::before{ right:0; background-position:0 calc(var(--paso) / 2); }
/* Marcas de canto: el texto diminuto impreso junto a las perforaciones. */
.pelicula b{
  position:absolute; top:0; bottom:0; display:flex; align-items:center;
  justify-content:center; gap:34px; width:calc(var(--tira) - var(--canal));
  writing-mode:vertical-rl; white-space:nowrap; overflow:hidden;
  font-family:var(--display); font-weight:500; font-size:8.5px;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(19,17,16,.62);
}
.pelicula--izq b{ right:0; }
.pelicula--der b{ left:0; transform:rotate(180deg); }
/* Un filo oscuro donde la pelicula se encuentra con la mesa. */
.pelicula::after{
  content:""; position:absolute; top:0; bottom:0; width:2px;
  background:rgba(0,0,0,.55);
}
.pelicula--izq::after{ right:0; }
.pelicula--der::after{ left:0; }

@media (max-width:700px){
  :root{
    --tira:24px; --canal:14.96px; --paso:16.15px;
    --perf:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2714.96%27%20height%3D%2716.15%27%3E%3Crect%20x%3D%272.74%27%20y%3D%274.71%27%20width%3D%279.49%27%20height%3D%276.73%27%20rx%3D%271.36%27%20fill%3D%27%23131110%27%2F%3E%3C%2Fsvg%3E");
  }
  .pelicula b{ display:none; }
}

/* ---------- la luz que sigue al puntero -------------------------------- */
/* Sobre fondo oscuro deja de ser un tinte: es la lampara del negatoscopio. */
.luz{
  position:fixed; top:0; right:0; bottom:0; left:0;
  inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(620px circle at var(--mx,50%) var(--my,38%),
             var(--luz), transparent 66%);
}
.luz::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  inset:0;
  background:radial-gradient(220px circle at var(--mx2,50%) var(--my2,38%),
             var(--luz), transparent 70%);
  opacity:.75;
}

/* ---------- barra ------------------------------------------------------ */
.barra{
  position:fixed; top:0; left:var(--tira); right:var(--tira); z-index:80;
  background:rgba(19,17,16,.88); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--filete);
}
.barra__fila{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:13px var(--margen);
}
.marca{
  font-family:var(--display); font-weight:800; font-size:12.5px;
  letter-spacing:-.01em; text-transform:uppercase; text-decoration:none;
  display:flex; align-items:baseline; gap:8px; white-space:nowrap;
}
.marca span{ font-weight:500; letter-spacing:.12em; color:var(--gris); font-size:10.5px; }
.barra nav{
  display:flex; gap:clamp(12px,2vw,30px);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.barra nav::-webkit-scrollbar{ display:none; }
.barra nav a{
  font-family:var(--display); font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--gris); white-space:nowrap; padding:3px 0;
  border-bottom:1px solid transparent; transition:color .3s, border-color .3s;
}
.barra nav a:hover{ color:var(--luzblanca); }
/* El atributo que escribe la plantilla es aria-current="page", que es el
   valor correcto; antes aqui ponia "true" y por eso la seccion en la que
   estabas nunca se marcaba. */
.barra nav a[aria-current]{ color:var(--ambar-claro); border-bottom-color:var(--ambar); }
.barra nav a.aparte{ color:var(--ambar-claro); }
.barra nav a.aparte::after{ content:" \2197"; }
.progreso{ height:2px; background:var(--ambar); width:0; transition:width .12s linear; }
@media (max-width:560px){ .marca span{ display:none; } }

/* El menu se desliza cuando no cabe. Eso hay que ANUNCIARLO: los extremos se
   desvanecen y aparece una flecha ambar. Las clases las pone main.js mirando
   por donde va el desplazamiento; sin JavaScript no hay desvanecido, pero el
   menu se sigue viendo entero al deslizar. */
.barra__fila{ position:relative; }
.barra nav{
  -webkit-mask-image:var(--desvanece, none);
  mask-image:var(--desvanece, none);
}
.barra__fila.mas-der{
  --desvanece:linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
}
.barra__fila.mas-izq{
  --desvanece:linear-gradient(90deg, transparent 0, #000 38px, #000 100%);
}
.barra__fila.mas-izq.mas-der{
  --desvanece:linear-gradient(90deg, transparent 0, #000 38px,
                              #000 calc(100% - 44px), transparent 100%);
}
.barra__fila.mas-der::after{
  content:"\203A"; position:absolute; right:2px; top:50%; margin-top:-11px;
  font-family:var(--display); font-weight:500; font-size:19px; line-height:1;
  color:var(--ambar); pointer-events:none;
  /* Se anima 'right' y no 'transform' para no pelearse con el centrado. */
  animation:asoma 1.9s var(--curva) infinite;
}
@keyframes asoma{
  0%,100%{ right:4px; opacity:.5; }
  50%    { right:0;   opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .barra__fila.mas-der::after{ animation:none; opacity:.9; right:2px; }
}

/* En el movil, ademas, el menu no cabia NI DE LEJOS: quedaba en unos 160 px
   al lado de la marca y se cortaba a mitad de palabra. Baja a su propia
   linea y ocupa todo el ancho de la barra. */
@media (max-width:760px){
  .barra__fila{
    flex-direction:column; align-items:stretch; gap:7px;
    padding:11px var(--margen) 0;
  }
  .marca{ font-size:12px; }
  .barra nav{
    /* Se sale del margen: asi el desvanecido cae en el borde de verdad. */
    margin:0 calc(-1 * var(--margen));
    padding:1px var(--margen) 9px;
    gap:20px;
    scroll-snap-type:x proximity;
    scroll-padding-left:var(--margen);
  }
  .barra nav a{ font-size:11.5px; padding:4px 0; scroll-snap-align:start; }
  .barra__fila.mas-der::after{ top:auto; margin-top:0; bottom:8px; }
}

/* ---------- portada ---------------------------------------------------- */
.portada{
  position:relative; z-index:1; min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(92px,13vh,140px) var(--margen) 0;
}
.portada__epi{
  margin-bottom:clamp(18px,3vw,30px); color:var(--ambar);
  opacity:0; animation:entra .8s .15s var(--curva) forwards;
}
.portada h1{
  font-family:var(--display); font-weight:800; margin:0;
  font-size:clamp(44px,10.6vw,158px); line-height:.86; letter-spacing:-.045em;
}
/* El recorte que enmascara cada linea deja sitio a los trazos de la g y la j. */
.portada h1 span{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.portada h1 span i{
  display:block; font-style:normal; transform:translateY(105%);
  animation:sube .95s var(--curva) forwards;
}
.portada h1 span:nth-child(2) i{ animation-delay:.09s; }
.portada h1 span:nth-child(3) i{ animation-delay:.18s; color:var(--ambar); }
.portada h1 span:nth-child(n+4) i{ animation-delay:.27s; }
@keyframes sube{ to{ transform:none; } }
@keyframes entra{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.portada__pie{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px 40px;
  align-items:end; border-top:1px solid var(--filete);
  margin-top:clamp(26px,4vw,48px); padding:18px 0 clamp(20px,3vw,32px);
  opacity:0; animation:entra .9s .5s var(--curva) forwards;
}
.portada__pie p{ margin:0; max-width:40ch; color:var(--gris); font-size:16px; }
.portada__pie .datos{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:flex-end; }
@media (max-width:760px){
  .portada__pie{ grid-template-columns:1fr; }
  .portada__pie .datos{ justify-content:flex-start; }
}

/* Tira de contactos: la hoja que acompana al negativo. */
.contactos{
  display:flex; gap:6px; overflow-x:auto; padding:0 0 clamp(18px,3vw,30px);
  scrollbar-width:none; opacity:0; animation:entra 1s .72s var(--curva) forwards;
}
.contactos::-webkit-scrollbar{ display:none; }
.contactos__hoja{
  flex:0 0 auto; -webkit-appearance:none; appearance:none; padding:0; cursor:pointer; overflow:hidden;
  border:1px solid var(--filete); background:var(--fondo2);
  width:clamp(74px,8vw,104px); height:clamp(54px,5.6vw,72px);
  transition:border-color .3s, transform .4s var(--curva);
}
.contactos__hoja img{
  width:100%; height:100%; object-fit:cover;
  /* Apagadas hasta que la luz les da encima. */
  filter:grayscale(1) brightness(.62) contrast(1.05);
  transition:filter .5s, transform .8s var(--curva);
}
.contactos__hoja:hover{ border-color:var(--ambar); transform:translateY(-4px); }
.contactos__hoja:hover img{ filter:none; transform:scale(1.06); }

/* ---------- cinta ------------------------------------------------------ */
.cinta{
  position:relative; z-index:1; overflow:hidden; white-space:nowrap;
  background:var(--ambar); color:var(--fondo); padding:11px 0;
  border-top:1px solid var(--ambar-oscuro); border-bottom:1px solid var(--ambar-oscuro);
}
.cinta div{ display:inline-flex; gap:40px; animation:desfile 30s linear infinite; }
.cinta span{
  font-family:var(--display); font-weight:500; font-size:11.5px;
  letter-spacing:.22em; text-transform:uppercase;
}
@keyframes desfile{ to{ transform:translateX(-50%); } }
.cinta:hover div{ animation-play-state:paused; }

/* ---------- capitulos -------------------------------------------------- */
.capitulo{
  position:relative; z-index:1; min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(88px,12vh,130px) var(--margen) clamp(60px,9vh,110px);
  border-bottom:1px solid var(--filete);
}
.cab{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px clamp(16px,2.4vw,34px); align-items:end;
  margin-bottom:clamp(24px,3.6vw,46px);
  border-bottom:1px solid var(--filete); padding-bottom:16px;
}
.cab .n{
  font-family:var(--display); font-weight:800; font-size:clamp(13px,1.5vw,18px);
  color:var(--ambar); font-variant-numeric:tabular-nums; line-height:1.4;
  align-self:end; padding-bottom:4px; margin:0;
}
.cab h2{
  font-family:var(--display); font-weight:800; margin:0;
  font-size:clamp(36px,6.8vw,98px); line-height:.9; letter-spacing:-.042em;
}
.cab .ficha{ text-align:right; padding-bottom:6px; max-width:none; }
.cab .ficha span{ display:block; }
.cab .intro{
  grid-column:2 / -1; margin:12px 0 0; max-width:44ch;
  font-size:clamp(16px,1.9vw,21px); line-height:1.5; color:var(--luzblanca);
}
@media (max-width:820px){
  .cab{ grid-template-columns:auto minmax(0,1fr); }
  .cab .ficha{ grid-column:1 / -1; text-align:left; padding-bottom:0; }
  .cab .intro{ grid-column:1 / -1; }
}

/* Collage: fotogramas sueltos sobre la mesa de luz. */
.collage{ position:relative; height:clamp(340px,52vh,560px); }
.capa{
  position:absolute; overflow:hidden; background:var(--fondo2); cursor:zoom-in;
  /* El filo claro es el borde del fotograma recortado. */
  border:1px solid rgba(242,237,228,.16);
  box-shadow:var(--sombra);
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--curva), transform .9s var(--curva),
             box-shadow .4s, border-color .4s;
}
.capa.dentro{ opacity:1; transform:none; }
.capa img{
  width:100%; height:100%; object-fit:cover;
  -webkit-clip-path:inset(0 0 100% 0);
  clip-path:inset(0 0 100% 0);
  /* Un punto por debajo hasta que se pasa por encima: la mesa esta a media luz. */
  filter:brightness(.86) saturate(.94);
  transition:-webkit-clip-path 1.05s var(--curva) .12s, clip-path 1.05s var(--curva) .12s, transform 1.1s var(--curva), filter .5s;
}
.capa.dentro img{ -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); }
.capa:hover, .capa:focus-visible{
  box-shadow:var(--sombra-alta); border-color:var(--ambar); z-index:5;
}
.capa:hover img{ transform:scale(1.04); filter:none; }
.capa figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; gap:10px; padding:10px 12px;
  font-family:var(--display); font-weight:500; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--luzblanca);
  background:linear-gradient(0deg,rgba(9,8,7,.92),transparent);
  opacity:0; transition:opacity .35s;
}
.capa:hover figcaption, .capa:focus-visible figcaption{ opacity:1; }
/* El numero de fotograma, en el ambar impreso al canto del negativo. */
.capa figcaption b{ font-weight:500; color:var(--ambar-claro); }

.collage--rejilla{
  height:auto; display:grid; gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(160px,20vw,260px),1fr));
}
.collage--rejilla .capa{
  position:relative; inset:auto; width:auto; height:clamp(200px,26vh,300px);
}
@media (max-width:760px){
  .collage{ height:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .capa{ position:relative !important; inset:auto !important;
         width:auto !important; height:clamp(150px,42vw,220px) !important; }
  .capa figcaption{ opacity:1; }
  .capa img{ filter:none; }
}

/* ---------- en preparacion --------------------------------------------- */
.proximas{
  position:relative; z-index:1; padding:clamp(60px,9vw,120px) var(--margen);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(14px,2vw,24px); border-bottom:1px solid var(--filete);
}
.proximas > .etq{ grid-column:1 / -1; margin-bottom:-8px; }
.futura{
  border:1px dashed var(--filete2); padding:clamp(24px,3.2vw,38px);
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .35s, background-color .35s;
}
.futura:hover{ border-color:var(--ambar); background:rgba(217,130,43,.06); }
.futura h3{
  font-family:var(--display); font-weight:800; margin:0;
  font-size:clamp(22px,2.8vw,32px); letter-spacing:-.025em;
}
.futura p{ margin:0; color:var(--gris); font-size:16px; }
.futura .sello{
  align-self:flex-start; margin-top:auto; padding-top:14px;
  font-family:var(--display); font-weight:500; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ambar);
}

/* ---------- bloques de texto ------------------------------------------- */
.ediciones, .encargos, .diario{
  position:relative; z-index:1;
  padding:clamp(66px,10vw,130px) var(--margen);
  border-bottom:1px solid var(--filete);
}
/* El "> h2" es a proposito: sin el, un h2 dentro de la rejilla de servicios
   heredaba el tamano de titular y reventaba su columna. */
.ediciones > h2, .encargos > h2, .diario > h2{
  font-family:var(--display); font-weight:800; margin:14px 0 0;
  font-size:clamp(32px,5.2vw,74px); line-height:.94; letter-spacing:-.04em;
  max-width:16ch;
}
.ediciones__intro{ margin:18px 0 0; max-width:52ch; color:var(--gris); }

.oferta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px; background:var(--filete); border:1px solid var(--filete);
  margin-top:clamp(32px,4.6vw,58px);
}
.oferta article{
  background:var(--fondo); padding:clamp(24px,3vw,34px);
  display:flex; flex-direction:column; gap:12px; transition:background-color .35s;
}
.oferta article:hover{ background:var(--fondo2); }
.oferta h3{
  font-family:var(--display); font-weight:800; margin:0;
  font-size:clamp(19px,2.2vw,25px); letter-spacing:-.02em;
}
.oferta p{ margin:0; color:var(--gris); font-size:15.5px; }
.oferta ul{
  margin:auto 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--display); font-weight:500; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--luzblanca);
}
.oferta li{
  display:flex; justify-content:space-between; gap:12px;
  border-top:1px solid var(--filete); padding-top:6px;
}
.oferta li span{ color:var(--ambar); font-variant-numeric:tabular-nums; }

.servicios{
  list-style:none; margin:clamp(32px,4.6vw,58px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:var(--filete); border:1px solid var(--filete);
}
.servicios li{
  background:var(--fondo); padding:clamp(24px,3vw,34px);
  display:flex; flex-direction:column; gap:8px;
}
.servicios .n{
  font-family:var(--display); font-weight:800; font-size:11px;
  color:var(--ambar); font-variant-numeric:tabular-nums; margin:0;
}
.servicios h2, .servicios h3{
  font-family:var(--display); font-weight:800; margin:0;
  font-size:clamp(19px,2.2vw,24px); letter-spacing:-.02em;
}
.servicios .desc{ margin:0; color:var(--gris); font-size:15.5px; }
.servicios .estado{
  align-self:flex-start; margin-top:auto; padding-top:12px;
  font-family:var(--display); font-weight:500; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ambar);
}

.entradas{
  list-style:none; margin:clamp(32px,4.6vw,58px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(20px,3vw,40px);
}
.entradas li{ border-top:1px solid var(--filete2); padding-top:16px; }
.entradas h3{
  font-family:var(--display); font-weight:800; margin:8px 0 6px;
  font-size:clamp(18px,2.1vw,23px); letter-spacing:-.02em;
}
.entradas p:last-child{ margin:0; color:var(--gris); font-size:16px; }

/* ---------- contacto --------------------------------------------------- */
/* El unico bloque en ambar: el final de la tira, donde va la etiqueta. */
.contacto{
  position:relative; z-index:1; background:var(--ambar); color:var(--fondo);
  padding:clamp(70px,11vw,150px) var(--margen) clamp(50px,7vw,90px);
}
.contacto .etq{ color:rgba(19,17,16,.62); }
.contacto h2{
  font-family:var(--display); font-weight:800; margin:16px 0 0;
  font-size:clamp(32px,6vw,86px); line-height:.92; letter-spacing:-.042em;
  max-width:15ch;
}
.contacto h2 i, .contacto h2 em{ font-style:italic; color:rgba(19,17,16,.6); }
.contacto__nota{ margin:20px 0 0; max-width:46ch; color:rgba(19,17,16,.74); }
.contacto .enlaces{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4vw,46px); }
.contacto .enlaces a{
  font-family:var(--display); font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:14px 26px; border:1px solid rgba(19,17,16,.34);
  transition:background-color .3s, color .3s, border-color .3s;
}
.contacto .enlaces a.principal{
  background:var(--fondo); color:var(--ambar-claro); border-color:var(--fondo);
}
.contacto .enlaces a:hover{
  background:var(--fondo); color:var(--ambar-claro); border-color:var(--fondo);
}
.pie{
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  border-top:1px solid rgba(19,17,16,.28);
  margin-top:clamp(44px,7vw,90px); padding-top:20px;
}
.pie a, .pie span{
  font-family:var(--display); font-weight:500; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(19,17,16,.66);
  text-decoration:none;
}
.pie a:hover{ color:var(--fondo); }

/* ---------- visor ------------------------------------------------------ */
/* Aqui si: la lamina sola sobre la mesa, a oscuras y a plena luz. */
.visor{
  position:fixed; top:0; right:0; bottom:0; left:0;
  inset:0; z-index:300; display:none;
  background:rgba(9,8,7,.97); -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.visor[open]{ display:grid; grid-template-rows:auto 1fr auto; }
.visor__barra, .visor__pie{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(20px,4vw,56px);
}
.visor__escena{ position:relative; min-height:0; }
/* La lamina se centra con inset+margin auto: un max-height en porcentaje no
   se resuelve contra un area de rejilla y la imagen se sale del marco. */
.visor__escena img{
  position:absolute; top:0; right:0; bottom:0; left:0;
  inset:0; margin:auto;
  max-width:100%; max-height:100%; width:auto; height:auto;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.visor button{
  -webkit-appearance:none; appearance:none; background:none; border:1px solid var(--filete2); cursor:pointer;
  font-family:var(--display); font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--luzblanca);
  padding:9px 16px; transition:background-color .25s, color .25s, border-color .25s;
}
.visor button:hover{ background:var(--luzblanca); color:var(--fondo); border-color:var(--luzblanca); }
.visor__acciones{ display:flex; align-items:center; gap:10px; }
.visor__comprar{
  font-family:var(--display); font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:9px 16px; background:var(--ambar); color:var(--fondo);
  border:1px solid var(--ambar); transition:background-color .25s, color .25s;
}
.visor__comprar:hover{ background:var(--ambar-claro); border-color:var(--ambar-claro); }
.visor__comprar[hidden]{ display:none; }
@media (max-width:560px){
  .visor__pie .etq{ display:none; }
  .visor button, .visor__comprar{ padding:9px 12px; font-size:10px; }
}

/* ---------- paginas sueltas (aviso legal, 404) ------------------------- */
.hoja{
  position:relative; z-index:1; max-width:74ch;
  margin:0 auto; padding:clamp(110px,16vh,180px) var(--margen) clamp(70px,10vw,130px);
}
.hoja h1{
  font-family:var(--display); font-weight:800; margin:14px 0 0;
  font-size:clamp(32px,5.2vw,68px); line-height:.94; letter-spacing:-.04em;
}
.hoja h2{
  font-family:var(--display); font-weight:800;
  margin:clamp(34px,4vw,52px) 0 10px; font-size:clamp(19px,2.2vw,25px);
  letter-spacing:-.02em;
}
.hoja p, .hoja li{ color:var(--gris); }
.hoja a{ color:var(--ambar-claro); }
.hoja .volver{
  display:inline-block; margin-top:clamp(34px,4vw,52px);
  font-family:var(--display); font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:4px; color:var(--luzblanca);
}

/* ==========================================================================
   PAGINAS PROPIAS
   Cada serie, el diario y las secciones tienen ahora su URL. Lo que sigue es
   lo que solo aparece fuera de la portada.
   ========================================================================== */

/* El H1 de la portada es la frase que la gente busca; el titular grande de
   debajo es el que da caracter. Uno manda en Google y el otro en la mirada. */
.portada__epi{
  font-family:var(--display); font-weight:500; font-size:clamp(11px,1.15vw,13px);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ambar);
  margin:0 0 clamp(18px,3vw,30px); max-width:46ch; line-height:1.5;
  opacity:0; animation:entra .8s .15s var(--curva) forwards;
}
.portada__display{
  font-family:var(--display); font-weight:800; margin:0;
  font-size:clamp(44px,10.6vw,158px); line-height:.86; letter-spacing:-.045em;
}
.portada__display span{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.portada__display span i{
  display:block; font-style:normal; transform:translateY(105%);
  animation:sube .95s var(--curva) forwards;
}
.portada__display span:nth-child(2) i{ animation-delay:.09s; }
.portada__display span:nth-child(3) i{ animation-delay:.18s; color:var(--ambar); }
.portada__display span:nth-child(n+4) i{ animation-delay:.27s; }

/* ---------- migas de pan ---------- */
.migas{
  position:relative; z-index:1;
  padding:clamp(84px,11vh,120px) var(--margen) 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--display); font-weight:500; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gris);
}
.migas a{ text-decoration:none; border-bottom:1px solid transparent; }
.migas a:hover{ color:var(--ambar-claro); border-bottom-color:var(--ambar); }
.migas i{ font-style:normal; color:var(--gris2); }
.migas span{ color:var(--luzblanca); }

/* Con migas encima, el capitulo ya no necesita separarse de la barra. */
.capitulo--sola{ min-height:0; padding-top:clamp(26px,4vh,44px); }
.capitulo--sola .cab h1{
  font-family:var(--display); font-weight:800; margin:0;
  font-size:clamp(36px,6.8vw,98px); line-height:.9; letter-spacing:-.042em;
}
.cab h2 a{ text-decoration:none; }
.cab h2 a:hover{ color:var(--ambar-claro); }

/* ---------- enlace a la pagina completa ---------- */
.mas{ margin:clamp(26px,4vw,44px) 0 0; }
.mas a, .mas__enlace{
  display:inline-block; text-decoration:none;
  font-family:var(--display); font-weight:500; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ambar-claro);
  border-bottom:1px solid var(--ambar); padding-bottom:5px;
  transition:color .3s, border-color .3s;
}
.mas a span{ color:var(--gris); letter-spacing:.1em; }
.mas a::after, .mas__enlace::after{ content:" \2192"; }
.mas a:hover, .mas__enlace:hover{ color:var(--luzblanca); border-color:var(--luzblanca); }

/* ---------- texto largo de una serie o un articulo ---------- */
.ensayo{
  position:relative; z-index:1;
  padding:clamp(56px,8vw,110px) var(--margen);
  border-top:1px solid var(--filete); border-bottom:1px solid var(--filete);
}
.ensayo__cuerpo{ max-width:66ch; }
.ensayo__cuerpo p{
  margin:0 0 1.1em; font-size:clamp(17px,1.9vw,20px); line-height:1.7;
  color:var(--luzblanca);
}
.ensayo__cuerpo p:first-child{ font-size:clamp(19px,2.2vw,24px); color:var(--luzblanca); }
.ensayo__cuerpo p:last-child{ margin-bottom:0; }

/* ---------- listados ---------- */
.listado{ position:relative; z-index:1; padding:clamp(56px,8vw,110px) var(--margen); }
.listado > .etq{ margin-bottom:clamp(20px,3vw,32px); }
.listado__laminas, .listado__series{
  list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,1.8vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,17vw,220px),1fr));
}
.listado__laminas button, .listado__series a{
  -webkit-appearance:none; appearance:none; background:none; border:0; padding:0;
  cursor:pointer; text-align:left; text-decoration:none; width:100%;
  display:flex; flex-direction:column; gap:6px; color:inherit;
}
.listado__laminas img, .listado__series img{
  width:100%; height:auto; aspect-ratio:240/176; object-fit:cover;
  border:1px solid var(--filete); background:var(--fondo2);
  filter:grayscale(1) brightness(.66); transition:filter .45s, border-color .3s;
}
.listado__laminas button:hover img, .listado__series a:hover img{
  filter:none; border-color:var(--ambar);
}
.listado__nombre{
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.015em;
  margin-top:4px;
}
.listado__meta{
  font-family:var(--display); font-weight:500; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ambar);
}
.listado__intro{ color:var(--gris); font-size:15px; line-height:1.5; }
.listado--series .listado__series{
  grid-template-columns:repeat(auto-fill,minmax(clamp(220px,26vw,330px),1fr));
}

/* ---------- otras series / seguir leyendo ---------- */
.otras{
  position:relative; z-index:1; padding:clamp(50px,7vw,96px) var(--margen);
  border-top:1px solid var(--filete);
}
.otras > .etq{ margin-bottom:clamp(18px,2.6vw,28px); }
.otras ul{
  list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(180px,20vw,260px),1fr));
}
.otras a{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  border:1px solid var(--filete); padding:14px; transition:border-color .3s, background-color .3s;
}
.otras a:hover{ border-color:var(--ambar); background:rgba(217,130,43,.05); }
.otras img{
  width:100%; height:auto; aspect-ratio:240/176; object-fit:cover;
  filter:grayscale(1) brightness(.7); transition:filter .45s;
}
.otras a:hover img{ filter:none; }
.otras__nombre{ font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.015em; }
.otras__meta{
  font-family:var(--display); font-weight:500; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gris);
}

/* ---------- indice del diario ---------- */
.entradas--indice{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.entradas--indice h2{
  font-family:var(--display); font-weight:800; margin:8px 0 6px;
  font-size:clamp(20px,2.4vw,27px); letter-spacing:-.025em;
}
.entradas--indice h2 a{ text-decoration:none; }
.entradas--indice h2 a:hover{ color:var(--ambar-claro); }
.entradas--indice p{ color:var(--gris); margin:0 0 12px; }
.entradas h3 a{ text-decoration:none; }
.entradas h3 a:hover{ color:var(--ambar-claro); }

/* ---------- articulo y paginas de texto ---------- */
.hoja--ancha{ max-width:none; padding-bottom:clamp(30px,4vw,50px); }
.hoja--ancha h1, .hoja h1{
  font-family:var(--display); font-weight:800; margin:14px 0 0;
  font-size:clamp(32px,5.4vw,74px); line-height:.94; letter-spacing:-.04em;
  max-width:18ch;
}
.hoja .entradilla{
  font-size:clamp(18px,2.1vw,23px); line-height:1.6; color:var(--luzblanca);
  max-width:52ch; margin:clamp(20px,3vw,32px) 0 0;
}
.hoja p{ max-width:66ch; }
.hoja .firma{
  font-family:var(--display); font-weight:500; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ambar);
  margin-top:clamp(30px,4vw,48px);
}
.ficha__datos{
  list-style:none; margin:clamp(30px,4vw,48px) 0 0; padding:0;
  display:grid; gap:0; max-width:52ch;
}
.ficha__datos li{
  display:flex; justify-content:space-between; gap:16px;
  padding:14px 0; border-top:1px solid var(--filete);
}
.ficha__datos span{
  font-family:var(--display); font-weight:500; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gris);
}
.ficha__datos a{ color:var(--ambar-claro); text-decoration:none; }
.ficha__datos a:hover{ text-decoration:underline; }

/* ---------- mapa del sitio en el pie ---------- */
.pie__mapa{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-top:clamp(34px,5vw,60px); padding-top:20px;
  border-top:1px solid rgba(19,17,16,.24);
}
.pie__mapa a{
  font-family:var(--display); font-weight:500; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:rgba(19,17,16,.66);
}
.pie__mapa a:hover{ color:var(--fondo); }