/* ═══════════════════════════════════════════════════════════════════
   OVELLIQ — capa de oficio
   Tailwind resuelve la retícula y el espaciado.
   Este archivo resuelve lo que Tailwind no debe resolver:
   material, máscara, ritmo y el eje variable de la tipografía.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --tinta:#0B0A09;
  --tinta-alta:#16130F;
  --hueso:#EDE3D4;
  --hueso-alto:#F5EDE1;
  --oro:#B4913F;
  --oro-claro:#D9BE86;
  --humo:#6E675E;

  /* escala fluida — cinco pasos, nada intermedio */
  --t-etiqueta: clamp(.5625rem, .5rem + .25vw, .6875rem);
  --t-voz:      clamp(1rem, .94rem + .3vw, 1.1875rem);
  --t-voz-g:    clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);
  --t-medio:    clamp(2.5rem, 1rem + 6vw, 7.5rem);
  /* la portada se mide contra las DOS dimensiones: nunca desborda el alto */
  --t-portada:  clamp(2.75rem, min(11.4vw, 15.5svh), 12.5rem);
  --t-gigante:  clamp(2.6rem, .6rem + 8.6vw, 9rem);

  /* pliegos verticales */
  --v-corto: clamp(4rem, 8vw, 7rem);
  --v-medio: clamp(7rem, 14vw, 13rem);
  --v-largo: clamp(10rem, 20vw, 18rem);

  --borde: clamp(1.25rem, 5vw, 5.5rem);

  --curva: cubic-bezier(.22,.61,.24,1);
  --curva-larga: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  overflow-x:hidden;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
}

/* grano de papel sobre todo el documento ─────────────────────────── */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23g)'/></svg>");
  background-size:180px 180px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.salto-enlace{
  position:fixed; top:.5rem; left:.5rem; z-index:80;
  transform:translateY(-200%);
  background:var(--oro); color:var(--tinta);
  padding:.6rem 1rem; font-size:var(--t-etiqueta);
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
}
.salto-enlace:focus{ transform:translateY(0) }

:where(a,button,[tabindex]):focus-visible{
  outline:1px solid var(--oro); outline-offset:6px;
}

/* ── filete de progreso ───────────────────────────────────────────── */
.progreso{ position:fixed; inset:0 0 auto 0; height:1px; z-index:70; background:transparent }
.progreso i{
  display:block; height:100%; width:100%;
  background:var(--oro); transform:scaleX(0); transform-origin:0 50%;
}

/* ── cabecera ─────────────────────────────────────────────────────── */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:50;
  mix-blend-mode:difference; color:#fff;
}
.monograma{ display:block; color:currentColor; transition:transform .6s var(--curva-larga) }
.monograma:hover{ transform:rotate(-8deg) }

.enlace-indice{
  display:inline-flex; align-items:baseline; gap:.5em;
  color:currentColor; text-decoration:none; position:relative;
}
.enlace-indice i{ font-style:normal; opacity:.5; font-variant-numeric:tabular-nums }
.enlace-indice::after{
  content:""; position:absolute; left:0; bottom:-.5em; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .5s var(--curva-larga);
}
.enlace-indice:hover::after,
.enlace-indice:focus-visible::after{ transform:scaleX(1); transform-origin:0 50% }

/* ── tipografía: etiquetas, voz, titulares ────────────────────────── */
.etiqueta{
  font-size:var(--t-etiqueta);
  font-variation-settings:'wdth' 112,'wght' 500;
  letter-spacing:.3em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.9em;
  color:inherit;
}
.etiqueta--oro{ color:var(--oro-claro) }
.etiqueta--tinta{ color:var(--tinta) }
.etiqueta--humo{ color:var(--humo); letter-spacing:.22em }

.filete{
  display:inline-block; width:clamp(1.5rem,4vw,3.5rem); height:1px;
  background:currentColor; opacity:.55; vertical-align:middle;
}
.filete--oro{ background:var(--oro); opacity:1; width:2.5rem; margin-right:.9em }
.filete--tinta{ background:var(--tinta) }

.voz{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:var(--t-voz); font-weight:300; line-height:1.55;
  letter-spacing:.012em;
}
.voz--grande{ font-size:var(--t-voz-g); line-height:1.25; font-style:italic }
.voz--pie{ font-size:var(--t-voz); font-style:italic; opacity:.6 }
.voz em{ font-style:italic; color:var(--oro) }

