/* ============================================================
   SOMBRA NEGRA — estudio de tatuajes
   Hoja de estilo única. Vanilla CSS, sin dependencias.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --black:      #050505;
  --black-2:    #0a0a0a;
  --ink:        #0e0d0c;
  --ink-2:      #161512;
  --line:       #241f1b;
  --line-2:     #38312a;
  --bone:       #ece5d8;
  --bone-dim:   #a89e8f;
  /* bone-mute y blood-hi son colores de TEXTO: subidos hasta pasar AA (4.5:1)
     sobre --black y sobre --ink sin perder el tono apagado/underground. */
  --bone-mute:  #8a8174;
  --blood:      #8c1119;
  --blood-hi:   #e04752;
  /* borde de controles interactivos (campos, botones fantasma, burger,
     cierre del lightbox, subrayado de enlaces): ≥3:1 en reposo contra
     TODOS los fondos reales del sitio (negro, ink, ink-2, backdrop del
     lightbox), para 1.4.11. Los divisores puramente decorativos (tarjetas,
     separadores de sección) siguen usando --line/--line-2, más tenues. */
  --field-bd:   #6f6659;

  --ff-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --ff-goth:    "Pirata One", "Bodoni Moda", "Times New Roman", serif;
  --ff-ui:      "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;

  --wrap: 1360px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --sec: clamp(5rem, 11vw, 11rem);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-hard: cubic-bezier(.77,0,.18,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--black);
  color:var(--bone);
  font-family:var(--ff-ui);
  font-size:clamp(1rem,.94rem + .3vw,1.125rem);
  line-height:1.62;
  letter-spacing:.012em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:.98; }
p{ margin:0 0 1em; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

.wrap{ width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto; }
.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;
}
.skip-link{
  position:fixed; top:.5rem; left:.5rem; z-index:999;
  transform:translateY(-200%);
  background:var(--bone); color:var(--black);
  padding:.6rem 1.1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.skip-link:focus{ transform:none; }

:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:3px;
}

::selection{ background:var(--blood); color:var(--bone); }

/* barra de scroll */
html{ scrollbar-color:var(--line-2) var(--black); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:var(--line-2); border:3px solid var(--black); }

/* ---------- 3. Texturas globales ---------- */
.grain{
  position:fixed; inset:-50%; z-index:900; pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(3) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); }
  33%{ transform:translate(-2%,1%); }
  66%{ transform:translate(1%,-2%); }
  100%{ transform:translate(0,0); }
}
.vignette{
  position:fixed; inset:0; z-index:899; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* cursor personalizado (solo punteros finos) */
.cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block; position:fixed; top:0; left:0; z-index:950; pointer-events:none;
    mix-blend-mode:difference;
    opacity:0; transition:opacity .3s linear;
  }
  .cursor.is-live{ opacity:1; }
  .cursor__dot,.cursor__ring{
    position:absolute; border-radius:50%; transform:translate(-50%,-50%);
    will-change:transform,width,height;
  }
  .cursor__dot{ width:6px; height:6px; background:var(--bone); }
  .cursor__ring{
    width:34px; height:34px; border:1px solid var(--bone-dim);
    transition:width .3s var(--ease), height .3s var(--ease), border-color .3s;
  }
  .cursor.is-hot .cursor__ring{ width:78px; height:78px; border-color:var(--bone); }
}

/* ---------- 4. Tipografía de marca ---------- */
.section-num{
  font-family:var(--ff-goth);
  font-size:clamp(3rem,7vw,6rem);
  line-height:1; color:transparent;
  -webkit-text-stroke:1px var(--line-2);
  margin:0 0 .1em;
  user-select:none;
}
.section-title{
  font-family:var(--ff-display);
  font-weight:900;
  font-size:clamp(2.8rem,8.5vw,7.5rem);
  line-height:.85;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.section-lede{
  max-width:44ch; margin-top:1.5rem;
  color:var(--bone-dim);
  font-size:clamp(1.02rem,.96rem + .35vw,1.28rem);
}
.section-head{ margin-bottom:clamp(2.5rem,6vw,5rem); }
.eyebrow{
  display:flex; align-items:center; gap:.9rem;
  font-size:.8rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--bone-dim); font-weight:600;
}
.eyebrow__line{ width:clamp(28px,6vw,72px); height:1px; background:var(--line-2); flex:none; }

