:root{
  --bg:#d8d8d6;
  --ink:#141414;
  --accent:#ff4b43;
  --line:1.4px;
  --pad:clamp(18px,3vw,44px);
  --bg-image:none;
  --bg-image-opacity:0;
  --bg-image-size:100% auto;
  --bg-image-position:center;
  --bg-image-repeat:repeat;
  --logo-size:150px;
  --logo-offset-y:-20px;
  --logo-offset-x:0px;
  --socials-offset-x:20px;
  --socials-offset-y:-18px;
  --social-icon-size:26px;
  --social-gap:16px;
  --img-shift-x:-110px;
  --img-shift-y:0px;
  --collage-offset-y:-66px;
  --collage-offset-x:0px;
  --collage-scale:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.35), transparent 28%),
    radial-gradient(circle at 78% 70%, rgba(255,255,255,.22), transparent 25%),
    var(--bg);
  color:var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; mix-blend-mode:multiply; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:var(--bg-image); background-size:var(--bg-image-size); background-position:var(--bg-image-position); background-repeat:var(--bg-image-repeat);
  opacity:var(--bg-image-opacity);
}
a{color:inherit}
.site-shell{min-height:100vh; padding:var(--pad); position:relative; z-index:1}
.topbar{display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:0; position:relative; z-index:20}
.brand{display:inline-block; transform:translate(var(--logo-offset-x), var(--logo-offset-y)); font-weight:800; letter-spacing:-.05em; font-size:clamp(28px,4vw,54px); text-decoration:none; line-height:.85}
.socials{display:flex;align-items:center;gap:var(--social-gap);padding-top:2px;transform:translate(var(--socials-offset-x), var(--socials-offset-y))}
.social-link{width:24px;height:24px;display:grid;place-items:center;color:var(--accent);text-decoration:none;transition:transform .18s ease,opacity .18s ease,filter .18s ease}
.social-link svg{width:20px;height:20px;display:block;overflow:visible}
.social-link svg *{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.social-link svg .social-dot{fill:currentColor;stroke:none}
.social-link:hover,.social-link:focus-visible{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 45%,transparent));outline:none}
.social-link[data-disabled="true"]{opacity:.28;pointer-events:none}