.titular{
  font-family:Archivo,system-ui,sans-serif;
  font-variation-settings:'wdth' 66,'wght' 800;
  text-transform:uppercase;
  line-height:.78; letter-spacing:-.015em;
  margin:0;
}
.titular--portada{ font-size:var(--t-portada) }
.titular--medio  { font-size:var(--t-medio) }
.titular--gigante{ font-size:var(--t-gigante); line-height:.8 }

/* La máscara necesita aire: con interlineado .78 los remates y los
   acentos (É, Á, Ó) sobresalen de la caja de línea y se cortarían.
   El margen negativo devuelve el espacio que el relleno añade. */
.titular .l{ display:block; padding-block:.18em; margin-block:-.18em }

/* palabra vacía: contorno de oro, sin relleno */
.vacia{
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:1px var(--oro);
  paint-order:stroke fill;
}

/* enlaces de texto ────────────────────────────────────────────────── */
.enlace{
  color:inherit; text-decoration:none;
  background-image:linear-gradient(var(--oro),var(--oro));
  background-size:100% 1px; background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .45s var(--curva-larga);
}
.enlace:hover{ background-size:0% 1px; background-position:100% 100% }

/* ═══ PLIEGOS ═════════════════════════════════════════════════════ */
.pliego{
  position:relative;
  padding:var(--v-largo) var(--borde);
}
.pliego--tinta{ background:var(--tinta); color:var(--hueso) }
.pliego--papel{ background:var(--hueso); color:var(--tinta) }
.pliego--papel .voz em{ color:#8A6E28 }

/* ── PORTADA ──────────────────────────────────────────────────────── */
.portada{
  min-height:100svh;
  display:flex; align-items:flex-end;   /* el aire vive arriba, no abajo */
  padding-top:calc(5rem + 5vh);
  padding-bottom:clamp(3rem,5vw,5rem);
  overflow:hidden;
}
.portada__texto{ position:relative; z-index:2; width:100% }

.titular--portada .l--1{ margin-left:-.045em }
.titular--portada .l--2{ margin-left:clamp(0px,14vw,17rem) }
.titular--portada .l--3{ text-align:right; margin-right:-.03em }

.portada__pie{
  margin-top:clamp(1.75rem,4vw,4rem);
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:2rem;
}

/* Plancha vertical pegada al borde derecho, en el tercio superior:
   deja libre la diagonal por donde baja el titular y muere justo
   antes de que RUIDO cruce a sangre por la derecha. */
.portada__plancha{
  position:absolute; z-index:1; margin:0;
  top:calc(4rem + 6vh); right:0;
  width:clamp(130px,16vw,240px);
  height:clamp(180px,38svh,340px);
  opacity:.42;
}
@media (max-width:640px){ .portada__plancha{ opacity:.16 } }

.cue{ display:inline-flex; align-items:center; gap:1rem; color:inherit; text-decoration:none }
.cue__linea{
  display:block; width:4.5rem; height:1px; background:var(--oro);
  transform-origin:0 50%; animation:cue 2.6s var(--curva) infinite;
}
@keyframes cue{
  0%,100%{ transform:scaleX(.35); opacity:.4 }
  50%    { transform:scaleX(1);   opacity:1 }
}

/* ── CINTA (marquesina) ───────────────────────────────────────────── */
.cinta{
  background:var(--tinta); color:var(--oro-claro);
  border-block:1px solid rgba(180,145,63,.28);
  padding:clamp(.9rem,2vw,1.6rem) 0;
  overflow:hidden; white-space:nowrap;
}
.cinta__pista{ display:flex; width:max-content; will-change:transform }
.cinta__grupo{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.3rem,3.6vw,2.6rem);
  font-weight:300; padding-right:1.5rem;
}
.cinta__grupo em{ font-style:italic }
.cinta__grupo b{ font-weight:400; color:var(--oro); opacity:.45; margin:0 .6em }

