/* colores de temporada FW27-28 (Coloro): Peaceful Lilac 135-78-11, Deep Green 082-30-14.
   Acentos, nunca superficie dominante: el burdeos manda. */
:root{--lila:#D2B9DA; --lila-tenue:#ECE0EF; --verde:#294E3F}

/* Burdeos (PANTONE 505 C) como superficie dominante */
.portada{background:var(--bordeaux)}
.portada .etiqueta{color:color-mix(in srgb,var(--crema) 68%,transparent)}
.lista-band{background:var(--bordeaux)}
.campo[data-fondo="espresso"]{background:var(--bordeaux)}

/* tipografia de texto: geometrica humanista, ligera */
:root{--sans:Jost,"Avenir Next","Century Gothic",system-ui,sans-serif}
body{font-family:var(--sans);font-weight:400;letter-spacing:.005em}
.lectura p,.lectura li{font-size:1.04rem;line-height:1.78}
.entradilla{font-weight:300}
.entrada .tit{font-weight:500}
.menu a,.etiqueta,.mini,.aviso-form{font-weight:400}
strong{font-weight:500}

.pilar[data-fondo="crudo"]{background:var(--papel-alto);color:var(--tinta)}
.pilar[data-fondo="crudo"] p{color:var(--tinta-2)}
.pilar[data-fondo="lila"]{background:var(--lila);color:var(--espresso)}
.pilar[data-fondo="lila"] p{color:color-mix(in srgb,var(--espresso) 76%,transparent)}
.pilar[data-fondo="lila"] .n{color:color-mix(in srgb,var(--espresso) 72%,transparent)}
.pilar[data-fondo="verde"]{background:var(--verde);color:var(--crema)}
.pilar[data-fondo="verde"] p{color:color-mix(in srgb,var(--crema) 80%,transparent)}
.pilar[data-fondo="verde"] .n{color:color-mix(in srgb,var(--crema) 62%,transparent)}

/* popup de lista — el perro entero es la caja */
.pop-defs{position:absolute;width:0;height:0;overflow:hidden}
.pop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:2vh 2vw}
.pop[hidden]{display:none}
.pop-fondo{position:absolute;inset:0;background:rgba(20,14,12,.86)}
.pop-marco{position:relative;
  filter:drop-shadow(2px 0 0 #E8DFCC) drop-shadow(-2px 0 0 #E8DFCC)
         drop-shadow(0 2px 0 #E8DFCC) drop-shadow(0 -2px 0 #E8DFCC)
         drop-shadow(0 28px 56px rgba(10,6,5,.55))}
.pop-perro{position:relative;width:min(1340px,96vw,(100svh - 6vh)*1.845);aspect-ratio:100/54.2;
  -webkit-clip-path:url(#pg-teckel);clip-path:url(#pg-teckel);
  animation:pop-entra 1.05s cubic-bezier(.16,.84,.28,1)}
@keyframes pop-entra{
  from{transform:translateX(-6%) scale(.965);opacity:0}
  45%{opacity:1}
  to{transform:none;opacity:1}}
.pop-cuerpo,.pop-x{animation:pop-texto .75s .38s both cubic-bezier(.2,.8,.25,1)}
.pop-ojo{animation:pop-ojo .5s .78s both}
@keyframes pop-texto{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop-ojo{from{opacity:0;transform:scale(.2)}to{opacity:.92;transform:none}}
@media(prefers-reduced-motion:reduce){.pop-perro{animation:none}}

/* el pelaje: toda la paleta de la casa, en bandas */
.pop-bandas{position:absolute;inset:0;overflow:hidden}
.pop-bandas i{position:absolute;top:-12%;height:124%;transform:skewX(-9deg);display:block}
.pop-b1{left:-10%; width:32%;  background:var(--verde)}
.pop-b2{left:21%;  width:9%;   background:var(--terra)}
.pop-b3{left:29%;  width:5%;   background:var(--pistacho)}
.pop-b4{left:33%;  width:5.5%; background:var(--lila)}
.pop-b5{left:37.5%;width:42.5%;background:var(--bordeaux)}
.pop-b6{left:79.5%;width:4.5%; background:var(--espresso)}   /* el collar */
.pop-b7{left:83.5%;width:26%;  background:var(--crema)}
.pop-ojo{position:absolute;left:90.4%;top:22.4%;width:1%;aspect-ratio:1;border-radius:50%;
  background:var(--espresso);opacity:.92;z-index:2}

.pop-cuerpo{position:absolute;left:40%;top:39.5%;width:40%;height:34%;z-index:2;
  display:grid;grid-template-columns:1.08fr minmax(0,285px);gap:clamp(20px,2.8vw,50px);align-items:center}
.pop-cuerpo .etiqueta{color:color-mix(in srgb,var(--crema) 66%,transparent);margin:0 0 .5rem}
.pop-cuerpo h2{font-family:var(--serif);font-variation-settings:var(--wonk);font-weight:300;
  color:var(--crema);margin:0;font-size:clamp(1.5rem,2.9vw,2.7rem);line-height:1.02;letter-spacing:-.02em}
.pop-p{color:color-mix(in srgb,var(--crema) 80%,transparent);margin:.7rem 0 0;max-width:34ch;
  font-size:clamp(.8rem,1.05vw,.95rem);line-height:1.5}
.pop-form{display:flex;flex-direction:column;gap:.3rem}
.pop-form[hidden]{display:none}
.pop-form input[type=email],.pop-form input[type=text]{font:inherit;font-size:.95rem;color:var(--crema);
  background:transparent;border:0;border-bottom:1.5px solid color-mix(in srgb,var(--crema) 34%,transparent);
  padding:.55rem .1rem}
.pop-form input::placeholder{color:color-mix(in srgb,var(--crema) 52%,transparent)}
.pop-form input:focus{outline:none;border-bottom-color:var(--lila)}
.pop-form button{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--crema);color:var(--espresso);border:0;padding:.85rem 1.2rem;margin-top:.7rem;cursor:pointer}
.pop-form button:hover{background:var(--lila)}
.pop-ok,.pop-err{font-size:.9rem;line-height:1.5;margin:.4rem 0 0;color:var(--crema)}
.pop-ok a{color:inherit}
.pop-err{color:var(--lila)}
.pop-legal{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--crema) 52%,transparent);margin:.7rem 0 0}
.pop-legal a{color:inherit}
.pop-x{position:absolute;left:79.9%;top:25.5%;z-index:3;width:2.1rem;height:2.1rem;border-radius:50%;
  background:transparent;border:0;color:color-mix(in srgb,var(--crema) 78%,transparent);
  font-size:1.35rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:color .18s}
.pop-x:hover{color:var(--crema)}

/* movil: banda inferior; el perro se queda como sello */
@media(max-width:1000px){
  .pop{align-items:flex-end;padding:0}
  .pop-marco{filter:none;width:100%}
  .pop-perro{width:100%;aspect-ratio:auto;-webkit-clip-path:none;clip-path:none;
    background:var(--papel-alto);border-top:1.5px solid var(--tinta);filter:none;
    padding:1.35rem clamp(16px,5vw,26px) 1.5rem;animation:pop-sube .75s cubic-bezier(.16,.84,.28,1)}
  @keyframes pop-sube{from{transform:translateY(100%)}to{transform:none}}
  .pop-bandas{position:relative;inset:auto;width:178px;aspect-ratio:100/54.2;margin:0 0 .9rem;
    -webkit-clip-path:url(#pg-teckel);clip-path:url(#pg-teckel)}
  .pop-ojo{display:none}
  .pop-cuerpo{position:static;width:auto;height:auto;display:block}
  .pop-cuerpo .etiqueta{color:var(--apagado)}
  .pop-cuerpo h2{color:var(--tinta);font-size:clamp(1.5rem,7vw,2rem)}
  .pop-p{color:var(--tinta-2);margin:.55rem 0 1.1rem;max-width:46ch;font-size:.92rem}
  .pop-form input[type=email],.pop-form input[type=text]{color:var(--tinta);border-bottom-color:var(--linea)}
  .pop-form input::placeholder{color:var(--apagado)}
  .pop-form input:focus{border-bottom-color:var(--terra)}
  .pop-form button{background:var(--bordeaux);color:var(--crema);margin-top:.9rem;padding:.95rem 1.2rem}
  .pop-form button:hover{background:var(--terra)}
  .pop-ok,.pop-err{color:var(--tinta)}
  .pop-err{color:var(--bordeaux)}
  .pop-legal{color:var(--apagado)}
  .pop-x{position:absolute;left:auto;right:10px;top:8px;color:var(--tinta);width:2.4rem;height:2.4rem;font-size:1.5rem}
  .pop-x:hover{color:var(--terra)}
}


/* menu: misma letra que el texto, caja normal */
.menu a{font-family:var(--sans);font-size:.95rem;font-weight:400;
  letter-spacing:.008em;text-transform:none;color:var(--tinta-2);
  padding:4px 0 3px;border-bottom:1.5px solid transparent}
.menu a:hover{color:var(--tinta);border-bottom-color:var(--terra)}
.menu a[aria-current]{color:var(--terra);border-bottom-color:var(--terra)}
.menu{gap:clamp(14px,2.2vw,30px)}
@media(max-width:1180px){.menu a{font-size:.9rem}}

/* logotipo */
.marca{font-family:var(--serif);
  font-style:normal;font-weight:560;font-variation-settings:var(--wonk);
  letter-spacing:-.005em;line-height:.95}
.barra .marca--barra{font-size:clamp(1.95rem,3vw,2.5rem)}
.marca--pie{font-size:1.95rem}
.panel-alto .marca{font-style:normal}
.marca .lema{display:block;font-family:var(--sans);font-size:.625rem;
  letter-spacing:.34em;text-transform:lowercase;color:var(--apagado);
  margin-top:.5rem;font-weight:400;white-space:nowrap}
.barra .col{min-height:78px}
@media(max-width:820px){
  .barra .marca--barra{font-size:1.75rem}
  .marca .lema{font-size:.5rem;letter-spacing:.2em}
}
@media(max-width:420px){.marca .lema{white-space:normal}}

/* redes en el pie */
.pie-redes{display:flex;gap:1.05rem;align-items:center;margin-top:1.2rem}
.pie-redes a{display:block;line-height:0;color:var(--apagado);
  transition:color .2s,transform .28s cubic-bezier(.2,.8,.25,1)}
.pie-redes a:hover{color:var(--terra);transform:translateY(-2px)}
.pie-redes a:focus-visible{outline:2px solid var(--terra);outline-offset:4px;border-radius:3px}
.pie-redes .red-i{display:block;width:20px;height:20px}
@media(prefers-reduced-motion:reduce){.pie-redes a{transition:color .2s}}

/* menu movil: el cocker sustituye a la hamburguesa */
.menu-btn{display:none;background:transparent;color:var(--tinta);cursor:pointer;
  border:0;padding:.3rem .4rem;line-height:0;-webkit-tap-highlight-color:transparent}
.menu-btn .pg-cocker{display:block;width:62px;height:auto;
  transition:color .18s,transform .3s cubic-bezier(.2,.8,.25,1)}
.menu-btn:hover .pg-cocker,.menu-btn[aria-expanded="true"] .pg-cocker{color:var(--terra)}
.menu-btn:focus-visible{outline:2px solid var(--terra);outline-offset:4px;border-radius:8px}

/* cada oreja gira desde su nacimiento, no desde el centro */
.pg-oreja{transform-box:view-box;
  transition:transform .42s cubic-bezier(.34,1.42,.5,1)}
.pg-testa{transform-box:view-box;transform-origin:50% 84%;
  transition:transform .45s cubic-bezier(.34,1.42,.5,1)}

/* 1. reclamo: cada 5 s se sacude las orejas */
.pg-oreja--i{animation:pg-sacude-i 5s ease-in-out infinite}
.pg-oreja--d{animation:pg-sacude-d 5s ease-in-out .04s infinite}
.pg-testa{animation:pg-cabeza 5s ease-in-out infinite}
@keyframes pg-sacude-i{
  0%,70%{transform:rotate(0)} 74%{transform:rotate(19deg)} 78%{transform:rotate(-9deg)}
  82%{transform:rotate(14deg)} 86%{transform:rotate(-8deg)} 90%{transform:rotate(11deg)}
  95%,100%{transform:rotate(0)}}
@keyframes pg-sacude-d{
  0%,70%{transform:rotate(0)} 74%{transform:rotate(-19deg)} 78%{transform:rotate(9deg)}
  82%{transform:rotate(-14deg)} 86%{transform:rotate(8deg)} 90%{transform:rotate(-11deg)}
  95%,100%{transform:rotate(0)}}
@keyframes pg-cabeza{
  0%,70%{transform:rotate(0)} 76%{transform:rotate(3.5deg)} 83%{transform:rotate(-3.5deg)}
  90%{transform:rotate(2deg)} 95%,100%{transform:rotate(0)}}

/* 2. al acercarse: levanta las orejas y estira el cuello */
.menu-btn:hover .pg-oreja,.menu-btn:focus-visible .pg-oreja,
.menu-btn:hover .pg-testa,.menu-btn:focus-visible .pg-testa{animation:none}
.menu-btn:hover .pg-oreja--i,.menu-btn:focus-visible .pg-oreja--i{transform:rotate(14deg)}
.menu-btn:hover .pg-oreja--d,.menu-btn:focus-visible .pg-oreja--d{transform:rotate(-14deg)}
.menu-btn:hover .pg-cocker{transform:translateY(-2px)}

/* 3. al pulsar: las orejas caen */
.menu-btn:active .pg-oreja--i{transform:rotate(-9deg)}
.menu-btn:active .pg-oreja--d{transform:rotate(9deg)}
.menu-btn:active .pg-cocker{transform:translateY(1px)}

/* 4. menu abierto: orejas arriba y cabeza ladeada, como cuando escucha */
.menu-btn[aria-expanded="true"] .pg-oreja,
.menu-btn[aria-expanded="true"] .pg-testa{animation:none}
.menu-btn[aria-expanded="true"] .pg-oreja--i{transform:rotate(22deg)}
.menu-btn[aria-expanded="true"] .pg-oreja--d{transform:rotate(-22deg)}
.menu-btn[aria-expanded="true"] .pg-testa{transform:rotate(-9deg)}

@media(prefers-reduced-motion:reduce){
  .pg-oreja--i,.pg-oreja--d,.pg-testa{animation:none}
  .pg-oreja,.pg-testa,.menu-btn .pg-cocker{transition:none}
}
.panel{position:fixed;inset:0;z-index:80;background:var(--bordeaux);color:var(--crema);
  display:flex;flex-direction:column;padding:clamp(18px,5vw,32px);overflow-y:auto}
.panel[hidden]{display:none}
.panel-alto{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.panel-x{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--crema);border:1.5px solid color-mix(in srgb,var(--crema) 45%,transparent);
  padding:.55rem .95rem;cursor:pointer;line-height:1}
.panel-x:hover{border-color:var(--crema)}
.panel-nav{display:flex;flex-direction:column;gap:.15rem;margin:auto 0}
.panel-nav a{font-family:var(--serif);font-variation-settings:var(--wonk);font-weight:300;
  font-size:clamp(2rem,10vw,2.9rem);line-height:1.12;letter-spacing:-.02em;color:var(--crema);
  text-decoration:none;padding:.18rem 0;border-bottom:0}
.panel-nav a:hover,.panel-nav a[aria-current]{color:var(--terra)}
.panel-nav a[aria-current]{text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px}
.panel-pie{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:color-mix(in srgb,var(--crema) 60%,transparent);margin:0;line-height:2}
.panel-pie a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
@media(max-width:860px){
  .menu--escritorio{display:none}
  .menu-btn{display:block;margin-left:auto}
  .barra .col{flex-wrap:nowrap;min-height:70px}
  .barra .marca--barra{margin-right:0}
}

/* consentimiento */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--papel-alto);
  border-top:1.5px solid var(--tinta);padding:1.1rem clamp(18px,5vw,56px);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.ck[hidden]{display:none}
.ck p{margin:0;font-size:.9rem;color:var(--tinta-2);max-width:54ch}
.ck-b{display:flex;gap:.6rem}
.ck button{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.7rem 1.2rem;cursor:pointer;border:1.5px solid var(--tinta);background:transparent;color:var(--tinta)}
.ck button[data-ck="si"]{background:var(--tinta);color:var(--papel)}
.ck button:hover{border-color:var(--terra);color:var(--terra)}
.ck button[data-ck="si"]:hover{background:var(--terra);border-color:var(--terra);color:var(--papel)}

/* imagenes */
figure{margin:2.4rem 0}
figure img{display:block;width:100%;height:auto;background:var(--papel-alto)}
figure.hero{margin:0 0 2.6rem}
figure.hero img{aspect-ratio:3/2;object-fit:cover}
figcaption{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  color:var(--apagado);margin-top:.7rem;line-height:1.5}
.lectura figure.ancha{margin-left:calc(-1 * min(7vw,5rem));margin-right:calc(-1 * min(7vw,5rem))}
.pareja{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:2.4rem 0}
.pareja figure{margin:0}
@media(max-width:760px){
  .lectura figure.ancha{margin-left:0;margin-right:0}
  .pareja{grid-template-columns:1fr}
}

/* respuesta corta y preguntas */
.encorto{border-top:3px solid var(--lila);border-bottom:0;background:var(--lila-tenue);
  padding:1.05rem 1.3rem 1.25rem;margin:0 0 2.4rem}
.encorto .etiqueta{color:var(--espresso);opacity:.66}
.encorto p{color:var(--espresso)}
.encorto p{font-family:var(--serif);font-variation-settings:var(--wonk);font-weight:300;
  font-size:1.22rem;line-height:1.4;color:var(--tinta);margin:.55rem 0 0}
.faq h3{font-family:var(--sans);font-size:1rem;font-weight:600;margin:1.7rem 0 .35rem}
.indice{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:.9rem 0;margin:0 0 2.2rem}
.indice ol{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.6rem}
.indice a{font-size:.9rem;color:var(--tinta-2);text-decoration:none;border-bottom:1px solid var(--linea)}
.indice a:hover{color:var(--terra);border-color:var(--terra)}
.hp{position:absolute;left:-9999px;width:1px;height:1px}

/* ================= movimiento e interaccion ================= */
::selection{background:var(--lila);color:var(--espresso)}
html{scroll-behavior:smooth}
:target,.lectura h2,.lectura h3{scroll-margin-top:112px}

/* barra: se compacta al bajar y se aparta cuando lees */
.barra{transition:transform .38s cubic-bezier(.2,.8,.25,1),box-shadow .3s}
.barra .col{transition:min-height .32s cubic-bezier(.2,.8,.25,1)}
.barra.es-scroll{box-shadow:0 1px 0 var(--linea)}
.barra.es-scroll .col{min-height:58px}
.barra.es-oculta{transform:translateY(-103%)}

/* progreso de lectura */
.progreso{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;pointer-events:none;
  background:var(--terra);transform:scaleX(0);transform-origin:0 50%}

/* pilares: el que miras se abre, los demas se apartan */
.pilares{display:flex;flex-wrap:wrap;gap:2px}
.pilar{flex:1 1 236px;
  transition:flex-grow .55s cubic-bezier(.2,.8,.25,1),opacity .4s,filter .4s}
.pilar::before{content:"";position:absolute;left:0;top:0;z-index:2;height:3px;width:100%;
  background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s cubic-bezier(.2,.8,.25,1)}
.pilar::after{content:"→";position:absolute;z-index:2;
  left:clamp(22px,2.6vw,32px);bottom:clamp(28px,3.6vw,42px);
  font-family:var(--sans);font-size:1.2rem;line-height:1;opacity:0;transform:translateX(-14px);
  transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.25,1)}
.pilar canvas{--mx:0;--my:0;
  transform:translate(calc(var(--mx)*14px),calc(var(--my)*14px));
  transition:transform .9s cubic-bezier(.2,.8,.25,1),opacity .5s}
.pilar h3,.pilar p{transition:transform .55s cubic-bezier(.2,.8,.25,1),opacity .4s}
@media(min-width:1180px){.pilar{flex-basis:0}}
@media(hover:hover){
  .pilar:hover{filter:none}
  .pilares:hover .pilar{flex-grow:.88;opacity:.68}
  .pilares .pilar:hover,.pilares .pilar:focus-visible{flex-grow:1.55;opacity:1}
  .pilar:hover::before,.pilar:focus-visible::before{transform:none}
  .pilar:hover::after,.pilar:focus-visible::after{opacity:.85;transform:none}
  .pilar:hover canvas{opacity:.36;
    transform:translate(calc(var(--mx)*18px),calc(var(--my)*18px)) scale(1.08) rotate(-7deg)}
  .pilar:hover h3{transform:translateY(-4px)}
  .pilar:hover p{transform:translateY(-4px);opacity:1}
}

/* entradas del diario */
.entrada{position:relative;transition:background .25s,padding-left .38s cubic-bezier(.2,.8,.25,1)}
.entrada .tit,.entrada .fecha,.entrada .tema{transition:color .25s}
@media(hover:hover){
  .entrada:hover{padding-left:.9rem}
  .entrada:hover .tit{color:var(--bordeaux)}
  .entrada:hover .fecha{color:var(--tinta)}
  .entrada:hover .tema{color:var(--terra)}
}

/* menu: el subrayado se dibuja */
.menu a{position:relative;border-bottom-color:transparent}
.menu a:hover,.menu a[aria-current]{border-bottom-color:transparent}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--terra);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.2,.8,.25,1)}
.menu a:hover::after,.menu a[aria-current]::after{transform:none}