/* ---------- 5. Botones ---------- */
.btn{
  --bg:transparent; --fg:var(--bone); --bd:var(--field-bd);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 2.2rem;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  font-weight:700; font-size:.92rem; letter-spacing:.2em; text-transform:uppercase;
  position:relative; overflow:hidden; cursor:pointer;
  isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bone);
  transform:translateY(101%);
  transition:transform .55s var(--ease-hard);
}
.btn:hover,.btn:focus-visible{ color:var(--black); border-color:var(--bone); }
.btn:hover::after,.btn:focus-visible::after{ transform:translateY(0); }
.btn--primary{ --bg:var(--bone); --fg:var(--black); --bd:var(--bone); }
.btn--primary::after{ background:var(--blood); }
.btn--primary:hover,.btn--primary:focus-visible{ color:var(--bone); border-color:var(--blood); }
.btn--ghost{ --fg:var(--bone); }
.btn--block{ width:100%; padding-block:1.15rem; }

/* ---------- 6. Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:800;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s, backdrop-filter .5s;
}
.site-header.is-stuck{
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(14px) saturate(.7);
  border-bottom-color:var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:clamp(.9rem,2vw,1.4rem);
}
.brand{ display:flex; align-items:center; gap:.85rem; }
.brand__mark{ color:var(--bone); flex:none; transition:transform .6s var(--ease), color .4s; }
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.05); color:var(--blood-hi); }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--ff-goth);
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  letter-spacing:.04em;
}
.brand__sub{
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bone-mute); margin-top:.28rem;
}

.nav__list{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.4rem); }
.nav__list a{
  font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--bone-dim); position:relative; padding-block:.35rem;
  transition:color .35s;
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--bone); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__list a:hover,.nav__list a:focus-visible{ color:var(--bone); }
.nav__list a:hover::after,.nav__list a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  border:1px solid var(--field-bd); padding:.7rem 1.3rem !important; color:var(--bone) !important;
  transition:background .4s var(--ease), color .4s;
}
.nav__cta::after{ display:none; }
.nav__cta:hover,.nav__cta:focus-visible{ background:var(--bone); color:var(--black) !important; }

.burger{
  display:none; width:46px; height:40px; background:none; border:1px solid var(--field-bd);
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--bone);
  transition:transform .45s var(--ease), opacity .25s;
}
.burger span:nth-child(1){ top:13px; }
.burger span:nth-child(2){ top:19px; }
.burger span:nth-child(3){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(7rem,15vh,10rem) clamp(4rem,8vh,7rem);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__bg{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero__type{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(9rem,26vw,26rem); line-height:1; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(236,229,216,.055);
  white-space:nowrap; transform:translateY(-4%);
}
.hero__inner{
  position:relative; z-index:2;
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
.hero__title{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(3rem,8.8vw,8rem);
  line-height:.84; letter-spacing:-.045em; text-transform:uppercase;
  margin:1.6rem 0 0;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.02em; }
.hero__title .line--alt{
  font-family:var(--ff-goth); font-weight:400;
  text-transform:none; letter-spacing:0;
  font-size:.86em; color:var(--bone);
  padding-left:.06em;
}
.hero__lede{
  max-width:46ch; margin-top:clamp(1.5rem,3vw,2.2rem);
  color:var(--bone-dim); font-size:clamp(1.02rem,.96rem + .4vw,1.24rem);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.hero__stats{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.8rem; border-top:1px solid var(--line);
}
.hero__stats dt{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-mute);
}
.hero__stats dd{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(1.9rem,3.5vw,2.9rem); line-height:1; margin-top:.3rem;
}

.hero__art{ margin:0; position:relative; }
.hero__art figcaption{
  margin-top:1.1rem; font-size:.86rem; color:var(--bone-mute); line-height:1.5;
}
.hero__art figcaption strong{ color:var(--bone-dim); font-weight:600; }
.tag{
  display:inline-block; margin-right:.6rem;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--line-2); padding:.25rem .6rem; color:var(--bone-dim);
}

/* marcos de imagen */
.frame{
  display:block; position:relative; overflow:hidden;
  background:var(--black-2);
  border:1px solid var(--line);
}
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame--hero{ aspect-ratio:11/14; }
.frame--hero img{ transition:transform 1.4s var(--ease); }
.hero__art:hover .frame--hero img{ transform:scale(1.03); }
.frame--hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 140px 40px rgba(0,0,0,.75);
}
.frame--portrait{ aspect-ratio:9/11; }

