/* ============================================================
   LEONTATTS · v2 «La mesa de León» — página completa
   Paleta: negro fotocopia / sangre / hueso · zine punk
   Afinada para preview en iPad (touch, 700–1400px)
   ============================================================ */
:root{
  --negro:#0a0a0a;
  --negro-total:#000;
  --sangre:#b3122f;
  --sangre-viva:#e01a3f;
  --hueso:#f2ead8;
  --fantasma:rgba(242,234,216,.55);
  --tinta:rgba(10,10,10,.75);
  --faisan:#5b2d8c;
  --bl:'Pirata One', cursive;
  --tw:'Special Elite', 'American Typewriter', 'Courier New', monospace;
  --gr:'Archivo Black', 'Avenir-Black', 'Arial Black', sans-serif;
  --ui:'Archivo', 'Helvetica Neue', sans-serif;
}
@font-face{font-family:'Pirata One';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/pirata-one.woff2') format('woff2')}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/special-elite.woff2') format('woff2')}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/archivo-black.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/archivo-var.woff2') format('woff2')}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--negro);color:var(--hueso);font-family:var(--ui);
  overflow-x:hidden;-webkit-tap-highlight-color:transparent;
}
::selection{background:var(--sangre);color:var(--hueso)}
:focus-visible{outline:3px solid var(--sangre-viva);outline-offset:3px}
.pieza:focus-visible{outline:3px solid var(--sangre-viva);outline-offset:5px;z-index:500}
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
a{color:inherit}
.hidden-field{position:absolute;left:-9999px}

/* ---------- grano de fotocopia sobre TODO ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.09;mix-blend-mode:overlay;
}

/* ---------- garabatos birome ---------- */
.scribble{
  font-family:var(--tw);color:var(--fantasma);font-size:.78rem;line-height:1.3;
  pointer-events:none;user-select:none;
}

/* ============================ NAVBAR ============================ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:9500;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem clamp(.9rem,3vw,2rem);
  background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(242,234,216,.14);
  transform:translateY(-110%);transition:transform .35s cubic-bezier(.2,1,.3,1);
}
.navbar.show{transform:none}
.navbar__logo img{height:34px;width:auto}
.navbar__links{display:flex;align-items:center;gap:clamp(.7rem,2.5vw,1.6rem)}
.navbar__links a{
  font-family:var(--gr);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--hueso);padding:.5em .2em;
}
.navbar__links a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--sangre-viva);text-underline-offset:4px}
.navbar__cta{
  background:var(--sangre);padding:.55em 1em !important;color:var(--hueso);
  box-shadow:3px 3px 0 var(--negro-total);
}
.navbar__cta:hover{background:var(--sangre-viva);text-decoration:none !important}

/* ============================ HERO ============================ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:1.5rem 1rem 7rem;overflow:hidden;background:var(--negro-total);
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.3;filter:saturate(.35) contrast(1.25);
}
.hero__duotone{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 70% 10%, rgba(179,18,47,.26), transparent 55%),
    linear-gradient(180deg, rgba(10,10,10,.4), rgba(10,10,10,.94) 88%);
}
.hero__logo{
  position:relative;width:min(560px,84vw);transform:rotate(-2deg);
}
.hero__logo img{width:100%}
.glitch-on .hero__logo img{animation:glitch 6.5s steps(1) infinite}
@keyframes glitch{
  0%,97.4%,100%{clip-path:none;transform:none}
  97.6%{clip-path:inset(12% 0 55% 0);transform:translateX(-7px)}
  97.9%{clip-path:inset(60% 0 8% 0);transform:translateX(6px)}
  98.2%{clip-path:none;transform:none}
}

/* ---- titular ransom ---- */
.ransom{
  position:relative;margin-top:1.4rem;text-align:center;
  display:flex;flex-wrap:wrap;gap:.45em .35em;justify-content:center;align-items:baseline;
  font-size:clamp(1.6rem, 4.6vw, 3.4rem);line-height:1.15;font-weight:400;
}
.ransom span{display:inline-block;opacity:0;transform:translateY(60px) rotate(9deg)}
.ransom .w1{font-family:var(--bl);color:#fff;font-size:1.35em;rotate:-3deg}
.ransom .w2{font-family:var(--tw);background:var(--hueso);color:var(--negro);padding:.05em .3em;rotate:2deg;box-shadow:3px 4px 0 rgba(0,0,0,.6)}
.ransom .w3{font-family:var(--gr);color:var(--hueso);letter-spacing:.02em;rotate:-1deg}
.ransom .w4{font-family:var(--gr);background:var(--sangre);color:var(--hueso);padding:.08em .35em;rotate:1.5deg;box-shadow:4px 5px 0 rgba(0,0,0,.7)}
.slapped .ransom span{animation:slap .5s cubic-bezier(.2,1.4,.3,1) forwards}
.slapped .ransom span:nth-child(1){animation-delay:.15s}
.slapped .ransom span:nth-child(2){animation-delay:.32s}
.slapped .ransom span:nth-child(3){animation-delay:.49s}
.slapped .ransom span:nth-child(4){animation-delay:.66s}
@keyframes slap{
  0%{opacity:0;transform:translateY(60px) rotate(9deg) scale(1.15)}
  70%{opacity:1;transform:translateY(-4px) rotate(-1deg) scale(1)}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}

/* ---- CTA principal: estencil sangre, NUNCA rota, NUNCA se anima ---- */
.cta-turno{
  position:relative;margin-top:2.2rem;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--gr);font-size:clamp(1.05rem,2.6vw,1.4rem);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  background:var(--sangre);color:var(--hueso);
  padding:1rem 1.7rem;border:3px solid var(--hueso);cursor:pointer;
  box-shadow:6px 6px 0 var(--negro-total), 6px 6px 0 2px rgba(242,234,216,.25);
  transition:background .12s, transform .12s, box-shadow .12s;
}
.cta-turno:hover{background:var(--sangre-viva)}
.cta-turno:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--negro-total)}
.cta-turno svg{width:1.4em;height:1.4em;flex:none}
.cta-note{margin-top:1.1rem;font-family:var(--tw);font-size:.85rem;color:var(--fantasma)}