/* botones */
.pop-form button,.ck button,.lista-form button{transition:background .2s,color .2s,transform .2s}
.pop-form button:active,.ck button:active,.lista-form button:active{transform:translateY(1px)}

/* panel movil */
.panel{animation:panel-in .34s cubic-bezier(.2,.8,.25,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(-2.5%)}to{opacity:1;transform:none}}
.panel-nav a{animation:panel-item .55s both cubic-bezier(.2,.8,.25,1)}
@keyframes panel-item{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel-nav a:nth-child(1){animation-delay:.06s} .panel-nav a:nth-child(2){animation-delay:.11s}
.panel-nav a:nth-child(3){animation-delay:.16s} .panel-nav a:nth-child(4){animation-delay:.21s}
.panel-nav a:nth-child(5){animation-delay:.26s} .panel-nav a:nth-child(6){animation-delay:.31s}

/* revelado al entrar en pantalla (solo si hay JS) */
.js [data-rev]{opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.8,.25,1),transform .75s cubic-bezier(.2,.8,.25,1)}
.js [data-rev].visto{opacity:1;transform:none}
.js [data-rev="img"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path .9s cubic-bezier(.2,.8,.25,1)}
.js [data-rev="img"].visto{clip-path:inset(0 0 0 0)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .barra.es-oculta{transform:none}
  .js [data-rev]{opacity:1;transform:none;clip-path:none;transition:none}
  .panel,.panel-nav a{animation:none}
  .pilares:hover .pilar{opacity:1}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------------- la coleccion ---------------- */
.nav-col{position:relative}
.menu--escritorio .nav-col::after{content:"";position:absolute;left:0;right:0;bottom:-.45rem;
  height:1.5px;background:var(--terra);transform:scaleX(1);transform-origin:left}
.piezas{display:grid;gap:1.5rem;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.pieza{position:relative;display:flex;flex-direction:column;gap:.55rem;text-decoration:none;
  padding:1.7rem 1.5rem 1.5rem;border:1.5px solid var(--linea);background:var(--papel-alto);
  color:var(--tinta);transition:border-color .28s ease,transform .28s ease,background .28s ease}
.pieza:hover,.pieza:focus-visible{border-color:var(--tinta);transform:translateY(-3px);background:#fff}
.pieza .n{font:400 .6875rem/1 var(--mono);letter-spacing:.16em;color:var(--apagado)}
.pieza h3{font:300 1.5rem/1.15 var(--serif);font-variation-settings:var(--wonk);margin:0}
.pieza p{margin:0;color:var(--tinta-2);font-size:.9375rem;line-height:1.55}
.pieza-mas{margin-top:auto;padding-top:.9rem;font:400 .6875rem/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
.ficha-rejilla{display:grid;gap:1.5rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));align-items:start}
.ficha-bloque{border-top:1.5px solid var(--tinta);padding-top:1rem}
.ficha-dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.1rem;margin:.9rem 0 0;
  font-size:.9375rem}
.ficha-dl dt{color:var(--apagado);font:400 .75rem/1.5 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;align-self:baseline}
.ficha-dl dd{margin:0;color:var(--tinta-2)}
.tonos{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem;
  font-size:.9375rem;color:var(--tinta-2)}
.tonos li{display:flex;align-items:center;gap:.7rem}
.tono{width:1.5rem;height:1.5rem;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(34,28,24,.18)}
.ficha .tw{margin:.9rem 0 0}
.ficha .tw table{min-width:0}
.ficha-cuerpo{margin-top:2rem}
@media(max-width:640px){.ficha-rejilla{margin-top:2.2rem}}

/* ============ lectura larga: ritmo y jerarquia ============ */
.lectura{max-width:36rem}
.lectura p{font-size:1.09375rem;line-height:1.72;margin:0 0 1.25em}
.lectura strong{font-weight:500;color:var(--tinta)}
.lectura em{font-style:italic}

/* la primera frase entra mas alta */
.lectura > p.arranque{font-size:1.28rem;line-height:1.5;color:var(--tinta);margin-bottom:1.5em}
.lectura > p.arranque::first-letter{initial-letter:0}

/* los ## respiran y se anclan con una regla corta */
.lectura h2{margin-top:3.4rem;margin-bottom:.85rem;font-size:clamp(1.5rem,3vw,1.85rem);
  line-height:1.14;color:var(--tinta);position:relative;padding-top:1.5rem}
.lectura h2::before{content:"";position:absolute;top:0;left:0;width:2.2rem;height:1.5px;
  background:var(--terra)}
.lectura h3{margin-top:2.2rem;margin-bottom:.5rem;font-size:1.2rem}

/* enlaces internos: visibles, no chillones */
.lectura p > a,.lectura li > a{color:var(--bordeaux);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--bordeaux) 32%,transparent);
  text-underline-offset:.19em;text-decoration-thickness:1px;
  transition:text-decoration-color .2s,color .2s}