.hero__scroll{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--bone-mute);
}
.hero__scroll-line{ width:1px; height:56px; background:linear-gradient(var(--line-2),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; left:0; top:0; width:1px; height:18px; background:var(--bone);
  animation:scrollDrip 2.4s var(--ease) infinite;
}
@keyframes scrollDrip{ 0%{ transform:translateY(-20px); } 100%{ transform:translateY(60px); } }

/* ---------- 8. Marquee ---------- */
.marquee{
  border-block:1px solid var(--line);
  background:var(--ink);
  overflow:hidden; padding-block:.9rem;
}
.marquee__track{
  display:flex; align-items:center; gap:2.2rem; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee__track span{
  font-family:var(--ff-display); font-weight:700; font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.8rem);
  text-transform:uppercase; letter-spacing:.02em; color:var(--bone-mute); white-space:nowrap;
}
.marquee__track .dot{ color:var(--blood); font-size:.8em; font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 9. Manifiesto ---------- */
.manifesto{ padding-block:var(--sec); }
.manifesto__quote{ margin:0 0 clamp(3rem,6vw,5rem); max-width:22ch; }
.manifesto__quote p{
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-size:clamp(1.8rem,5.2vw,4.2rem); line-height:1.06; letter-spacing:-.02em;
  color:var(--bone);
}
.manifesto__quote em{ color:var(--blood-hi); font-style:italic; }
.manifesto__quote footer{
  margin-top:1.4rem; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-mute); font-family:var(--ff-ui);
}
.manifesto__inner{ display:grid; grid-template-columns:minmax(0,1fr); }
.manifesto__cols{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid var(--line); padding-top:clamp(2rem,4vw,3rem);
}
.manifesto__cols h2{
  font-family:var(--ff-ui); font-weight:700;
  font-size:.82rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bone); margin-bottom:.9rem;
  padding-left:1.4rem; position:relative;
}
.manifesto__cols h2::before{
  content:""; position:absolute; left:0; top:.42em; width:8px; height:8px;
  background:var(--blood); transform:rotate(45deg);
}
.manifesto__cols p{ color:var(--bone-mute); max-width:34ch; margin:0; }

/* ---------- 10. Obra / galería ---------- */
.work{ padding-block:var(--sec); background:linear-gradient(180deg,var(--black),var(--ink) 45%,var(--black)); }
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(1.8rem,4vw,2.8rem); }
.chip{
  background:transparent; border:1px solid var(--field-bd); color:var(--bone-dim);
  padding:.6rem 1.15rem; cursor:pointer;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; gap:.55rem;
  transition:background .35s var(--ease), color .35s, border-color .35s;
}
.chip__n{ font-size:.68rem; color:var(--bone-mute); }
.chip:hover{ border-color:var(--bone-dim); color:var(--bone); }
.chip.is-active{ background:var(--bone); color:var(--black); border-color:var(--bone); }
.chip.is-active .chip__n{ color:rgba(5,5,5,.55); }

