/* FIAH — EPK · versión 21 · carga de medios y rendimiento
   Dirección gráfica: tinta, crema, rojo gastado y telón verde.
   Conserva las clases y los recursos del proyecto original. */
:root{--ink:#141310;--film-strength:.55;--poster-grain:.08;--cream:#e9dfce;--red:#a4382d;--muted:#b7ad9c;--green:#202f28;--line:rgba(233,223,206,.25);--font-editorial:Archivo,'Helvetica Neue',Arial,sans-serif;--overlap:clamp(80px,12vw,170px);--page:1320px;--gutter:clamp(24px,5.3vw,84px);--space:clamp(72px,7.4vw,112px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--ink)}
img,video{max-width:100%}
a{color:inherit;text-underline-offset:6px;transition:color .18s ease}
a:hover{color:#d7695b}
a:focus-visible,button:focus-visible{outline:2px solid #c15746;outline-offset:6px}
button{font:inherit}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.u1{position:relative;isolation:isolate;background:var(--ink);color:var(--cream);font-family:var(--font-editorial);overflow-x:clip;-webkit-font-smoothing:antialiased}
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;background:url(../assets/textures/grain.webp) repeat;background-size:240px;mix-blend-mode:soft-light;opacity:.17;pointer-events:none;z-index:0}
.grain>*{position:relative;z-index:1}
.film{position:absolute;inset:0;background:url(../assets/textures/film-grain.webp) repeat;background-size:160px;mix-blend-mode:soft-light;opacity:var(--film-strength);pointer-events:none;z-index:10}
/* Segunda trama real, muy tenue, también sobre las letras. */
.u1::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:11;background:url(../assets/textures/film-grain.webp) repeat;background-size:192px;mix-blend-mode:normal;opacity:var(--poster-grain)}
.on-cream{color:var(--ink);background:var(--cream)}
.on-cream::before{opacity:.14;mix-blend-mode:multiply}
.harl-v{background:url(../assets/textures/harlequin-vertical.webp) repeat-y;background-size:100% auto}
.harl-h{background:url(../assets/textures/harlequin-horizontal.webp) repeat-x;background-size:auto 100%}
.curtain{background-color:#15291f;background-image:linear-gradient(rgba(7,20,13,.28),rgba(7,20,13,.28)),url(../assets/textures/curtain.jpg);background-size:auto,100% 100%;background-position:center,center;background-repeat:no-repeat,no-repeat}
.print{background:var(--cream) url(../assets/textures/paper.jpg) repeat}
.tape{position:absolute;width:100px;height:32px;background:url(../assets/textures/tape-1.webp) center/100% 100% no-repeat;pointer-events:none;z-index:3}
.tape-b{background-image:url(../assets/textures/tape-2.webp)}
/* Portada: nombre y fotografía real, con una navegación editorial debajo. */
.u2{background:var(--ink);padding:0}
.u3{display:block;position:absolute;top:0;right:0;bottom:0;width:clamp(36px,5.5vw,80px);opacity:.85;z-index:0}
.u4{max-width:var(--page);margin:auto;padding:0 calc(var(--gutter) + 40px) 0 var(--gutter)}
.u5{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0 0}
.u6{margin:0;color:var(--muted);font-size:11px;letter-spacing:.22em;font-weight:600}
.u7{display:flex;gap:22px}
.lang-btn{background:none;border:0;border-bottom:1px solid transparent;padding:10px 0;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.14em;color:#a39887}
.lang-btn[aria-pressed=true]{color:var(--cream);border-color:var(--red)}
.u9{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr);align-items:center;gap:clamp(24px,4vw,64px);padding:44px 0 64px;min-height:480px}
.u10{margin:0;font-size:clamp(112px,13.5vw,184px);font-weight:850;font-stretch:85%;letter-spacing:-.055em;line-height:.8;color:var(--cream);transform:scaleY(1.35);transform-origin:left center}
.u11{min-width:0;display:flex;align-items:center}
.u12{position:relative;width:108%;margin-left:-4%;transform:rotate(-1deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.u12>.u13{display:none}
.u14{position:relative}
.hero-print{position:absolute;display:block;width:110.793651%;max-width:none;height:auto;left:-6.349206%;top:-24.166667%}
.u15{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 30px;border-top:1px solid var(--line);padding:20px 0 24px}
.u16{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase}
.u17{position:relative;display:inline-block;text-decoration:none;padding:11px 14px;background:var(--cream);color:var(--ink);line-height:1.3}
.u17::after{content:"";position:absolute;bottom:4px;left:14px;width:24px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.u17:hover::after,.u17:focus-visible::after{transform:scaleX(1)}
.u18{display:flex;flex-wrap:wrap;gap:0;color:var(--cream)}
.u19{display:inline-flex;align-items:center;justify-content:center;width:36px;height:40px}
.u19 svg{width:16px;height:16px}
/* Bio: texto completo, retrato del video original y un borde de rombos. */
.u20{padding:var(--space) 0}
.u21{max-width:var(--page);margin:auto;padding:0 var(--gutter);display:grid;grid-template-columns:1.16fr .9fr;align-items:center;gap:clamp(48px,7vw,112px)}
.u22{grid-column:2;grid-row:1;min-width:0;padding:0}
.u23{position:relative;padding:3.636%;transform:rotate(1.3deg);filter:drop-shadow(0 6px 10px rgba(20,18,16,.14))}
.u13{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.u24{top:-8px;left:8px;transform:rotate(-18deg)}
.u25{display:none}
.u26{position:relative;aspect-ratio:4/5;background:#292820;overflow:hidden}
.bio-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:48% center}
.u27{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:40px}
.u28{display:flex;flex-direction:column;gap:16px;min-width:0}
.u29,.u38,.u93{margin:0;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.u30{margin:0;font-size:clamp(80px,9vw,132px);font-weight:850;font-stretch:85%;line-height:.88;letter-spacing:-.04em}
.u31{display:flex;flex-direction:column;gap:22px;font-size:16px;line-height:1.8;color:#322d26}
.u32,.u33,.u34{margin:0}
.u31 b{font-weight:650}
/* Catálogo: todas las portadas y datos originales. */
.u35{background:var(--ink);padding:var(--space) 0}
.u36{max-width:var(--page);margin:auto;padding:0 var(--gutter);display:flex;flex-direction:column;gap:80px}
.u37{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.u38{color:#c45f4f}
.u39{margin:0;font-size:clamp(48px,7.4vw,106px);font-weight:850;font-stretch:85%;line-height:.95;letter-spacing:-.04em;overflow-wrap:anywhere}
.u40{margin:0 0 4px;font-size:10px;letter-spacing:.17em;color:var(--muted)}
.u41{display:flex;flex-direction:column;gap:36px}
.u42{margin:0;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.u43{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 28px}
.u44,.u48,.u53{display:flex;flex-direction:column;gap:14px;min-width:0;text-decoration:none}
.u45{aspect-ratio:1;background:#25231d url(../assets/textures/grain.webp) repeat;background-size:240px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:10px;font-weight:500;letter-spacing:.1em;color:var(--muted)}
.u46,.u52{font-size:14px;font-weight:600;line-height:1.5;letter-spacing:.025em}
.u47{font-size:11.5px;line-height:1.7;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.u49,.u51{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid rgba(233,223,206,.22);box-shadow:0 8px 18px rgba(0,0,0,.2);transition:transform .25s ease}
.u48:hover .u49,.u53:hover .u51{transform:translateY(-4px)}
.u50{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:44px 28px}
.u50>.u28{gap:14px}
.u54{height:28px;opacity:.85}
/* FREAKSHOW: telón y foto en una composición amplia. */
.u55{background:var(--ink)}
.u56{padding:var(--space) 0 0;z-index:2}
.u57{max-width:var(--page);margin:auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr;align-items:start;gap:56px}
.u58{display:flex;flex-direction:column;gap:30px;min-width:0}
.u59{margin:0;font-size:11px;font-weight:500;letter-spacing:.19em;color:var(--cream)}
.u60{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-weight:850;font-stretch:85%;letter-spacing:-.035em;line-height:.95}
.u61{font-size:clamp(48px,7.5vw,108px);color:var(--cream)}
.u62{font-size:clamp(36px,5.5vw,80px);font-weight:700;text-transform:uppercase;color:var(--cream)}
.u63{margin:4px 0 0;font-size:14px;line-height:1.8;letter-spacing:.13em;text-transform:uppercase;color:var(--cream)}
.u64{scroll-margin-top:48px;min-width:0;width:94%;justify-self:end;margin-bottom:calc(-1 * var(--overlap));transform:rotate(1.2deg);filter:drop-shadow(0 6px 10px rgba(20,18,16,.16))}
/* Recorte de la fotografía original: la cinta queda fuera del encuadre.
   El archivo original permanece intacto; el marco es un recurso del ZIP. */
.freakshow-print{position:relative;padding:2.6%}
.freakshow-photo{position:relative;aspect-ratio:1260/600;overflow:hidden;background:var(--green)}
.u65{position:absolute;display:block;width:110.793651%;max-width:none;height:auto;left:-6.349206%;top:-24.166667%}
.freakshow-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.u66{background:var(--cream);padding:calc(var(--space) + var(--overlap)) 0 var(--space)}
.u67{max-width:var(--page);margin:auto;padding:0 var(--gutter)}
.u68{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px 56px;align-items:start}
.u68>.fs-intro{grid-column:2;grid-row:1}
.fs-intro .u70{columns:1}
.u68>.video-feature,.u68>.u73,.u68>[data-lang]:not(.fs-intro){grid-column:1/-1}
.u69{margin:0;font-size:clamp(40px,5.3vw,76px);font-weight:800;font-stretch:85%;letter-spacing:-.035em;line-height:1}
.u70{columns:3;column-gap:44px;font-size:16px;line-height:1.85;color:#322d26}
.u71{margin:0 0 20px;break-inside:avoid}
.u72{display:block;width:100%;max-width:960px;margin:0 auto;aspect-ratio:4/3;object-fit:contain;background:var(--ink);box-shadow:0 16px 30px rgba(20,18,16,.18)}
.u73{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.u74{aspect-ratio:16/9;background:#d9cdb8;display:flex;align-items:center;justify-content:center;border:1px solid rgba(20,18,16,.2);font-size:10px;font-weight:500;letter-spacing:.15em;color:#625441}
.u75{background:var(--green);padding:clamp(72px,8vw,112px) 0}
.u76{max-width:var(--page);margin:auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px)}
.u77{display:flex;flex-direction:column;gap:24px;min-width:0}
.u78{margin:0;font-size:clamp(36px,4.7vw,68px);font-weight:800;font-stretch:85%;letter-spacing:-.035em;line-height:1.08}
.u79{display:block;font-size:.7em;font-weight:500;color:#d17a65;margin-top:8px}
.u80{margin:0;font-size:14px;line-height:1.8;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.u81{display:flex;flex-direction:column;gap:22px;font-size:16px;line-height:1.8;color:var(--cream)}
.u82{margin:0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#df9a87}
/* Deluxe: texto editorial y dos énfasis con aumento de 2 puntos. */
.deluxe-copy{display:flex;flex-direction:column;gap:24px}
.ink-highlight-larger{font-size:calc(1em + 2pt)}
.u79{text-transform:uppercase}
.divider-deluxe{position:relative;z-index:2}
/* Videos en crema, conservando el enlace y los espacios originales. */
#videos{background:var(--cream);color:var(--ink)}
.u83{max-width:var(--page);margin:auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr;gap:48px}
.u83>.u37{grid-column:1/-1}
.u84{padding:12px 0;border-bottom:1px solid var(--red);font-size:11px;letter-spacing:.15em;text-decoration:none}
.u85{width:100%;max-width:960px;margin:0 auto;aspect-ratio:16/9;align-self:start;background:#29251f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-decoration:none;color:var(--cream);border:1px solid rgba(20,18,16,.2)}
.u85 svg{width:64px;height:64px}
.u86{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.u87{display:grid;width:100%;max-width:960px;margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.u88{display:flex;flex-direction:column;gap:12px;min-width:0}
.u89{aspect-ratio:16/9;background:#d8cbb6;display:flex;align-items:center;justify-content:center;border:1px solid rgba(20,18,16,.18);font-size:10px;letter-spacing:.1em;color:#625441}
.u90{font-size:10px;letter-spacing:.1em}
/* Contacto oscuro, con el damero al pie. */
#contacto{background:var(--ink);color:var(--cream);padding-bottom:calc(var(--space) + 52px)}
.u91{position:absolute;right:0;bottom:0;left:0;height:52px;background-image:url(../assets/textures/harlequin-horizontal.webp);background-repeat:repeat-x;background-size:auto 100%;opacity:.7}
.u92{max-width:var(--page);margin:auto;padding:0 var(--gutter);display:flex;flex-direction:column;gap:64px}
.u93{color:#c45f4f}
.u94{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.u95{display:flex;flex-direction:column;gap:28px;padding-top:24px;border-top:1px solid var(--line);min-width:0}
.u96{display:flex;flex-direction:column;gap:10px}
.u97{font-size:21px;font-weight:500;line-height:1.3}
.u98{font-size:13px;line-height:1.7;color:var(--muted);text-decoration:none;overflow-wrap:anywhere}
.u99{background:var(--ink);padding:32px 0}
.u100{max-width:var(--page);margin:auto;padding:0 var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.15em;color:var(--muted)}
.u101{color:var(--cream);font-weight:750}
.u102{text-decoration:none;padding:12px 0;text-transform:uppercase}
/* Textos de extensión: tratamiento editorial de los subtextos. */
.u31,.u70,.u81,.freakshow-sonic{font-family:var(--font-editorial);font-stretch:100%;font-weight:400;font-size:15px;letter-spacing:.055em;line-height:1.95}
.u63,.u80,.u47{font-family:var(--font-editorial);font-stretch:100%;font-weight:400}
.u31 b{font-weight:550}
.u68>.fs-editorial{grid-column:1;grid-row:1;min-width:0}
/* Destacados en negativo: bandas de tinta que siguen los saltos de línea. */
.ink-highlight,.u31 b{background:var(--ink);color:var(--cream);font-weight:500;padding:.1em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Reservas de fotografías: marcos reales, sin fotografías inventadas. */
.photo-slot{position:relative;padding:3.636%;filter:drop-shadow(0 5px 9px rgba(20,18,16,.12))}
.slot-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.photo-slot-paper{aspect-ratio:4/5;background:#d2c5af url(../assets/textures/paper.jpg) repeat;background-size:256px;display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.13em;text-align:center;color:#665641}


.fs-collage{margin-top:44px;padding:8px 12px 0 6px}
.fs-slot-first{width:86%;transform:rotate(-3deg);z-index:1}
.fs-slot-second{width:78%;margin:-64px 0 0 auto;transform:rotate(4deg);z-index:2}
#discografia .u37{align-items:flex-start}
#discografia .u40{margin:4px 0 0;font-size:12px;line-height:1.8;letter-spacing:.15em}
/* Materialidad de afiche: grano real del proyecto sobre toda la página. */
.freakshow-frame,.slot-frame,.u13{opacity:.86}
.video-feature{grid-column:1/-1;width:100%;max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.clip-caption{margin:0;font-size:13px;font-weight:600;letter-spacing:.12em;line-height:1.7}
.contact-signoff{margin:24px 0 0;align-self:flex-end;text-align:right;font-size:clamp(30px,4vw,48px);font-weight:850;font-stretch:90%;letter-spacing:-.035em;line-height:1.2}
.contact-signoff>span{padding:.08em .22em;background:var(--cream);color:var(--ink);box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Tres recortes irregulares de papel marrón por unión. */
.paper-stars{position:absolute;display:flex;align-items:center;gap:12px;pointer-events:none;z-index:4;filter:drop-shadow(0 3px 3px rgba(20,18,16,.2))}
.paper-star{display:block;flex:none;width:58px;height:64px;background-color:#967154;background-image:url(../assets/textures/film-grain.webp),url(../assets/textures/paper.jpg);background-size:100px,180px;background-blend-mode:soft-light,multiply;clip-path:polygon(48% 0,61% 32%,98% 29%,73% 54%,85% 94%,51% 73%,16% 98%,26% 60%,0 37%,36% 34%);transform:rotate(-12deg)}
.paper-star:nth-child(2){width:32px;height:38px;background-color:#aa896b;transform:rotate(19deg);margin-top:-28px;clip-path:polygon(52% 0,64% 34%,100% 40%,70% 61%,77% 100%,47% 77%,9% 93%,25% 57%,0 27%,37% 32%)}
.paper-star:nth-child(3){width:44px;height:49px;background-color:#86664c;transform:rotate(8deg);margin-top:20px}
.stars-disc{top:-32px;left:calc(50% - 84px);transform:rotate(-7deg)}
.stars-freakshow{top:10px;right:4%;transform:rotate(6deg)}
.stars-videos{top:-30px;left:calc(50% + 12px);transform:rotate(-10deg)}
.u17:hover{background:#e2ceb0;color:var(--ink)}
/* Promos originales en formato 4:3, con controles nativos de imagen y sonido. */
.promo-card{margin:0;min-width:0;display:flex;flex-direction:column;gap:16px}
.promo-video{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--ink);box-shadow:0 6px 12px rgba(20,18,16,.14)}
.promo-label{font-size:11px;font-weight:500;letter-spacing:.15em;line-height:1.7}
.hasta-el-mango-cover{object-position:center bottom}
/* Arlequines que recorren los laterales sin invadir el contenido. */
.section-harlequin{position:absolute;top:0;bottom:0;width:clamp(36px,5.5vw,80px);opacity:.85;z-index:0;pointer-events:none}
.disc-harlequin{right:0}
#discografia .u36{padding-right:calc(var(--gutter) + 40px)}
/* Cursor de tinta y estela breve: fuera del flujo y sin interceptar clics. */
.cursor-trail{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;contain:strict}
.cursor-spark{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity}
.cursor-spark::before{content:"";position:absolute;inset:0;background:var(--ink);clip-path:polygon(48% 0,61% 32%,98% 29%,73% 54%,85% 94%,51% 73%,16% 98%,26% 60%,0 37%,36% 34%)}
@media(hover:hover) and (pointer:fine){
 html,body,.u1{cursor:url(../assets/img/cursor-ink.svg) 3 2,auto}
 .u1 *{cursor:inherit}
 .u1 a,.u1 button{cursor:url(../assets/img/cursor-ink.svg) 3 2,pointer}
}
@media(prefers-reduced-motion:reduce){.cursor-trail{display:none}}
/* Portada animada: encuadre completo, sin controles ni pista de audio. */
.hero-paper .freakshow-photo{aspect-ratio:71/54}
.hero-loop{display:block;width:100%;height:auto;aspect-ratio:71/54;object-fit:contain;background:var(--ink)}
/* Distribución editorial explícita: la segunda columna empieza después de vals. */
.freakshow-sonic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;color:#322d26}
.sonic-column{display:flex;flex-direction:column;gap:22px;min-width:0}
.sonic-column .u71{margin:0}
#deluxe .ink-highlight-larger{text-transform:uppercase}
/* V09 — la imagen llega por debajo del borde físico, sin separaciones. */
.freakshow-print,.photo-slot,.u23{padding:0}
.freakshow-photo,.u26,.photo-slot-paper{background:transparent;clip-path:inset(.7%)}
.hero-paper .freakshow-photo{aspect-ratio:71/54}
.hero-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#freakshow-foto .freakshow-photo{aspect-ratio:3/2}
#freakshow-foto .u65{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover}
.photo-slot-paper img{display:block;width:100%;height:100%;object-fit:cover}
.fs-slot-first .photo-slot-paper{aspect-ratio:2/3}
.bio-photo{object-position:center}



.u21{align-items:start}
/* Telón real extraído de una zona vacía de fiahxampi-027; reflejo alternado para evitar cortes. */
.curtain{background-color:#102019;background-image:url(../assets/textures/curtain-027.webp);background-size:auto 100%;background-position:center top;background-repeat:repeat-x}
/* Todas las bandas de tinta comparten el aumento de dos puntos y las mayúsculas. */
.ink-highlight,.u31 b{font-size:calc(1em + 2pt);text-transform:uppercase}
.paper-video{position:relative;width:100%;min-width:0;filter:drop-shadow(0 5px 9px rgba(20,18,16,.14));isolation:isolate}
.paper-video>video{display:block;width:100%;height:auto;margin:0;max-width:none;box-shadow:none;clip-path:inset(2%);object-fit:cover}
.media-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:.86}
.framed-preview{position:relative;border:0}
.framed-preview>.media-frame{z-index:2}
/* V11 — recorte bajo la banda opaca del papel: no sobresale por fuera. */
.hero-paper .freakshow-photo{clip-path:inset(2%)}
.video-link{display:block;position:relative;background:transparent;line-height:0;filter:drop-shadow(0 5px 9px rgba(20,18,16,.14))}
.youtube-preview{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;clip-path:inset(2%);pointer-events:none}
.video-hover-label{position:absolute;inset:3.4%;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(20,19,16,.24);opacity:0;transition:opacity .2s ease;pointer-events:none;line-height:1.6}
.video-hover-label>span{padding:13px 20px;background:var(--cream);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.video-link:hover .video-hover-label,.video-link:focus-visible .video-hover-label{opacity:1}
@media(hover:none),(pointer:coarse),(max-width:760px){
 .video-hover-label,.video-link:hover .video-hover-label{opacity:0;background:transparent;align-items:center;padding:8px}
 .video-link.is-armed .video-hover-label,.video-link:focus-visible .video-hover-label{opacity:1}
 .video-hover-label>span{max-width:100%;padding:7px 8px;font-size:clamp(8px,2.4vw,10px);letter-spacing:.04em;text-align:center;white-space:nowrap;overflow-wrap:normal}
}
@media(prefers-reduced-motion:reduce){.video-hover-label{transition:none}}
/* V14 — BIO: tres impresiones a la derecha, en orden de lectura. */
#bio{padding-bottom:clamp(40px,4vw,64px)}
.bio-collage{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:340px;justify-self:center}
.bio-collage .bio-slot{width:84%;margin:0 0 0 auto;transform:rotate(3deg);z-index:1}
.bio-collage .u23{width:94%;margin:-62px 0 0;transform:rotate(-3deg);z-index:2}
.bio-collage .bio-third{width:84%;margin:-62px 0 0 auto;transform:rotate(3deg);z-index:3}
@media(max-width:760px){
 #bio .u21{gap:40px}
 .bio-collage{max-width:320px}
 .bio-collage .u23,.bio-collage .bio-third{margin-top:-52px}
}
/* V15 — portada cuadrada en movimiento, con el mismo borde físico. */
.freakshow-cover{position:relative;display:block;overflow:hidden;background:transparent;border:0}
.freakshow-cover-loop{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;clip-path:inset(2%)}
/* Créditos y acceso directo a Spotify, con tipografía editorial legible. */
.fs-credits{margin:20px 0 0;font-family:var(--font-editorial);font-size:15px;font-weight:400;line-height:1.8;letter-spacing:.03em;color:#322d26;max-width:40ch}
.fs-credits a{font-weight:550;text-decoration-thickness:1px;text-decoration-color:rgba(20,19,16,.5);text-underline-offset:3px}
.spotify-cta{display:inline-flex;align-items:center;justify-content:center;gap:.4em;align-self:center;margin-left:auto;padding:12px 0;border:0;border-bottom:1px solid var(--red);background:none;color:inherit;font-size:11px;font-weight:400;line-height:1.5;letter-spacing:.15em;text-decoration:none;white-space:nowrap}
.spotify-cta:hover{color:#d7695b;background:none}
/* Foto real nueva: tono impreso suave y grano del recurso original. */
.bio-third .photo-slot-paper{position:relative}
.bio-third .photo-slot-paper img{filter:saturate(.85) sepia(.06) contrast(.94)}
.bio-third .photo-slot-paper::after{content:"";position:absolute;inset:0;background:url(../assets/textures/film-grain.webp) repeat;background-size:180px;opacity:.12;mix-blend-mode:multiply;pointer-events:none}
/* Adaptación real para escritorio, tablet y teléfono. */
@media(min-width:1600px){.u1{max-width:1680px;margin:auto;border-inline:1px solid var(--line)}}
@media(max-width:1100px){
 .u9{min-height:380px;padding:44px 0 60px}.u10{font-size:13.5vw}
 .u15{justify-content:center}.u16{justify-content:center;gap:12px 14px}.u18{justify-content:center}
 .u21{gap:48px;grid-template-columns:1.15fr .85fr}.u31{font-size:15px;line-height:1.8}
 .u43,.u50{grid-template-columns:repeat(3,minmax(0,1fr))}
 .u70{columns:2;column-gap:36px}.u94{gap:32px}
 .u83{grid-template-columns:1fr}.u85{max-width:960px;margin:auto}.u87{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media(max-width:760px){
 :root{--gutter:28px;--space:64px}
 .u9{grid-template-columns:1fr;gap:40px;padding:44px 0 48px;min-height:0}.u10{font-size:clamp(132px,33vw,240px)}
 .u11{max-width:640px;width:100%;justify-self:center}.u12{width:100%;margin-left:0;transform:rotate(-1deg)}
 .u15{padding:20px 0;gap:16px}.u16{width:100%;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.1em}
 .u21{grid-template-columns:1fr;padding-inline:var(--gutter);gap:56px}.u27{grid-column:1;grid-row:1;gap:32px}.u22{grid-column:1;grid-row:2;width:min(100%,440px);justify-self:center;padding:0 12px}
 .u3{width:28px}.u4{padding-right:calc(var(--gutter) + 20px)}.u31{font-size:15px}.u30{font-size:100px}
 .u36{gap:56px}.u39{font-size:clamp(38px,8.5vw,64px)}.u43,.u50{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
 .u40{font-size:11px}.u42{font-size:11.5px}.u46,.u52{font-size:13px}.u47{font-size:11px}
 .u54{height:20px}.u57{grid-template-columns:1fr;gap:40px}.u60{flex-direction:column;align-items:flex-start;gap:12px}.u61,.u62{font-size:clamp(34px,8vw,60px)}.u58{gap:24px}
 .u64{width:100%;max-width:none;transform:rotate(1deg)}.u68{grid-template-columns:1fr;gap:36px}.u68>.fs-editorial,.u68>.fs-intro{grid-column:1;grid-row:auto}.u70{columns:1;max-width:640px}.u72{width:100%}
 .u73{gap:24px}.u74{font-size:9px}.u76{grid-template-columns:1fr;gap:40px}.u78{font-size:40px}
 .u83{gap:36px}.u87{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}.u85 svg{width:56px;height:56px}
 .stars-freakshow{top:-28px;right:0;transform:scale(.65) rotate(6deg);transform-origin:right top}
 .stars-disc,.stars-videos{transform:scale(.8) rotate(-8deg);transform-origin:center}
 .stars-videos{left:calc(50% - 50px)}
 .section-harlequin{width:28px}
 #discografia .u36{padding-right:calc(var(--gutter) + 20px)}
 .u73{grid-template-columns:1fr}
 .freakshow-sonic{grid-template-columns:1fr;gap:28px}
 .fs-collage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:20px;margin-top:32px;padding:10px}
 .fs-slot-first{width:100%;transform:rotate(-2deg)}.fs-slot-second{width:100%;margin:42px 0 0;transform:rotate(3deg)}
 
 
 .u94{grid-template-columns:1fr;gap:40px}.u92{gap:48px}.u95{gap:24px}.u98{font-size:14px}.u100{font-size:9px}
}
@media(max-width:380px){:root{--gutter:22px}.u16{justify-content:flex-start;column-gap:12px}.u43,.u50,.u73{gap:28px 16px}.u39{font-size:35px}.u61,.u62{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a,.u17::after,.u49,.u51{transition:none}}

/* BIO — encabezado más abajo dentro de la columna, sin una fila vacía sobre las fotos. */
#bio{padding-top:clamp(48px,5vw,72px)}
#bio .u21{align-items:center;gap:clamp(48px,7vw,112px)}
#bio .u27{display:flex;grid-column:1;grid-row:1;gap:32px;padding-top:56px;align-self:center}
#bio .u27>.u28{gap:24px}
#bio .u27>[data-lang]{align-self:stretch}
#bio .bio-collage{grid-column:2;grid-row:1;align-self:center;max-width:290px}
.bio-statement{margin:4px 0 0;font-size:17.6667px;font-weight:500;line-height:1.8;letter-spacing:.035em}
.bio-statement .ink-highlight{background:var(--red)}
/* La introducción se alinea con el collage, independientemente del título. */
.u68{row-gap:36px}
.u68>.fs-editorial{grid-column:1/-1;grid-row:1}
.u68>.fs-collage{grid-column:1;grid-row:2;width:90%;max-width:350px;justify-self:center;margin-top:0}
.u68>.fs-intro{grid-column:2;grid-row:2;align-self:center}
.fs-intro .u71:last-child{margin-bottom:0}
.freakshow-sonic{align-items:start}
/* Portada FREAKSHOW más contenida, conservando el puente hacia el bloque crema. */
#freakshow{--overlap:clamp(56px,8vw,110px)}
#freakshow .u56{padding-top:clamp(60px,6vw,88px)}
#freakshow .u57{gap:36px}
#freakshow .u64{width:80%;max-width:900px}
#freakshow .u66{padding-top:calc(clamp(64px,6vw,88px) + var(--overlap))}
@media(max-width:1100px) and (min-width:761px){#bio .u21{column-gap:48px}}
@media(max-width:760px){
 #bio{padding-top:44px}
 #bio .u21{gap:32px}
 #bio .u27{padding-top:0;gap:28px}
 #bio .bio-collage{grid-column:1;grid-row:2;max-width:320px}
 .bio-statement{font-size:17px;letter-spacing:.015em}
 .u68>.fs-editorial,.u68>.fs-collage,.u68>.fs-intro{grid-column:1;grid-row:auto}
 .u68>.fs-collage{width:100%;max-width:480px;margin-top:0}
 #freakshow .u57{gap:28px}
 #freakshow .u64{width:94%}
}

/* V18 — redes siempre en una segunda fila, también en escritorio ancho. */
.u15{flex-direction:column;align-items:center;gap:12px;padding:18px 0 20px}
.u15>.u16{width:100%;justify-content:center}
.u15>.u18{justify-content:center}
/* Ajuste moderado de aire entre títulos, grupos y comienzo de contenido. */
.u36{gap:56px}
.u41{gap:28px}
.u42{padding-bottom:14px}
.u83{gap:36px}
.u92{gap:48px}
.u75{padding:clamp(60px,6.5vw,96px) 0}
#freakshow .u66{padding-top:calc(clamp(56px,5vw,72px) + var(--overlap))}
@media(max-width:760px){
 .u36{gap:44px}
 .u41{gap:24px}
 .u83{gap:30px}
 .u92{gap:40px}
}

/* V19 — relato completo antes de los tres videos, con dos columnas editoriales. */
.u68>.fs-visual-column{grid-column:1;grid-row:2;align-self:center;min-width:0;display:flex;flex-direction:column;gap:32px}
.fs-visual-column>.fs-collage{width:90%;max-width:350px;align-self:center;margin-top:0}
.fs-slot-first{width:78%}
.fs-slot-second{margin-top:-48px}
/* DELUXE sigue el negativo cálido utilizado en el encabezado de BIO. */
.u79{width:fit-content;padding:.08em .18em;background:var(--red);color:var(--cream);line-height:1.15}
.u63 strong,.u80 strong{font-weight:750}
/* Cierre con tres recortes pequeños de la misma familia gráfica. */
.contact-farewell{position:relative;align-self:flex-end;display:flex;align-items:center;gap:20px;margin-top:24px}
.contact-farewell .contact-signoff{margin:0}
.stars-thanks{position:relative;gap:8px}
.stars-thanks .paper-star{width:30px;height:34px}
.stars-thanks .paper-star:nth-child(2){width:18px;height:21px;margin-top:-16px}
.stars-thanks .paper-star:nth-child(3){width:24px;height:27px;margin-top:10px}
.u102{font-size:13px;font-weight:550;letter-spacing:.1em}
@media(max-width:760px){
 .u68>.fs-visual-column{grid-column:1;grid-row:auto;gap:26px}
 .fs-visual-column>.fs-collage{width:100%;max-width:480px}
 .fs-slot-first{width:92%}
 .fs-slot-second{margin-top:42px}
 .contact-farewell{gap:14px}
 .u102{font-size:12px}
}
/* En teléfono el relato completo precede a los videos. */
@media(max-width:760px){
 .u68>.fs-visual-column{display:contents}
 .fs-visual-column>.fs-collage{grid-column:1;grid-row:2;justify-self:center}
 .u68>.fs-intro{grid-column:1;grid-row:3}
 .u68>.video-feature{grid-row:4}
 .u68>.u73{grid-row:5}
}

/* V20 — un solo cuerpo de texto; el collage se centra respecto a su altura completa. */
.fs-intro .fs-manifesto{background:var(--red);font-size:calc(1em + 4pt)}
.u68>.fs-visual-column{align-self:center}

/* V21 — foto, textura y marco aparecen como una sola impresión, sin saltos de tamaño. */
.media-managed .media-shell:not(.media-ready){opacity:0}
.media-managed .media-shell.media-error{opacity:1}
.media-shell.media-error .slot-frame,.media-shell.media-error .freakshow-frame,.media-shell.media-error>.u13,.media-shell.media-error .tape,.frame-unavailable{display:none}
.youtube-feature{width:100%;max-width:960px;min-width:0;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.youtube-caption{margin:0;font-size:11px;font-weight:500;letter-spacing:.12em;line-height:1.65}

.media-managed img.media-error{border-color:transparent;box-shadow:none}