/* juani lópez. · web v6 · reglas en Estudio/publico/manual-marca/REGLAS-IA.md (12-10-2026) */
@font-face{font-family:"Familjen";src:url(/fuentes/FamiljenGrotesk.ttf) format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Besley";src:url(/fuentes/Besley-Italic.ttf) format("truetype");font-style:italic;font-weight:400 900;font-display:swap}
@font-face{font-family:"Azeret";src:url(/fuentes/AzeretMono.ttf) format("truetype");font-weight:100 900;font-display:swap}

:root{
  --negro:#0A0A0A;--crema:#F1ECE3;--naranja:#FF6A2B;--naranja-claro:#FFB08A;
  --crema-baja:#D9D2C6;--gris:#8A857D;--gris-oscuro:#5C5853;--linea:#2A2826;--superficie:#141312;
  --m:clamp(20px,5.9vw,96px);
  --sale:cubic-bezier(.16,1,.3,1);--entra:cubic-bezier(.7,0,.84,0);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--negro);color:var(--crema);font:400 clamp(17px,1.25vw,20px)/1.45 "Familjen",system-ui,sans-serif;letter-spacing:-.015em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
::selection{background:var(--naranja);color:var(--negro)}
:focus-visible{outline:2px solid var(--naranja);outline-offset:4px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:var(--m);top:-60px;z-index:30;background:var(--crema);color:var(--negro);padding:10px 14px}
.saltar:focus{top:12px}
.mono{font-family:"Azeret",ui-monospace,monospace;font-weight:500;font-size:clamp(11px,.8vw,13px);letter-spacing:.03em;text-transform:lowercase;line-height:1.35}
.serif{font-family:"Besley",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--naranja-claro)}

/* grano: siempre encima, 12 % en web */
.grano{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:.12;mix-blend-mode:overlay}