.grid{
  display:grid; gap:clamp(.9rem,1.6vw,1.5rem);
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:dense;
}
.card{ position:relative; }
.card--tall{ grid-row:span 2; }
.card--wide{ grid-column:span 2; }
.card.is-hidden{ display:none; }
/* La entrada anima SÓLO transform: si la animación no corre (o se queda
   congelada), la tarjeta sigue siendo visible. Nunca opacity desde 0. */
.card.is-entering{ animation:cardIn .55s var(--ease); }
@keyframes cardIn{ from{ transform:translateY(24px) scale(.985); } }

.card__btn{
  display:block; width:100%; padding:0; background:none; border:0; cursor:pointer;
  position:relative; overflow:hidden; text-align:left;
  border:1px solid var(--line);
  transition:border-color .5s var(--ease);
}
.card__btn:hover,.card__btn:focus-visible{ border-color:var(--bone-mute); }
.card__btn .frame{ border:0; aspect-ratio:4/5; }
.card--tall .card__btn .frame{ aspect-ratio:4/8.2; }
.card--wide .card__btn .frame{ aspect-ratio:8.2/5; }
.card__btn img{
  filter:grayscale(1) contrast(1.18) brightness(.78);
  transform:scale(1.02);
  transition:filter .7s var(--ease), transform 1.1s var(--ease);
}
.card__btn:hover img,.card__btn:focus-visible img{
  filter:grayscale(1) contrast(1.05) brightness(1.06);
  transform:scale(1.09);
}
.card__meta{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(1rem,2vw,1.6rem);
  display:flex; flex-direction:column; gap:.28rem;
  background:linear-gradient(transparent, rgba(5,5,5,.86) 55%, rgba(5,5,5,.96));
  transform:translateY(22%); opacity:0;
  transition:transform .6s var(--ease), opacity .5s var(--ease);
}
.card__btn:hover .card__meta,.card__btn:focus-visible .card__meta{ transform:none; opacity:1; }
.card__style{
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--blood-hi); font-weight:700;
}
.card__title{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(1.3rem,2.4vw,2rem); line-height:1; letter-spacing:-.02em;
  text-transform:uppercase;
}
.card__data{ font-size:.78rem; color:var(--bone-mute); letter-spacing:.06em; }
.card__cross{
  position:absolute; top:1rem; right:1rem; z-index:3; width:26px; height:26px;
  opacity:0; transform:rotate(-90deg) scale(.6);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.card__cross::before,.card__cross::after{
  content:""; position:absolute; background:var(--bone);
}
.card__cross::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.card__cross::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.card__btn:hover .card__cross,.card__btn:focus-visible .card__cross{ opacity:1; transform:none; }

/* franja de tinta al hover */
.card__btn::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, rgba(140,17,25,.28), transparent 55%);
  opacity:0; transition:opacity .6s var(--ease);
}
.card__btn:hover::before,.card__btn:focus-visible::before{ opacity:1; }

/* táctil: la meta siempre visible */
@media (hover:none){
  .card__meta{ transform:none; opacity:1; }
  .card__btn img{ filter:grayscale(1) contrast(1.06) brightness(.95); transform:none; }
}