.scribble-down{
  position:absolute;bottom:6.6rem;right:clamp(.5rem,4vw,3rem);
  font-family:var(--tw);color:var(--fantasma);font-size:.8rem;
  transform:rotate(-7deg);text-align:center;
}
.scribble-down b{display:block;font-size:1.6rem;color:var(--sangre-viva)}

/* ============================ MARQUEES ============================ */
.seam{position:relative;z-index:4;margin-top:-3.4rem}
.marquee{
  overflow:hidden;white-space:nowrap;border-top:2px solid var(--negro-total);border-bottom:2px solid var(--negro-total);
  font-family:var(--gr);text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(.85rem,2vw,1.1rem);padding:.55em 0;user-select:none;-webkit-user-select:none;
}
.marquee--rojo{background:var(--sangre);color:var(--hueso);transform:rotate(-1.6deg) scale(1.02)}
.marquee--hueso{background:var(--hueso);color:var(--negro);transform:rotate(1.2deg) scale(1.02);margin-top:-.6rem}
.marquee--gracias{background:var(--negro-total);color:var(--fantasma);border-color:rgba(242,234,216,.15);font-size:.78rem}
.marquee__track{display:inline-block;animation:crawl 22s linear infinite}
.marquee--hueso .marquee__track{animation-duration:28s;animation-direction:reverse}
.marquee--gracias .marquee__track{animation-duration:34s}
.marquee a{text-decoration:none}
@keyframes crawl{to{transform:translateX(-50%)}}

/* ============================ LA MESA ============================ */
.mesa-section{position:relative;padding:4.5rem 0 0;background:var(--negro)}
.mesa-head{position:relative;padding:0 clamp(1.25rem,4vw,3rem);max-width:1200px;margin:0 auto 1.2rem}
.mesa-head h2{
  font-family:var(--bl);font-weight:400;color:#fff;
  font-size:clamp(2.6rem,7vw,5.5rem);line-height:.95;transform:rotate(-1.5deg);
}
.mesa-head h2 em{font-style:normal;color:var(--sangre-viva)}
.mesa-head p{font-family:var(--tw);color:var(--fantasma);margin-top:.5rem;font-size:.95rem}
.scribble--mesa{position:absolute;right:clamp(1rem,6vw,5rem);top:.4rem;transform:rotate(4deg);text-align:right;display:none}

.indice{display:flex;flex-wrap:wrap;gap:.55rem;padding:0 clamp(1.25rem,4vw,3rem);max-width:1200px;margin:0 auto 1.1rem}
.indice button{
  font-family:var(--gr);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--hueso);color:var(--negro);border:none;padding:.6em 1em;cursor:pointer;
  box-shadow:3px 3px 0 var(--negro-total);transition:transform .1s;min-height:40px;
}
.indice button:nth-child(odd){transform:rotate(-2deg)}
.indice button:nth-child(even){transform:rotate(1.5deg)}
.indice button:hover{background:#fff}
.indice button.on{background:var(--sangre);color:var(--hueso)}
.indice button:active{transform:translate(2px,2px)}
.indice .ordenar{background:transparent;color:var(--fantasma);border:1px dashed rgba(242,234,216,.4);box-shadow:none;font-family:var(--tw);text-transform:none;letter-spacing:0}
.indice .ordenar:hover{color:var(--hueso);background:rgba(242,234,216,.08)}

.mesa-wrap{
  position:relative;height:min(64svh,700px);min-height:420px;overflow:hidden;
  border-top:3px dashed rgba(242,234,216,.25);border-bottom:3px dashed rgba(242,234,216,.25);
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(179,18,47,.07), transparent 60%),
    var(--negro-total);
  cursor:grab;touch-action:none;overscroll-behavior:contain;
}
.mesa-wrap:active{cursor:grabbing}
.mesa-hint{
  position:absolute;z-index:20;top:.9rem;left:50%;transform:translateX(-50%) rotate(-1deg);
  font-family:var(--tw);font-size:.8rem;color:var(--negro);background:var(--hueso);
  padding:.4em .9em;box-shadow:3px 3px 0 rgba(0,0,0,.6);pointer-events:none;white-space:nowrap;
  transition:opacity .4s;
}
.mesa{position:absolute;top:0;left:0;width:220vw;height:175svh;min-width:1900px;min-height:1150px}