/* ── DIAGNÓSTICO ──────────────────────────────────────────────────── */
.diagnostico{ overflow:hidden }
.cifra-sangrada{
  position:absolute; left:-.09em; top:calc(var(--v-medio) * .35);
  font-variation-settings:'wdth' 62,'wght' 800;
  font-size:clamp(11rem,32vw,34rem); line-height:.7;
  color:var(--tinta); opacity:.05; pointer-events:none; user-select:none;
}
.etiqueta-vertical{
  position:absolute; right:calc(var(--borde) * .35); top:var(--v-medio);
  writing-mode:vertical-rl;
  font-size:var(--t-etiqueta); letter-spacing:.42em; text-transform:uppercase;
  color:var(--tinta); opacity:.4;
}
/* en móvil la columna de texto ocupa el ancho completo y la chocaría */
@media (max-width:899px){ .etiqueta-vertical{ display:none } }
.diagnostico__cuerpo{
  position:relative; z-index:1;
  margin-left:auto; width:min(100%,68ch);
}
@media (min-width:1024px){ .diagnostico__cuerpo{ width:70%; margin-right:4% } }

.diagnostico__notas{
  margin-top:clamp(2.5rem,6vw,4.5rem);
  display:grid; gap:1.6rem;
  max-width:46ch; font-size:.95rem; line-height:1.75;
  color:#3A342C;
  font-variation-settings:'wdth' 100,'wght' 380;
}
.diagnostico__notas .nota{
  display:flex; align-items:baseline;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:1.15rem; color:var(--tinta); padding-top:.8rem;
}

/* ── DISCIPLINAS · índice de imprenta ─────────────────────────────── */
.disciplinas{ padding-inline:0 }
.disciplinas__encabezado{ padding-inline:var(--borde); margin-bottom:clamp(3rem,7vw,6rem) }

.indice{ list-style:none; margin:0; padding:0 }
.indice__fila{
  position:relative;
  border-top:1px solid rgba(237,227,212,.16);
}
.indice__fila:last-child{ border-bottom:1px solid rgba(237,227,212,.16) }

.indice__enlace{
  position:relative; z-index:2; display:grid; gap:.35rem 2rem;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  padding:clamp(1.6rem,3.6vw,2.9rem) var(--borde);
  color:inherit; text-decoration:none;
  transition:padding-left .7s var(--curva-larga);
}
@media (min-width:900px){
  .indice__enlace{
    grid-template-columns:5rem min(36vw,30rem) 1fr;
    align-items:center;
  }
}
.indice__fila:hover .indice__enlace,
.indice__fila.is-activa .indice__enlace{ padding-left:calc(var(--borde) + 1.5rem) }

.indice__num{
  font-size:var(--t-etiqueta); letter-spacing:.2em;
  color:var(--oro); font-variant-numeric:tabular-nums;
}
.indice__titulo{
  margin:0;
  font-variation-settings:'wdth' 74,'wght' 700;
  font-size:clamp(1.9rem,4.6vw,3.6rem); line-height:.9;
  text-transform:uppercase; letter-spacing:-.01em;
  transition:font-variation-settings .7s var(--curva-larga);
}
.indice__fila:hover .indice__titulo,
.indice__fila.is-activa .indice__titulo{ font-variation-settings:'wdth' 88,'wght' 700 }

.indice__nota{
  margin:0; max-width:34ch;
  font-family:"Cormorant Garamond",serif; font-size:1.05rem;
  font-style:italic; line-height:1.5; color:rgba(237,227,212,.55);
}

.indice__filete{
  position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--oro); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .8s var(--curva-larga);
}
.indice__fila:hover .indice__filete,
.indice__fila.is-activa .indice__filete{ transform:scaleX(1) }

/* la plancha entra por el borde derecho y se superpone al renglón anterior */
.indice__plancha{
  position:absolute; z-index:1; margin:0; pointer-events:none;
  right:var(--borde); top:50%;
  width:clamp(160px,17vw,255px); aspect-ratio:4/5;
  transform:translate(14%,-58%) scale(.94);
  opacity:0; filter:saturate(.6);
  transition:opacity .7s var(--curva-larga), transform .9s var(--curva-larga);
}
.indice__fila:hover .indice__plancha,
.indice__fila.is-activa .indice__plancha{
  opacity:1; transform:translate(0,-58%) scale(1);
}
@media (max-width:899px){ .indice__plancha{ display:none } }

/* ── MÉTODO · diagonal ────────────────────────────────────────────── */
.metodo{ overflow:hidden }
.metodo__diagonal{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
}
.metodo__diagonal line{
  stroke:var(--oro); stroke-width:1;
  stroke-dasharray:1600; stroke-dashoffset:1600;
  transition:stroke-dashoffset 2.4s var(--curva-larga);
}
.metodo.is-in .metodo__diagonal line{ stroke-dashoffset:0 }