/* ---------- 11. Artistas ---------- */
.artists{ padding-block:var(--sec); border-top:1px solid var(--line); }
.artist-list{ display:flex; flex-direction:column; gap:clamp(3.5rem,8vw,7rem); }
.artist{
  display:grid; gap:clamp(1.8rem,4vw,4rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;
  padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line);
}
.artist--rev .artist__portrait{ order:2; }
.artist__portrait .frame img{
  filter:grayscale(1) contrast(1.14) brightness(.86);
  transition:filter .8s var(--ease), transform 1.2s var(--ease);
}
.artist:hover .frame img{ filter:grayscale(1) contrast(1.02) brightness(1.02); transform:scale(1.04); }
.artist__index{
  font-family:var(--ff-goth); font-size:clamp(2.2rem,4vw,3.2rem);
  color:transparent; -webkit-text-stroke:1px var(--line-2); margin:0 0 .2em; line-height:1;
}
.artist__name{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(2rem,5vw,4rem); line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
}
.artist__role{
  margin-top:.8rem; font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--blood-hi); font-weight:700;
}
.artist__bio{ margin-top:1.4rem; color:var(--bone-dim); max-width:56ch; }
.artist__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.artist__tags li{
  border:1px solid var(--line-2); padding:.32rem .8rem;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-mute);
}
.artist__meta{
  margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.84rem; color:var(--bone-mute); letter-spacing:.06em;
}
.artist__meta strong{ color:var(--bone); }

/* ---------- 12. Proceso ---------- */
.process{ padding-block:var(--sec); background:var(--ink); border-top:1px solid var(--line); }
.steps{
  display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid var(--line);
  margin-bottom:clamp(3.5rem,8vw,6rem);
}
.step{
  background:var(--ink); padding:clamp(1.6rem,3vw,2.4rem);
  position:relative; transition:background .5s var(--ease);
}
.step:hover{ background:var(--ink-2); }
.step__n{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(2.2rem,4vw,3rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--line-2);
  display:block; margin-bottom:1rem;
  transition:-webkit-text-stroke-color .5s;
}
.step:hover .step__n{ -webkit-text-stroke-color:var(--blood); }
.step h3{
  font-family:var(--ff-ui); font-weight:700;
  font-size:.88rem; letter-spacing:.26em; text-transform:uppercase; margin-bottom:.9rem;
}
.step p{ color:var(--bone-mute); font-size:.96rem; margin:0; }
.step p strong{ color:var(--bone-dim); }

.care__title{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(1.6rem,3.5vw,2.6rem); text-transform:uppercase; letter-spacing:-.02em;
  margin-bottom:1.6rem;
}
.accordion{ border-top:1px solid var(--line); max-width:70ch; }
.acc{ border-bottom:1px solid var(--line); }
.acc h4{ margin:0; }
.acc__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.25rem 0;
  font-family:var(--ff-ui); font-weight:600;
  font-size:clamp(.95rem,1.6vw,1.1rem); letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone-dim); transition:color .35s;
}
.acc__btn:hover{ color:var(--bone); }
.acc__btn[aria-expanded="true"]{ color:var(--bone); }
.acc__ico{ position:relative; width:16px; height:16px; flex:none; }
.acc__ico::before,.acc__ico::after{
  content:""; position:absolute; background:currentColor; transition:transform .45s var(--ease);
}
.acc__ico::before{ top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%); }
.acc__ico::after{ left:50%; top:0; height:100%; width:1.5px; transform:translateX(-50%); }
.acc__btn[aria-expanded="true"] .acc__ico::after{ transform:translateX(-50%) scaleY(0); }
.acc__panel{ overflow:hidden; }
.acc__panel p{
  color:var(--bone-mute); max-width:62ch; margin:0; padding:0 0 1.5rem;
  font-size:.98rem;
}
.acc__panel p strong{ color:var(--bone-dim); }
.acc__panel[hidden]{ display:none; }

/* ---------- 13. Voces ---------- */
.voices{ padding-block:var(--sec); border-top:1px solid var(--line); }
.voice-grid{
  display:grid; gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.voice{
  margin:0; padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--line); background:var(--black-2);
  position:relative; transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.voice:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.voice::before{
  content:"”"; position:absolute; top:-.1em; right:.3rem;
  font-family:var(--ff-display); font-size:6rem; line-height:1; color:var(--line-2);
  pointer-events:none;
}
.voice blockquote{ margin:0; }
.voice blockquote p{
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(1.02rem,1.6vw,1.18rem); line-height:1.42; color:var(--bone-dim);
  margin:0;
}
.voice figcaption{
  margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.2rem;
}
.voice figcaption strong{ font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; }
.voice figcaption span{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-mute); }