/* cabecera fija: logo a la izquierda, mono a la derecha */
.cab{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:32px;padding:20px var(--m);transition:background .4s var(--sale),backdrop-filter .4s}
.cab.solida{background:rgba(10,10,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cab-logo svg{height:22px;width:auto}
.cab-nav{display:flex;gap:28px;margin-left:auto;color:var(--gris)}
.cab-nav a,.cab-cta{transition:color .2s}
.cab-nav a:hover{color:var(--crema)}
.cab-cta{color:var(--crema)}
.cab-cta:hover{color:var(--naranja-claro)}
@media (max-width:720px){.cab-nav{display:none}.cab-cta{margin-left:auto}}

/* rótulo de sección: filete naranja + mono */
.rotulo{display:flex;align-items:center;gap:12px;color:var(--gris);margin-bottom:clamp(28px,4vw,56px)}
.filete{display:inline-block;width:28px;height:2px;background:var(--naranja)}

/* escala (manual: lienzo 1080 → ancho de pantalla) */
.tit-xl{font-weight:700;font-size:clamp(52px,10.4vw,176px);line-height:.92;letter-spacing:-.055em}
.tit-l{font-weight:700;font-size:clamp(44px,7.2vw,124px);line-height:.92;letter-spacing:-.055em}
.tit-xl .serif,.tit-l .serif{font-weight:400;letter-spacing:-.03em;padding-right:.06em}
.r{display:block}
.baja{color:var(--crema-baja)}
.fuente{color:var(--gris);margin-top:14px}

/* botón: crema sobre negro, el punto naranja como luz */
.boton{display:inline-flex;align-items:center;gap:14px;padding:16px 22px;background:var(--crema);color:var(--negro);font-weight:600;font-size:clamp(16px,1.1vw,18px);letter-spacing:-.01em;transition:background .3s var(--sale),transform .3s var(--sale)}
.boton::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--naranja)}
.boton span{transition:transform .3s var(--sale)}
.boton:hover{background:#fff8ee}
.boton:hover span{transform:translateX(4px)}
.boton--grande{padding:22px 30px;font-size:clamp(18px,1.4vw,22px)}

/* 1 · hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:clamp(96px,12vh,140px) var(--m) clamp(28px,5vh,56px);overflow:hidden;isolation:isolate}
.hero-luz{position:absolute;z-index:-2;width:min(120vw,1500px);aspect-ratio:1;left:var(--lx,62%);top:var(--ly,46%);translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,var(--naranja) 0%,rgba(255,106,43,.55) 38%,transparent 70%);filter:blur(30px);opacity:.0}
.hero-nombre{align-self:start;position:relative;z-index:0}
/* 12-oct, Juani: «la portada tapa mi cara». La foto es un recorte: va ARRIBA del nombre (el nombre pasa por detrás de la cabeza, como en el manual) y el nombre sube, así la cara queda libre en todos los tamaños */
.hero-nombre svg{width:100%;height:auto;overflow:visible}
.hero-foto{position:absolute;z-index:1;right:0;bottom:0;width:min(40vw,860px);mix-blend-mode:normal;-webkit-mask-image:radial-gradient(58% 62% at 55% 40%,#000 60%,transparent 92%);mask-image:radial-gradient(58% 62% at 55% 40%,#000 60%,transparent 92%)}
.hero-pie{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.6fr auto;align-items:end;gap:32px;padding-top:28px;border-top:1px solid rgba(241,236,227,.18)}
.hero-donde{color:var(--gris)}
.hero-bajada{font-size:clamp(20px,1.9vw,32px);line-height:1.15;letter-spacing:-.03em;max-width:24ch;font-weight:500}
@media (max-width:900px){
  .hero{grid-template-rows:auto 1fr;padding-top:96px}
  .hero-nombre{align-self:start;margin-top:4vh}
  .hero-foto{width:min(100vw,600px);right:-6vw;bottom:96px}
  .hero-pie{align-self:end;grid-template-columns:1fr;gap:18px;margin:0 calc(var(--m)*-1);padding:72px var(--m) 0;background:linear-gradient(transparent,var(--negro) 45%);border-top:0}
  .hero-donde{display:none}
}

/* 2 · tesis */
.tesis{padding:clamp(120px,18vw,260px) var(--m) clamp(100px,14vw,200px);display:grid;grid-template-columns:1fr;gap:clamp(36px,4vw,60px)}
.tesis-txt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,72px);max-width:1100px;font-size:clamp(19px,1.6vw,26px);line-height:1.3;letter-spacing:-.02em}
@media (max-width:720px){.tesis-txt{grid-template-columns:1fr}}

/* 3 · qué hago: lámina crema */
.hago{background:var(--crema);color:var(--negro);padding:clamp(96px,12vw,180px) var(--m)}
.hago .rotulo{color:var(--gris-oscuro)}
.hago .serif{color:var(--negro)}
.hago-cab{margin-bottom:clamp(56px,7vw,110px)}
.lista{border-bottom:1px solid rgba(10,10,10,.14)}
.lista .fila{display:grid;grid-template-columns:56px 64px minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start;padding:clamp(28px,3vw,44px) 0}
.lista .fila::before{background:var(--negro);opacity:.14}
.lista .num{color:var(--gris-oscuro);padding-top:.6em}
.lista h3{font-weight:700;font-size:clamp(28px,3.4vw,56px);line-height:.95;letter-spacing:-.045em}
.lista p{color:var(--gris-oscuro);font-size:clamp(17px,1.3vw,21px);line-height:1.35;max-width:46ch;padding-top:.3em}
.ico{width:48px;height:48px}
.hago .ico path,.hago .ico rect,.hago .ico circle:not(:last-child){stroke:var(--negro)}
@media (max-width:820px){.lista .fila{grid-template-columns:48px 1fr;row-gap:14px}.lista .ico{grid-row:1;grid-column:2;width:40px;height:40px}.lista h3,.lista p{grid-column:1/-1}}

/* 4 · casos */
.casos{padding:clamp(120px,16vw,240px) var(--m) clamp(80px,10vw,160px)}
.casos-lista{margin-top:clamp(56px,7vw,110px);border-bottom:1px solid var(--linea)}
.caso{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;padding:clamp(36px,4vw,64px) 0}
.caso-num{font-weight:300;font-size:clamp(72px,12vw,210px);line-height:.85;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.caso:nth-child(2) .caso-num{color:var(--naranja)}
.caso-num--txt{font-size:clamp(56px,8vw,140px)}
.caso-txt h3{font-weight:700;font-size:clamp(24px,2.4vw,40px);letter-spacing:-.04em;margin-bottom:10px}
.caso-txt p:not(.fuente){color:var(--crema-baja);max-width:44ch}
@media (max-width:820px){.caso{grid-template-columns:1fr}}

/* filas: el filete crece al entrar (motion.css · lista) */
.fila{position:relative}
.fila::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--crema);opacity:.16;transform-origin:left;transform:scaleX(0);transition:transform .8s var(--sale)}
.fila.ve::before{transform:none}