/* HOME COLLAGE */
.hero-wrap{display:grid; place-items:center; min-height:calc(100vh - 82px); transform:translateY(var(--collage-offset-y)); margin-bottom:var(--collage-offset-y)}
.collage{position:relative; width:min(760px,92vw); aspect-ratio:736/920}
.collage .ghost{
  position:absolute; inset:0; opacity:.17;
  background-image:linear-gradient(color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent) 60%, transparent)), var(--main-image, url('assets/reference.jpg'));
  background-position:center; background-size:cover; background-repeat:no-repeat; background-blend-mode:multiply, normal;
  clip-path:polygon(14% 0, 84% 0, 96% 18%, 88% 100%, 10% 100%, 0 32%);
}
.hotspot{
  position:absolute; display:block; border:var(--line) solid var(--accent); text-decoration:none; overflow:visible; isolation:isolate;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  transform-origin:center;
}
.hotspot::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--main-image, url('assets/reference.jpg')); background-size:auto var(--img-bg-height,920px); background-repeat:no-repeat;
  background-position:calc(var(--bx, 0px) + var(--img-shift-x)) calc(var(--by, 0px) + var(--img-shift-y));
  filter:contrast(1.04) saturate(.98);
  transition:transform .24s ease, filter .24s ease;
}
.hotspot::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:color-mix(in srgb, var(--accent) 72%, transparent);
  mix-blend-mode:multiply; opacity:.95;
  transition:opacity .24s ease;
}
.hotspot .tab,.hotspot .bigword{z-index:2}
.hotspot .tab{display:none !important}
.hotspot .tab{position:absolute; top:-16px; right:-1px; background:var(--accent); color:white; height:16px; padding:2px 8px 1px; display:flex; align-items:center; font:700 8px/1 "Courier New", monospace; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.hotspot:hover,.hotspot:focus-visible{transform:translateY(-4px) scale(1.045); box-shadow:0 10px 18px rgba(5,99,255,.16); outline:none}
.hotspot:hover::before,.hotspot:focus-visible::before{transform:scale(1.03); filter:contrast(1.03) saturate(1.02)}
.hotspot:hover::after,.hotspot:focus-visible::after{opacity:0}
.hotspot .bigword{position:absolute; left:12px; bottom:10px; color:white; mix-blend-mode:difference; font-size:clamp(20px,4vw,50px); font-weight:800; letter-spacing:-.06em; line-height:.9}

/* background positioning tuned for current portrait */
.h-vlog{left:10%; top:5%; width:35%; height:22%; --bx:-40px; --by:-20px}
.h-musica{left:47%; top:16%; width:23%; height:14%; --bx:-320px; --by:-110px}
.h-gira{left:18%; top:33%; width:40%; height:29%; --bx:-110px; --by:-300px}
.h-bio{left:58%; top:51%; width:33%; height:19%; --bx:-365px; --by:-450px}
.h-contacto{left:39%; top:72%; width:31%; height:22%; --bx:-240px; --by:-640px}
.h-merch{left:8%;top:66%;width:24%;height:16%; --bx:-55px; --by:-590px}
.hotspot.is-external .tab::after{content:" ↗"}

.mobile-note{display:none}

/* INNER PAGES */
.inner{max-width:1180px; margin:0 auto}
.nav{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:8px}
.nav a{border:1px solid var(--accent); color:var(--ink); background:rgba(216,216,214,.65); text-decoration:none; font:700 10px/1 "Courier New",monospace; letter-spacing:.09em; padding:9px 12px; text-transform:uppercase}
.nav a[aria-current="page"],.nav a:hover{background:var(--accent); color:white}
.page-hero{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:clamp(24px,5vw,72px); align-items:end; min-height:72vh; padding:6vh 0 3vh}
.kicker{font:700 10px/1 "Courier New",monospace; text-transform:uppercase; letter-spacing:.14em; margin:0 0 12px}
h1{font-size:clamp(64px,12vw,180px); letter-spacing:-.085em; line-height:.75; margin:0; text-transform:uppercase}
.lead{font-size:clamp(17px,2vw,26px); line-height:1.15; max-width:620px; margin:26px 0 0}
.artframe{position:relative; min-height:460px; border:var(--line) solid var(--accent); overflow:hidden; background:color-mix(in srgb, var(--accent) 18%, white)}
.artframe::before{content:""; position:absolute; inset:0; background:var(--main-image, url('assets/reference.jpg')) center/cover no-repeat; opacity:.95; mix-blend-mode:multiply; transform:scale(1.08)}
.artframe::after{content:attr(data-label); position:absolute; top:0; right:0; padding:4px 10px; background:var(--accent); color:white; font:700 9px/1 "Courier New",monospace; letter-spacing:.1em; text-transform:uppercase}
.content-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; padding:40px 0 80px}
.card{border:1px solid var(--accent); padding:18px; min-height:140px; background:rgba(255,255,255,.28); backdrop-filter:blur(2px)}
.card h2{margin:0 0 12px; font-size:clamp(20px,2.4vw,34px); letter-spacing:-.04em}
.card p,.card li{font-size:15px; line-height:1.45}
.card ul{padding-left:18px}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.cta{display:inline-block; border:1px solid var(--accent); background:var(--accent); color:white; padding:10px 14px; text-decoration:none; font:700 10px/1 "Courier New",monospace; letter-spacing:.08em; text-transform:uppercase}
.footer{display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--accent); padding:14px 0 30px; font:700 9px/1.3 "Courier New",monospace; letter-spacing:.08em; text-transform:uppercase}

