/* JoC Rosales · Medellín
   Concepto: la luz que revela el tatuaje. Fuera de la luz, sombra y desenfoque; dentro, nitidez.
   Letras: Cormorant Garamond (titulares, elegante), Grenze Gotisch (nombre y números,
   eco del monograma JR) y Schibsted Grotesk (texto). */
:root{
  --negro:#090909;
  --carbon:#131313;
  --grafito:#222;
  --hueso:#efe9df;
  --gris:#8f8a82;
  --plata:#c2bcb3;
  --acento:#d9c79c;
  --linea:rgba(239,233,223,.13);
  --f-display:'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --f-gotica:'Grenze Gotisch', 'Cormorant Garamond', Georgia, serif;
  --f-texto:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --barra-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barra-h) + 10px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--hueso);font:400 17px/1.65 var(--f-texto);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
em{font-style:italic;color:var(--acento)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-999px;top:8px;z-index:300;background:var(--hueso);color:var(--negro);padding:8px 14px}
.saltar:focus{left:12px}
.filtros-svg{position:absolute;width:0;height:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Etiquetas: una linea fina que se dibuja antes del texto */
.etiqueta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 22px;font:500 11.5px/1 var(--f-texto);letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.etiqueta::before{content:"";width:34px;height:1px;background:var(--acento);transform-origin:left}
.anima .etiqueta::before{transform:scaleX(0);transition:transform 1.2s var(--ease)}
.anima .etiqueta.ver::before{transform:scaleX(1)}
.etiqueta span{display:inline-flex;align-items:center;gap:16px}
.etiqueta span+span::before{content:"";width:4px;height:4px;transform:rotate(45deg);background:var(--acento)}
.h2{font:500 clamp(46px,7vw,112px)/.95 var(--f-display);letter-spacing:-.015em;margin:0;text-wrap:balance}
.h2 em{font-weight:500}
.cabeza{max-width:1360px;margin:0 auto 48px;padding:0 var(--gutter)}
.sub{color:var(--plata);margin:18px 0 0;max-width:50ch;text-wrap:pretty}

.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font:500 15px/1 var(--f-texto);letter-spacing:.02em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:color .4s var(--ease),border-color .4s,background .4s}
.btn-claro{background:var(--hueso);color:var(--negro)}
.btn-claro::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(217,199,156,.75) 50%,transparent 70%);transform:translateX(-110%);transition:transform .9s var(--ease)}
.btn-claro:hover::after{transform:translateX(110%)}
.btn-linea{border-color:var(--linea);color:var(--hueso);background:rgba(9,9,9,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-linea:hover{border-color:var(--hueso)}
.btn-chico{min-height:40px;padding:0 20px;font-size:14px}

/* Halo: una luz suave sigue al cursor por toda la pagina (solo con mouse) */
.halo{display:none}
@media (hover:hover) and (pointer:fine){
  .anima .halo{display:block;position:fixed;left:0;top:0;z-index:1;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(217,199,156,.07),transparent 65%);mix-blend-mode:screen}
}

/* Precarga */
.precarga{display:none}
.js .precarga{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:20px;background:var(--negro);animation:precarga-fuera 0s 5s forwards}
.precarga img{width:min(120px,26vw);clip-path:inset(100% 0 0 0)}
.precarga-nombre{margin:0;font:500 34px/1 var(--f-gotica);letter-spacing:.02em}
.precarga-num{position:absolute;right:var(--gutter);bottom:calc(var(--gutter) + env(safe-area-inset-bottom));margin:0;font:400 clamp(56px,10vw,130px)/1 var(--f-display);font-variant-numeric:tabular-nums;color:#2b2b2b;overflow:hidden}
@keyframes precarga-fuera{to{visibility:hidden;opacity:0}}

/* Barra */
.barra{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:20px;height:calc(var(--barra-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));background:linear-gradient(rgba(9,9,9,.85),rgba(9,9,9,0));transition:background .4s,backdrop-filter .4s}
.barra.solida{background:rgba(9,9,9,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{height:42px;width:auto}
.marca span{font:500 25px/1 var(--f-gotica);display:flex;flex-direction:column;gap:2px}
.marca small{font:500 9.5px/1 var(--f-texto);letter-spacing:.32em;text-transform:uppercase;color:var(--gris)}
.barra-nav{display:none;gap:32px;margin-left:auto}
.barra-nav a{position:relative;text-decoration:none;font-size:14.5px;color:var(--plata)}
.barra-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--acento);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.barra-nav a:hover{color:var(--hueso)}
.barra-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.barra .btn{margin-left:auto}
@media (min-width:900px){.barra-nav{display:flex}.barra .btn{margin-left:8px}}

/* Hero: tres videos que se mueven; fuera de la luz borrosos y oscuros, dentro nitidos */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden}
.escena{position:absolute;inset:0;z-index:-1;background:#000;overflow:hidden;clip-path:inset(0% 0% 0% 0% round 0px)}
.triptico{position:absolute;inset:0;display:grid;grid-template-columns:1fr}
.col{position:relative;overflow:hidden}
.mov{position:absolute;inset:-8% -4%;animation:vaiven 16s ease-in-out infinite alternate}
.col-b .mov{animation-duration:19s;animation-delay:-6s}
.col-c .mov{animation-duration:17s;animation-delay:-11s}
@keyframes vaiven{0%{transform:translate3d(0,-3%,0) scale(1.02)}50%{transform:translate3d(-1.5%,1%,0) scale(1.08)}100%{transform:translate3d(1%,3%,0) scale(1.04)}}
.mov video{width:100%;height:100%;object-fit:cover}
.col-a,.col-b,.col-c{display:none}
@media (min-width:760px){
  .triptico{grid-template-columns:repeat(3,1fr);gap:6px}
  .col-a,.col-b,.col-c{display:block}
  .col-movil{display:none}
}
.desenfoque{display:none}
.sombra{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,9,9,.75) 0%,rgba(9,9,9,.15) 30%,rgba(9,9,9,.25) 60%,rgba(9,9,9,.92) 100%)}
.anima .desenfoque{display:block;position:absolute;inset:0;pointer-events:none;
  backdrop-filter:blur(9px) saturate(.6) brightness(.8);-webkit-backdrop-filter:blur(9px) saturate(.6) brightness(.8);
  -webkit-mask-image:radial-gradient(circle var(--r,300px) at var(--lx,50%) var(--ly,45%),transparent 0%,transparent 38%,#000 78%);
          mask-image:radial-gradient(circle var(--r,300px) at var(--lx,50%) var(--ly,45%),transparent 0%,transparent 38%,#000 78%)}
.anima .sombra{background:
  radial-gradient(circle var(--r,300px) at var(--lx,50%) var(--ly,45%),rgba(9,9,9,0) 0%,rgba(9,9,9,0) 30%,rgba(9,9,9,.55) 70%,rgba(9,9,9,.86) 100%),
  linear-gradient(180deg,rgba(9,9,9,.55) 0%,rgba(9,9,9,0) 22%,rgba(9,9,9,0) 50%,rgba(9,9,9,.92) 100%)}
.polvo,.grano{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.grano{opacity:.06;mix-blend-mode:screen}
.hero-texto{text-shadow:0 2px 24px rgba(0,0,0,.6);position:relative;padding:calc(var(--barra-h) + 30px) var(--gutter) 84px;width:100%;max-width:1600px;margin:0 auto}
/* Titular con la misma gotica del nombre junto al logo: hueso y oro, letra por letra */
@property --luz{syntax:'<number>';inherits:false;initial-value:0}
@property --barrido{syntax:'<number>';inherits:false;initial-value:0}
.titular{margin:0 0 26px;font:500 clamp(64px,17vw,200px)/.9 var(--f-display);letter-spacing:-.02em;perspective:900px}
.titular>span{display:block;padding:.04em .08em .14em 0;margin-bottom:-.12em}
.titular>span>span{display:inline-block}
.titular .t1{color:var(--hueso)}
.titular .t2{text-align:right}
.titular em{font:italic 400 1em/1 var(--f-display);color:#e2ddd4}
.letra{display:inline-block;will-change:transform;
  color:color-mix(in oklab, currentColor, #ffffff calc(max(var(--luz), var(--barrido)) * 80%));
  text-shadow:0 0 calc(max(var(--luz), var(--barrido)) * 30px) rgba(255,255,255,calc(max(var(--luz), var(--barrido)) * .55)), 0 12px 36px rgba(0,0,0,.6)}
.hero-pie{display:grid;gap:24px;align-items:end}
.hero-sub{max-width:42ch;color:var(--plata);font-size:clamp(16px,1.3vw,18.5px);margin:0;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.pista-luz{display:none;position:absolute;top:calc(var(--barra-h) + 26px);right:var(--gutter);margin:0;font:italic 500 18px/1 var(--f-display);color:var(--plata)}
.anima .pista-luz{display:block}
.bajar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:10px;font:500 10.5px/1 var(--f-texto);letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--plata)}
.bajar span{display:block;width:1px;height:38px;background:linear-gradient(var(--hueso),transparent);animation:bajar 2.4s var(--ease) infinite;transform-origin:top}
@keyframes bajar{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (min-width:960px){
  .hero-pie{grid-template-columns:1fr auto;gap:40px}
  .bajar{display:flex}
  .hero-texto{padding-bottom:100px}
  .titular{font-size:clamp(100px,11vw,190px)}
}

/* Uno de cerca */
.destacada{display:grid;gap:44px;padding:140px var(--gutter);max-width:1360px;margin:0 auto;align-items:center}
.destacada-texto>p{color:var(--plata);max-width:40ch;font-size:18px}
.destacada .pista{display:none;font:italic 500 19px/1.3 var(--f-display);color:var(--gris)}
.anima .destacada .pista{display:block}
.hero-pieza{margin:0;position:relative}
.linterna{position:relative;overflow:hidden;aspect-ratio:3/4;background:#000;border-radius:220px 220px 6px 6px}
.linterna img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.anima .linterna img{
  -webkit-mask-image:radial-gradient(circle var(--r,190px) at var(--lx,50%) var(--ly,38%),#000 0%,rgba(0,0,0,.92) 45%,rgba(0,0,0,.14) 100%);
          mask-image:radial-gradient(circle var(--r,190px) at var(--lx,50%) var(--ly,38%),#000 0%,rgba(0,0,0,.92) 45%,rgba(0,0,0,.14) 100%)}
@media (min-width:960px){.destacada{grid-template-columns:1fr .8fr;gap:90px}}

/* Trabajos */
.trabajos{padding:120px 0 110px;border-top:1px solid var(--linea)}
.reel{list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:1440px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;perspective:1200px}
.clip{position:relative;display:block;width:100%;padding:0;border:0;background:var(--carbon);cursor:pointer;overflow:hidden;aspect-ratio:9/16;color:var(--hueso);text-align:left;border-radius:4px}
.clip video{width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.9);transition:transform 1.1s var(--ease),filter .6s}
.clip:hover video,.clip:focus-visible video{transform:scale(1.05);filter:brightness(1) saturate(1)}
.clip-pie{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.85));font:400 13px/1.35 var(--f-texto);color:var(--plata);transition:transform .6s var(--ease)}
.clip-pie b{display:block;font:500 26px/1 var(--f-display);color:var(--hueso);margin-bottom:4px}
.clip:hover .clip-pie{transform:translateY(-6px)}
@media (min-width:760px){.reel{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (min-width:1200px){
  .reel li:nth-child(3n+2){margin-top:56px}
  .reel li:nth-child(3n+2)+li{margin-top:-24px}
}
.visor{border:0;padding:0;background:transparent;max-width:min(94vw,520px);max-height:94svh;color:var(--hueso)}
.visor::backdrop{background:rgba(5,5,5,.92);backdrop-filter:blur(6px)}
.visor video{max-height:84svh;width:auto;margin:0 auto;background:#000;border-radius:4px}
.visor-cerrar{display:block;margin:14px auto 0;min-height:44px;padding:0 24px;border-radius:999px;border:1px solid var(--linea);background:var(--negro);color:var(--hueso);font:500 14px var(--f-texto);cursor:pointer}

/* Estilos */
.estilos{display:grid;border-top:1px solid var(--linea)}
.mitad{position:relative;display:grid;align-items:end;min-height:80svh;overflow:hidden;isolation:isolate}
.mitad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transform:scale(1.18);transition:filter 1s var(--ease)}
.mitad-sombra img{filter:grayscale(1) brightness(.5)}
.mitad-luz img{filter:brightness(.55) saturate(1.1)}
.mitad:hover img{filter:brightness(.8) saturate(1.1)}
.mitad>div{padding:44px var(--gutter);background:linear-gradient(transparent,rgba(0,0,0,.82) 40%)}
.mitad h3{font:500 clamp(60px,8.5vw,140px)/.9 var(--f-gotica);margin:0 0 14px}
.mitad p{margin:0;max-width:38ch;color:var(--plata)}
.mitad-luz h3{color:var(--acento)}
@media (min-width:900px){.estilos{grid-template-columns:1fr 1fr}.mitad-luz{border-left:1px solid var(--linea)}}

/* Quien soy */
.artista{display:grid;gap:40px;padding:140px var(--gutter);max-width:1360px;margin:0 auto;align-items:start}
.artista figure{margin:0;overflow:hidden;border-radius:4px}
.artista figure img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(.3)}
.artista-texto>p{color:var(--plata);max-width:46ch;font-size:18px}
.datos{list-style:none;padding:0;margin:28px 0 32px;border-top:1px solid var(--linea)}
.datos li{padding:14px 0;border-bottom:1px solid var(--linea);color:var(--plata);font-size:15.5px}
.datos b{color:var(--hueso);font-weight:500}
.artista-foto-2{display:none}
@media (min-width:960px){
  .artista{grid-template-columns:.9fr 1.1fr .7fr;gap:52px}
  .artista-foto-2{display:block;margin-top:170px!important}
}

/* Como agendar: cartas apiladas */
.proceso{padding:130px 0 130px;background:var(--hueso);color:var(--negro)}
.proceso .etiqueta{color:#6f6a63}
.proceso .etiqueta::before{background:#7b6f55}
.proceso .h2 em{color:#7b6f55}
.pila{list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:900px}
.carta{position:sticky;top:calc(var(--barra-h) + 24px + var(--i)*18px);display:grid;grid-template-columns:auto 1fr;gap:6px 26px;padding:32px 30px 36px;margin-bottom:24px;background:#f8f4ed;border:1px solid #d9d2c6;border-radius:4px;box-shadow:0 -12px 30px rgba(0,0,0,.06);transform-origin:50% 0}
.carta .num{grid-row:span 2;font:500 46px/1 var(--f-gotica);color:#9a8b67;min-width:54px}
.carta h3{margin:0;font:500 clamp(32px,4vw,50px)/1 var(--f-display)}
.carta p{margin:0;color:#4d4943;max-width:52ch}

/* Escribeme */
.agenda{display:grid;gap:48px;padding:140px var(--gutter);max-width:1360px;margin:0 auto}
.agenda-texto>p{color:var(--plata);max-width:44ch;font-size:18px}
.contacto{list-style:none;padding:0;margin:32px 0 0;border-top:1px solid var(--linea)}
.contacto li{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.contacto span{font:500 11px/1.8 var(--f-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.contacto a{text-decoration:none;overflow-wrap:anywhere;transition:color .3s}
.contacto a:hover{color:var(--acento)}
.idea{display:grid;gap:24px;padding:30px;border:1px solid var(--linea);border-radius:6px;background:linear-gradient(160deg,#161616,#0e0e0e);align-self:start}
.idea fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.idea legend{font:italic 500 21px/1.2 var(--f-display);color:var(--hueso);margin-bottom:12px;padding:0}
.idea fieldset label{position:relative}
.idea fieldset input{position:absolute;opacity:0;inset:0;cursor:pointer}
.idea fieldset span{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid var(--linea);border-radius:999px;font-size:14.5px;transition:background .3s,color .3s,border-color .3s}
.idea fieldset input:checked+span{background:var(--hueso);color:var(--negro);border-color:var(--hueso)}
.idea fieldset input:focus-visible+span{outline:2px solid var(--acento);outline-offset:2px}
.campo{display:grid;gap:10px;font:italic 500 21px/1.2 var(--f-display);color:var(--hueso)}
.campo input,.campo textarea{font:400 16px/1.5 var(--f-texto);font-style:normal;color:var(--hueso);background:var(--negro);border:1px solid var(--linea);padding:13px 15px;border-radius:6px;resize:vertical}
.campo input:focus,.campo textarea:focus{border-color:var(--plata);outline:none}
.aviso{margin:0;font-size:13px;color:var(--gris)}
@media (min-width:960px){.agenda{grid-template-columns:1fr 1fr;gap:80px}}

/* Pie */
.pie{padding:80px var(--gutter) calc(110px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--linea);color:var(--gris);font-size:14px}
.pie img{width:90px;margin:0 auto 20px}
.pie-nombre{font:500 52px/1 var(--f-gotica);color:var(--hueso);margin:0 0 12px}
.pie a{color:var(--plata)}

.wa-flotante{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .carta{position:static}
  .precarga{display:none!important}
}