/* 5 · el estudio */
.estudio{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,120px);align-items:center;padding:clamp(100px,12vw,200px) var(--m);overflow:hidden;isolation:isolate}
.estudio-luz{position:absolute;z-index:-1;width:90vw;aspect-ratio:1;right:-30vw;top:50%;translate:0 -50%;border-radius:50%;background:radial-gradient(circle,var(--naranja) 0%,rgba(255,106,43,.55) 38%,transparent 70%);filter:blur(30px);opacity:.35}
.estudio-txt .baja{max-width:44ch;margin-top:clamp(24px,3vw,44px);font-size:clamp(18px,1.4vw,22px)}
.numeros+.fuente{margin-top:28px}
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--linea);padding-top:28px}
.numeros dt{color:var(--gris)}
.numeros div{display:flex;flex-direction:column-reverse;gap:8px}
.numeros dd{font-weight:300;font-size:clamp(64px,9vw,150px);line-height:.85;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.naranja{color:var(--naranja)}
.captura img{border-radius:22px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.captura figcaption{color:var(--gris);margin-top:16px}
@media (max-width:900px){.estudio{grid-template-columns:1fr}.estudio-foto{max-width:520px}}

/* 6 · oficio: foto a sangre en B/N, el naranja sube desde abajo */
.oficio{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:var(--m);overflow:hidden;isolation:isolate}
.oficio-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2;transform:scale(var(--z,1.08));will-change:transform}
.oficio::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(10,10,10,.7) 0%,transparent 25%,transparent 45%,rgba(10,10,10,.85) 78%,var(--negro) 100%),radial-gradient(70% 45% at 20% 105%,rgba(255,106,43,.75),transparent 70%)}
.oficio-txt{max-width:900px;padding-bottom:clamp(20px,4vw,60px)}
.oficio-txt .baja{max-width:42ch;margin-top:28px;font-size:clamp(18px,1.4vw,22px)}

/* 7 · cierre */
.cierre{position:relative;padding:clamp(140px,18vw,280px) var(--m) clamp(100px,12vw,180px);overflow:hidden;isolation:isolate}
.cierre-luz{position:absolute;z-index:-1;width:110vw;aspect-ratio:1;left:-20vw;bottom:-70vw;border-radius:50%;background:radial-gradient(circle,var(--naranja) 0%,rgba(255,106,43,.55) 38%,transparent 70%);filter:blur(30px);opacity:.55;animation:respira 4s linear infinite}
.cierre .baja{max-width:40ch;margin:clamp(28px,3vw,44px) 0 clamp(36px,4vw,56px);font-size:clamp(19px,1.6vw,26px);line-height:1.3}
.redes{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:40px;color:var(--crema-baja)}
.redes a{border-bottom:1px solid var(--linea);padding-bottom:4px;transition:border-color .2s}
.redes a:hover{border-color:var(--naranja)}

.pie{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:40px var(--m) calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);color:var(--gris)}
.pie-logo svg{height:28px;width:auto}
@media (max-width:720px){.pie{flex-direction:column;align-items:flex-start}}