@media(max-width:760px){
  .topbar{align-items:flex-end}.socials{gap:max(10px, var(--social-gap))}.social-link{width:calc(var(--social-icon-size) + 6px);height:calc(var(--social-icon-size) + 6px)}.social-link img{width:var(--social-icon-size);height:var(--social-icon-size)}.collage{width:96vw}.mobile-note{display:block; position:absolute; bottom:-32px; left:0; font:700 9px/1.2 "Courier New",monospace; text-transform:uppercase; letter-spacing:.08em}
  .hotspot .bigword{font-size:20px}
  .page-hero{grid-template-columns:1fr; padding-top:10vh}.artframe{min-height:52vh}.content-grid{grid-template-columns:1fr}.span-4,.span-5,.span-7,.span-8,.span-12{grid-column:auto}.nav{justify-content:flex-start}
  .h-merch{left:7%;top:65%;width:27%;height:16%}
  :root{--collage-offset-y:-34px}
}

.brand-logo{display:block;width:var(--logo-size);max-width:50vw;height:auto;object-fit:contain;object-position:left top}


/* FISH CURSOR — desktop only */
@media (hover:hover) and (pointer:fine){
  html.fish-cursor-enabled, html.fish-cursor-enabled body, html.fish-cursor-enabled a, html.fish-cursor-enabled button, html.fish-cursor-enabled input, html.fish-cursor-enabled select, html.fish-cursor-enabled textarea, html.fish-cursor-enabled label{cursor:none!important}
  .fish-cursor{position:fixed;left:0;top:0;width:46px;height:28px;z-index:99999;pointer-events:none;transform:translate3d(-100px,-100px,0);will-change:transform;filter:drop-shadow(0 3px 5px rgba(0,0,0,.12));transition:width .18s ease,height .18s ease,filter .18s ease,opacity .15s ease}
  .fish-cursor svg{display:block;width:100%;height:100%;overflow:visible}
  .fish-cursor .fish-body{fill:var(--accent,#0563ff)}
  .fish-cursor .fish-tail{fill:#ff7300;transform-origin:11px 14px;animation:fishTail .52s ease-in-out infinite alternate}
  .fish-cursor .fish-eye{fill:white}.fish-cursor .fish-pupil{fill:#111}
  .fish-cursor.is-hovering{width:58px;height:35px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.18))}
  .fish-cursor.is-clicking{width:40px;height:24px}
  @keyframes fishTail{from{transform:rotate(-8deg)}to{transform:rotate(9deg)}}
}
@media (prefers-reduced-motion:reduce){.fish-cursor .fish-tail{animation:none}}

/* ===== AJUSTE RIGUROSO 11 SEP 2026 =====
   Base: primera versión de hoy. El logo NO se modifica. */
.socials{
  position:relative;
  right:20px;
  gap:16px;
  padding-top:1px;
}
.social-link{
  width:34px;
  height:34px;
  opacity:1;
}
.social-link img{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
}
.social-link:hover,.social-link:focus-visible{
  transform:translateY(-2px) scale(1.07);
  filter:drop-shadow(0 0 8px rgba(0,87,255,.45));
}
.social-link[data-disabled="true"]{opacity:.35;pointer-events:none}

/* Capa de textura/foto visible de verdad. Si se elige otra desde EDITOR_HOME,
   la nueva imagen sustituye esta ruta mediante localStorage. */
body::after{
  background-image:var(--bg-image);
  background-size:var(--bg-image-size);
  background-position:var(--bg-image-position);
  background-repeat:var(--bg-image-repeat);
  opacity:var(--bg-image-opacity);
  mix-blend-mode:multiply;
  filter:contrast(1.04) saturate(.92);
}
@media(max-width:760px){
  .socials{right:0;gap:10px}
  .social-link{width:28px;height:28px}
  .social-link img{width:22px;height:22px}
}


/* ===== AJUSTE FINO v5 =====
   1) Redes alineadas visualmente con el logo.
   2) Azul de redes al 100% de opacidad, incluso antes de pegar URLs.
   3) Collage algo más arriba, pero menos que la versión demasiado alta.
   4) En pantallas bajas, el collage se escala lo justo para evitar scroll. */
.socials{
  right:20px;
  transform:translateY(-18px);
}
.social-link,
.social-link[data-disabled="true"]{
  opacity:1 !important;
}
.social-link[data-disabled="true"]{pointer-events:none}
.hero-wrap{
  min-height:calc(100vh - 54px);
}
.collage{
  width:min(760px,92vw,calc((100vh - 95px) * 0.8));
}
@media(max-width:760px){
  .socials{transform:none;right:0}
  .collage{width:96vw}
}


/* ===== Editor XY overrides ===== */
.socials{transform:translate(var(--socials-offset-x), var(--socials-offset-y)) !important; gap:var(--social-gap) !important;}
.social-link,.social-link[data-disabled="true"]{opacity:1 !important;}
.social-link{width:calc(var(--social-icon-size) + 8px) !important;height:calc(var(--social-icon-size) + 8px) !important;}
.social-link img{width:var(--social-icon-size) !important;height:var(--social-icon-size) !important;}
.brand{transform:translate(var(--logo-offset-x), var(--logo-offset-y)) !important;}
.collage{transform:translate(var(--collage-offset-x), var(--collage-offset-y)) scale(var(--collage-scale)) !important; transform-origin:center top;}
.hotspot .tab{display:none !important;}


/* ===== TYPOGRAPHY LAB — isolated, does not change layout or texture ===== */
:root{
  --lab-title-font: Arial, Helvetica, sans-serif;
  --lab-title-weight: 800;
  --lab-title-size: 1;
  --lab-title-tracking: -0.06em;
  --lab-title-color: #ffffff;
  --lab-title-blend: difference;
  --lab-fx-color: #0057ff;
  --lab-fx-opacity: 0;
  --lab-fx-blur: 0px;
  --lab-fx-x: 0px;
  --lab-fx-y: 0px;
  --lab-fx-scale: 1;
}
.hotspot .bigword{
  font-family:var(--lab-title-font) !important;
  font-weight:var(--lab-title-weight) !important;
  letter-spacing:var(--lab-title-tracking) !important;
  color:var(--lab-title-color) !important;
  mix-blend-mode:var(--lab-title-blend) !important;
  transform:scale(var(--lab-title-size)) !important;
  transform-origin:left bottom !important;
  isolation:isolate;
}
.hotspot .bigword::before{
  content:attr(data-text);
  position:absolute;
  inset:0 auto auto 0;
  color:var(--lab-fx-color);
  opacity:var(--lab-fx-opacity);
  filter:blur(var(--lab-fx-blur));
  transform:translate(var(--lab-fx-x),var(--lab-fx-y)) scale(var(--lab-fx-scale));
  transform-origin:left bottom;
  pointer-events:none;
  z-index:-1;
}

/* FIX REAL HOME/VLOG:
   el collage sube debajo del topbar; el rectángulo invisible del topbar bloqueaba VLOG.
   El topbar ya no captura eventos fuera de sus enlaces reales. */
.topbar{pointer-events:none!important}
.topbar .brand,.topbar .socials,.topbar .social-link{pointer-events:auto!important}
.h-vlog{pointer-events:auto!important}

/* HOME final: same display family as the interior main titles */
:root{--lab-title-font:"Fumble Sans Font","Fumble-Sans-Font",sans-serif!important}
.hotspot .bigword{
  font-family:"Fumble Sans Font","Fumble-Sans-Font",sans-serif!important;
}

/* FINAL: la tipografía del HOME la gobierna final-typography.js / tipografia-index.json */
.hotspot .bigword{font-family:inherit}

/* HOME FINAL — nombres convertidos a trazados de Fumble Sans.
   No dependen de Font Book ni de CSS local(). */
.hotspot .bigword{
  color:#0563ff!important;
  text-shadow:none!important;
  filter:drop-shadow(0 0 3px #0563ff);
}
.home-fumble-wordmark{
  display:block;
  height:1em;
  width:auto;
  max-width:100%;
  overflow:visible;
  color:currentColor;
}
.hotspot:hover .bigword,
.hotspot:focus-visible .bigword{
  color:#fff!important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.65));
}