/* =========================================================
   RETOLIGA · capa de marca (oct-2026)
   Paleta verde menta + morado, rotulación a pincel (Knewave),
   insignia angular, pared violeta con texto repetido.
   Se carga la ÚLTIMA en todas las páginas: solo afina, no
   cambia ids ni clases que usan los scripts.
   ========================================================= */
:root{
  --hot:#00ffb5;            /* acento principal: botones, cifras, marker */
  --violet:#7a2cff;         /* secundario: clasificatorio, cintas, paredes */
  --violet-hi:#b38cff;      /* morado legible como TEXTO sobre negro (AA) */
  --ink-violet:#120a24;     /* fondo alterno muy oscuro */
  --violet-deep:#2a0f5c;    /* centro de los degradados violeta */
  --up:var(--hot); --down:var(--violet-hi); --err:var(--violet-hi); /* errores: morado claro, sin rojos ni naranjas */
  --serif:'Knewave','Permanent Marker',cursive;
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07 .75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -10 0 0 0 6.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
}
::selection{background:var(--violet);color:#fff}

/* ---------- rotulación a pincel ---------- */
.serif{font-family:var(--serif);font-style:normal;font-weight:400;letter-spacing:0}
/* acentos dentro de titulares condensados: algo más pequeños que la caja
   (Knewave es más ancha y alta que Bricolage al 75 %), inclinados y con
   el borde seco del pincel */
.disp .serif{display:inline-block;font-size:.86em;line-height:1.25;transform:rotate(-4deg) translateY(-.03em);transform-origin:0 100%;padding:.12em .14em .32em .05em;margin:-.12em 0 -.32em}
/* la máscara de pincel recorta al borde de la caja: con line-height .92 se comía el rabillo de la p/g/y; la caja ahora lo incluye */
/* dentro de .ln (máscara de la animación) se inclina menos para que no se recorte */
.ln .serif{transform:rotate(-2deg)}
@supports (mask-size:10px) or (-webkit-mask-size:10px){
  .disp .serif,.stk,.motto.serif{-webkit-mask-image:var(--brush);mask-image:var(--brush);-webkit-mask-size:260px;mask-size:260px;-webkit-mask-clip:no-clip;mask-clip:no-clip}
}
.motto.serif{display:inline-block;line-height:1.3;padding:.1em .1em .2em 0;transform:rotate(-3deg);transform-origin:0 50%}

/* sobre fondos verdes (hover, fila «tú») el marker pasa a tinta */
.st:hover .serif,.rc:hover .serif,.tr:hover .serif,.tr.me .serif,.opt.on .serif,.btn .serif{color:var(--ink)}

/* subrayado a pincel (SVG inline como fondo) */
.brush{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C60 6 120 8 170 10 S260 13 296 6 L294 15 C240 20 180 18 120 19 S40 21 6 22 Z' fill='%237a2cff'/%3E%3C/svg%3E") no-repeat 0 92%/100% .26em;padding-bottom:.06em}

/* sticker a rotulador sobre foto */
.stk{position:absolute;z-index:3;display:inline-block;padding:.28em .6em .34em;font-family:var(--serif);font-size:clamp(18px,1.9vw,28px);line-height:1;color:var(--ink);background:var(--hot);transform:rotate(-8deg);clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);pointer-events:none;white-space:nowrap}
.stk.v{background:var(--violet);color:#fff}

/* flecha a mano (SVG inline) */
.arrow-h{display:block;width:clamp(70px,8vw,120px);height:auto;color:var(--hot);overflow:visible}
.arrow-h path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

/* etiqueta en diagonal */
.slant{display:inline-block;padding:.35em .8em .4em;background:var(--violet);color:#fff;font-family:var(--sans);font-weight:800;font-stretch:75%;text-transform:uppercase;letter-spacing:-.01em;line-height:1;transform:rotate(-10deg);transform-origin:0 100%}
.slant.g{background:var(--hot);color:var(--ink)}

/* ---------- insignia angular (SVG inline) ---------- */
.ins{display:block;width:clamp(96px,11vw,170px);height:auto;overflow:visible;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.ins text{font-family:var(--sans)}
.hero .ins-hero{position:absolute;z-index:4;top:clamp(84px,13vh,140px);right:var(--pad);transform:rotate(-6deg);pointer-events:none}
.ft-ins{display:flex;justify-content:flex-end;padding-top:56px}
.ft-ins .ins{width:clamp(84px,8vw,124px);transform:rotate(-6deg)}
.head-ins{position:absolute;z-index:3;top:clamp(90px,14vh,150px);right:var(--pad);transform:rotate(-6deg);pointer-events:none}
.head-ins .ins{width:clamp(80px,9vw,140px)}
.pf-hero>.head-ins,.poster>.head-ins{position:absolute}  /* gana a .pf-hero>*:not(.bg){position:relative} */
@media (max-width:700px){.poster>.head-ins{display:none}.head-ins .ins{width:72px}}

/* ---------- cinta morada que cruza la verde ---------- */
.tape-v{background:var(--violet);color:#fff;transform:rotate(1.8deg) scale(1.06);position:relative;z-index:4;overflow:hidden;border-block:3px solid var(--ink);margin:0 0 calc(-1 * (clamp(34px,5vw,74px) + 26px))}
.tape-v .in{display:flex;width:max-content;animation:tape 30s linear infinite reverse}
.tape-v span{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(34px,5vw,74px);padding:10px 34px;white-space:nowrap;letter-spacing:-.01em;line-height:1}
.tape-v span:nth-child(4n+1){color:transparent;-webkit-text-stroke:1.5px #fff}

/* ---------- pared violeta: filas de texto repetido + una foto ---------- */
.vwall{position:absolute;inset:0;overflow:hidden;z-index:0;
  background:radial-gradient(ellipse 70% 60% at 50% 55%,var(--violet) 0,var(--violet-deep) 45%,var(--ink-violet) 75%,var(--ink) 100%)}
.vwall::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vwall .rows{position:absolute;inset:-4% 0;display:flex;flex-direction:column;justify-content:space-between;z-index:2}
.vwall .row{display:flex;width:max-content;animation:vrow 60s linear infinite;will-change:transform}
.vwall .row:nth-child(even){animation-direction:reverse;animation-duration:72s}
.vwall .row span{font-family:var(--sans);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(54px,9vw,150px);line-height:.86;letter-spacing:-.03em;white-space:nowrap;padding-right:.35em;color:#fff;opacity:.92}
.vwall .row:nth-child(even) span{color:transparent;-webkit-text-stroke:max(1.5px,.11vw) rgba(255,255,255,.85);opacity:1}
@keyframes vrow{to{transform:translateX(-50%)}}
/* la única foto: recortada, en duotono violeta, en el centro, POR DEBAJO de las filas de texto (como el reel) */
.vwall .duo{position:absolute;z-index:1;left:50%;top:50%;width:clamp(180px,24vw,340px);aspect-ratio:3/4;transform:translate(-50%,-50%);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);background:var(--violet)}
.vwall .duo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:grayscale(1) contrast(1.35) brightness(.9);mix-blend-mode:multiply}
.vwall .duo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,10,36,0) 40%,rgba(18,10,36,.85));mix-blend-mode:normal}
/* velo inferior para que la sección empalme con el negro */
.vwall .fade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,var(--ink) 0,rgba(11,11,11,0) 18%,rgba(11,11,11,0) 70%,var(--ink) 100%)}
@media (max-width:900px){
  .vwall .row span{font-size:clamp(46px,15vw,90px)}
  .vwall .duo{width:min(54vw,240px)}
}
@media (prefers-reduced-motion:reduce){.vwall .row,.tape-v .in{animation:none}}

/* heros con foto: duotono morado (negro -> violeta) en vez de blanco y negro.
   La foto va en gris y se multiplica sobre el violeta del propio hero */
.hero:has(>img.bg),.poster:has(>img.bg),.pf-hero:has(>img.bg),.va-hero:has(>img.bg){background:var(--violet);isolation:isolate}
.hero>img.bg,.poster>img.bg,.pf-hero>img.bg,.va-hero>img.bg{mix-blend-mode:multiply;filter:grayscale(1) contrast(1.45) brightness(.95)!important}

/* las líneas de titular recortaban los rabillos (p, g, y) de Bricolage y de la letra de pincel:
   se da aire por debajo y se compensa con margen negativo para no mover el resto */
.ln{padding-bottom:.34em;margin-bottom:-.26em}