/* barra fija solo en celular, aparece al pasar el hero */
.barra{display:none}
@media (max-width:720px){
  .barra{display:flex;justify-content:space-between;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;padding:16px 18px;background:var(--crema);color:var(--negro);font-size:12px;transform:translateY(140%);transition:transform .4s var(--sale)}
  .barra.ve{transform:none}
  .pie{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* ——— movimiento (motion.css del manual: sube 0,35em, un renglón cada 80 ms; la serif se descubre) ——— */
.js .entra .r,.js p.entra,.js .tesis-txt.entra{opacity:0;transform:translateY(.35em);transition:opacity .4s var(--sale),transform .4s var(--sale)}
.js .entra .r:nth-child(2){transition-delay:80ms}.js .entra .r:nth-child(3){transition-delay:160ms}
.js .entra.ve .r,.js p.entra.ve,.js .tesis-txt.entra.ve{opacity:1;transform:none}
.js .entra .serif{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--sale) .28s}
.js .entra.ve .serif{clip-path:inset(-.2em -.2em -.3em 0)}
.js .fila>*{opacity:0;transition:opacity .4s var(--sale) .15s}
.js .fila.ve>*{opacity:1}
.js .captura{opacity:0;transform:translateY(60px);transition:opacity .5s var(--sale),transform .5s var(--sale)}
.js .captura.ve{opacity:1;transform:none}

/* entrada del hero: luz desde 85 % → foto sube 40 px → nombre → el punto cae y se pone naranja */
.js .hero-luz{transform:scale(.85)}
.listo .hero-luz{opacity:.9;transform:scale(1);transition:opacity 1.2s var(--sale),transform 1.2s var(--sale)}
.js .hero-foto{opacity:0;transform:translateY(40px)}
.listo .hero-foto{opacity:1;transform:none;transition:opacity .6s var(--sale) .15s,transform .6s var(--sale) .15s}
.js .hero-nombre .nom{opacity:0;transform:translateY(.12em)}
.listo .hero-nombre .nom{opacity:1;transform:none;transition:opacity .5s var(--sale) .3s,transform .7s var(--sale) .3s}
.js .hero-nombre .punto{opacity:0;transform:translateY(-1200px);fill:var(--crema)}
.listo .hero-nombre .punto{animation:punto .7s var(--sale) .9s forwards}
.js .hero-pie{opacity:0}
.listo .hero-pie{opacity:1;transition:opacity .6s var(--sale) 1.1s}
@keyframes punto{60%{opacity:1;transform:none;fill:var(--crema)}to{opacity:1;transform:none;fill:var(--naranja)}}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* ——— motion design (12-oct, Juani: «le falta trabajo de motion design»). Vocabulario del manual: sale/entra, luz, punto naranja; nada de rebote ni 3D ——— */
/* hero al scrollear: el nombre se corre a la izquierda y la cara queda (profundidad: el nombre está detrás de la cabeza) */
.hero-nombre{translate:calc(var(--h,0) * -8vw) 0}
.hero-foto{translate:0 calc(var(--h,0) * -6%)}
.listo .hero-luz{animation:respira 4s linear 1.2s infinite}
/* titulares grandes: los renglones se abren en sentidos opuestos mientras pasan (translate, no pisa la entrada) */
.deriva .r:nth-child(odd){translate:calc(var(--d,0) * -4vw) 0}
.deriva .r:nth-child(even){translate:calc(var(--d,0) * 4vw) 0}
/* íconos: se dibujan con el trazo al entrar la fila (manual: trazo 3) */
.js .fila .ico :is(path,rect,circle,line,polyline){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--sale) .25s}
.js .fila.ve .ico :is(path,rect,circle,line,polyline){stroke-dashoffset:0}
/* el punto del logo como cursor: sigue al mouse con inercia y crece sobre lo que se toca */
.cursor{position:fixed;left:0;top:0;z-index:60;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--naranja);pointer-events:none;opacity:0;transition:width .3s var(--sale),height .3s var(--sale),margin .3s var(--sale),opacity .3s;mix-blend-mode:normal}
.cursor.ve{opacity:1}
.cursor.sobre{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(255,106,43,.25);box-shadow:0 0 0 1px var(--naranja)}
/* botones: se acercan apenas al mouse (imán de 6 px, sin rebote) */
.boton,.cab-cta{translate:var(--mx,0) var(--my,0);transition:background .3s var(--sale),translate .4s var(--sale)}
/* cierre del logo del pie: «juani lópez» aparece y el punto cae y se pone naranja (manual · logo cierre) */
.js .pie-logo .punto{opacity:0;transform:translateY(-400px);fill:var(--crema)}
.js .pie-logo.ve .punto{animation:punto .7s var(--sale) .3s forwards}
/* casos: el número entra desde abajo enmascarado */
.js .caso-num{clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--sale)}
.js .caso.ve .caso-num{clip-path:inset(-.1em -.1em -.15em -.1em)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .entra .r,.js p.entra,.js .tesis-txt.entra,.js .fila>*,.js .captura,.js .hero-foto,.js .hero-nombre .nom,.js .hero-pie{opacity:1!important;transform:none!important}
  .js .entra .serif{clip-path:none!important}
  .js .hero-nombre .punto,.js .pie-logo .punto{opacity:1!important;transform:none!important;fill:var(--naranja)!important}
  .hero-nombre,.hero-foto,.deriva .r,.boton,.cab-cta{translate:none!important}
  .js .fila .ico *{stroke-dashoffset:0!important}
  .js .caso-num{clip-path:none!important}
  .cursor{display:none}
  .js .hero-luz{opacity:.9;transform:none}
  .fila::before{transform:none}
}

@media (min-width:901px){
  .oficio-foto{left:auto;width:60%;object-position:50% 25%}
  .oficio::after{background:linear-gradient(to right,var(--negro) 40%,rgba(10,10,10,.2) 70%,transparent),linear-gradient(to bottom,transparent 60%,var(--negro)),radial-gradient(50% 45% at 30% 110%,rgba(255,106,43,.7),transparent 70%)}
  .oficio{align-items:center}
}