/* ---------- 14. Formulario ---------- */
.booking{ padding-block:var(--sec); background:var(--ink); border-top:1px solid var(--line); }
.booking__inner{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
.booking__aside{ position:sticky; top:6.5rem; }
.booking__facts{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1rem; }
.booking__facts li{
  display:flex; flex-direction:column; gap:.15rem;
  border-top:1px solid var(--line); padding-top:.9rem;
  color:var(--bone-dim); font-size:.98rem;
}
.booking__facts span{
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--bone-mute);
}
.booking__facts a{ border-bottom:1px solid var(--field-bd); transition:border-color .35s, color .35s; }
.booking__facts a:hover{ color:var(--bone); border-color:var(--bone); }
.booking__warn{
  margin-top:2.2rem; padding:1.1rem 1.3rem;
  border-left:2px solid var(--blood);
  background:rgba(140,17,25,.07);
  font-size:.86rem; color:var(--bone-mute);
}

.form{ display:flex; flex-direction:column; gap:1.4rem; }
.form__row{ display:grid; gap:1.4rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.field{ display:flex; flex-direction:column; gap:.5rem; border:0; padding:0; margin:0; min-width:0; }
.field--full{ grid-column:1 / -1; }
.field > label,.field legend{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-dim); font-weight:600; padding:0;
}
.field > label span,.field legend span{ color:var(--blood-hi); }
input[type=text],input[type=email],input[type=tel],input[type=month],select,textarea{
  width:100%; background:var(--black); border:1px solid var(--field-bd);
  padding:.85rem 1rem; color:var(--bone);
  font-size:1rem; letter-spacing:.02em;
  transition:border-color .35s var(--ease), background .35s;
  border-radius:0; -webkit-appearance:none; appearance:none;
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a89e8f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px;
  padding-right:2.6rem;
}
input[type=month]{ min-height:3rem; }
textarea{ resize:vertical; min-height:8rem; line-height:1.55; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--bone); background:var(--black-2); }
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--bone); outline-offset:2px; }
::placeholder{ color:var(--bone-mute); opacity:.75; }

.radios{ display:flex; flex-wrap:wrap; gap:.6rem; }
.radio{ position:relative; }
.radio input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.radio span{
  display:block; border:1px solid var(--field-bd); padding:.6rem 1.1rem;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim);
  cursor:pointer; transition:background .35s var(--ease), color .35s, border-color .35s;
}
.radio input:hover + span{ border-color:var(--bone-dim); color:var(--bone); }
.radio input:checked + span{ background:var(--bone); color:var(--black); border-color:var(--bone); }
.radio input:focus-visible + span{ outline:2px solid var(--bone); outline-offset:3px; }

.check{
  display:flex; align-items:flex-start; gap:.8rem; cursor:pointer;
  font-size:.9rem; color:var(--bone-dim); letter-spacing:0; text-transform:none; font-weight:400;
}
.check input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:20px; height:20px; margin-top:.15rem;
  border:1px solid var(--field-bd); background:var(--black); cursor:pointer;
  display:grid; place-content:center; transition:border-color .3s, background .3s;
}
.check input::after{
  content:""; width:10px; height:10px; background:var(--blood-hi);
  transform:scale(0) rotate(45deg); transition:transform .3s var(--ease);
}
.check input:checked{ border-color:var(--bone); }
.check input:checked::after{ transform:scale(1) rotate(45deg); }
.check input:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; }
.check span span{ color:var(--blood-hi); }

.hint{ font-size:.78rem; color:var(--bone-mute); margin:0; }
.err{
  margin:0; font-size:.78rem; color:var(--blood-hi); letter-spacing:.06em;
  min-height:0; display:none;
}
.err.is-on{ display:block; }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:var(--blood); }
.field.has-error .radio span{ border-color:var(--blood); }