.metodo__titulo{ position:relative; z-index:1; margin-bottom:clamp(3rem,8vw,7rem) }
.metodo__lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(3rem,7vw,6rem);
  position:relative; z-index:1;
}
.paso{ max-width:32ch }
.paso__num{
  display:block; font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:1.1rem; color:var(--oro); letter-spacing:.2em; margin-bottom:.7rem;
}
.paso__titulo{
  margin:0 0 .6rem;
  font-variation-settings:'wdth' 72,'wght' 700;
  font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:.92;
  text-transform:uppercase;
}
.paso p{ margin:0; font-size:.95rem; line-height:1.7; color:#413A31;
  font-variation-settings:'wdth' 100,'wght' 380 }

@media (min-width:900px){
  .paso--1{ margin-left:0 }
  .paso--2{ margin-left:16% }
  .paso--3{ margin-left:32% }
  .paso--4{ margin-left:48% }
}

/* ── CONTRASTE 38 / 62 ────────────────────────────────────────────── */
.contraste{
  display:grid; gap:clamp(4rem,9vw,7rem);
  align-items:center;
}
@media (min-width:900px){
  .contraste{ grid-template-columns:38fr 62fr; gap:clamp(3rem,6vw,6rem) }
}
/* overflow oculto: en pantallas estrechas las palabras del borde se
   cortan, que es exactamente lo que le pasa al ruido */
.ruido{ position:relative; height:clamp(300px,42vw,420px); overflow:hidden }
.ruido span{
  position:absolute; left:var(--x); top:var(--y);
  opacity:var(--o); rotate:var(--r);
  font-size:clamp(.7rem,1.5vw,1rem);
  font-variation-settings:'wdth' 100,'wght' 400;
  letter-spacing:.04em; white-space:nowrap;
  color:var(--hueso);
}
.contraste__presencia .titular .l:nth-child(2){ margin-left:.7em }
.contraste__presencia .titular .l:nth-child(3){ margin-left:1.4em }

/* ── CITA ─────────────────────────────────────────────────────────── */
.cita{
  position:relative; overflow:hidden;
  padding-block:var(--v-largo);
  display:grid; place-items:center; text-align:center;
}
.cita__plancha{
  position:absolute; margin:0; z-index:0;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(74vw,880px); aspect-ratio:16/9;
  opacity:.3;
}
.cita__texto{ position:relative; z-index:1; margin:0; max-width:min(92vw,60rem) }
.cita .titular .l:nth-child(1){ margin-right:1.2em }
.cita .titular .l:nth-child(3){ margin-left:1.4em }
.cita .titular .l:nth-child(4){ margin-right:.6em }

/* ── COLOFÓN ──────────────────────────────────────────────────────── */
.colofon{ padding-bottom:var(--v-corto) }
.colofon__rejilla{
  display:grid; gap:clamp(3rem,7vw,5rem);
}
@media (min-width:900px){
  .colofon__rejilla{
    grid-template-columns:1fr auto;
    grid-template-areas:"decir sello" "datos sello";
    align-items:start; column-gap:clamp(3rem,8vw,8rem);
  }
  .colofon__decir{ grid-area:decir }
  .colofon__sello{ grid-area:sello; align-self:center }
  .colofon__datos{ grid-area:datos; margin-top:clamp(3rem,6vw,5rem) }
}

.sello{
  position:relative; display:grid; place-items:center;
  width:clamp(148px,18vw,210px); aspect-ratio:1;
  color:var(--tinta); text-decoration:none;
}
.sello__anillo{ position:absolute; inset:0; width:100%; height:100%;
  animation:gira 22s linear infinite }
.sello__anillo text{
  font-size:11.4px; letter-spacing:2.9px; fill:var(--tinta);
  font-variation-settings:'wdth' 108,'wght' 500; text-transform:uppercase;
}
.sello__centro{
  display:grid; place-items:center;
  width:58%; aspect-ratio:1; border-radius:50%;
  background:var(--tinta); color:var(--hueso);
  transition:transform .7s var(--curva-larga);
}
.sello:hover .sello__centro{ transform:scale(1.09) }
.sello:hover .sello__anillo{ animation-duration:9s }
@keyframes gira{ to{ transform:rotate(360deg) } }