.pieza{
  position:absolute;width:clamp(180px,22vw,290px);
  background:var(--hueso);padding:10px 10px 14px;cursor:grab;
  box-shadow:0 12px 24px rgba(0,0,0,.65);
  transition:filter .3s, opacity .3s;
}
.pieza:active{cursor:grabbing}
.pieza img{width:100%;aspect-ratio:4/4.6;object-fit:cover;filter:contrast(1.06);pointer-events:none}
.pieza figcaption{
  font-family:var(--tw);color:var(--negro);font-size:.72rem;margin-top:.55rem;
  display:flex;justify-content:space-between;gap:.5rem;
}
.pieza figcaption b{font-weight:400;color:var(--sangre)}
.pieza.dim{filter:grayscale(1) contrast(.75) brightness(.55);opacity:.45}
.pieza::before,.pieza::after{
  content:"";position:absolute;width:86px;height:26px;top:-12px;
  background:rgba(242,234,216,.5);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.pieza::before{left:-24px;transform:rotate(-38deg)}
.pieza::after{right:-24px;transform:rotate(35deg)}
.pieza--flash{padding-bottom:10px}
.pieza--flash img{aspect-ratio:4/4}

.faisan{
  position:absolute;width:clamp(100px,11vw,140px);cursor:pointer;z-index:3;
  transform:rotate(14deg);filter:drop-shadow(0 8px 14px rgba(0,0,0,.7));
  transition:transform .15s;
}
.faisan:hover{transform:rotate(10deg) scale(1.05)}
.faisan.wiggle{animation:wiggle .45s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(14deg)}25%{transform:rotate(4deg)}60%{transform:rotate(22deg)}}

/* ============================ PIERCINGS ============================ */
.piercing{
  position:relative;padding:clamp(4rem,8vw,6rem) clamp(1.25rem,4vw,3rem);background:var(--negro);
  border-top:3px dashed rgba(242,234,216,.18);
}
.piercing__head{max-width:1150px;margin:0 auto 2rem}
.piercing__head h2{
  font-family:var(--bl);font-weight:400;color:#fff;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:.95;transform:rotate(-1deg);
}
.piercing__head h2 em{font-style:normal;color:var(--sangre-viva)}
.piercing__head p{font-family:var(--tw);color:var(--fantasma);margin-top:.5rem;max-width:46ch}

.piercing__grid{
  max-width:1150px;margin:0 auto;display:grid;gap:2rem;grid-template-columns:1fr;align-items:start;
}

/* mapa oreja */
.piercing__mapa{
  margin:0;background:var(--hueso);padding:14px 14px 10px;transform:rotate(-1deg);
  box-shadow:0 16px 32px rgba(0,0,0,.5);justify-self:center;max-width:360px;width:100%;
}
.oreja{width:100%;height:auto;display:block}
.oreja__body{fill:rgba(10,10,10,.04);stroke:var(--negro);stroke-width:2.5}
.oreja__line{fill:none;stroke:rgba(10,10,10,.55);stroke-width:2}
.hs{cursor:pointer}
.hs circle{fill:var(--negro);stroke:var(--hueso);stroke-width:2;transition:fill .15s,transform .15s;transform-box:fill-box;transform-origin:center}
.hs text{fill:var(--hueso);font-family:var(--gr);font-size:11px;text-anchor:middle;pointer-events:none}
.hs:hover circle{fill:var(--sangre)}
.hs.on circle{fill:var(--sangre-viva);stroke:var(--negro)}
.hs:focus-visible{outline:none}
.hs:focus-visible circle{stroke:var(--sangre-viva);stroke-width:3}
.piercing__mapa figcaption{font-family:var(--tw);color:var(--tinta);font-size:.78rem;margin-top:.5rem;text-align:center}

/* panel */
.piercing__panel{display:flex;flex-direction:column;gap:1.4rem}
.piercing__lista h3{font-family:var(--gr);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hueso);margin-bottom:.7rem}
.piercing__chips-src{display:flex;flex-wrap:wrap;gap:.5rem}
.piercing__chips-src button{
  font-family:var(--tw);font-size:.82rem;color:var(--hueso);cursor:pointer;
  background:rgba(242,234,216,.06);border:1px solid rgba(242,234,216,.25);
  padding:.5em .8em;display:inline-flex;align-items:center;gap:.4em;transition:.12s;
}
.piercing__chips-src button b{font-family:var(--gr);font-weight:400;font-size:.7rem;color:var(--sangre-viva)}
.piercing__chips-src button:hover{border-color:var(--hueso);background:rgba(242,234,216,.12)}
.piercing__chips-src button.on{background:var(--sangre);border-color:var(--sangre);color:var(--hueso)}
.piercing__chips-src button.on b{color:var(--hueso)}

.piercing__seleccion{
  border:1px dashed rgba(242,234,216,.3);background:rgba(242,234,216,.03);
  padding:1.2rem;margin-top:.4rem;
}
.piercing__sel-label{font-family:var(--gr);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fantasma);margin-bottom:.6rem}
.piercing__chips{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;min-height:2.2em}
.piercing__chips .vacio{font-family:var(--tw);font-size:.85rem;color:var(--fantasma);opacity:.7}
.piercing__chips li.chip{
  font-family:var(--tw);font-size:.82rem;color:var(--negro);background:var(--hueso);
  padding:.4em .4em .4em .7em;display:inline-flex;align-items:center;gap:.4em;transform:rotate(-1deg);
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
}
.piercing__chips li.chip button{
  background:none;border:none;color:var(--sangre);font-size:1rem;line-height:1;cursor:pointer;padding:0 .1em;
}
.piercing__seleccion .cta-turno{margin-top:0;width:100%;font-size:1rem;padding:.9rem 1.2rem}
.piercing__nota{font-family:var(--tw);font-size:.75rem;color:var(--fantasma);margin-top:.8rem;text-align:center}