.form__foot{ margin-top:.6rem; }
.form__note{ margin:1rem 0 0; font-size:.78rem; color:var(--bone-mute); }
.form__success{
  margin:0; padding:1.3rem 1.5rem;
  border:1px solid var(--line-2); background:var(--black);
  border-left:2px solid var(--bone);
  font-size:.95rem; color:var(--bone-dim);
  animation:panelIn .5s var(--ease);
}
@keyframes panelIn{ from{ transform:translateY(14px); } }
.form__success strong{ color:var(--bone); display:block; margin-bottom:.4rem;
  font-family:var(--ff-display); font-size:1.2rem; text-transform:uppercase; letter-spacing:-.01em; }
.form__demo{ display:block; margin-top:.7rem; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-mute); }

/* ---------- 15. Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding-top:clamp(3rem,6vw,5rem); padding-bottom:2.5rem; }
.footer__top{ overflow:hidden; }
.footer__word{
  font-family:var(--ff-goth);
  font-size:clamp(3.5rem,15vw,13rem); line-height:.9; letter-spacing:.01em;
  color:transparent; -webkit-text-stroke:1px var(--line-2);
  margin:0 0 clamp(2rem,5vw,3.5rem); white-space:nowrap; text-align:center;
  user-select:none;
}
.footer__grid{
  display:grid; gap:clamp(1.8rem,3.5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line);
}
.footer__h{
  font-family:var(--ff-ui); font-weight:700;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bone-mute); margin-bottom:1rem;
}
.footer__grid p{ color:var(--bone-dim); font-size:.95rem; margin:0; line-height:1.75; }
.footer__grid a{ border-bottom:1px solid var(--field-bd); transition:border-color .3s, color .3s; }
.footer__grid a:hover{ color:var(--bone); border-color:var(--bone); }
.footer__social{ display:flex; flex-direction:column; gap:.55rem; }
.footer__social a{
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
  border-bottom:0; position:relative; width:fit-content;
}
.footer__social a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--bone);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.footer__social a:hover::after,.footer__social a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.8rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-mute);
}
.footer__bottom p{ margin:0; }

/* ---------- 16. Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:970; display:grid; place-items:center; padding:clamp(1rem,3vw,2.5rem); }
.lightbox[hidden]{ display:none; }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(3,3,3,.94); backdrop-filter:blur(6px); border:0; }
.lightbox__panel{
  position:relative; z-index:1;
  width:min(100%,1000px); max-height:100%;
  display:grid; gap:1.4rem;
  animation:lbIn .5s var(--ease);
}
@keyframes lbIn{ from{ transform:translateY(22px) scale(.975); } }
.lightbox__fig{
  margin:0; display:grid; gap:1.6rem;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
}
.lightbox__fig img{
  width:100%; max-height:70vh; object-fit:contain;
  border:1px solid var(--line); background:var(--black);
}
.lightbox__style{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--blood-hi); font-weight:700; margin:0 0 .6rem; }
.lightbox__title{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(1.8rem,4.5vw,3.2rem); line-height:.92; text-transform:uppercase; letter-spacing:-.03em;
}
.lightbox__data{ margin:1rem 0 0; color:var(--bone-mute); font-size:.9rem; letter-spacing:.08em; }
.lightbox__close{
  position:absolute; top:-.5rem; right:0; z-index:2;
  background:none; border:1px solid var(--field-bd); color:var(--bone);
  width:44px; height:44px; font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background .35s, color .35s;
}
.lightbox__close:hover{ background:var(--bone); color:var(--black); }
.lightbox__nav{ display:flex; gap:.7rem; justify-content:center; }
.lightbox__nav button{
  background:none; border:1px solid var(--field-bd); color:var(--bone-dim);
  padding:.6rem 1.3rem; cursor:pointer;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  transition:background .35s, color .35s, border-color .35s;
}
.lightbox__nav button:hover{ background:var(--bone); color:var(--black); border-color:var(--bone); }
body.is-locked{ overflow:hidden; }

/* ---------- 17. Reveal al scroll ---------- */
/* Sólo se oculta si el JS está vivo: sin JS (o si el observador no dispara,
   el script del <head> quita la clase .js a los 2.6 s) todo queda visible. */