.colofon__datos{ margin:0; display:grid; gap:1.1rem; max-width:38rem }
@media (min-width:560px){ .colofon__datos{ grid-template-columns:1fr 1fr; gap:1.4rem 3rem } }
.colofon__datos div{
  display:grid; gap:.35rem;
  padding-top:.9rem; border-top:1px solid rgba(11,10,9,.18);
}
.colofon__datos dt{
  font-size:var(--t-etiqueta); letter-spacing:.28em; text-transform:uppercase;
  color:rgba(11,10,9,.5);
}
.colofon__datos dd{ margin:0; font-size:1.05rem; font-variation-settings:'wdth' 100,'wght' 420 }

/* ── PIE ──────────────────────────────────────────────────────────── */
.pie{
  background:var(--tinta); color:var(--hueso);
  padding:var(--v-corto) var(--borde) 0;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.pie__legal{
  order:1;
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem;
  justify-content:space-between;
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
}
.pie__marca{
  margin:0 0 -.19em; padding:0;
  font-variation-settings:'wdth' 92,'wght' 700;
  font-size:clamp(3.6rem,17.6vw,17rem); line-height:.72;
  letter-spacing:.02em; text-align:center; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(180,145,63,.55);
  order:2;
}

/* ═══ PLANCHAS FOTOGRÁFICAS ═══════════════════════════════════════
   Si la fotografía existe en /assets/img se muestra con virado y
   grano. Si no existe, la plancha no se rompe: queda el material
   y la ficha de dirección impresa en oro.
   ══════════════════════════════════════════════════════════════════ */
.plancha{
  position:relative; width:100%; height:100%; overflow:hidden;
  isolation:isolate;
}
.plancha img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.08) brightness(.94);
  transform:scale(1.06);
  transition:transform 1.4s var(--curva-larga), filter .8s var(--curva);
}
.plancha::after{ /* virado */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  mix-blend-mode:color;
}
.plancha--tinta::after{ background:#2A2318 }
.plancha--papel::after{ background:#7A6A52; opacity:.7 }

.indice__fila:hover .plancha img,
.cita:hover .plancha img{ transform:scale(1) }

/* estado sin fotografía */
.plancha--sin-foto{
  border:1px solid currentColor;
  display:grid; align-content:end; gap:.8rem;
  padding:clamp(.9rem,1.6vw,1.4rem);
  color:var(--oro);
}
.plancha--sin-foto::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    repeating-linear-gradient(58deg, rgba(180,145,63,.10) 0 1px, transparent 1px 9px),
    var(--tinta-alta);
}
.plancha--papel.plancha--sin-foto::before{
  background:
    repeating-linear-gradient(58deg, rgba(11,10,9,.07) 0 1px, transparent 1px 9px),
    var(--hueso-alto);
}
.plancha--papel.plancha--sin-foto{ color:#7A5F20 }
.plancha--sin-foto::after{ display:none }
.plancha__ficha{
  position:relative; z-index:1;
  font-size:.5625rem; line-height:1.6; letter-spacing:.06em;
  text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 400;
}

/* ═══ REVELADOS ═══════════════════════════════════════════════════ */

/* Todo estado de partida vive detrás de .js: sin JavaScript la página
   se sirve completa y estática en lugar de quedarse en blanco. */

/* bloque: máscara desde abajo + desplazamiento corto */
.js [data-rev]{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--curva-larga), transform 1.1s var(--curva-larga);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js [data-rev].is-in{ opacity:1; transform:none }

/* titular: cada línea sube desde su propia máscara */
[data-lineas] .l{ overflow:hidden }
.js [data-lineas] .l > span{
  display:block; transform:translateY(105%);
  transition:transform 1.15s var(--curva-larga);
  transition-delay:calc(var(--i,0) * 105ms);
}
.js [data-lineas].is-in .l > span{ transform:translateY(0) }

/* planchas: cortina */
.js .plancha{
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.3s var(--curva-larga);
}
.js .is-in .plancha,
.js .plancha.is-in{ clip-path:inset(0 0 0 0) }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-rev],[data-lineas] .l > span{ opacity:1 !important; transform:none !important }
  .plancha{ clip-path:none !important }
  .cinta__pista{ transform:none !important }
}