/* joyería próximamente */
.joyeria{
  max-width:1150px;margin:2.4rem auto 0;padding:1.6rem;border:1px dashed rgba(242,234,216,.25);
  background:rgba(242,234,216,.03);display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;justify-content:space-between;
}
.joyeria__txt{flex:1 1 300px}
.joyeria__txt h3{font-family:var(--gr);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--hueso);display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.joyeria__txt h3 .soon{
  font-family:var(--tw);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--sangre);color:var(--hueso);padding:.3em .6em;transform:rotate(-2deg);
}
.joyeria__txt p{font-family:var(--tw);font-size:.85rem;color:var(--fantasma);margin-top:.6rem;max-width:52ch}
.joyeria__items{display:flex;gap:1rem;opacity:.5}
.joyeria__items svg{width:46px;height:46px;stroke:var(--hueso);fill:var(--hueso)}
.joyeria__items svg [fill="none"]{fill:none}

@media (min-width:820px){
  .piercing__grid{grid-template-columns:minmax(300px,360px) 1fr;gap:clamp(2rem,4vw,3.5rem)}
  .piercing__mapa{justify-self:start;position:sticky;top:5rem}
}

/* ============================ SOBRE MÍ (página hueso, bordes rasgados) ============================ */
.leon{
  position:relative;background:var(--hueso);color:var(--negro);
  margin-top:3.5rem;padding:clamp(4rem,8vw,6.5rem) clamp(1.25rem,5vw,3rem);
  clip-path:polygon(0 2.2rem,4% .9rem,9% 2rem,15% .6rem,22% 1.8rem,30% .4rem,38% 1.6rem,47% .7rem,55% 1.9rem,63% .5rem,71% 1.7rem,79% .8rem,86% 1.9rem,93% .6rem,100% 1.6rem,
  100% calc(100% - 1.6rem),94% calc(100% - .5rem),87% calc(100% - 1.8rem),79% calc(100% - .7rem),70% calc(100% - 1.9rem),61% calc(100% - .6rem),52% calc(100% - 1.7rem),43% calc(100% - .5rem),34% calc(100% - 1.8rem),25% calc(100% - .8rem),17% calc(100% - 1.9rem),9% calc(100% - .6rem),0 calc(100% - 1.5rem));
}
.leon__inner{max-width:1080px;margin:0 auto}
.leon__title{
  font-family:var(--bl);font-weight:400;font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1;transform:rotate(-1deg);margin-bottom:2.2rem;
}
.leon__title em{font-style:normal;color:var(--sangre)}
.leon__spread{display:grid;gap:2.2rem;grid-template-columns:1fr;align-items:start}
.leon__foto{
  position:relative;background:#fff;padding:12px 12px 16px;max-width:420px;
  transform:rotate(-2.4deg);box-shadow:0 14px 28px rgba(0,0,0,.28);justify-self:center;
}
.leon__foto img{filter:grayscale(1) contrast(1.35) brightness(1.05);width:100%}
.leon__foto figcaption{font-family:var(--tw);font-size:.78rem;margin-top:.6rem;color:var(--tinta)}
.leon__foto::before,.leon__foto::after{
  content:"";position:absolute;width:90px;height:26px;top:-12px;
  background:rgba(242,234,216,.85);box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.leon__foto::before{left:-26px;transform:rotate(-38deg)}
.leon__foto::after{right:-26px;transform:rotate(35deg)}
.leon__qa h3{
  font-family:var(--bl);font-weight:400;font-size:1.55rem;margin:1.4rem 0 .4rem;
}
.leon__qa h3:first-child{margin-top:0}
.leon__qa p{font-family:var(--tw);font-size:.95rem;line-height:1.65;color:var(--tinta)}
.leon__qa .manifiesto b{
  font-weight:400;
  background-image:linear-gradient(transparent 62%, rgba(179,18,47,.35) 62% 92%, transparent 92%);
}
.leon__flyer{
  border-top:2px dashed rgba(10,10,10,.35);padding-top:1.2rem;text-align:center;
  font-family:var(--tw);font-size:.9rem;color:var(--tinta);
}
.leon__flyer b{font-weight:400;color:var(--negro)}
.leon__flyer a{color:var(--sangre);text-decoration-thickness:2px;text-underline-offset:3px}

/* ============================ CÓMO FUNCIONA ============================ */
.como{padding:clamp(4rem,8vw,6rem) clamp(1.25rem,4vw,3rem) 3rem;background:var(--negro)}
.como__head{max-width:1150px;margin:0 auto 2.2rem}
.como__head h2{
  font-family:var(--bl);font-weight:400;color:#fff;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:.95;transform:rotate(-1deg);
}
.como__head p{font-family:var(--tw);color:var(--fantasma);margin-top:.4rem}
.fotonovela{
  list-style:none;max-width:1150px;margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:start;
}
.panel{
  position:relative;background:var(--hueso);color:var(--negro);
  padding:1.2rem 1.2rem 1.4rem;transform:rotate(var(--r,0deg));
  box-shadow:0 14px 26px rgba(0,0,0,.55);
}
.panel__num{
  position:absolute;top:-1.15rem;left:-.6rem;z-index:2;
  font-family:var(--bl);font-size:2.6rem;line-height:1;color:var(--sangre-viva);
  text-shadow:0 0 10px rgba(179,18,47,.55), 2px 2px 0 var(--negro-total);
  transform:rotate(-8deg);
}
.panel h3{font-family:var(--gr);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8rem}
.panel img{width:100%;aspect-ratio:5/4;object-fit:cover;filter:contrast(1.05)}
.panel__cap{font-family:var(--tw);font-size:.8rem;margin-top:.7rem;color:var(--tinta)}
/* panel 1: chat falso */
.chat{display:flex;flex-direction:column;gap:.55rem}
.chat__msg{
  font-family:var(--tw);font-size:.82rem;line-height:1.5;max-width:88%;
  padding:.6em .8em;border-radius:10px;
}
.chat__msg--tu{align-self:flex-start;background:#fff;color:#111;border-bottom-left-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.chat__msg--leon{align-self:flex-end;background:#dcf8c6;color:#111;border-bottom-right-radius:2px}
.chat__cta{
  align-self:center;margin-top:.5rem;font-family:var(--gr);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;background:var(--sangre);color:var(--hueso);
  padding:.7em 1em;box-shadow:3px 3px 0 var(--negro-total);
}
.chat__cta:hover{background:var(--sangre-viva)}
/* panel 3: ticket */
.ticket{
  position:relative;border:2px dashed rgba(10,10,10,.5);padding:1rem .9rem;
  text-align:center;font-family:var(--tw);font-size:.85rem;line-height:1.6;color:var(--tinta);
  background:repeating-linear-gradient(45deg, transparent 0 14px, rgba(179,18,47,.05) 14px 28px);
}
.ticket b{font-weight:400;color:var(--sangre);letter-spacing:.14em}
.ticket__fine{font-size:.7rem;margin-top:.5rem;opacity:.75}
.ticket__staple{
  position:absolute;top:-7px;left:50%;width:26px;height:9px;transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(180deg,#c9c4b5,#8e897b);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ============================ CONTAME TU IDEA (form protagonista) ============================ */
.idea-section{
  position:relative;padding:clamp(4rem,8vw,6.5rem) clamp(1.25rem,4vw,3rem);
  background:
    radial-gradient(80% 60% at 80% 10%, rgba(179,18,47,.10), transparent 60%),
    var(--negro);
}
.idea-wrap{
  max-width:1050px;margin:0 auto;display:grid;gap:2rem;grid-template-columns:1fr;align-items:start;
}
.idea-intro h2{
  font-family:var(--bl);font-weight:400;color:#fff;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:.95;transform:rotate(-1deg);
}
.idea-intro h2 em{font-style:normal;color:var(--sangre-viva)}
.idea-pitch{font-family:var(--tw);color:var(--hueso);font-size:1rem;line-height:1.6;margin:1.1rem 0}
.idea-puntos{list-style:none;margin:1.1rem 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.idea-puntos li{
  font-family:var(--tw);font-size:.9rem;color:var(--fantasma);padding-left:1.5rem;position:relative;
}
.idea-puntos li::before{content:"✎";position:absolute;left:0;color:var(--sangre-viva)}
.idea-o{margin-top:1.4rem;font-family:var(--tw);font-size:.9rem;color:var(--fantasma)}
.idea-o a{color:var(--sangre-viva);text-decoration-thickness:2px;text-underline-offset:3px}

.idea-form{
  position:relative;background:var(--hueso);color:var(--negro);
  padding:clamp(1.6rem,4vw,2.4rem);transform:rotate(-.6deg);
  box-shadow:0 24px 48px rgba(0,0,0,.6);border:1px solid rgba(10,10,10,.15);
}
.idea-form .campo{color:var(--tinta)}
.idea-form .campo input,.idea-form .campo textarea{background:#fff}
.idea-form .cta-turno{width:100%;margin-top:.4rem}
.idea-form__cinta{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:150px;height:32px;background:rgba(242,234,216,.6);box-shadow:0 2px 6px rgba(0,0,0,.4);
}

/* --- el casete: "la cinta del turno" --- */
.cassette{
  position:relative;margin:.2rem 0 1.2rem;padding:.9rem .9rem 1rem;
  background:linear-gradient(180deg,#2a2a2c,#141416);
  border:2px solid #000;border-radius:12px;transform:rotate(.5deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.45);
}
.cassette::before,.cassette::after{ /* tornillos inferiores */
  content:"";position:absolute;bottom:8px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#666,#111);
}
.cassette::before{left:12px}
.cassette::after{right:12px}
.cassette__marca{
  font-family:var(--gr);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fantasma);text-align:center;margin-bottom:.6rem;
}
.cassette__label{display:block}
.cassette__label>span{
  display:block;font-family:var(--tw);font-size:.82rem;color:var(--hueso);margin-bottom:.45rem;
}
.cassette__label>span small{color:var(--fantasma)}
.cassette__label input{
  width:100%;font-family:var(--tw);font-size:16px;color:#1a1a1a;
  background:var(--hueso);border:none;padding:.6em .75em;border-radius:2px;
  /* renglones de etiqueta de casete */
  background-image:repeating-linear-gradient(180deg,transparent 0 1.7em,rgba(179,18,47,.18) 1.7em calc(1.7em + 1px));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.cassette__label input:focus{outline:none;box-shadow:0 0 0 3px var(--sangre)}
.cassette__label input::placeholder{color:rgba(26,26,26,.45)}
.cassette__reels{
  display:flex;justify-content:center;align-items:center;gap:2.6rem;margin:.9rem 0 .5rem;
}
.cassette__reels .reel{
  width:40px;height:40px;border-radius:50%;border:2px solid #000;
  background:
    radial-gradient(circle, var(--hueso) 0 5px, #111 5px 8px, var(--hueso) 8px 9px, transparent 9px),
    repeating-conic-gradient(#26262a 0 14deg,#3c3c42 14deg 28deg);
}
.cassette:focus-within .reel{animation:reel-spin 1.6s linear infinite}
@keyframes reel-spin{to{transform:rotate(360deg)}}
.cassette__pie{
  font-family:var(--tw);font-size:.72rem;color:var(--fantasma);text-align:center;margin-top:.2rem;
}
@media (min-width:820px){
  .idea-wrap{grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,3.5rem)}
  .idea-intro{position:sticky;top:5rem}
}

/* ============================ EL MURO (reseñas) ============================ */
.muro{padding:clamp(4rem,8vw,6rem) clamp(1.25rem,4vw,3rem) 2rem;background:var(--negro)}
.muro-head{max-width:1100px;margin:0 auto 2rem;text-align:center}
.muro-head h2{
  font-family:var(--bl);font-weight:400;color:#fff;
  font-size:clamp(2.4rem,6vw,4.4rem);line-height:.95;transform:rotate(1deg);
}
.muro-head h2 em{font-style:normal;color:var(--sangre-viva)}
.muro-head p{font-family:var(--tw);color:var(--fantasma);margin-top:.5rem}

.destacadas{
  max-width:1100px;margin:0 auto;display:grid;gap:2rem 1.6rem;
  grid-template-columns:1fr;justify-items:center;
}
.resena{
  width:min(360px,92vw);background:var(--hueso);color:var(--negro);
  padding:1.3rem 1.3rem 1.1rem;transform:rotate(var(--r,0deg));
  box-shadow:0 14px 26px rgba(0,0,0,.5);position:relative;
}
.resena::before,.resena::after{
  content:"";position:absolute;width:80px;height:24px;top:-11px;
  background:rgba(242,234,216,.85);box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.resena::before{left:-20px;transform:rotate(-36deg)}
.resena::after{right:-20px;transform:rotate(34deg)}
.resena__stars{color:var(--sangre);font-size:1.1rem;letter-spacing:.15em;margin-bottom:.5rem}
.resena blockquote{margin:0;font-family:var(--tw);font-size:.92rem;line-height:1.55}
.resena figcaption{margin-top:.7rem;font-family:var(--tw);font-size:.78rem;color:rgba(10,10,10,.6)}

.muro__vertodas{text-align:center;margin:.6rem 0 3rem;font-family:var(--tw)}
.muro__vertodas a{color:var(--sangre-viva);text-decoration-thickness:2px;text-underline-offset:3px}

.muro-marco{
  position:relative;max-width:560px;margin:0 auto;
  padding:clamp(1.6rem,4vw,2.2rem) clamp(1.2rem,4vw,1.8rem);
  border:2px solid rgba(242,234,216,.32);background:rgba(242,234,216,.035);
}
.muro-marco::before{
  content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:120px;height:28px;background:rgba(242,234,216,.4);box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.dejar-resena h3{font-family:var(--gr);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem}
.dejar-resena>p{font-family:var(--tw);font-size:.85rem;color:var(--fantasma);margin-bottom:1.1rem}
.dejar-resena .cta-turno{margin-top:.4rem;font-size:.95rem;padding:.8rem 1.2rem;width:100%}

.estrellas{border:0;margin:0 0 1.1rem;padding:0}
.estrellas legend{font-family:var(--tw);font-size:.78rem;color:var(--fantasma);opacity:.75;margin-bottom:.4rem;padding:0}
.estrellas__grupo{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.15rem}
.estrellas__grupo input{position:absolute;opacity:0;pointer-events:none}
.estrellas__grupo label{
  font-size:1.8rem;line-height:1;color:rgba(242,234,216,.3);cursor:pointer;transition:color .12s;
}
.estrellas__grupo input:checked+label,
.estrellas__grupo input:checked+label~label{color:var(--sangre-viva)}
.estrellas__grupo label:hover,
.estrellas__grupo label:hover~label{color:var(--sangre-viva)}

.muro__exito{
  margin-top:1rem;font-family:var(--tw);font-size:.9rem;color:var(--negro);
  background:var(--hueso);padding:.8em 1em;transform:rotate(-1deg);
  box-shadow:4px 4px 0 rgba(0,0,0,.6);text-align:center;line-height:1.5;
}
.muro__exito a{color:var(--sangre);font-weight:400;text-decoration-thickness:2px}

@media (min-width:700px){
  .destacadas{grid-template-columns:repeat(3,1fr);align-items:start}
}

/* ============================ EL REMANSO ============================ */
.remanso{
  position:relative;padding:clamp(4.5rem,9vw,7rem) clamp(1.25rem,4vw,3rem) 6rem;text-align:center;
  background:var(--negro);
}
.remanso::before{
  content:"";position:absolute;top:-14px;left:50%;width:150px;height:30px;
  transform:translateX(-50%) rotate(-2deg);background:rgba(242,234,216,.35);
}
.remanso h2{font-family:var(--bl);font-weight:400;color:#fff;font-size:clamp(2.4rem,6vw,4.4rem)}
.remanso .sub{font-family:var(--tw);color:var(--fantasma);margin:.6rem 0 2.4rem}
.remanso__wa{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.remanso__wa .cta-turno{margin-top:0;font-size:clamp(1.05rem,2.6vw,1.35rem)}
.remanso__wa .puerta__nota{margin:0;font-family:var(--tw);font-size:.85rem;color:var(--fantasma)}
.remanso__wa .puerta__nota a{color:var(--sangre-viva)}
.puerta__nota{margin-top:.8rem;font-family:var(--tw);font-size:.75rem;color:var(--fantasma)}
.puerta__exito{
  margin-top:1rem;font-family:var(--tw);font-size:.95rem;color:var(--negro);
  background:var(--hueso);padding:.8em 1em;transform:rotate(-1deg);
  box-shadow:4px 4px 0 rgba(0,0,0,.6);
}
/* campos = papelitos */
.campo{
  display:block;font-family:var(--tw);font-size:.78rem;color:var(--fantasma);
  margin-bottom:.9rem;
}
.campo span{opacity:.7}
.campo input,.campo textarea{
  display:block;width:100%;margin-top:.35rem;
  font-family:var(--tw);font-size:16px;color:var(--negro);
  background:var(--hueso);border:none;padding:.65em .8em;
  transform:rotate(-.5deg);transition:transform .15s, box-shadow .15s;resize:vertical;
}
.campo input:focus,.campo textarea:focus{
  outline:none;transform:rotate(0deg);box-shadow:0 0 0 3px var(--sangre);
}
.campo--file input{padding:.5em;background:rgba(242,234,216,.85)}
.campo-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.remanso__ubicacion{
  max-width:900px;margin:3rem auto 0;display:flex;flex-direction:column;
  align-items:center;gap:1.5rem;text-align:center;
}
.remanso__datos{
  font-family:var(--tw);font-size:.9rem;color:var(--fantasma);
}
.remanso__datos b{font-weight:400;color:var(--hueso)}
.remanso__datos a{color:var(--sangre-viva)}
.remanso__mapa{
  width:100%;max-width:480px;background:var(--hueso);padding:10px;
  transform:rotate(-1deg);box-shadow:0 14px 28px rgba(0,0,0,.5);
}
.remanso__mapa iframe{
  width:100%;height:220px;border:0;display:block;filter:grayscale(.2) contrast(1.05);
}
@media (min-width:700px){
  .remanso__ubicacion{flex-direction:row;justify-content:center;text-align:left;gap:2.4rem}
}

/* ============================ CONTRATAPA ============================ */
.contratapa{background:var(--negro-total);border-top:2px solid rgba(242,234,216,.12)}
.contratapa__inner{
  max-width:900px;margin:0 auto;text-align:center;
  padding:3rem 1.25rem calc(7.5rem + env(safe-area-inset-bottom));
}
.contratapa__wordmark{
  font-family:var(--bl);font-size:clamp(2.2rem,5vw,3.4rem);color:#fff;transform:rotate(-1.5deg);
}
.contratapa__lema{font-family:var(--tw);color:var(--fantasma);font-size:.9rem;margin:.5rem 0 1.8rem}
.badges{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.8rem}
.badge{
  width:96px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--gr);font-size:.5rem;letter-spacing:.08em;line-height:1.25;text-align:center;
  background:#151515;color:var(--fantasma);border:1px solid rgba(242,234,216,.3);
  image-rendering:pixelated;
}
.badge--rojo{background:var(--sangre);color:var(--hueso);border-color:var(--hueso)}
.badge--uy{background:#0e2a52;color:#fff}
.contador{font-family:var(--tw);color:var(--fantasma);font-size:.85rem}
.contador b{font-weight:400;color:var(--sangre-viva);letter-spacing:.25em}
.contador span{opacity:.7}
.contratapa__libro{font-family:var(--tw);color:var(--fantasma);font-size:.75rem;margin:.6rem 0 2rem;opacity:.8}
.cta-turno--footer{margin-top:0}

/* ============================ BARRA FIJA ============================ */
.barra-fija{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  display:flex;justify-content:center;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, rgba(0,0,0,.92) 60%, transparent);
  transform:translateY(120%);transition:transform .35s cubic-bezier(.2,1,.3,1);
  pointer-events:none;
}
.barra-fija.show{transform:none;pointer-events:auto}
.barra-fija a{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:min(480px,100%);
  font-family:var(--gr);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  background:var(--sangre);color:var(--hueso);padding:.9rem 1rem;min-height:52px;
  border:2px solid var(--hueso);box-shadow:0 4px 18px rgba(179,18,47,.5);
}
.barra-fija a:hover{background:var(--sangre-viva)}
.barra-fija svg{width:1.3em;height:1.3em;flex:none}

/* ============================ LIGHTBOX ============================ */
.foco{
  position:fixed;inset:0;z-index:9990;display:none;place-items:center;
  background:rgba(0,0,0,.93);padding:1rem;
}
.foco.open{display:grid}
.foco__bar{
  position:absolute;top:0;bottom:0;width:34%;left:-40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  mix-blend-mode:screen;pointer-events:none;
}
.foco.open .foco__bar{animation:copier .5s ease-out forwards}
@keyframes copier{to{left:110%}}
.foco__card{
  background:var(--hueso);padding:12px 12px 16px;max-width:min(560px,94vw);
  transform:rotate(-1deg);box-shadow:0 30px 60px rgba(0,0,0,.8);
  animation:focoIn .38s cubic-bezier(.2,1.3,.3,1);
}
@keyframes focoIn{from{transform:scale(.6) rotate(-6deg);opacity:0}}
.foco__card img{width:100%;max-height:64svh;object-fit:contain;background:#ddd}
.foco__meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.7rem}
.foco__meta span{font-family:var(--tw);color:var(--negro);font-size:.8rem}
.foco__meta a{
  font-family:var(--gr);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  background:var(--sangre);color:var(--hueso);padding:.7em 1em;white-space:nowrap;
  box-shadow:3px 3px 0 var(--negro-total);
}
.foco__meta a:hover{background:var(--sangre-viva)}
.foco__x{
  position:absolute;top:max(1rem, env(safe-area-inset-top));right:1rem;font-family:var(--gr);font-size:1rem;
  background:var(--hueso);color:var(--negro);border:none;padding:.6em .9em;cursor:pointer;
  box-shadow:3px 3px 0 rgba(255,255,255,.2);min-height:44px;
}

/* ============================ CURSOR (solo desktop) ============================ */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9995;pointer-events:none;border-radius:50%;
  display:none;
}
.cursor-dot{width:7px;height:7px;background:var(--hueso);transform:translate(-50%,-50%)}
.cursor-ring{
  width:34px;height:34px;border:2px solid rgba(242,234,216,.5);transform:translate(-50%,-50%);
  transition:width .18s,height .18s,border-color .18s,background .18s;
}
body.cur-cta .cursor-ring{width:52px;height:52px;border-color:var(--sangre-viva);background:rgba(179,18,47,.18)}
body.cur-drag .cursor-ring{width:46px;height:46px;border-style:dashed}
@media (pointer:fine){
  .has-cursor .cursor-dot,.has-cursor .cursor-ring{display:block}
}

/* ============================ MODO FAISÁN ============================ */
.faisan-wash{
  position:fixed;inset:0;z-index:9980;background:var(--faisan);pointer-events:none;opacity:0;
}
body.modo-faisan .faisan-wash{animation:wash 1s ease-out}
@keyframes wash{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
body.modo-faisan .marquee--rojo{background:var(--faisan)}
body.modo-faisan .cta-turno, body.modo-faisan .barra-fija a, body.modo-faisan .navbar__cta{background:var(--faisan)}
.toast{
  position:fixed;left:50%;bottom:7rem;transform:translateX(-50%) rotate(-1deg) translateY(30px);
  z-index:9985;background:var(--hueso);color:var(--negro);font-family:var(--tw);font-size:.85rem;
  padding:.8em 1.1em;box-shadow:4px 4px 0 rgba(0,0,0,.7);opacity:0;pointer-events:none;
  transition:opacity .3s, transform .3s;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) rotate(-1deg) translateY(0)}

/* ============================ SLAP-IN (scroll enter) ============================ */
.slap-in{opacity:0;transform:translateY(46px) rotate(var(--r,2deg)) scale(1.06)}
.slap-in.landed{
  animation:slapIn .5s cubic-bezier(.2,1.4,.3,1) forwards;
  animation-delay:calc(var(--i,0)*70ms);
}
@keyframes slapIn{
  70%{opacity:1;transform:translateY(-4px) rotate(calc(var(--r,2deg)*.4)) scale(1)}
  100%{opacity:1;transform:translateY(0) rotate(var(--r,0deg)) scale(1)}
}
.panel.slap-in.landed{animation-name:slapInPanel}
@keyframes slapInPanel{
  0%{opacity:0}
  70%{opacity:1;transform:translateY(-4px) rotate(calc(var(--r,2deg)*1.4)) scale(1)}
  100%{opacity:1;transform:translateY(0) rotate(var(--r,0deg)) scale(1)}
}

/* ============================ TABLET (iPad) · 700–1199px ============================ */
@media (min-width:700px){
  .scribble--mesa{display:block}
  .leon__spread{grid-template-columns:minmax(300px,420px) 1fr;gap:clamp(2rem,4vw,3.5rem)}
  .leon__foto{justify-self:start}
  .fotonovela{grid-template-columns:1fr 1fr;gap:2.4rem 2rem;padding:0 1rem}
  .mesa{width:170vw}
  .navbar__logo img{height:38px}
}
/* táctil: sin efectos hover que dejen estados pegados */
@media (hover:none){
  .indice button:hover{background:var(--hueso)}
  .indice button.on{background:var(--sangre)}
  .faisan:hover{transform:rotate(14deg)}
}

/* ============================ DESKTOP · ≥1200px ============================ */
@media (min-width:1200px){
  .mesa{width:150vw}
  .fotonovela{grid-template-columns:repeat(4,1fr);gap:1.6rem}
  .panel img{aspect-ratio:4/5}
}

/* ============================ MOBILE fino ============================ */
@media (max-width:699px){
  .scribble-down{display:none}
  .mesa{width:330vw}
  .campo-row{grid-template-columns:1fr}
  .navbar__links a:not(.navbar__cta){display:none}
}

/* ============================ MODO CAPTURA (screenshots de preview) ============================ */
body.cap .hero{min-height:1150px;height:1150px}
body.cap .mesa-wrap{height:660px}
body.cap .mesa{height:1900px;min-height:1900px}
body.cap .foco__card img{max-height:700px}

/* ============================ REDUCED MOTION: el fanzine plano ============================ */
/* Se cortan los efectos bruscos (slap-in con rebote, glitch del logo, wiggle, cursor, wash del
   faisán, inercia del drag). Se DEJAN los loops ambientales suaves —video de fondo y las cintas—
   porque no son el tipo de movimiento que marea, y sin ellos el hero queda muerto (p.ej. Firefox
   en un escritorio con las animaciones de GNOME apagadas reporta reduced-motion siempre). */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ransom span{opacity:1 !important;transform:none !important;animation:none !important}
  .glitch-on .hero__logo img,.faisan.wiggle,.cassette:focus-within .reel{animation:none !important}
  .slap-in{opacity:1;transform:rotate(var(--r,0deg))}
  .slap-in.landed{animation:none}
  .foco.open .foco__bar{animation:none;display:none}
  .foco__card{animation:none}
  .barra-fija,.navbar{transition:none}
  .cursor-dot,.cursor-ring{display:none !important}
}