.js [data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease), transform 1s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }
.hero__title .line span{ display:block; }

/* ---------- 18. Responsive ---------- */
@media (max-width:1180px){
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .card--wide{ grid-column:span 2; }
}
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:minmax(0,1fr); }
  .hero__art{ max-width:520px; }
  .hero{ min-height:auto; }
  .booking__inner{ grid-template-columns:minmax(0,1fr); }
  .booking__aside{ position:static; }
  .artist{ grid-template-columns:minmax(0,1fr); }
  .artist--rev .artist__portrait{ order:0; }
  .artist__portrait{ max-width:420px; }
  .lightbox__fig{ grid-template-columns:minmax(0,1fr); }
  .lightbox__fig img{ max-height:52vh; }
}
@media (max-width:860px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; z-index:-1;
    background:rgba(5,5,5,.97); backdrop-filter:blur(10px);
    display:grid; place-items:center;
    opacity:0; pointer-events:none;
    transition:opacity .45s var(--ease);
  }
  .nav.is-open{ opacity:1; pointer-events:auto; z-index:1; }
  .nav__list{
    flex-direction:column; gap:1.6rem; text-align:center;
  }
  .nav__list a{
    font-family:var(--ff-display); font-weight:700;
    font-size:clamp(1.8rem,7vw,2.6rem); letter-spacing:.02em; color:var(--bone);
    text-transform:uppercase;
  }
  .nav__list li{
    opacity:0; transform:translateY(20px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .nav.is-open li{ opacity:1; transform:none; }
  .nav.is-open li:nth-child(1){ transition-delay:.08s; }
  .nav.is-open li:nth-child(2){ transition-delay:.14s; }
  .nav.is-open li:nth-child(3){ transition-delay:.2s; }
  .nav.is-open li:nth-child(4){ transition-delay:.26s; }
  .nav.is-open li:nth-child(5){ transition-delay:.32s; }
  .nav__cta{ font-size:.9rem !important; font-family:var(--ff-ui) !important; letter-spacing:.22em !important; }
  .site-header.is-open{ background:transparent; backdrop-filter:none; border-color:transparent; }

  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card--wide{ grid-column:span 2; }
  .card--tall{ grid-row:span 1; }
  .card--tall .card__btn .frame{ aspect-ratio:4/5; }
  .card--wide .card__btn .frame{ aspect-ratio:8.2/5; }
}
@media (max-width:640px){
  .form__row{ grid-template-columns:minmax(0,1fr); }
  .hero__stats{ gap:1.4rem 2rem; }
  .hero__stats > div{ min-width:38%; }
  .grid{ grid-template-columns:minmax(0,1fr); gap:1rem; }
  .card--wide{ grid-column:span 1; }
  .card--wide .card__btn .frame{ aspect-ratio:4/5; }
  .card__meta{ transform:none; opacity:1; }
  .footer__bottom{ flex-direction:column; gap:.5rem; }
  .lightbox__close{ top:.2rem; right:.2rem; width:40px; height:40px; }
  .voice::before{ font-size:4rem; }
}
@media (max-width:400px){
  .brand__sub{ display:none; }
}

/* ---------- 19. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],.js [data-reveal]{ opacity:1; transform:none; }
  .grain{ animation:none; }
  .marquee__track{ animation:none; }
  .hero__scroll-line::after{ animation:none; }
  .cursor{ display:none !important; }
}

/* ---------- 20. Impresión ---------- */
@media print{
  .grain,.vignette,.cursor,.site-header,.hero__scroll,.marquee,.lightbox{ display:none !important; }
  body{ background:#fff; color:#000; }
}