.lectura p > a:hover,.lectura li > a:hover{color:var(--terra);
  text-decoration-color:var(--terra)}

/* el dato que hay que recordar */
.destacado{margin:2.2rem 0;padding:1.15rem 0 1.15rem 1.35rem;
  border-left:2.5px solid var(--terra);background:linear-gradient(90deg,
  color-mix(in srgb,var(--terra) 5%,transparent),transparent 62%)}
.destacado p{margin:0;font-family:var(--serif);font-variation-settings:var(--wonk);
  font-weight:300;font-size:1.22rem;line-height:1.4;color:var(--tinta)}

/* tablas: cifras alineadas, filas legibles */
.lectura .tw{margin:2rem 0;overflow-x:auto;
  background:linear-gradient(90deg,var(--papel) 30%,transparent),
             linear-gradient(90deg,transparent,var(--papel) 70%) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(34,28,24,.12),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(34,28,24,.12),transparent) 100% 0;
  background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.lectura table{font-size:.96875rem;font-variant-numeric:tabular-nums lining-nums}
.lectura thead th{position:relative;padding-bottom:.7rem;color:var(--apagado);
  vertical-align:bottom;white-space:nowrap}
.lectura tbody tr{transition:background .18s}
.lectura tbody tr:nth-child(odd){background:color-mix(in srgb,var(--papel-alto) 70%,transparent)}
.lectura tbody tr:hover{background:var(--papel-alto)}
.lectura tbody td{padding:.8rem 1.1rem .8rem 0;vertical-align:baseline}
.lectura tbody td:first-child{font-family:var(--mono);font-size:.8125rem;
  letter-spacing:.08em;color:var(--tinta);white-space:nowrap;padding-left:.55rem}
.lectura tbody td:first-child{box-shadow:inset 2px 0 0 var(--linea)}
.lectura tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--terra)}

/* listas */
.lectura ul,.lectura ol{margin:0 0 1.35em;padding-left:1.25rem}
.lectura li{margin-bottom:.6rem;line-height:1.66}

/* separador entre bloques largos */
.lectura hr{border:0;height:1.5px;background:var(--linea);margin:2.8rem 0}

@media(max-width:640px){
  .lectura p{font-size:1.0625rem;line-height:1.68}
  .lectura > p.arranque{font-size:1.16rem}
  .lectura h2{margin-top:2.6rem}
  .lectura tbody td:first-child{padding-left:.45rem}
}

/* ============ migas de pan ============ */
.migas{margin:0 0 1.9rem}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:0;padding:0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase}
.migas li{display:flex;align-items:center;gap:.5rem;color:var(--apagado)}
.migas li+li::before{content:"/";color:var(--linea)}
.migas a{color:var(--apagado);text-decoration:none;transition:color .2s}
.migas a:hover{color:var(--terra)}
.migas span[aria-current]{color:var(--tinta);max-width:22rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.migas span[aria-current]{max-width:11rem}}