/* Sebastian Rozas — Portfolio
   Sistema visual según el Manual de identidad (ruta Vestuario).
   Paleta 50/25/15/5/5 · Big Shoulders Display (titulares, siempre en mayúsculas) · Libre Franklin (texto). */

:root{
  --verde:#173B2C; --hueso:#EDE8DC; --papel:#F7F4EC; --negro:#151715; --taquilla:#536858; --dorsal:#EBB92A;
  --linea:#CFC8B8;
  --f-d:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-t:"Libre Franklin","Franklin Gothic Medium",Arial,sans-serif;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hueso);color:var(--negro);font-family:var(--f-t);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,dl,dd,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--dorsal);outline-offset:3px}
.on-dark :focus-visible,.site-foot :focus-visible{outline-color:var(--dorsal)}

.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gutter);padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:768px){ .wrap{padding-left:32px;padding-right:32px} }

.lbl{font-family:var(--f-t);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.d{font-family:var(--f-d);text-transform:uppercase;line-height:.88;font-weight:900}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--dorsal);color:var(--negro);padding:10px 14px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.noscript{padding:48px 0}

/* ---------- Logo ---------- */
.mono-sr{width:44px;height:44px;border:2px solid currentColor;display:grid;place-items:center;font-family:var(--f-d);font-weight:900;font-size:24px;line-height:1;position:relative;flex:none}
.mono-sr::before,.mono-sr::after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;top:4px}
.mono-sr::before{left:4px}.mono-sr::after{right:4px}
.lg .first{display:block;font-family:var(--f-d);font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1;margin-bottom:.06em;font-size:.2em}
.lg .last{display:block;font-family:var(--f-d);font-weight:900;text-transform:uppercase;line-height:.8;letter-spacing:.01em;font-size:1em}

.plate{display:inline-flex;align-items:stretch;border:2px solid currentColor}
.plate .nm{padding:10px 14px;font-family:var(--f-d);text-transform:uppercase;line-height:.88}
.plate .nm small{display:block;font-weight:700;letter-spacing:.18em;font-size:12px;margin-bottom:4px}
.plate .nm strong{display:block;font-weight:900;font-size:42px}
.plate .num{border-left:2px solid currentColor;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;font-weight:600;font-size:10px;letter-spacing:.1em}
.plate .num strong{font-family:var(--f-d);font-size:36px;font-weight:900;line-height:.85;letter-spacing:0;color:var(--dorsal)}

/* ---------- Etiqueta doble ---------- */
.tag{display:inline-flex;border:1.5px solid currentColor;font-family:var(--f-t);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.tag > span{padding:7px 10px}
.tag > span + span{border-left:1.5px solid currentColor}
.tag .acc{background:var(--dorsal);color:var(--negro)}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(237,232,220,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--verde)}
.brand-txt{font-family:var(--f-d);text-transform:uppercase;line-height:.9}
.brand-txt .first{display:block;font-weight:700;font-size:10px;letter-spacing:.2em}
.brand-txt .last{display:block;font-weight:900;font-size:24px}
.nav{display:flex;gap:4px}
.nav a{display:block;padding:10px 10px;text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--verde)}
@media (max-width:420px){ .brand-txt{display:none} .nav a{padding:10px 8px;font-size:11px} }

/* ---------- Motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{animation:rise .5s var(--ease) both}
.reveal.d1{animation-delay:.06s}.reveal.d2{animation-delay:.12s}.reveal.d3{animation-delay:.18s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1.5px solid currentColor;text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:transparent;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--verde);border-color:var(--verde);color:var(--hueso)}
.on-dark .btn:hover{background:var(--hueso);border-color:var(--hueso);color:var(--verde)}
.ficha{border:1.5px solid currentColor;padding:14px 16px}
.btn.solid{background:var(--dorsal);border-color:var(--dorsal);color:var(--negro)}
.btn.solid:hover{background:var(--verde);border-color:var(--verde);color:var(--hueso)}
.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.ext::after{content:"↗";font-size:1.05em;letter-spacing:0;margin-left:2px}

/* ---------- Sección ---------- */
.section{padding:56px 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;border-bottom:2px solid var(--verde);padding-bottom:14px;margin-bottom:28px;color:var(--verde)}
.sec-head h2{font-size:clamp(44px, 8vw, 88px)}
@media (min-width:900px){ .section{padding:88px 0} }

/* ---------- Lista de proyectos ---------- */
.cases{display:grid;gap:28px}
@media (min-width:640px){ .cases{grid-template-columns:1fr 1fr;gap:32px 24px} }
@media (min-width:1024px){ .cases{grid-template-columns:repeat(3,1fr)} }
.case-card{display:flex;flex-direction:column;text-decoration:none;color:var(--negro);background:var(--papel);border:1px solid var(--linea);transition:transform .25s var(--ease),border-color .25s}
.case-card:hover{transform:translateY(-3px);border-color:var(--verde)}
.case-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--verde)}
.case-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.case-card:hover .case-media img{transform:scale(1.03)}
.case-media .tag{position:absolute;left:12px;top:12px;background:var(--hueso);color:var(--verde);border-color:var(--hueso)}
.case-body{padding:16px 16px 18px;display:grid;gap:8px;flex:1}
.case-body h3{font-size:40px;color:var(--verde)}
.case-body p{font-size:15px}
.case-stats{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:auto;padding-top:10px;border-top:1px solid var(--linea);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--taquilla)}
.case-stats b{color:var(--negro);font-weight:600}
.case-more{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--verde)}

/* Portada tipográfica (casos sin fotografía) */
.type-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:var(--hueso);background:var(--verde);
  background-image:repeating-linear-gradient(90deg, rgba(237,232,220,.07) 0 1px, transparent 1px 25%)}
.type-cover strong{font-family:var(--f-d);font-weight:900;text-transform:uppercase;line-height:.84;font-size:clamp(48px, 8vw, 72px)}
.type-cover span{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;opacity:.85}

/* Tratamiento fotográfico del manual */
.grade img{filter:saturate(.72) contrast(1.08) brightness(.97) sepia(.08)}

/* ---------- Enlaces ---------- */
.links{display:grid;gap:0}
.links li{border-top:1px solid currentColor}
.links li:last-child{border-bottom:1px solid currentColor}
.links a,.links .pending-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px;text-decoration:none;min-height:48px}
.links .name{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1}
.links .handle{font-size:14px;opacity:.85;overflow-wrap:anywhere;text-align:right}
.links a:hover .name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pending{font-size:13px;font-style:italic;opacity:.85}

/* ---------- Footer ---------- */
.site-foot{background:var(--verde);color:var(--hueso);padding:56px 0 calc(56px + env(safe-area-inset-bottom, 0px))}
.foot-grid{display:grid;gap:40px}
.foot-grid .lbl{margin-bottom:14px}
.foot-id{display:grid;gap:14px;align-content:start}
.foot-meta{opacity:.85}
@media (min-width:900px){ .foot-grid{grid-template-columns:1.4fr 1fr;gap:64px} .foot-id{justify-items:end;text-align:right} }

/* ---------- About ---------- */
.about-hero{background:var(--verde);color:var(--hueso);padding:56px 0}
.about-hero h1{font-size:clamp(64px, 14vw, 180px)}
.about-hero .lead{font-size:clamp(19px, 2.2vw, 24px);max-width:36ch;margin-top:20px;line-height:1.35}
.about-grid{display:grid;gap:40px}
@media (min-width:900px){ .about-grid{grid-template-columns:5fr 7fr;gap:64px} .about-hero{padding:80px 0} }
.prose{max-width:62ch;font-size:18px}
.prose p+p{margin-top:14px}
.list-rule li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--linea);font-size:17px}
.list-rule li:last-child{border-bottom:1px solid var(--linea)}
.list-rule .n{font-family:var(--f-d);font-weight:900;font-size:20px;color:var(--verde);min-width:2ch}
.brands{display:flex;flex-wrap:wrap;gap:8px}
.brands a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px solid var(--verde);color:var(--verde);text-decoration:none;font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1}
.brands a:hover{background:var(--verde);color:var(--hueso)}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photo-strip figure{aspect-ratio:4/5;overflow:hidden;background:var(--verde)}
.photo-strip img{width:100%;height:100%;object-fit:cover}
.h3{font-family:var(--f-d);font-weight:900;text-transform:uppercase;font-size:34px;line-height:.9;color:var(--verde);margin-bottom:16px}

/* ---------- Página de caso ---------- */
.case-top{background:var(--verde);color:var(--hueso);padding:28px 0 0}
.crumbs{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:40px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.back:hover{text-decoration:underline;text-underline-offset:4px}
.case-title{font-size:clamp(64px, 15vw, 200px);overflow-wrap:anywhere}
.case-sub{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:clamp(26px, 4.4vw, 52px);line-height:.95;margin-top:14px;max-width:22ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--hueso);margin-top:32px}
.stats > div{padding:12px 14px}
.stats > div + div{border-left:1.5px solid var(--hueso)}
.stats dt{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-top:6px}
.stats dd{font-family:var(--f-d);font-weight:900;font-size:clamp(32px, 6vw, 60px);line-height:.9;text-transform:uppercase}
.stats dd.pending{font-family:var(--f-t);font-weight:400;font-size:13px;line-height:1.3;text-transform:none;font-style:italic}
.stats-wrap{display:flex;flex-direction:column-reverse}
.stats-wrap dt{margin-top:6px}
.case-cover{margin-top:40px;aspect-ratio:16/9;overflow:hidden;background:var(--negro);position:relative;top:1px}
.case-cover img{width:100%;height:100%;object-fit:cover}
.case-cover.type .type-cover{position:absolute}
.case-cover.type .type-cover strong{font-size:clamp(64px, 14vw, 180px)}
@media (max-width:640px){ .case-cover{aspect-ratio:4/3} .stats > div{padding:10px} }

.blocks{padding:56px 0 24px}
.block{display:grid;gap:14px;padding:28px 0;border-top:2px solid var(--verde)}
.block:first-child{border-top:0;padding-top:0}
.block .tag{color:var(--verde);justify-self:start;align-self:start}
.block p{font-size:clamp(18px, 1.9vw, 22px);line-height:1.45;max-width:58ch}
@media (min-width:900px){ .block{grid-template-columns:260px 1fr;gap:32px;padding:40px 0} .blocks{padding:88px 0 40px} }

/* Content */
.content{padding-top:24px;padding-bottom:72px}
.content-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;margin-bottom:24px}
.content-head .tag{color:var(--verde)}
.content-head p{font-size:14px;color:var(--taquilla);max-width:52ch}
.pieces{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:640px){ .pieces{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .pieces{grid-template-columns:repeat(3,1fr)} }
.piece{display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--linea);min-width:0}
.piece.wide{grid-column:1 / -1}
.piece-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--linea);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--taquilla)}
.piece-top .n{font-family:var(--f-d);font-weight:900;font-size:22px;letter-spacing:0;color:var(--verde)}
.frame{position:relative;background:var(--hueso);display:flex;justify-content:center}
.frame::before{content:"Cargando vista previa…";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--taquilla);z-index:0}
.frame iframe{position:relative;z-index:1;display:block;border:0;width:100%;background:transparent}
.frame.ig iframe{height:560px;max-width:400px}
.frame.tt iframe{height:600px;max-width:340px}
.frame.yt{aspect-ratio:16/9}
.frame.yt iframe{position:absolute;inset:0;height:100%}
.yt-facade{position:absolute;inset:0;z-index:1;border:0;padding:0;cursor:pointer;background:var(--negro);width:100%}
.yt-facade img{width:100%;height:100%;object-fit:cover;opacity:.85}
.yt-facade .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;background:var(--dorsal);color:var(--negro);padding:12px 18px;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.yt-facade .play::before{content:"";width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.yt-facade:hover .play{background:var(--hueso)}
.piece-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:12px;border-top:1px solid var(--linea);margin-top:auto}
.piece-foot strong{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1;color:var(--verde)}
.piece-foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde);text-underline-offset:4px}

.note{border-left:4px solid var(--dorsal);padding:6px 0 6px 18px;margin-top:48px;max-width:60ch}
.note p{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:clamp(24px, 3vw, 34px);line-height:1;color:var(--verde)}
.note footer{margin-top:10px;color:var(--taquilla)}

/* Navegación entre casos */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--verde)}
.pager a{display:grid;gap:6px;padding:24px 0;text-decoration:none;color:var(--verde);min-height:44px}
.pager a + a{text-align:right;border-left:1px solid var(--linea);padding-left:16px}
.pager a:first-child{padding-right:16px}
.pager .d{font-size:clamp(28px, 5vw, 56px)}
.pager a:hover .d{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.pager-all{text-align:center;padding:8px 0 64px}

.notfound{padding:96px 0}
.notfound h1{font-size:clamp(56px, 12vw, 140px);color:var(--verde)}
[tabindex="-1"]:focus{outline:none}
.case-spacer{height:48px}
.muted{color:var(--taquilla)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{border:1px solid var(--linea);background:var(--papel);padding:6px 10px;font-size:14px}
.xp > li{display:grid;gap:8px;padding:24px 0;border-top:1px solid var(--linea)}
.xp > li:first-child{border-top:0;padding-top:0}
.xp{padding:0;list-style:none;margin:0}
.xp h3{font-size:clamp(30px, 4vw, 44px);color:var(--verde)}
.xp ul{list-style:disc;padding-left:18px;margin-top:10px;max-width:70ch}
.xp ul li{margin:4px 0}
.xp-dates{font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--taquilla)}
@media (min-width:900px){ .xp > li{grid-template-columns:240px 1fr;gap:32px} }
.rows li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--linea)}
.rows li:last-child{border-bottom:1px solid var(--linea)}
.rows .yr{font-family:var(--f-d);font-weight:900;font-size:22px;color:var(--verde)}

/* ---------- Home: hero con pizarra ---------- */
.hero{padding:28px 0 64px;color:var(--negro)}
.hero-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-bottom:24px}
.hero-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.hero-id b{font-family:var(--f-d);font-weight:900;text-transform:uppercase;font-size:26px;line-height:1;color:var(--verde)}
.hero-id span{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--taquilla)}
.loc{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--verde)}
.loc .coord{color:var(--taquilla);font-weight:500}
.loc .clock{font-variant-numeric:tabular-nums;border-left:1px solid var(--linea);padding-left:10px}
.pin{width:8px;height:8px;border-radius:50%;background:var(--verde);position:relative;flex:none}
.pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--verde);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{from{transform:scale(.4);opacity:.9}to{transform:scale(1.4);opacity:0}}
@media (max-width:560px){ .loc .coord{display:none} }

.board{position:relative;aspect-ratio:16/9;background:var(--verde);border:8px solid var(--negro);border-radius:6px;overflow:hidden;color:var(--hueso);
  background-image:radial-gradient(ellipse at 22% 30%, rgba(237,232,220,.07), transparent 55%),radial-gradient(ellipse at 78% 72%, rgba(237,232,220,.05), transparent 50%)}
.board-wrap{position:relative;padding-bottom:18px}
.board-lines{position:absolute;inset:0;width:100%;height:100%}
.board-lines rect,.board-lines line,.board-lines circle{fill:none;stroke:rgba(237,232,220,.22);stroke-width:1.5;vector-effect:non-scaling-stroke}
.board-lines .arrow{fill:none;stroke:rgba(237,232,220,.85);stroke-width:.45;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s var(--ease) forwards}
.board-lines .a1{animation-delay:.2s}.board-lines .a2{animation-delay:.5s}.board-lines .a3{animation-delay:.8s}.board-lines .a4{animation-delay:1.1s}
@keyframes draw{to{stroke-dashoffset:0}}
.mag{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;z-index:2}
.mag i{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #fff 0, var(--hueso) 45%, #cfc8b8 100%);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.mag.acc i{background:radial-gradient(circle at 35% 30%, #fff3c4 0, var(--dorsal) 50%, #b98f17 100%)}
.mag b{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.chalk{position:absolute;transform:translate(-50%,-50%);font-family:var(--f-d);font-weight:700;font-size:clamp(22px, 3vw, 38px);color:rgba(237,232,220,.55);line-height:1}
.board-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--f-d);font-weight:900;text-transform:uppercase;line-height:.84;font-size:clamp(60px, 11.5vw, 168px);z-index:1;text-shadow:0 0 1px rgba(237,232,220,.6)}
.board-copy .w{display:block;animation:chalk 1s var(--ease) both}
.board-copy .w1{animation-delay:1.3s}
.board-copy .w2{animation-delay:1.7s;position:relative}
.board-copy .w2::after{content:"";position:absolute;left:4%;right:4%;bottom:-.08em;height:.06em;background:var(--dorsal);border-radius:4px;transform-origin:left;animation:line .6s var(--ease) 2.5s both}
@keyframes chalk{from{clip-path:inset(-10% 100% -40% -5%);opacity:.4}to{clip-path:inset(-10% -5% -40% -5%);opacity:1}}
@keyframes line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.board-tag{position:absolute;left:16px;bottom:12px;opacity:.6;font-size:10px}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:28px}
.hero-foot p{max-width:52ch;font-size:17px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.hero .btn{color:var(--verde)}
.hero .btn.solid{color:var(--negro)}
@media (max-width:640px){
  .board{aspect-ratio:4/5;border-width:6px}
  .mag i{width:26px;height:26px}
  .mag b{font-size:9.5px}
  .board-copy{font-size:clamp(56px, 21vw, 96px)}
}

/* ---------- Duotono (manual) ---------- */
.duo{position:relative;isolation:isolate;background:var(--verde);overflow:hidden}
.duo img,.duo video{filter:grayscale(1) contrast(1.12) brightness(1.02)}
.duo::before{content:"";position:absolute;inset:0;background:var(--hueso);mix-blend-mode:multiply;z-index:1;pointer-events:none}
.duo::after{content:"";position:absolute;inset:0;background:var(--verde);mix-blend-mode:lighten;z-index:2;pointer-events:none}
.case-media .tag{z-index:3}

/* ---------- Galería Backstage ---------- */
.bts{padding-top:8px;padding-bottom:24px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:8px}
.gallery .big{grid-column:span 2;grid-row:span 2}
@media (min-width:768px){ .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:10px} }
.g-item{display:block;width:100%;height:100%;padding:0;border:0;cursor:zoom-in}
.g-item img,.g-item video{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.g-item:hover img,.g-item:hover video,.g-item:focus-visible img{transform:scale(1.05)}
.g-play{position:absolute;left:10px;bottom:10px;z-index:3;background:var(--dorsal);color:var(--negro);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}

/* ---------- Visor ---------- */
.lightbox{width:100%;height:100%;max-width:100vw;max-height:100dvh;margin:0;padding:16px;border:0;background:var(--negro);color:var(--hueso)}
.lightbox[open]{display:grid;grid-template-rows:auto 1fr auto;gap:12px}
.lightbox::backdrop{background:rgba(21,23,21,.92)}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lb-fig{display:grid;place-items:center;align-content:center;gap:10px;min-height:0}
.lb-media{display:inline-block;line-height:0}
.lb-media img,.lb-media video{max-width:100%;max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain}
.lb-cap{font-size:14px;opacity:.8;text-align:center;max-width:60ch}
.lb-btn{min-height:44px;padding:10px 14px;border:1.5px solid var(--hueso);background:transparent;color:var(--hueso);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.lb-btn:hover{background:var(--hueso);color:var(--negro)}
.lb-btn.solid{background:var(--dorsal);border-color:var(--dorsal);color:var(--negro)}

/* ---------- Footer minimal ---------- */
.site-foot{padding:40px 0 calc(40px + env(safe-area-inset-bottom, 0px))}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.foot-lbl{opacity:.75;margin-bottom:10px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1;text-decoration:none}
.foot-links a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media (min-width:900px){ .site-foot nav{text-align:right} .foot-links{justify-content:flex-end} }

/* ---------- Reproductor Spotify ---------- */
.player{position:relative}
.head-row #player-slot{margin-left:auto}
@media (max-width:560px){ .player-lbl{display:none} .player-btn{padding:8px 12px !important} .head-row{gap:8px} }
.player-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px 8px 12px;background:var(--negro);color:var(--hueso);border:1.5px solid var(--dorsal);border-radius:999px;cursor:pointer;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.eq i{width:3px;background:var(--dorsal);height:30%;transform-origin:bottom}
.eq i:nth-child(2){height:60%}.eq i:nth-child(3){height:90%}.eq i:nth-child(4){height:50%}.eq i:nth-child(5){height:70%}
.is-playing .eq i{animation:eq .9s ease-in-out infinite alternate}
.is-playing .eq i:nth-child(2){animation-delay:-.3s}.is-playing .eq i:nth-child(3){animation-delay:-.6s}.is-playing .eq i:nth-child(4){animation-delay:-.15s}.is-playing .eq i:nth-child(5){animation-delay:-.45s}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1.1)}}
.player-panel{position:absolute;right:0;top:calc(100% + 14px);width:min(360px, calc(100vw - 32px));background:var(--negro);color:var(--hueso);border:1.5px solid var(--dorsal);padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.player-panel[hidden]{display:none}
.player-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.player-x{width:44px;height:36px;border:0;background:none;color:var(--hueso);font-size:22px;cursor:pointer}
.spotify-slot{min-height:152px;background:#000;border-radius:12px;overflow:hidden}
.spotify-slot iframe{display:block;border:0;width:100%}
.player-note{font-size:11.5px;opacity:.7;margin-top:8px}
.nav a{white-space:nowrap}
@media (max-width:480px){
  .brand-txt{display:none}
  .head-row{gap:6px}
  .nav{gap:0}
  .nav a{padding:10px 6px;font-size:10.5px;letter-spacing:.08em}
  .player-btn{min-height:40px;padding:6px 10px !important}
}

/* =====================================================================
   v3 — Ajustes tras revisión (escala estándar, pizarra interactiva,
   carrusel de proyectos, contenidos minimal, pie con iconos)
   ===================================================================== */
body{font-size:15px}
.wrap{max-width:1180px}
.head-row{min-height:60px}
.brand-txt{display:block !important}
.brand-txt .first{font-size:9.5px}
.brand-txt .last{font-size:22px}
.section{padding:56px 0}
@media (min-width:900px){ .section{padding:72px 0} }
.sec-head{margin-bottom:24px;padding-bottom:12px}
.sec-head h2{font-size:clamp(36px, 5.5vw, 64px)}

/* Hero */
.hero{padding:32px 0 24px}
.hero-top{display:grid;gap:20px;align-items:end;margin-bottom:24px}
@media (min-width:860px){ .hero-top{grid-template-columns:1fr 340px;gap:40px} }
.hero-desc{color:var(--taquilla);margin-bottom:10px}
.hero-lead{font-family:var(--f-t);font-weight:500;font-size:clamp(20px, 2.4vw, 28px);line-height:1.25;max-width:30ch;color:var(--negro);text-wrap:balance}
.hero-side{display:grid;gap:10px}
.loc{justify-self:start}
@media (min-width:860px){ .loc{justify-self:end} }
.music{display:flex;align-items:center;gap:10px}
.music .eq{flex:none}
.music-embed{flex:1;min-width:0;height:80px;border-radius:12px;overflow:hidden;background:var(--negro)}
.music-embed iframe{display:block;border:0;width:100%;height:80px}

/* Pizarra */
.board{aspect-ratio:2/1;border-width:6px;touch-action:none}
.board-copy{font-size:clamp(48px, 8.6vw, 124px);pointer-events:none}
.mag{width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:grab;transform:translate(-50%,-50%);display:block;z-index:3;touch-action:none;
  background:radial-gradient(circle at 35% 30%, #fff 0, var(--hueso) 45%, #c9c2b2 100%);box-shadow:0 3px 0 rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.18);transition:transform .15s var(--ease), box-shadow .15s}
.mag.b{background:radial-gradient(circle at 35% 30%, #8fa497 0, var(--taquilla) 50%, #3e5045 100%)}
.mag.ball{width:22px;height:22px;background:radial-gradient(circle at 35% 30%, #fff3c4 0, var(--dorsal) 50%, #b98f17 100%)}
.mag:hover{transform:translate(-50%,-50%) scale(1.08)}
.mag.drag{cursor:grabbing;transform:translate(-50%,-56%) scale(1.15);box-shadow:0 8px 0 rgba(0,0,0,.25), 0 14px 22px rgba(0,0,0,.3);z-index:4}
.mag:focus-visible{outline:3px solid var(--dorsal);outline-offset:3px}
.mag.ball{animation:nudge 1.6s var(--ease) 2.6s 2}
@keyframes nudge{0%,100%{margin-top:0}40%{margin-top:-8px}60%{margin-top:2px}}
.board-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;padding:6px 12px;border-radius:999px;background:rgba(21,23,21,.55);color:var(--hueso);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:opacity .4s;pointer-events:none}
.board-hint.off{opacity:0}
@media (max-width:640px){
  .board{aspect-ratio:4/5}
  .board-copy{font-size:clamp(52px, 19vw, 88px)}
  .mag{width:24px;height:24px}
  .mag.ball{width:18px;height:18px}
}

/* Carrusel de proyectos */
.car-ctrl{display:flex;gap:6px}
.pill-btn{width:44px;height:44px;border-radius:999px;border:1.5px solid var(--verde);background:transparent;color:var(--verde);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.pill-btn:hover{background:var(--verde);color:var(--hueso)}
.pill-btn svg{width:18px;height:18px}
.carousel{overflow-x:auto;scrollbar-width:none;cursor:grab;padding:4px 0 8px;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.carousel.grabbing{cursor:grabbing;user-select:none}
.track{display:flex;gap:20px;width:max-content;padding:0 20px;list-style:none;margin:0}
.slide{width:clamp(250px, 24vw, 310px);flex:none}
.case-card{display:block;background:transparent;border:0;text-decoration:none;color:var(--negro);transition:none}
.case-card:hover{transform:none}
.case-media{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/5;padding:16px;background:var(--verde);color:var(--hueso);overflow:hidden;
  background-image:repeating-linear-gradient(90deg, rgba(237,232,220,.06) 0 1px, transparent 1px 25%);transition:background-color .3s}
.case-card:hover .case-media,.case-card:focus-visible .case-media{background-color:#1d4a37}
.case-n{font-family:var(--f-d);font-weight:800;font-size:18px;opacity:.8}
.case-brand{font-family:var(--f-d);font-weight:900;text-transform:uppercase;line-height:.86;font-size:clamp(44px, 4.6vw, 60px);overflow-wrap:anywhere}
.case-body{display:grid;gap:6px;padding:12px 2px 0;border:0}
.case-sub2{font-size:15px}
.case-more{flex:none;font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--verde)}
@media (max-width:640px){ .slide{width:72vw} .track{gap:14px;padding:0 16px} }

/* About teaser (home) */
.about-teaser{background:var(--verde);color:var(--hueso)}
.teaser-grid{display:grid;gap:20px}
.teaser-grid h2{font-size:clamp(40px, 6vw, 72px);margin-top:8px}
.teaser-txt{font-size:clamp(17px, 1.6vw, 20px);line-height:1.45;max-width:52ch;margin-bottom:20px}
.about-teaser .btn{color:var(--hueso)}
.about-teaser .btn:hover{background:var(--hueso);color:var(--verde);border-color:var(--hueso)}
@media (min-width:860px){ .teaser-grid{grid-template-columns:1fr 1.2fr;gap:48px;align-items:end} }

/* Página de caso: escala */
.case-top{padding:24px 0 40px}
.crumbs{margin-bottom:28px}
.case-title{font-size:clamp(52px, 9vw, 120px)}
.case-sub{font-size:clamp(22px, 3vw, 36px)}
.case-full{margin-top:12px;opacity:.85}
.stats{margin-top:28px}
.stats dd{font-size:clamp(30px, 4.2vw, 48px);font-variant-numeric:tabular-nums}
.blocks{padding:48px 0 16px}
.block p{font-size:clamp(16px, 1.35vw, 18px);line-height:1.55}
@media (min-width:900px){ .block{grid-template-columns:200px 1fr;padding:32px 0} .blocks{padding:64px 0 24px} }
.about-hero h1{font-size:clamp(56px, 10vw, 120px)}
.about-hero .lead{font-size:clamp(17px, 1.8vw, 20px)}
.h3{font-size:28px}
.xp h3{font-size:clamp(26px, 3vw, 34px)}

/* Content: tarjetas minimal */
.content{padding-top:16px;padding-bottom:56px}
.pieces{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .pieces{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1080px){ .pieces{grid-template-columns:repeat(4,1fr)} }
.piece{display:flex;flex-direction:column;gap:8px;background:none;border:0;text-decoration:none;color:var(--negro);min-width:0}
.piece.wide{grid-column:span 2}
.thumb{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--verde);border-radius:4px}
.piece.wide .thumb{aspect-ratio:auto;height:100%;min-height:0}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
a.piece:hover .thumb img,a.piece:focus-visible .thumb img{transform:scale(1.04)}
.thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(237,232,220,.92);color:var(--verde);display:grid;place-items:center;transition:transform .2s var(--ease)}
.play-ic svg{width:22px;height:22px;margin-left:3px}
a.piece:hover .play-ic,.yt-facade:hover .play-ic{transform:translate(-50%,-50%) scale(1.08)}
.thumb-tag{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:999px;background:rgba(21,23,21,.6);color:var(--hueso);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.piece-foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0;border:0;margin:0;font-size:12px;color:var(--taquilla)}
.piece-foot strong{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:18px;line-height:1;color:var(--verde);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piece-foot a{min-height:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--verde)}
.yt-facade{position:absolute;inset:0;border:0;padding:0;background:var(--negro);cursor:pointer;width:100%;height:100%}
.yt-facade img{width:100%;height:100%;object-fit:cover;opacity:1}
.thumb.yt iframe{position:absolute;inset:0}
@media (max-width:759px){ .piece.wide{grid-column:1 / -1} .piece.wide .thumb{aspect-ratio:16/9;height:auto} }

/* Backstage: rejilla uniforme y vídeos en línea */
.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:8px}
@media (min-width:760px){ .gallery{grid-template-columns:repeat(3,1fr);gap:10px} }
@media (min-width:1080px){ .gallery{grid-template-columns:repeat(4,1fr)} }
.gallery li{aspect-ratio:4/5}
.gallery .big{grid-column:auto;grid-row:auto}
.g-video{width:100%;height:100%;cursor:pointer}
.g-video video{width:100%;height:100%;object-fit:cover;display:block}
.g-vbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:56px;height:56px;border-radius:50%;border:0;background:rgba(237,232,220,.92);color:var(--verde);display:grid;place-items:center;cursor:pointer;transition:opacity .25s}
.g-vbtn svg{width:22px;height:22px}
.g-video.playing .g-vbtn{opacity:0}
.g-video.playing:hover .g-vbtn,.g-video.playing .g-vbtn:focus-visible{opacity:1}

/* Nota personal sin rótulo */
.note{margin-top:40px;border-left-width:3px}
.note p{font-size:clamp(20px, 2.4vw, 28px)}
.note footer{margin-top:10px;font-family:var(--f-t);font-style:italic;font-size:14px;color:var(--taquilla);text-transform:none;letter-spacing:0}
.pager .d{font-size:clamp(26px, 4vw, 44px)}

/* Pie con iconos */
.site-foot{transition:box-shadow .3s}
.site-foot.flash{animation:flash 1.4s var(--ease)}
@keyframes flash{0%{box-shadow:inset 0 0 0 0 var(--dorsal)}25%{box-shadow:inset 0 6px 0 0 var(--dorsal)}100%{box-shadow:inset 0 0 0 0 var(--dorsal)}}
.site-foot:focus{outline:none}
.foot-title{font-size:clamp(36px, 5vw, 56px);margin-bottom:16px}
.foot-icons{display:flex;flex-wrap:wrap;gap:10px}
.ico{display:grid;justify-items:center;gap:6px;text-decoration:none;color:var(--hueso);min-width:64px}
.ico svg{width:48px;height:48px;padding:12px;border:1.5px solid rgba(237,232,220,.5);border-radius:50%;box-sizing:border-box;transition:background .2s,color .2s,border-color .2s}
.ico span{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.ico:hover svg,.ico:focus-visible svg{background:var(--hueso);color:var(--verde);border-color:var(--hueso)}
.ico:focus-visible{outline:none}
.ico:focus-visible svg{outline:3px solid var(--dorsal);outline-offset:3px}
@media (min-width:900px){ .foot-row{align-items:flex-end} }

/* Aviso */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom, 0px));transform:translate(-50%, 20px);background:var(--negro);color:var(--hueso);border:1.5px solid var(--dorsal);padding:10px 16px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.piece.wide{grid-column:1 / -1;max-width:760px;width:100%}
.piece.wide .thumb{aspect-ratio:16/9;height:auto}
@media (max-width:640px){ .slide{width:66vw} .case-media{aspect-ratio:1/1} }
.thumb-tag{white-space:nowrap}
@media (max-width:480px){
  .foot-icons{gap:4px;justify-content:space-between;width:100%}
  .ico{min-width:0}
  .ico svg{width:44px;height:44px;padding:11px}
  .ico span{font-size:9.5px;letter-spacing:.08em}
  .site-foot nav{width:100%}
}

/* ===== v4: cortina entre páginas ===== */
.curtain{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--verde);color:var(--hueso);transform:translateY(100%);pointer-events:none;visibility:hidden}
.curtain.in{visibility:visible;transform:none;transition:transform .48s cubic-bezier(.7,0,.2,1)}
.curtain.out{visibility:visible;transform:translateY(-100%);transition:transform .52s cubic-bezier(.7,0,.2,1),visibility 0s .52s;visibility:hidden}
.curtain-txt{font-size:clamp(48px, 10vw, 140px);opacity:0;transform:translateY(16px);transition:opacity .25s, transform .35s var(--ease)}
.curtain.in .curtain-txt{opacity:1;transform:none;transition-delay:.22s}
.curtain-txt::after{content:"";display:block;height:6px;margin-top:10px;background:var(--dorsal);width:40%}

/* ===== v5: cabecera con 21, Home por pantallas, carrusel con foco, reproductor, About, pie ===== */
.brand{gap:12px}
.brand-txt .first{font-size:12px;letter-spacing:.22em}
.brand-txt .last{font-size:32px}
.brand-num{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;padding:2px 0 1px 12px;border-left:2px solid var(--verde);font-family:var(--f-d);font-weight:900;font-size:34px;line-height:.82}
.brand-num small{font-family:var(--f-t);font-weight:600;font-size:9px;letter-spacing:.1em;line-height:1}
@media (max-width:420px){
  .brand-txt{display:block} .brand{gap:8px}
  .brand-txt .first{font-size:9px;letter-spacing:.16em} .brand-txt .last{font-size:22px}
  .brand-num{font-size:24px;padding-left:8px} .brand-num small{font-size:7px}
  .nav{gap:0} .nav a{padding:10px 6px;font-size:10.5px;letter-spacing:.08em}
}

/* Home: la pizarra ocupa la pantalla; al bajar se desenfoca y Proyectos la tapa */
.stage{position:sticky;top:var(--hh, 68px);z-index:0;height:calc(100svh - var(--hh, 68px));display:flex;align-items:center;overflow:hidden}
.stage-in{width:100%;transform-origin:50% 40%;will-change:filter,opacity,transform}
.hero-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-bottom:16px}
.hero-lead{font-family:var(--f-d);font-weight:800;font-size:clamp(24px, 2.8vw, 36px);line-height:.95;color:var(--verde);max-width:none;letter-spacing:.01em}
.loc{justify-self:auto}
.board{width:min(100%, calc((100svh - var(--hh, 68px) - 150px) * 2));margin-inline:auto}
.board-lines.v{display:none}
.board-bar{display:flex;justify-content:center;margin-top:12px}
.form-btn{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:8px 16px;border:1px solid var(--linea);border-radius:999px;background:transparent;color:var(--verde);font:600 11px/1 var(--f-t);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .2s, background .2s}
.form-btn strong{font-family:var(--f-d);font-weight:800;font-size:16px;letter-spacing:.04em}
.form-btn:hover{border-color:var(--verde);background:var(--papel)}
.form-ic{font-size:15px;transition:transform .5s var(--ease)}
.form-btn:hover .form-ic,.form-btn:focus-visible .form-ic{transform:rotate(180deg)}
.mag:not(.drag){transition:left .7s var(--ease), top .7s var(--ease), transform .15s var(--ease), box-shadow .15s}
@media (max-width:640px){
  .board{width:min(100%, calc((100svh - var(--hh, 60px) - 150px) * .8))}
  .board-lines.h{display:none} .board-lines.v{display:block}
  .hero-lead{font-size:22px}
}

.projects-stage{position:relative;z-index:1;background:var(--hueso);min-height:100svh;padding:48px 0 56px;display:flex;flex-direction:column;justify-content:center}
.projects-stage .sec-head{margin-bottom:28px}
.carousel{overflow:hidden;cursor:grab;touch-action:pan-y;padding:8px 0 12px}
.carousel .track{gap:28px;padding:0;will-change:transform}
.slide{--d:1;width:clamp(240px, 27vw, 340px);filter:blur(calc(var(--d) * 5px));opacity:calc(1 - var(--d) * .6);transform:scale(calc(1 - var(--d) * .1));transform-origin:50% 50%}
.slide .case-media{aspect-ratio:4/5}
.about-cta{display:flex;justify-content:flex-end;margin-top:28px}
.about-cta .btn{color:var(--verde)}
.about-cta .btn:hover{background:var(--verde);color:var(--hueso);border-color:var(--verde)}
@media (max-width:640px){ .slide{width:68vw} .carousel .track{gap:16px} .about-cta{justify-content:flex-start} .projects-stage{padding:32px 0 40px} }

/* Reproductor fijo */
.player{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:40;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:12px;background:var(--verde);color:var(--hueso);box-shadow:0 8px 24px rgba(21,23,21,.22)}
.player-vid{width:72px;height:40px;border-radius:6px;overflow:hidden;background:var(--negro);flex:none}
.player-vid iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.player-btn{width:36px;height:36px;border-radius:50%;border:0;background:var(--hueso);color:var(--verde);display:grid;place-items:center;cursor:pointer;flex:none}
.player-btn svg{width:16px;height:16px}
.player-info{display:grid;line-height:1.15}
.player-info strong{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.03em}
.player-info small{font-size:11px;opacity:.75}
.player .eq{height:14px}
@media (max-width:640px){ .player{left:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));gap:8px;padding-right:10px} .player-vid{width:56px;height:32px} .player-info small{display:none} .player-info strong{font-size:13px} }

/* Notas sin firma */
.note p{margin:0}

/* Pie: placa que lleva al inicio, «Contacto» sobre los iconos */
.site-foot{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
.foot-row{align-items:flex-end}
.site-foot .plate{color:var(--hueso);text-decoration:none;transition:border-color .2s}
.site-foot .plate:hover{border-color:var(--dorsal)}
.foot-contact{display:grid;gap:14px;justify-items:start}
.foot-title{font-size:clamp(28px, 3.4vw, 40px);margin:0}
@media (min-width:768px){ .foot-contact{justify-items:end;text-align:right} }

/* About Me */
.game-sec{border-bottom:1px solid var(--linea)}
.game-grid{display:grid;gap:28px;align-items:center}
@media (min-width:900px){ .game-grid{grid-template-columns:5fr 7fr;gap:56px} }
.game-txt h2{font-size:clamp(40px, 5.5vw, 68px);color:var(--verde);margin:6px 0 12px}
.game-txt .lbl{color:var(--taquilla)}
.pk-dots{display:flex;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.pk-dots li{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--verde)}
.pk-dots li.goal{background:var(--verde)}
.pk-dots li.miss{background:transparent;border-color:var(--taquilla);opacity:.5}
.pk-fact{min-height:96px;margin-top:20px;padding-left:16px;border-left:4px solid var(--dorsal)}
.pk-fact:empty{border-left-color:transparent}
.pk-fact .lbl{color:var(--taquilla);margin-bottom:6px}
.pk-fact-txt{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:clamp(20px, 2.4vw, 28px);line-height:1.02;color:var(--verde)}
.pk-fact-txt.muted{font-family:var(--f-t);text-transform:none;font-weight:500;font-size:16px;color:var(--taquilla)}
.pk{position:relative;aspect-ratio:16/10;background:var(--verde);border:6px solid var(--negro);border-radius:6px;overflow:hidden;
  background-image:linear-gradient(rgba(237,232,220,.22),rgba(237,232,220,.22));background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 46%}
.pk-goal{position:absolute;left:15%;right:15%;top:8%;height:38%;display:grid;grid-template-columns:repeat(3,1fr);border:3px solid var(--hueso);border-bottom:0;
  background-image:linear-gradient(90deg, rgba(237,232,220,.12) 1px, transparent 1px),linear-gradient(rgba(237,232,220,.12) 1px, transparent 1px);background-size:14px 14px}
.pk-zone{position:relative;z-index:2;border:0;background:transparent;cursor:crosshair;transition:background .2s}
.pk-zone:hover,.pk-zone:focus-visible{background:rgba(237,232,220,.12)}
.pk-zone:focus-visible{outline-offset:-4px}
.pk-zone:disabled{cursor:default;background:transparent}
.pk-keeper{--kx:0;position:absolute;z-index:1;left:50%;bottom:0;width:13%;height:62%;border-radius:999px 999px 6px 6px;background:var(--taquilla);border:2px solid var(--hueso);transform:translateX(-50%);transition:transform .45s var(--ease)}
.pk-keeper.dive{transform:translateX(calc(-50% + var(--kx) * 230%)) rotate(calc(var(--kx) * 28deg))}
.pk-spot{position:absolute;left:50%;top:80%;width:6px;height:6px;border-radius:50%;background:rgba(237,232,220,.6);transform:translate(-50%,-50%)}
.pk-ball{--bx:0;position:absolute;z-index:3;left:50%;top:80%;width:5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%, #fff3c4 0, var(--dorsal) 50%, #b98f17 100%);transform:translate(-50%,-60%);transition:left .55s var(--ease), top .55s var(--ease), transform .55s var(--ease)}
.pk-ball.shot{left:calc(50% + var(--bx) * 23%);top:26%;transform:translate(-50%,-50%) scale(.7)}
.pk-msg{position:absolute;left:0;right:0;bottom:6%;text-align:center;color:var(--hueso);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.pk-again{position:absolute;right:12px;bottom:12px;color:var(--hueso);background:var(--verde)}
.pk-again:hover{background:var(--hueso);color:var(--verde)}
.about-more .wrap{display:grid;gap:28px}
.fold{border-top:2px solid var(--verde);border-bottom:1px solid var(--linea)}
.fold summary{display:flex;align-items:center;gap:16px;padding:18px 0;cursor:pointer;list-style:none;color:var(--verde)}
.fold summary::-webkit-details-marker{display:none}
.fold summary .d{font-size:clamp(32px, 4.5vw, 52px)}
.fold-meta{margin-left:auto;color:var(--taquilla)}
.fold-ic{position:relative;width:20px;height:20px;flex:none}
.fold-ic::before,.fold-ic::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.fold-ic::after{transform:rotate(90deg)}
.fold[open] .fold-ic::after{transform:rotate(0)}
.fold-body{padding:8px 0 28px}
.skills .h3{margin-bottom:12px}
@media (max-width:560px){ .fold-meta{display:none} .pk{aspect-ratio:4/3} .pk-goal{left:8%;right:8%} .pk-keeper{width:16%} .pk-ball.shot{left:calc(50% + var(--bx) * 28%)} .pk-keeper.dive{transform:translateX(calc(-50% + var(--kx) * 175%)) rotate(calc(var(--kx) * 28deg))} }
.pk-ball,.pk-spot{pointer-events:none}
.projects-stage > .wrap,.projects-stage > .carousel{width:100%}
@media (max-width:640px){ .board-hint{bottom:auto;top:10px} }
.pk-again[hidden]{display:none}

/* ===== v6: titulares, clima, pizarra de equipos, CTA, reproductor pequeño, About y Toques ===== */
.stage{height:auto;min-height:calc(100svh - var(--hh, 68px));overflow:visible;padding:12px 0 20px}
.stage.flow{position:relative;top:auto}
@media (max-width:640px){ .stage{position:relative;top:auto;min-height:0;padding:10px 0 28px} }
.hero-top{margin-bottom:8px}
.hero-kicker{font-size:clamp(17px, 1.8vw, 22px);line-height:1;color:var(--verde);letter-spacing:.02em}
.wx .wx-val{display:inline-flex;align-items:center;gap:6px;border-left:1px solid var(--linea);padding-left:10px;font-variant-numeric:tabular-nums}
.wx-ic{font-size:15px;line-height:1}
.board-intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 32px;margin-bottom:12px}
.board-title{font-size:clamp(42px, 6vw, 88px);line-height:.86;color:var(--verde)}
.board-sub{max-width:36ch;font-size:clamp(15px, 1.25vw, 17px);line-height:1.4;border-left:3px solid var(--dorsal);padding:2px 0 2px 12px;margin-bottom:4px}
.board{width:min(100%, max(560px, calc((100svh - var(--hh, 68px) - 300px) * 2)))}
@media (max-width:640px){ .board{width:100%} }

.mag{width:34px;height:34px;display:grid;place-items:center}
.mag-n{font-family:var(--f-d);font-weight:800;font-size:15px;line-height:1;color:var(--verde);white-space:nowrap;letter-spacing:-.02em;pointer-events:none}
.mag-name{position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);white-space:nowrap;padding:3px 5px;border-radius:3px;background:rgba(21,23,21,.55);color:var(--hueso);font:600 10px/1 var(--f-t);letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.board.vert .mag.alt .mag-name{top:auto;bottom:calc(100% + 3px)}
.mag.is21{background:radial-gradient(circle at 35% 30%, #fff3c4 0, var(--dorsal) 50%, #b98f17 100%)}
.mag.is21 .mag-n{color:var(--negro)}
.mag.is21 .mag-name{background:var(--dorsal);color:var(--negro)}
.mag:not(.drag){transition:left .9s var(--ease), top .9s var(--ease), transform .15s var(--ease), box-shadow .15s, background .3s}
.mag-n,.mag-name,[data-t]{transition:opacity .35s}
.swapping .mag-n,.swapping .mag-name,.swapping [data-t]{opacity:0}
.team-top{position:absolute;left:14px;right:14px;top:10px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;color:var(--hueso);pointer-events:none}
.team-head{display:grid;gap:3px}
.team-club{font-size:clamp(18px, 2vw, 26px);line-height:.95}
.team-year{color:var(--dorsal)}
.team-nick{font-size:12px;opacity:.85}
.team-form{flex:none;padding:5px 10px;border:1px solid rgba(237,232,220,.5);border-radius:999px;font:800 16px/1 var(--f-d);letter-spacing:.04em}
.team-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:12px}
.team-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.team-dt{font-size:14px}
.team-dt .lbl{color:var(--taquilla);margin-right:4px}
.titles{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:0;padding:0}
.titles li{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.titles svg{width:18px;height:18px;color:var(--verde)}
.titles svg path:first-child{fill:var(--dorsal)}
.titles b{font-family:var(--f-d);font-weight:800;font-size:16px}
.titles .t-note{font-style:italic;color:var(--taquilla)}
.team-ctrl{display:flex;align-items:center;gap:8px}
.cta-wrap{display:flex;justify-content:center;margin-top:16px}
.cta-down{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 22px;border-radius:999px;background:var(--verde);color:var(--hueso);text-decoration:none;font:600 12px/1 var(--f-t);letter-spacing:.14em;text-transform:uppercase;transition:background .2s}
.cta-down:hover{background:#1d4a37}
.cta-down span{display:inline-block;animation:bob 1.8s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(4px)}}
@media (max-width:640px){
  .board-title{font-size:48px}
  .mag{width:26px;height:26px}
  .mag-n{font-size:12px}
  .mag-name{font-size:8.5px;padding:2px 4px;letter-spacing:.03em}
  .team-top{left:10px;right:10px;top:8px}
  .team-club{font-size:18px}
  .team-nick{font-size:11px}
  .team-form{font-size:14px;padding:4px 8px}
  .team-ctrl{width:100%;justify-content:space-between}
}
.sec-sub{font-size:.4em;color:var(--taquilla);letter-spacing:.02em;white-space:nowrap}

.player{gap:7px;padding:4px 10px 4px 2px;border-radius:10px;background:rgba(23,59,44,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(21,23,21,.18);opacity:.9;transition:opacity .2s;touch-action:none;user-select:none}
.player:hover,.player:focus-within,.player.is-playing,.player.dragging{opacity:1}
.player-grip{width:20px;height:30px;padding:0;border:0;background:transparent;color:var(--hueso);opacity:.65;cursor:grab;display:grid;place-items:center;flex:none}
.player-grip svg{width:15px;height:15px}
.player.dragging,.player.dragging .player-grip{cursor:grabbing}
.player-vid{width:48px;height:27px;border-radius:4px}
.player-btn{width:30px;height:30px}
.player-btn svg{width:13px;height:13px}
.player-info strong{font-size:13px}
.player-info small{font-size:10px}
.player .eq{height:12px}
.player-hint{position:absolute;left:0;bottom:calc(100% + 8px);width:max-content;max-width:min(260px, 80vw);padding:8px 10px;border-radius:8px;background:var(--negro);color:var(--hueso);font-size:12px;line-height:1.35;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .25s, transform .25s}
.player.at-top .player-hint{bottom:auto;top:calc(100% + 8px)}
.player.show-hint .player-hint{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
.player-hint:empty{display:none}
@media (max-width:640px){ .player-vid{width:40px;height:23px} .player{padding-right:8px} }

.foot-note{margin-top:22px;font-size:11px;opacity:.55}
.foot-note a{color:inherit}

.fold-body .h3{margin:8px 0 12px}
.xp-short h4{font-size:clamp(22px, 2.6vw, 30px);color:var(--verde)}
.xp-short li{padding:14px 0}
.fold-grid{margin-top:32px}
.fold-cv{margin-top:28px}
.fold-body .btn{color:var(--verde)}
.fold-body .btn:hover{background:var(--verde);color:var(--hueso);border-color:var(--verde)}

.tq{position:relative;aspect-ratio:16/10;overflow:hidden;border:6px solid var(--negro);border-radius:6px;background:repeating-linear-gradient(90deg, #173B2C 0 10%, #1a4131 10% 20%);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tq::after{content:"";position:absolute;left:0;right:0;bottom:8%;height:2px;background:rgba(237,232,220,.35)}
.tq-ball{position:absolute;left:0;top:0;z-index:1;width:clamp(44px, 9%, 64px);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.tq-ball svg{display:block;width:100%;height:100%}
.tq-ball:focus-visible{outline:3px solid var(--dorsal);outline-offset:3px}
.tq-msg{position:absolute;left:0;right:0;top:12%;padding:0 16px;text-align:center;color:var(--hueso);font:600 12px/1.35 var(--f-t);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.tq-score{margin-top:14px;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--taquilla)}
.tq-score b{margin:0 6px 0 4px;font-family:var(--f-d);font-size:22px;color:var(--verde)}
@media (max-width:560px){ .tq{aspect-ratio:4/5} }
.titles b{font-family:var(--f-t);font-weight:700;font-size:14px}

/* ===== v7: Home con más carácter, pizarra con profundidad, reproductor vinilo, Contraataque ===== */
/* Cabecera: el 21 en amarillo dentro de una mini placa verde */
.brand-num{align-self:center;display:flex;flex-direction:row;align-items:flex-start;gap:3px;padding:5px 7px 4px;border-left:0;border-radius:3px;background:var(--verde);color:var(--dorsal);font-size:28px;line-height:.85}
.brand-num small{color:var(--hueso);font-size:8px;margin-top:1px}
@media (max-width:420px){ .brand-num{font-size:21px;padding:4px 5px 3px} .brand-num small{font-size:6.5px} }

/* Portada */
.stage{padding:4px 0 24px}
.hero-grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px 32px;margin-bottom:18px}
.hero-left{display:grid;gap:8px;min-width:0}
.hero-kicker{font-size:clamp(16px, 1.6vw, 20px);letter-spacing:.04em;color:var(--taquilla);line-height:1}
.hero-copy{max-width:44ch;font-size:clamp(15px, 1.2vw, 17px);line-height:1.4;padding-left:12px;border-left:3px solid var(--dorsal)}
.board-title{margin-top:6px;font-size:clamp(46px, 7.4vw, 108px);line-height:.84;color:var(--verde);letter-spacing:-.005em}
.board-title .ln{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.04em}
.board-title .ln > span{display:inline-block;animation:lineUp .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
.rv{animation:rise .7s var(--ease) both}
.rv.r1{animation-delay:.12s}
.hero-right{display:grid;justify-items:end;gap:10px;align-self:start;padding-top:2px}
.player-dock{display:block;width:236px;height:50px}
@media (max-width:640px){
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-right{justify-items:start;grid-row:1;grid-auto-flow:column;align-items:center;justify-content:space-between;width:100%}
  .player-dock{width:200px;height:46px}
  .board-title{font-size:clamp(46px, 14vw, 60px)}
}

/* Pizarra: profundidad, textura de césped, brillo que sigue al ratón */
.board-zone{width:min(100%, max(560px, calc((100svh - var(--hh, 68px) - 330px) * 2)));margin-inline:auto}
.board-zone .board{width:100%}
.board-3d{perspective:1600px}
.board{transform-style:preserve-3d;transition:transform .5s var(--ease);border-radius:8px 8px 0 0;border-width:6px 6px 0;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.28) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 8.33%, transparent 8.33% 16.66%),
    var(--verde);
  box-shadow:0 30px 60px -30px rgba(21,23,21,.55), 0 10px 20px -12px rgba(21,23,21,.35)}
.board-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(40% 50% at var(--mx, 50%) var(--my, 30%), rgba(237,232,220,.09), transparent 70%)}
.board-lines rect,.board-lines line,.board-lines circle{stroke:rgba(237,232,220,.3)}
.chalk{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.chalk path{fill:none;stroke:rgba(237,232,220,.75);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.chalk.on path{animation:chalkDraw 1.6s var(--ease) both}
@keyframes chalkDraw{0%{stroke-dashoffset:1;opacity:.9}45%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
.board .mag{z-index:3;width:40px;height:40px;box-shadow:0 2px 0 rgba(0,0,0,.35), 0 8px 14px -4px rgba(0,0,0,.45)}
.mag-n{font-size:17px}
.mag-name{top:calc(100% + 4px);padding:4px 6px;border-radius:4px;background:rgba(14,32,24,.82);font-size:11px;letter-spacing:.05em;font-weight:600}
.mag:not(.drag){transition:left 1s cubic-bezier(.5,0,.15,1), top 1s cubic-bezier(.5,0,.15,1), transform .2s var(--ease), box-shadow .2s, background .3s}
.mag:hover{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 4px 0 rgba(0,0,0,.3), 0 14px 22px -6px rgba(0,0,0,.5)}
.swapping .mag{transform:translate(-50%,-50%) scale(.9)}
.swapping .mag-name,.swapping [data-t="nick"],.swapping [data-t="titles"],.swapping [data-t="dt"]{opacity:0}
.swapping .mag-n{opacity:.35}
.team-top{top:12px;left:16px;right:16px}
.team-club{font-size:clamp(20px, 2.3vw, 30px);letter-spacing:.02em}
.team-nick{font-size:12.5px}
.team-form{background:rgba(14,32,24,.5)}

/* Franja de datos pegada al borde del campo (fuera de él) */
.team-strip{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:12px 16px 14px;background:var(--negro);color:var(--hueso);border-radius:0 0 8px 8px}
.team-meta{gap:6px 20px}
.team-dt{font-size:14px}
.team-dt .lbl{color:rgba(237,232,220,.6)}
.titles li{font-size:13.5px}
.titles svg{color:var(--hueso)}
.titles .t-note{color:rgba(237,232,220,.65)}
.team-ctrl{display:flex;align-items:center;gap:8px}
.team-count{font:800 15px/1 var(--f-d);letter-spacing:.06em;color:var(--dorsal);margin-right:4px}
.strip-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:36px;height:36px;padding:0 10px;border:1px solid rgba(237,232,220,.3);border-radius:999px;background:rgba(237,232,220,.06);color:var(--hueso);font:600 11px/1 var(--f-t);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s, border-color .2s}
.strip-btn.wide{padding:0 14px}
.strip-btn svg{width:14px;height:14px}
.strip-btn:hover{background:rgba(237,232,220,.16);border-color:rgba(237,232,220,.6)}
.team-progress{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(237,232,220,.12)}
.team-progress i{display:block;height:100%;background:var(--dorsal);transform-origin:left;transform:scaleX(0)}
.is-paused .team-progress i{opacity:.4}
@media (max-width:640px){
  .board-zone{width:100%}
  .board .mag{width:30px;height:30px}
  .mag-n{font-size:13px}
  .mag-name{font-size:9px;padding:2px 4px;top:calc(100% + 2px)}
  .team-strip{padding:12px}
  .team-ctrl{width:100%;justify-content:flex-end}
  .team-count{margin-right:auto}
}

/* CTA a Proyectos: vidrio translúcido */
.cta-wrap{margin-top:22px}
.cta-down{gap:12px;padding:6px 6px 6px 22px;border:1px solid rgba(23,59,44,.22);background:rgba(247,244,236,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--verde);box-shadow:0 10px 30px -14px rgba(23,59,44,.45);font-size:12.5px;transition:background .25s, color .25s, box-shadow .25s}
.cta-down i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--verde);color:var(--hueso);font-style:normal;font-size:15px}
.cta-down i{animation:bob 1.8s var(--ease) infinite}
.cta-down span{animation:none}
.cta-down:hover{background:var(--verde);color:var(--hueso)}
.cta-down:hover i{background:var(--dorsal);color:var(--negro)}

/* Reproductor: vinilo en vidrio translúcido */
.player{gap:10px;padding:5px 6px 5px 4px;border-radius:999px;background:rgba(247,244,236,.72);border:1px solid rgba(23,59,44,.16);color:var(--verde);box-shadow:0 12px 30px -16px rgba(21,23,21,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:1;transition:left .45s var(--ease), top .45s var(--ease), box-shadow .3s}
.player.no-anim,.player.dragging{transition:none}
.player-grip{color:var(--verde);width:18px}
.player.docked .player-grip{display:none}
.player.docked{padding-left:6px}
.player-disc{position:relative;flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;background:repeating-radial-gradient(circle at 50% 50%, #151715 0 1.5px, #262926 1.5px 3px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.player-vid{position:absolute;left:50%;top:50%;width:44px;height:25px;transform:translate(-50%,-50%) scale(.62);border-radius:0;opacity:.95;-webkit-mask:radial-gradient(circle, #000 60%, transparent 62%);mask:radial-gradient(circle, #000 60%, transparent 62%)}
.player-hole{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--hueso);box-shadow:0 0 0 2px var(--dorsal)}
.player.is-playing .player-disc{animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.player-info strong{font-size:14px;color:var(--verde)}
.player-info small{font-size:10.5px;color:var(--taquilla);opacity:1}
.player .eq i{background:var(--verde)}
.player-btn{width:34px;height:34px;background:var(--verde);color:var(--hueso)}
.player-btn svg{width:13px;height:13px}
.player-btn:hover{background:var(--dorsal);color:var(--negro)}
@media (max-width:640px){ .player-info small{display:none} .player{gap:8px} }

/* Casos: subtítulo en una línea y párrafos ordenados */
@media (min-width:700px){ .case-sub{max-width:none;white-space:nowrap} }
.block-txt{display:grid;gap:14px;max-width:62ch}
.block-txt p{max-width:none}

/* Contraataque */
.run{position:relative;aspect-ratio:5/2;overflow:hidden;border:6px solid var(--negro);border-radius:8px;background:var(--verde);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:0 24px 40px -24px rgba(21,23,21,.5)}
.run-cv{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.run-cv:focus-visible{outline:3px solid var(--dorsal);outline-offset:-3px}
.run-msg{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;color:var(--hueso);background:rgba(14,32,24,.55);pointer-events:none}
.run-msg[hidden]{display:none}
.run-msg b{font-family:var(--f-d);font-weight:900;text-transform:uppercase;font-size:clamp(26px, 3.2vw, 40px);line-height:.9}
.run-msg span{font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.game-keys{margin-top:10px;font-size:13px;color:var(--taquilla)}
kbd{display:inline-block;padding:1px 6px;border:1px solid var(--linea);border-bottom-width:2px;border-radius:4px;background:var(--papel);font:600 12px/1.4 var(--f-t);color:var(--verde)}
@media (max-width:560px){ .run{aspect-ratio:3/2} }
.player{bottom:auto;right:auto}
.player-btn{min-height:0;width:36px;height:36px}
@media (max-width:640px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-right{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;width:auto;min-width:0}
  .player-dock{width:172px;height:48px}
  .player .eq{display:none}
}
.board.instant .mag{transition:none !important}
.wrap.blocks{padding-left:var(--gutter);padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:768px){ .wrap.blocks{padding-left:32px;padding-right:32px} }

/* ================= v8 ================= */
:root{
  --alu:linear-gradient(180deg, #eef0ed 0%, #cfd3cf 14%, #b3b8b4 48%, #d3d7d3 84%, #9fa5a1 100%);
  --felt-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tape:#F1ECDF;
}

/* Logo: 21 en amarillo, sin placa verde, con contorno fino para que se lea sobre crema */
.brand-num{background:none;padding:0;color:var(--dorsal);text-shadow:1.4px 0 0 var(--verde),-1.4px 0 0 var(--verde),0 1.4px 0 var(--verde),0 -1.4px 0 var(--verde),1px 1px 0 var(--verde),-1px 1px 0 var(--verde),1px -1px 0 var(--verde),-1px -1px 0 var(--verde)}
.brand-num small{color:var(--verde);text-shadow:none}

/* Home: cabecera compacta, titular centrado */
.stage{padding:0 0 20px}
.hero-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;padding:10px 0 4px}
.hero-kicker{margin:0;font-size:clamp(15px, 1.4vw, 18px);letter-spacing:.06em;color:var(--taquilla)}
.hero-right{display:flex;align-items:center;gap:14px;padding:0;justify-items:initial}
.player-dock{width:208px;height:46px}
.hero-head{text-align:center;margin:2px 0 18px}
.board-title{margin:0;font-size:clamp(46px, 6.6vw, 100px)}
.hero-copy{margin:10px auto 0;padding:0;border:0;max-width:48ch;font-size:clamp(15px, 1.2vw, 17px);color:var(--negro);text-wrap:balance}

/* Pizarra de vestuario: marco de aluminio, fieltro, rotulador e imanes */
.board-zone{width:min(100%, max(600px, calc((100svh - var(--hh, 68px) - 330px) * 2)))}
.board-3d{perspective:1800px}
.board-rig{position:relative;padding:11px 11px 0;border-radius:12px;background:var(--alu);transform-style:preserve-3d;transition:transform .6s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.25), 0 46px 70px -38px rgba(21,23,21,.65), 0 14px 26px -16px rgba(21,23,21,.45)}
.board-rig::before,.board-rig::after{content:"";position:absolute;top:3px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #fff, #8d938f 70%);box-shadow:0 1px 0 rgba(255,255,255,.7)}
.board-rig::before{left:3px}.board-rig::after{right:3px}
.board{transform:none !important;border:0;border-radius:4px;
  background:var(--felt-noise),
    radial-gradient(80% 70% at 28% 18%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(130% 110% at 50% 50%, transparent 52%, rgba(0,0,0,.38) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 8.33%, transparent 8.33% 16.66%),
    #1a4231;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.45)}
.board.vert{background:var(--felt-noise),radial-gradient(80% 70% at 28% 18%, rgba(255,255,255,.08), transparent 60%),radial-gradient(130% 110% at 50% 50%, transparent 52%, rgba(0,0,0,.38) 100%),repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 8.33%, transparent 8.33% 16.66%),#1a4231}
.board-lines rect,.board-lines line,.board-lines circle{stroke:rgba(237,232,220,.4);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.board-sheen{background:radial-gradient(38% 48% at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.07), transparent 70%)}

/* Rotulador: trazo, punto de salida y punta de flecha */
.chalk{z-index:2;transform:none;left:0;top:0}
.chalk .ch-line{fill:none;stroke:rgba(241,236,223,.95);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;vector-effect:none}
.chalk .ch-tip{fill:none;stroke:rgba(241,236,223,.95);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.chalk .ch-dot{fill:rgba(241,236,223,.9);opacity:0}
.chalk.on .ch-line{animation:mkLine 3s cubic-bezier(.5,0,.2,1) both}
.chalk.on .ch-tip{animation:mkTip 3s linear both}
.chalk.on .ch-dot{animation:mkDot 3s linear both}
@keyframes mkLine{0%{stroke-dashoffset:1;opacity:1}32%{stroke-dashoffset:0;opacity:1}78%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes mkTip{0%,30%{opacity:0}36%,78%{opacity:1}100%{opacity:0}}
@keyframes mkDot{0%{opacity:0}6%,78%{opacity:.9}100%{opacity:0}}

/* Etiquetas: cinta de carrocero */
.tape{display:inline-block;padding:6px 12px 4px;background:var(--tape);color:var(--verde);box-shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 8px -4px rgba(0,0,0,.35);
  clip-path:polygon(0 6%, 2% 0, 50% 3%, 98% 0, 100% 8%, 99% 50%, 100% 94%, 97% 100%, 50% 97%, 2% 100%, 0 92%, 1% 50%)}
.team-top{top:14px;left:16px;right:16px}
.team-head{gap:6px;justify-items:start}
.team-club{transform:rotate(-1.2deg);transform-origin:left center;font-size:clamp(18px, 2vw, 26px);line-height:1;letter-spacing:.02em}
.team-year{color:var(--taquilla)}
.team-nick{padding-left:4px;font:italic 400 12.5px/1.2 var(--f-t);color:rgba(241,236,223,.82)}
.team-form{padding:6px 12px 4px;border:2px solid rgba(241,236,223,.55);border-radius:48% 52% 46% 54% / 55% 45% 55% 45%;background:none;transform:rotate(-3deg);font-size:clamp(18px, 1.8vw, 24px);line-height:1;color:var(--tape);letter-spacing:.03em}

/* Fichas: imanes con volumen y luz desde arriba a la izquierda */
.board .mag{width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 36% 28%, #fffdf7 0 7%, #f1ebde 26%, #d9d2c2 64%, #b5ad9b 100%);
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.18), inset 0 2px 1px rgba(255,255,255,.85), 0 1px 0 rgba(0,0,0,.45), 4px 8px 12px -3px rgba(0,0,0,.6)}
.board .mag.is21{background:radial-gradient(circle at 36% 28%, #fff6cf 0 7%, #f6cf55 28%, var(--dorsal) 60%, #b48812 100%)}
.mag-n{font:900 20px/1 var(--f-d);letter-spacing:-.01em;color:var(--verde);text-shadow:0 1px 0 rgba(255,255,255,.55)}
.mag.is21 .mag-n{color:var(--negro)}
.mag-name{--r:-1.5deg;top:calc(100% + 6px);transform:translateX(-50%) rotate(var(--r));padding:4px 7px 3px;border-radius:0;background:var(--tape);color:var(--verde);
  font:800 12.5px/1 var(--f-d);letter-spacing:.05em;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.4);
  clip-path:polygon(0 8%, 3% 0, 97% 4%, 100% 0, 99% 50%, 100% 96%, 96% 100%, 4% 96%, 0 100%, 1% 50%)}
.mag:nth-of-type(even) .mag-name{--r:1.2deg}
.mag.is21 .mag-name{background:var(--dorsal);color:var(--negro)}
.board.vert .mag.alt .mag-name{top:auto;bottom:calc(100% + 6px)}
.board .mag:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:inset 0 -3px 5px rgba(0,0,0,.18), inset 0 2px 1px rgba(255,255,255,.85), 0 1px 0 rgba(0,0,0,.45), 6px 12px 16px -4px rgba(0,0,0,.6)}
.board .mag.drag{transform:translate(-50%,-58%) scale(1.12);box-shadow:inset 0 -3px 5px rgba(0,0,0,.18), inset 0 2px 1px rgba(255,255,255,.85), 10px 20px 22px -6px rgba(0,0,0,.55)}
.board.intro .mag{animation:magDrop .65s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(.35s + var(--i, 0) * 55ms)}
@keyframes magDrop{from{opacity:0;transform:translate(-50%,-50%) scale(1.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.swapping .board .mag,.swapping .mag{transform:translate(-50%,-50%) scale(.92)}

/* Bandeja del marco: DT, títulos y controles */
.team-strip{margin:11px -11px 0;padding:12px 16px 13px;border-radius:0 0 12px 12px;background:linear-gradient(180deg, #a9aeaa 0, #dfe2df 16%, #c9cdc9 70%, #b2b7b3 100%);color:var(--verde);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.55)}
.team-progress{left:16px;right:16px;top:5px;height:2px;border-radius:2px;background:rgba(23,59,44,.14)}
.team-dt{display:flex;align-items:baseline;gap:8px;font-size:14px}
.team-dt .lbl{color:var(--taquilla);margin:0}
.team-dt .d{font-size:20px;line-height:1;letter-spacing:.02em}
.titles li{font-size:13.5px;color:var(--verde)}
.titles svg{color:var(--verde)}
.titles .t-note{color:var(--taquilla)}
.team-count{color:var(--verde);font-size:16px}
.strip-btn{border:1px solid rgba(23,59,44,.32);background:rgba(255,255,255,.35);color:var(--verde)}
.strip-btn:hover{background:var(--verde);border-color:var(--verde);color:var(--hueso)}
.strip-btn:focus-visible{outline:3px solid var(--verde);outline-offset:2px}
.team-dt,.titles{transition:opacity .35s, transform .35s var(--ease)}
.swapping .titles{opacity:0;transform:translateY(5px)}
.swapping [data-t="dt"]{opacity:1}

@media (max-width:640px){
  .hero-bar{flex-wrap:wrap}
  .hero-right{width:100%;justify-content:space-between}
  .player-dock{width:172px}
  .hero-head{margin:4px 0 14px}
  .board-title{font-size:clamp(44px, 14vw, 58px)}
  .board-rig{padding:8px 8px 0;border-radius:10px}
  .team-strip{margin:8px -8px 0;padding:11px 12px 12px;border-radius:0 0 10px 10px}
  .board .mag{width:30px;height:30px}
  .mag-n{font-size:14px}
  .mag-name{font-size:10px;padding:3px 5px 2px;top:calc(100% + 4px)}
  .board.vert .mag.alt .mag-name{bottom:calc(100% + 4px)}
  .team-top{top:10px;left:10px;right:10px}
  .team-club{font-size:17px}
  .team-form{font-size:16px;padding:4px 9px 3px}
  .team-dt .d{font-size:18px}
}

/* Reproductor: bajo el clima en el Home; en la cabecera en el resto */
.head-dock{flex:none;width:172px;height:40px;margin-left:auto}
.player-grip{display:none}
.player.in-head{gap:8px;padding:3px 4px 3px 3px;opacity:1;box-shadow:none;background:rgba(247,244,236,.9)}
.player.in-head .eq{display:none}
.player.in-head .player-disc{width:32px;height:32px}
.player.in-head .player-btn{width:30px;height:30px}
.player.in-head .player-info strong{font-size:13px}
.player.in-head .player-info small{font-size:10px}
.player .player-hint{left:auto;right:0;bottom:auto;top:calc(100% + 8px)}
.player.pop{animation:playerPop .4s var(--ease)}
@keyframes playerPop{from{opacity:0;transform:translateY(-4px) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .head-dock{width:70px;height:36px}
  .player.in-head .player-info{display:none}
}

/* About: texto y juego como una sola pieza */
.about-hero{position:sticky;top:var(--hh, 68px);z-index:0;padding:44px 0 40px}
.about-hero.flow{position:relative;top:auto}
.about-intro-in{transform-origin:50% 20%;will-change:filter,opacity,transform}
.about-hero h1{font-size:clamp(56px, 9vw, 116px)}
.about-hero .lead{display:grid;gap:10px;max-width:54ch;margin-top:18px;font-size:clamp(17px, 1.6vw, 20px);line-height:1.4}
.about-hero .lead p{margin:0}
.lead-to{color:var(--dorsal);font-weight:600}
.lead-to span{display:inline-block;margin-left:4px;animation:bob 1.8s var(--ease) infinite}
.game-sec{position:relative;z-index:1;background:var(--verde);color:var(--hueso);padding:26px 0 52px;border:0;border-top:1px solid rgba(237,232,220,.1);box-shadow:0 -30px 40px -24px rgba(0,0,0,.45)}
.game-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-bottom:14px}
.game-head h2{margin:0;font-size:clamp(30px, 3.6vw, 46px);line-height:1;color:var(--hueso)}
.game-score{display:flex;align-items:baseline;gap:6px;margin:0;font:600 11px/1 var(--f-t);letter-spacing:.14em;text-transform:uppercase;color:rgba(237,232,220,.6)}
.game-score b{font:800 22px/1 var(--f-d);letter-spacing:0;color:var(--hueso);min-width:1.2ch}
.game-score i{align-self:center;width:1px;height:14px;margin:0 10px;background:rgba(237,232,220,.25)}
.game-stage{position:relative}
.run-box{padding:10px;border-radius:12px;background:var(--alu);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 30px 50px -30px rgba(0,0,0,.6)}
.run{aspect-ratio:14/5;max-height:calc(100svh - var(--hh, 68px) - 150px);width:100%;border:0;border-radius:4px;box-shadow:none}
.run-msg b{font-size:clamp(22px, 2.8vw, 36px)}
.run-msg span{max-width:46ch;margin-inline:auto;line-height:1.5}
.facts{position:absolute;left:28px;top:26px;z-index:2;display:grid;gap:7px;width:min(48%, 520px);margin:0;padding:0;list-style:none;pointer-events:none}
.facts:empty{display:none}
.facts li{display:flex;align-items:baseline;gap:10px}
.f-n{flex:none;font:800 13px/1 var(--f-d);letter-spacing:.04em;color:var(--dorsal)}
.f-new .f-t{font:800 clamp(20px, 2.1vw, 30px)/1.02 var(--f-d);text-transform:uppercase;color:var(--hueso);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.f-new{margin-bottom:4px;animation:factIn .5s var(--ease) both}
.f-old{opacity:calc(.62 - var(--k, 1) * .08);filter:blur(calc((var(--k, 1) - 1) * .4px))}
.f-old .f-t{font:500 13px/1.3 var(--f-t);color:var(--hueso)}
.f-old .f-n{color:rgba(237,232,220,.7);font-size:11px}
@keyframes factIn{from{opacity:0;transform:translateY(-8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:1100px){ .facts li:nth-child(n+5){display:none} }
@media (max-width:640px){
  .about-hero{padding:32px 0 30px}
  .game-sec{padding:20px 0 36px}
  .run-box{padding:7px;border-radius:10px}
  .run{aspect-ratio:3/2}
  .facts{position:static;width:auto;min-height:158px;margin-top:14px;padding:0 2px}
  .facts:empty{display:grid}
  .facts li:nth-child(n+5){display:flex}
  .f-new .f-t{font-size:22px}
}
.about-more{position:relative;z-index:1;background:var(--hueso)}

/* Trayectoria compacta */
.xp-short > li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 24px;align-items:baseline;padding:14px 0}
.xp-short > li > *{margin:0}
.xp-short h4{margin:0;font-size:clamp(20px, 2.2vw, 26px);line-height:1}
.xp-short .muted{margin:5px 0 0;font-size:14px}
.xp-short .xp-dates{font-size:12px}
@media (max-width:560px){ .xp-short > li{grid-template-columns:1fr;gap:6px} }
.info-grid{display:grid;gap:32px 56px;margin-top:36px}
.info-grid .h3{margin:0 0 12px}
@media (min-width:760px){ .info-grid{grid-template-columns:1fr 1fr} }

/* Botón de CV con presencia */
.cv-row{margin-top:28px}
.cv-btn{display:inline-flex;align-items:center;gap:14px;padding:14px 22px 14px 18px;border-radius:4px;background:var(--dorsal);color:var(--negro);text-decoration:none;box-shadow:0 4px 0 var(--verde);transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.cv-btn svg{width:24px;height:24px;flex:none}
.cv-btn > span{display:grid;gap:3px;text-align:left}
.cv-btn b{font-size:22px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.cv-btn small{font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.cv-btn i{font-style:normal;font-size:20px;margin-left:6px}
.cv-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--verde)}
.cv-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--verde)}
.cv-btn:focus-visible{outline:3px solid var(--verde);outline-offset:4px}

/* Casos: comentario en una sola línea (salvo Dulcesol) desde tablet */
.note{max-width:none}
@media (min-width:760px){
  .note p{font-size:clamp(15px, 1.9vw, 25px)}
  .note:not(.note-2) p{white-space:nowrap}
  .note-2 p{max-width:52ch;text-wrap:balance}
}

@media (prefers-reduced-motion:reduce){
  .board.intro .mag,.f-new,.player.pop,.lead-to span{animation:none}
}
.player:not(.docked):not(.in-head){visibility:hidden}
.team-club,.team-form,.team-nick{transition:opacity .3s, transform .4s var(--ease)}
.swapping .team-club [data-t],.swapping .team-form{opacity:1}
.swapping .team-club{opacity:0;transform:rotate(-4deg) translateY(-6px)}
.swapping .team-form{opacity:0;transform:rotate(-8deg) scale(.9)}
@media (max-width:640px){
  .head-row{gap:6px}
  .nav a{padding:10px 5px;letter-spacing:.05em}
  .head-dock{width:36px;height:36px}
  .player.in-head{padding:0;gap:0;border-color:transparent;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .player.in-head .player-disc{width:36px;height:36px}
  .player.in-head .player-btn{position:absolute;inset:0;width:100%;height:100%;background:rgba(21,23,21,.3);color:#fff}
  .player.in-head .player-btn svg{width:12px;height:12px}
  .player.in-head .player-hint{right:auto;left:-90px}
  .hero-right{flex-wrap:nowrap;gap:8px}
  .loc{letter-spacing:.08em;gap:8px}
  .player-dock{width:160px}
}
@media (max-width:640px){ .head-row{gap:4px} .nav a{padding:10px 4px;letter-spacing:.03em} .head-dock{margin-right:2px} }
@media (max-width:360px){ .nav a{font-size:10px;padding:10px 3px} }
.facts{align-content:start}
@media (min-width:641px){
  .facts{top:calc(10px + 16.5%);left:30px;width:min(64%, 720px);gap:5px}
  .f-new .f-t{font-size:clamp(18px, 1.75vw, 26px)}
  .facts li:nth-child(n+5){display:none}
  .facts::before{content:"";position:absolute;inset:-14px -40px -14px -20px;z-index:-1;background:radial-gradient(60% 70% at 25% 40%, rgba(14,32,24,.55), transparent 75%)}
}
@media (max-width:699px){ .case-sub{max-width:none;white-space:nowrap;font-size:min(22px, 5.6vw)} }
@media (max-width:400px){ .brand-num small{display:none} .brand{gap:6px} }
.player{transition:opacity .2s, box-shadow .3s, background .3s}
/* La pizarra manda: fichas y etiquetas escalan con su ancho real */
.board-zone{width:min(100%, max(760px, calc((100svh - var(--hh, 68px) - 330px) * 2)));container-type:inline-size}
.board .mag{width:clamp(30px, 4.2cqw, 42px);height:clamp(30px, 4.2cqw, 42px)}
.mag-n{font-size:clamp(14px, 2cqw, 20px)}
.mag-name{font-size:clamp(10px, 1.25cqw, 12.5px)}

/* ===================== v9 ===================== */
/* Home: plano táctico de fondo + grano de papel, título y texto a la izquierda */
.board-lines path{fill:none;stroke:rgba(237,232,220,.4);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.stage-in{position:relative;z-index:1}
.hero-bar{align-items:flex-start;gap:12px 32px;padding:18px 0 0;margin-bottom:20px}
.hero-head{text-align:left;margin:0;min-width:0}
.hero-kicker{margin:0 0 10px}
.board-title{margin:0}
.hero-copy{margin:12px 0 0;max-width:46ch;text-wrap:pretty}
.hero-right{flex-direction:column;align-items:flex-end;gap:12px;padding-top:4px}
/* Subrayado de rotulador bajo «equipo»: se dibuja, se mantiene y se vuelve a trazar */
.board-title .ln-mark{position:relative;isolation:isolate}
.title-mark{position:absolute;left:0;bottom:.05em;width:100%;height:.3em;z-index:-1;overflow:visible}
.title-mark path{fill:none;stroke:var(--dorsal);stroke-width:14;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:markLoop 7s cubic-bezier(.6,0,.3,1) 1.1s infinite}
@keyframes markLoop{0%{stroke-dashoffset:1}12%,80%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:-1}}
@media (max-width:700px){
  .hero-bar{flex-direction:column;align-items:stretch;padding-top:10px;margin-bottom:16px}
  .hero-right{order:-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
}

/* Pizarra: geometría real del campo y datos del equipo en la franja libre */
.board .board-lines.h{display:block}.board .board-lines.v{display:none}
.board.vert .board-lines.h{display:none}.board.vert .board-lines.v{display:block}
.board-lines .spot{fill:rgba(237,232,220,.45);stroke:none}
.team-top{top:calc(4% + 10px);left:calc(1.5% + 12px);right:calc(1.5% + 12px)}
.board.vert .team-top{top:25.5%;left:calc(4% + 10px);right:calc(4% + 10px)}
.plus{font-size:.6em;vertical-align:.25em;margin:0 .03em;opacity:.85}
/* Palmarés: medallas amarillas y títulos en mayúsculas, separados como un marcador */
.team-meta{gap:8px 14px}
.titles{gap:6px 0;padding-left:14px;border-left:2px solid rgba(23,59,44,.22)}
.titles li{gap:7px;padding-right:11px;margin-right:11px;border-right:1px solid rgba(23,59,44,.18)}
.titles li:last-child{border-right:0;margin-right:0;padding-right:0}
.titles .cup{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%, #fbe08a, var(--dorsal) 60%, #c39613);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25)}
.titles .cup svg{width:14px;height:14px;color:var(--verde)}
.titles .cup svg path:first-child{fill:rgba(23,59,44,.18)}
.titles li .d{font-size:14px;line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--verde)}
.titles .t-note{font-size:12.5px}
@media (max-width:640px){
  .titles{padding-left:0;border-left:0;width:100%}
  .titles li{padding-right:10px;margin-right:10px}
  .titles li .d{font-size:13.5px}
  .titles .cup{width:20px;height:20px}
  .titles .cup svg{width:12px;height:12px}
}

/* Proyectos: rejillas sin piezas sueltas */
@media (min-width:760px){
  .pieces{grid-template-columns:repeat(3,1fr)}
  .pieces[style*="--cols:4"]{grid-template-columns:repeat(4,1fr)}
  .gallery{grid-template-columns:repeat(var(--cols, 3),1fr)}
}
@media (min-width:900px){ .pieces[style*="--cols:5"]{grid-template-columns:repeat(5,1fr)} }

/* Contrataque: el juego se fija y se difumina cuando sube Trayectoria */
.game-sec{position:sticky;top:var(--hh, 68px)}
.game-sec.flow{position:relative;top:auto}
.about-more{z-index:2}
.game-card{transform-origin:50% 30%}
.game-tools{display:flex;align-items:center;gap:10px}
.g-btn{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0;border:1px solid rgba(237,232,220,.3);border-radius:999px;background:none;color:var(--hueso);cursor:pointer;font:600 11px/1 var(--f-t);letter-spacing:.12em;text-transform:uppercase;transition:background .2s, border-color .2s}
.g-btn:hover{background:rgba(237,232,220,.1);border-color:rgba(237,232,220,.6)}
.g-btn[aria-pressed="true"]{color:var(--dorsal);border-color:rgba(235,185,42,.6)}
.g-btn:focus-visible{outline:2px solid var(--dorsal);outline-offset:2px}
.g-reset{padding:0 14px}
.g-btn[hidden]{display:none}
.run{max-height:calc(100svh - var(--hh, 68px) - 330px);min-height:220px}
.game-stage .facts{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:auto;min-height:0;margin:12px 0 0;padding:0;pointer-events:auto}
.game-stage .facts::before{display:none}
.facts li.f-on,.facts li.f-off{display:flex;align-items:center;gap:12px;min-height:54px;padding:9px 14px;border-radius:6px;opacity:1;filter:none;margin:0}
.facts li.f-off{border:1px dashed rgba(237,232,220,.2)}
.facts li.f-off .f-t{font:600 10.5px/1 var(--f-t);letter-spacing:.14em;text-transform:uppercase;color:rgba(237,232,220,.38)}
.facts li.f-off .f-n{color:rgba(237,232,220,.3)}
.facts li.f-on{border:1px solid rgba(237,232,220,.14);background:rgba(237,232,220,.06)}
.facts li .f-n{font-size:20px;color:var(--dorsal)}
.facts li.f-on .f-t{font:500 14px/1.3 var(--f-t);text-transform:none;text-shadow:none;color:var(--hueso)}
.facts li.f-new{border-color:rgba(235,185,42,.7);background:rgba(235,185,42,.1);animation:factIn .5s var(--ease) both}
/* Pantalla de campeón */
.run-win{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:6px;padding:16px;text-align:center;color:var(--hueso);background:radial-gradient(70% 90% at 50% 50%, rgba(14,32,24,.82), rgba(14,32,24,.45))}
.run-win[hidden]{display:none}
.run-win p{margin:0}
.rw-k{font-size:14px;letter-spacing:.18em;color:var(--dorsal)}
.rw-t{font-size:clamp(44px, 6vw, 84px);font-weight:900;line-height:.85;text-transform:uppercase;color:var(--dorsal);text-shadow:0 4px 0 rgba(0,0,0,.35);animation:winIn .7s cubic-bezier(.2,1.4,.4,1) both}
.rw-s{font-size:15px;color:var(--hueso)}
.rw-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;margin-top:8px !important}
.rw-a a{padding:9px 16px 8px;border-radius:999px;background:var(--dorsal);color:var(--negro);font:800 15px/1 var(--f-d);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.rw-a a:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
.rw-a span{font:600 10.5px/1 var(--f-t);letter-spacing:.14em;text-transform:uppercase;color:rgba(237,232,220,.7)}
@keyframes winIn{from{opacity:0;transform:scale(.5) rotate(-6deg)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .game-head{align-items:center}
  .run{max-height:none;min-height:0}
  .game-stage .facts{grid-template-columns:1fr;gap:6px;margin-top:10px}
  .facts li.f-on,.facts li.f-off{min-height:42px;padding:7px 12px}
  .facts li.f-on .f-t{font-size:13.5px}
  .facts li .f-n{font-size:17px}
  .rw-s{font-size:13.5px}
}
.cv-btn b{font-size:22px}
@media (prefers-reduced-motion:reduce){
  .title-mark path{animation:none;stroke-dashoffset:0}
  .rw-t{animation:none}
}
/* Pizarra vertical: el portero lleva el nombre al lado para no pisar a la defensa */
.board.vert .mag:nth-of-type(1) .mag-name{top:50%;left:calc(100% + 6px);transform:translateY(-50%) rotate(var(--r))}
@media (max-width:640px){ .titles li{border-right:0;padding-right:0} }
/* Bandeja: los controles siempre a la derecha; en pizarras estrechas el palmarés baja bajo el DT */
@media (min-width:641px){
  .team-strip{flex-wrap:nowrap}
  .team-meta{flex:1 1 auto;min-width:0}
  .team-ctrl{flex:none}
}
@container (max-width:940px){
  .titles{padding-left:0;border-left:0;width:100%}
  .titles li .d{font-size:13px;letter-spacing:.02em}
  .titles li{gap:6px;padding-right:8px;margin-right:8px}
  .titles .cup{width:20px;height:20px}
  .titles .cup svg{width:12px;height:12px}
}

/* ===================== v10 ===================== */
/* Proyectos: miniaturas algo más contenidas */
@media (min-width:760px){
  .pieces{--pw:250px;max-width:calc(var(--cols, 3) * var(--pw) + (var(--cols, 3) - 1) * 16px)}
  .pieces[style*="--cols:5"]{--pw:220px}
}
@media (max-width:759px){
  .pieces{gap:12px;max-width:520px}
}
/* Enlaces a recaps y publicaciones: texto, no bloques */
.recap-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:4px}
.recap-links a{font:600 12px/1.4 var(--f-t);letter-spacing:.12em;text-transform:uppercase;color:var(--verde);text-decoration:underline;text-decoration-color:var(--dorsal);text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .2s, color .2s}
.recap-links a:hover{text-decoration-color:var(--verde)}
.recap-links a:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
/* Contrataque: instrucción con aclaración */
.run-msg small{display:block;font:italic 400 14px/1.2 var(--f-t);letter-spacing:0;text-transform:none;color:rgba(237,232,220,.75)}
/* Cartas tapadas que se giran al conseguir un balón */
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.card{perspective:900px;min-height:128px}
.card-in{position:relative;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.25,.5,1)}
.card.is-on .card-in{transform:rotateY(180deg)}
.card.f-new .card-in{animation:cardFlip .85s cubic-bezier(.3,1.2,.5,1) both}
@keyframes cardFlip{0%{transform:rotateY(0)}45%{transform:translateY(-12px) rotateY(100deg) scale(1.05)}100%{transform:rotateY(180deg)}}
.card-back,.card-front{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-back{display:grid;place-items:center;background:repeating-linear-gradient(135deg, rgba(235,185,42,.08) 0 5px, transparent 5px 11px), #1f4a37;
  border:1px solid rgba(0,0,0,.25);box-shadow:inset 0 0 0 5px #1f4a37, inset 0 0 0 6px rgba(235,185,42,.45), 0 8px 16px -10px rgba(0,0,0,.7);transition:transform .25s var(--ease)}
.card:not(.is-on) .card-back:hover{transform:translateY(-3px)}
.cb-ball{width:30px;height:30px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.cb-ball .h{fill:var(--hueso)}.cb-ball .n{fill:var(--negro)}
.cb-n{position:absolute;top:10px;left:12px;font-size:15px;line-height:1;color:var(--dorsal)}
.cb-n2{top:auto;left:auto;bottom:10px;right:12px;transform:rotate(180deg)}
.card-front{display:flex;flex-direction:column;gap:8px;padding:12px 13px;transform:rotateY(180deg);background:var(--hueso);box-shadow:inset 0 0 0 1px rgba(23,59,44,.12), 0 10px 18px -10px rgba(0,0,0,.7)}
.cf-n{align-self:flex-start;font-size:20px;line-height:1;color:var(--verde);padding-bottom:3px;border-bottom:3px solid var(--dorsal)}
.card-front p{margin:0;font:500 13.5px/1.32 var(--f-t);color:var(--negro);text-wrap:pretty}
.rw-reset{padding:8px 16px 7px;border:1.5px solid rgba(237,232,220,.7);border-radius:999px;background:none;color:var(--hueso);font:800 15px/1 var(--f-d);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.rw-reset:hover{background:rgba(237,232,220,.12)}
.rw-reset:focus-visible{outline:2px solid var(--dorsal);outline-offset:3px}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} .card{min-height:112px} }
@media (max-width:640px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
  .card{min-height:106px}
  .card-front{padding:10px 11px;gap:6px}
  .card-front p{font-size:13px}
  .cf-n{font-size:17px}
}
@media (prefers-reduced-motion:reduce){ .card-in{transition:none} .card.f-new .card-in{animation:none} }
.cb-ball .bh{fill:var(--hueso);stroke:var(--negro);stroke-width:1.2}.cb-ball .bn{fill:var(--negro)}.cb-ball .bl{fill:none;stroke:var(--negro);stroke-width:1.2}

/* ===================== v10 · Home ===================== */
/* Foco de estadio: luz suave detrás de la pizarra, sin elementos añadidos */
.stage{background:radial-gradient(58% 52% at 50% 60%, rgba(255,255,255,.62), rgba(255,255,255,0) 72%),radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(23,59,44,.07) 100%),var(--hueso)}
.board-3d{position:relative}
.board-3d::after{content:"";position:absolute;left:5%;right:5%;bottom:-16px;height:34px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side, rgba(14,32,24,.32), rgba(14,32,24,0));filter:blur(4px);pointer-events:none}
/* Una sola medida para el texto y la pizarra: los bordes coinciden */
.stage-in{--bw:min(100%, max(700px, calc((100svh - var(--hh, 68px) - 330px) * 2)))}
.stage-in .hero-bar,.stage-in .board-zone{width:var(--bw);margin-inline:auto}
/* Portátiles bajos: la pizarra entera en el primer pantallazo */
@media (min-width:761px) and (max-height:860px){
  .stage-in{--bw:min(100%, max(700px, calc((100svh - var(--hh, 68px) - 282px) * 2)))}
  .hero-bar{padding-top:10px;margin-bottom:14px}
  .hero-kicker{margin-bottom:6px}
  .board-title{font-size:clamp(46px, 9.2svh, 84px)}
  .hero-copy{margin-top:8px}
}
@media (max-width:760px){ .stage-in{--bw:100%} }
/* Entrada coordinada: título, texto, pizarra y fichas en una secuencia */
.stage-in .board-zone{animation:rise .7s var(--ease) .3s both}
.board.intro .mag{animation-delay:calc(.55s + var(--i, 0) * 45ms)}
.stage-in .cta-wrap{animation:rise .6s var(--ease) .9s both}
/* Subrayado: se dibuja una vez y se repasa al cambiar de equipo */
.title-mark path{animation:markDraw .7s cubic-bezier(.6,0,.3,1) .8s both}
.title-mark.re path{animation:markRe 1.1s cubic-bezier(.6,0,.3,1) both}
@keyframes markDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes markRe{0%{stroke-dashoffset:0}40%{stroke-dashoffset:-1}41%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .stage-in .board-zone,.stage-in .cta-wrap,.title-mark path,.title-mark.re path{animation:none}
  .title-mark path{stroke-dashoffset:0}
}
/* Contrataque: aviso para agacharse y mensaje final */
.run-hint{position:absolute;left:50%;top:22%;z-index:2;margin:0;padding:7px 14px 6px;border-radius:999px;transform:translateX(-50%);background:var(--dorsal);color:var(--negro);font:800 16px/1 var(--f-d);letter-spacing:.05em;text-transform:uppercase;pointer-events:none;animation:hintIn .3s var(--ease) both}
.run-hint[hidden]{display:none}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
.rw-t{font-size:clamp(40px, 5.4vw, 76px)}
.rw-s{font-size:clamp(20px, 2.2vw, 30px);font-weight:800;line-height:1;text-transform:uppercase;color:var(--hueso)}
.rw-x{font:italic 400 14px/1.3 var(--f-t);color:rgba(237,232,220,.75)}
.rw-a{gap:10px 22px;margin-top:12px !important}
.rw-a > span{font:500 15px/1.3 var(--f-t);letter-spacing:0;text-transform:none;color:var(--hueso)}
.rw-a span a{padding:0;margin-left:4px;border-radius:0;background:none;color:var(--dorsal);font:600 15px/1.3 var(--f-t);letter-spacing:0;text-transform:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.rw-a span a::after{content:" →"}
@media (max-width:640px){ .rw-x{display:none} .rw-a{gap:8px 14px;margin-top:6px !important} .rw-a > span,.rw-a span a{font-size:13.5px} .run-hint{font-size:13px;top:18%} }
@media (prefers-reduced-motion:reduce){ .run-hint{animation:none} }

/* ===================== v11 ===================== */
/* Victoria: dos botones iguales */
.rw-a .rw-btn{display:inline-block;margin:0;padding:9px 18px 8px;border:1.5px solid rgba(237,232,220,.75);border-radius:999px;background:none;color:var(--hueso);font:800 15px/1 var(--f-d);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s, color .2s}
.rw-a .rw-btn:hover{background:var(--hueso);color:var(--verde)}
.rw-a .rw-btn:focus-visible{outline:2px solid var(--dorsal);outline-offset:3px}
.rw-a{gap:10px !important}
/* Enlace de campaña bajo las piezas */
.content .recap-links{margin-top:18px}
/* Home: el bloque principal arranca cerca de la barra, con un aire proporcional a la altura */
.stage{align-items:flex-start}
.hero-bar{padding-top:clamp(12px, 2.2svh, 26px)}
@media (min-width:761px) and (max-height:860px){ .hero-bar{padding-top:10px} }
@media (max-width:700px){ .hero-bar{padding-top:8px} }

/* ===================== v12 ===================== */
/* Claridad: enlace a proyectos bajo el texto y línea en el pie */
.hero-go{margin:12px 0 0}
.hero-go a{font:600 12px/1.4 var(--f-t);letter-spacing:.14em;text-transform:uppercase;color:var(--verde);text-decoration:underline;text-decoration-color:var(--dorsal);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .2s}
.hero-go a:hover{text-decoration-color:var(--verde)}
.hero-go a span{display:inline-block;margin-left:2px;transition:transform .25s var(--ease)}
.hero-go a:hover span{transform:translateY(2px)}
.hero-go a:focus-visible{outline:2px solid var(--verde);outline-offset:4px}
@media (min-width:761px) and (max-height:860px){ .hero-go{margin-top:8px} }
.foot-brand{display:grid;gap:12px;justify-items:start}
.foot-tag{margin:0;font:500 13px/1.4 var(--f-t);color:rgba(237,232,220,.7)}

/* Pizarra: acabado más limpio y moderno */
.board-rig{padding:8px 8px 0;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.2), 0 18px 30px -18px rgba(21,23,21,.55), 0 4px 10px -6px rgba(21,23,21,.35)}
.board-rig::before,.board-rig::after{display:none}
.team-strip{margin:8px -8px 0;border-radius:0 0 10px 10px}
.board{background:radial-gradient(130% 110% at 50% 50%, transparent 58%, rgba(0,0,0,.28) 100%),repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 10%, transparent 10% 20%),#1b4532;box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
.board.vert{background:radial-gradient(130% 110% at 50% 50%, transparent 58%, rgba(0,0,0,.28) 100%),repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 8%, transparent 8% 16%),#1b4532}
.board-lines rect,.board-lines line,.board-lines circle,.board-lines path{stroke:rgba(237,232,220,.5);stroke-width:1.5}
/* Datos del equipo: un bloque y la formación en pastilla */
.team-club.tape{transform:none;clip-path:none;border-radius:3px;padding:6px 11px 4px;box-shadow:0 2px 6px -2px rgba(0,0,0,.45)}
.team-nick{padding-left:2px}
.team-form{transform:none;border:1.5px solid rgba(241,236,223,.6);border-radius:999px;padding:5px 12px 4px;font-size:clamp(15px, 1.5vw, 19px);background:rgba(14,32,24,.35)}
.swapping .team-form{transform:scale(.94)}
/* Fichas: imán plano, dorsal más grande, nombre recto */
.board .mag{background:linear-gradient(180deg, #fbf8f1, #e7e0d1);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.35), 0 5px 9px -3px rgba(0,0,0,.45);cursor:grab}
.board .mag.is21{background:linear-gradient(180deg, #f6d264, var(--dorsal))}
.board .mag.drag{cursor:grabbing}
.board .mag:hover{box-shadow:inset 0 -2px 0 rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.35), 0 8px 14px -4px rgba(0,0,0,.5)}
.mag-n{font-size:clamp(15px, 2.2cqw, 22px);text-shadow:none}
.mag-name{--r:0deg;clip-path:none;border-radius:2px;padding:3px 6px 2px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.mag:nth-of-type(even) .mag-name{--r:0deg}
/* Progreso: línea fina en el borde superior de la bandeja */
.team-progress{left:0;right:0;top:0;height:2px;border-radius:0;background:rgba(23,59,44,.12)}
/* Flechas de recorrido más finas */
.chalk .ch-line,.chalk .ch-tip{stroke-width:1.8}
/* Pista: las fichas se pueden mover */
.board .board-hint{position:absolute;left:auto;right:calc(1.5% + 12px);top:auto;bottom:calc(4% + 8px);transform:none;z-index:2;padding:0;border-radius:0;background:none;font:italic 400 12px/1 var(--f-t);letter-spacing:0;text-transform:none;color:rgba(241,236,223,.6);pointer-events:none;transition:opacity .4s}
.board-hint::before{content:"↔ ";font-style:normal}
.board.vert .board-hint{right:calc(4% + 8px);bottom:auto;top:calc(2.4% + 8px)}
.board .board-hint.off{opacity:1}
.board.moved .board-hint{opacity:0}
@media (max-width:640px){ .board .board-hint{font-size:11px} }
/* El enlace «Ver proyectos» suma una línea: la pizarra se ajusta para seguir cabiendo entera */
.stage-in{--bw:min(100%, max(700px, calc((100svh - var(--hh, 68px) - 344px) * 2)))}
@media (min-width:761px) and (max-height:860px){ .stage-in{--bw:min(100%, max(700px, calc((100svh - var(--hh, 68px) - 282px) * 2)))} }
@media (max-width:760px){ .stage-in{--bw:100%} }

/* ===================== v13 ===================== */
/* Separación entre «Portfolio…» y el título */
.hero-kicker{margin-bottom:16px}
@media (min-width:761px) and (max-height:860px){ .hero-kicker{margin-bottom:12px} }
@media (max-width:700px){ .hero-kicker{margin-bottom:12px} }
/* Trofeos: siluetas con volumen metálico; aparecen con un pequeño brillo al cambiar de equipo */
.tr-defs{position:absolute;width:0;height:0;overflow:hidden}
.titles .trophy{width:22px;height:24px;flex:none;overflow:visible;filter:drop-shadow(0 1px 1px rgba(14,32,24,.35));animation:trophyIn .6s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(.25s + var(--j, 0) * .08s)}
.trophy .tr-body{fill:url(#trGold);stroke:#7a5a08;stroke-width:.5}
.trophy .tr-ear{fill:none;stroke:url(#trGold);stroke-width:1.7;stroke-linecap:round}
.trophy .tr-base{fill:url(#trBase)}
.trophy .tr-shine{fill:none;stroke:rgba(255,255,255,.75);stroke-width:.8;stroke-linecap:round}
@keyframes trophyIn{0%{opacity:0;transform:translateY(5px) scale(.8);filter:drop-shadow(0 1px 1px rgba(14,32,24,.35)) brightness(1)}60%{opacity:1;transform:translateY(-1px) scale(1.04);filter:drop-shadow(0 1px 1px rgba(14,32,24,.35)) brightness(1.35)}100%{transform:none;filter:drop-shadow(0 1px 1px rgba(14,32,24,.35)) brightness(1)}}
@media (max-width:640px){ .titles .trophy{width:18px;height:20px} }
@container (max-width:940px){ .titles .trophy{width:19px;height:21px} }
@media (prefers-reduced-motion:reduce){ .titles .trophy{animation:none} }
/* Enlace de campaña al final del contexto */
.block .recap-links{margin-top:6px}
/* Contacto: además de la línea amarilla, el botón de Mail se ilumina un momento */
.site-foot.flash .ico[data-copy] svg{animation:mailGlow 1.8s var(--ease) .35s 2}
.site-foot.flash .ico[data-copy] span{animation:mailTxt 3.6s var(--ease) .35s}
@keyframes mailGlow{0%,100%{border-color:rgba(237,232,220,.5);box-shadow:0 0 0 0 rgba(235,185,42,0);color:var(--hueso)}45%{border-color:var(--dorsal);box-shadow:0 0 0 5px rgba(235,185,42,.16), 0 0 18px 2px rgba(235,185,42,.28);color:var(--dorsal)}}
@keyframes mailTxt{0%,100%{opacity:.8;color:var(--hueso)}20%,80%{opacity:1;color:var(--dorsal)}}
@media (prefers-reduced-motion:reduce){
  .site-foot.flash .ico[data-copy] svg{animation:none;border-color:var(--dorsal);color:var(--dorsal)}
  .site-foot.flash .ico[data-copy] span{animation:none;opacity:1}
}

/* ===================== v14 ===================== */
/* Rotulador sobre la pizarra */
.board-draw{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;transition:opacity .45s var(--ease)}
.board-draw.fading{opacity:0}
@media (hover:hover){
  .board{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(45 16 16)'%3E%3Crect x='12' y='2' width='8' height='17' rx='2' fill='%23173B2C' stroke='%23EDE8DC' stroke-width='1.2'/%3E%3Crect x='12' y='4' width='8' height='3' fill='%23EBB92A'/%3E%3Cpath d='M12.6 19h6.8l-1.6 5h-3.6z' fill='%23EDE8DC' stroke='%23173B2C' stroke-width='.8'/%3E%3Cpath d='M14.6 24h2.8l-.6 3.4h-1.6z' fill='%23173B2C'/%3E%3C/g%3E%3C/svg%3E") 8 24, crosshair}
}
.board.drawing .mag{pointer-events:none}

/* ===================== v15 ===================== */
/* Más aire entre «Portfolio…» y el título */
.hero-kicker{margin-bottom:22px}
@media (min-width:761px) and (max-height:860px){ .hero-kicker{margin-bottom:16px} }
@media (max-width:700px){ .hero-kicker{margin-bottom:16px} }
/* Trayectoria, Certificaciones y Formación: una misma estructura en vertical */
.cv-list{display:grid;gap:44px}
.cv-sec .h3{margin:0 0 6px}
.ledger{margin:0;padding:0;list-style:none}
.ledger > li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 24px;align-items:baseline;padding:14px 0;border-top:1px solid var(--linea)}
.ledger > li:last-child{border-bottom:1px solid var(--linea)}
.ledger > li > *{margin:0}
.ledger-r > li{grid-template-columns:minmax(0,1fr) 150px}
.ledger-r .lg-date{text-align:right}
.lg-date{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--taquilla)}
.ledger h4{margin:0;font-size:clamp(20px, 2.2vw, 26px);line-height:1;color:var(--verde)}
.ledger .muted{margin:5px 0 0;font-size:14px}
/* Idiomas y Competencias: misma estética de etiquetas, una debajo de otra y más juntas entre sí */
.cv-sec-tags .h3{margin-bottom:12px}
.cv-sec-tags + .cv-sec-tags{margin-top:-14px}
@media (max-width:560px){
  .cv-list{gap:34px}
  .ledger > li{grid-template-columns:1fr;gap:6px;padding:12px 0}
  .ledger-r > li{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px}
  .cv-sec-tags + .cv-sec-tags{margin-top:-10px}
}
.cv-sec .h3{font-size:clamp(26px, 2.8vw, 34px);line-height:1;margin-bottom:10px}
@media (max-width:560px){ .cv-sec .h3{font-size:26px} }

/* ===================== v17 · Hero protagonista ===================== */
/* Capítulo 1: titular. Ocupa la pantalla menos una franja por la que asoma la pizarra. */
.hero{position:sticky;top:var(--hh, 68px);z-index:0;height:calc(100svh - var(--hh, 68px) - 76px);min-height:420px;
  background:radial-gradient(60% 55% at 50% 48%, rgba(255,255,255,.6), rgba(255,255,255,0) 72%),var(--hueso)}
.hero.flow{position:relative;top:auto}
.hero-in{position:relative;height:100%;display:grid;place-items:center;transform-origin:50% 40%}
.hero-meta{position:absolute;top:clamp(12px, 2.2svh, 24px);right:max(16px, env(safe-area-inset-right, 0px));display:flex;align-items:center;gap:14px;animation:rise .7s var(--ease) 1.35s both}
.hero-mid{display:grid;justify-items:center;text-align:center;padding:24px 0}
.hero-mid .hero-kicker{margin:0 0 clamp(16px, 2.6svh, 28px);animation:rise .7s var(--ease) .05s both}
.hero-title{margin:0;font-size:clamp(56px, min(15vw, 29svh), 232px);line-height:.84;letter-spacing:-.005em;color:var(--verde);text-transform:uppercase}
.hero-title .ln{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.02em .02em .06em}
.hero-title .w{display:inline-block;transform:translateY(108%);animation:wordUp 1.05s cubic-bezier(.16,.84,.24,1) var(--d, .2s) forwards}
@keyframes wordUp{to{transform:none}}
.hero-title .ln-mark{position:relative;isolation:isolate;overflow:visible}
.hero-title .ln-mark .w{clip-path:inset(0 -2% 0 -2%)}
.hero-title .title-mark{bottom:.08em;height:.24em}
.hero-title .title-mark path{animation:markDraw .7s cubic-bezier(.6,0,.3,1) 1.25s both}
.hero-title .title-mark.re path{animation:markRe 1.1s cubic-bezier(.6,0,.3,1) both}
.hero-mid .hero-copy{margin:clamp(18px, 3svh, 30px) 0 0;max-width:46ch;font-size:clamp(16px, 1.3vw, 19px);color:var(--negro);animation:rise .7s var(--ease) 1.15s both}
.hero-cue{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid rgba(23,59,44,.35);border-radius:50%;background:none;color:var(--verde);font-size:18px;cursor:pointer;animation:rise .6s var(--ease) 1.6s both}
.hero-cue span{display:block;animation:bob 1.8s var(--ease) 2.2s infinite}
.hero-cue:hover{border-color:var(--verde)}
.hero-cue:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
/* Solo la primera vez: si se vuelve al Home, el titular ya está en su sitio. */
.hero.static .w{transform:none;animation:none}
.hero.static .hero-meta,.hero.static .hero-kicker,.hero.static .hero-copy,.hero.static .hero-cue{animation:none}
.hero.static .title-mark path{animation:none;stroke-dashoffset:0}
/* Capítulo 2: pizarra. Sube sobre el titular y se queda fija mientras llegan los proyectos. */
.stage{z-index:1;padding:26px 0 24px;box-shadow:0 -24px 40px -28px rgba(14,32,24,.35)}
.stage-in .board-zone{animation:none}
.stage-in .cta-wrap{animation:none}
.stage-in{--bw:min(100%, max(680px, calc((100svh - var(--hh, 68px) - 190px) * 2)))}
@media (min-width:761px) and (max-height:860px){ .stage-in{--bw:min(100%, max(680px, calc((100svh - var(--hh, 68px) - 190px) * 2)))} }
@media (max-width:760px){ .stage-in{--bw:100%} }
.projects-stage{position:relative;z-index:2}
@media (max-width:700px){
  .hero{height:calc(100svh - var(--hh, 60px) - 64px)}
  .hero-meta{left:var(--gutter);right:16px;justify-content:space-between}
  .hero-title{font-size:clamp(52px, min(19vw, 20svh), 120px)}
  .hero-mid{padding-top:56px}
  .hero-mid .hero-copy{font-size:16px;max-width:30ch}
}
@media (prefers-reduced-motion:reduce){
  .hero-title .w{transform:none;animation:none}
  .hero-meta,.hero-mid .hero-kicker,.hero-mid .hero-copy,.hero-cue,.hero-cue span{animation:none}
  .hero-title .title-mark path{animation:none;stroke-dashoffset:0}
}
/* Hero: aire para el clima arriba y la flecha abajo */
.hero-mid{padding:clamp(56px, 8svh, 84px) 0 clamp(64px, 9svh, 88px)}
.hero-title{font-size:clamp(56px, min(15vw, 26svh), 232px)}
@media (max-width:700px){ .hero-mid{padding:64px 0 72px} .hero-title{font-size:clamp(52px, min(19vw, 18svh), 120px)} }
/* Hero en columna: clima arriba, titular centrado y flecha abajo; nunca se solapan */
.hero{height:auto;min-height:calc(100svh - var(--hh, 68px) - 76px)}
.hero-in{height:auto;min-height:inherit;display:flex;flex-direction:column;align-items:stretch}
.hero-meta{position:static;align-self:flex-end;padding-top:clamp(12px, 2.2svh, 24px)}
.hero-mid{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(12px, 3svh, 40px) 0}
.hero-cue{position:relative;left:auto;bottom:auto;transform:none;align-self:center;margin:0 0 14px;flex:none}
@media (max-width:700px){ .hero-meta{align-self:stretch} .hero-mid{padding:24px 0} }
.hero-title{font-size:clamp(56px, min(13.2vw, 22.5svh), 220px)}
.hero-mid{padding:8px 0}
.hero-meta{padding-top:clamp(10px, 1.8svh, 20px)}
@media (max-width:700px){ .hero-title{font-size:clamp(52px, min(19vw, 18svh), 120px)} .hero-mid{padding:16px 0} }
.hero{padding:0;border:0}

/* ===================== v18 ===================== */
/* Pizarra: empieza desenfocada y apagada bajo el titular; con el scroll se enfoca y la iluminan dos torres de focos */
.stage .board-rig{filter:blur(calc((1 - var(--lit, 1)) * 6px)) saturate(calc(.75 + var(--lit, 1) * .25)) brightness(calc(.9 + var(--lit, 1) * .1))}
.stage.lit .board-rig{filter:none}
.floodlights{position:absolute;inset:-26px 0 0;z-index:4;pointer-events:none;opacity:calc(var(--lit, 1) * .9);mix-blend-mode:screen;overflow:hidden}
.floodlights i{position:absolute;top:0;width:58%;height:92%;filter:blur(18px)}
.floodlights i::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,247,226,.5), rgba(255,247,226,.16) 55%, rgba(255,247,226,0) 92%)}
.floodlights i:first-child{left:-6%}
.floodlights i:last-child{right:-6%}
.floodlights i:first-child::before{clip-path:polygon(0 0, 14% 0, 100% 100%, 46% 100%)}
.floodlights i:last-child::before{clip-path:polygon(86% 0, 100% 0, 54% 100%, 0 100%)}
@media (max-width:760px){ .floodlights i{width:70%} }
@media (prefers-reduced-motion:reduce){ .stage .board-rig{filter:none} }
/* Táctil: la pizarra deja hacer scroll; solo bloquea el gesto al mover fichas o con el rotulador activado */
@media (hover:none){
  .board{touch-action:pan-y}
  .board .mag{touch-action:none}
  .board.pen-on{touch-action:none;box-shadow:inset 0 0 0 2px rgba(235,185,42,.55)}
}
.pen-btn[aria-pressed="true"]{background:var(--dorsal);border-color:var(--dorsal);color:var(--negro)}
/* Tablet en vertical: pizarra vertical y a la medida de la pantalla, sin hueco debajo */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .board{aspect-ratio:4/5}
  .stage-in{--bw:min(100%, max(320px, calc((100svh - var(--hh, 68px) - 290px) * .8)))}
  .team-strip{flex-wrap:wrap}
  .team-meta{flex:1 1 100%}
  .team-ctrl{width:100%;justify-content:flex-end}
}
/* Ficha cogida con el teclado */
.board .mag.kbd-grab{outline:3px solid var(--dorsal);outline-offset:3px}

.strip-btn[hidden]{display:none}
.team-count{white-space:nowrap}
@media (max-width:640px){
  .lg-only{display:none}
  .team-ctrl{flex-wrap:wrap;justify-content:flex-end;gap:8px}
}
@media (max-width:640px){ .pen-txt{display:none} .pen-btn{min-width:34px;padding:0} }

/* ===================== v19 · Selector de idioma ===================== */
.lang-switch{display:flex;align-items:center;gap:2px;margin-left:18px;padding-left:16px;border-left:1px solid var(--linea);font:600 11.5px/1 var(--f-t);letter-spacing:.12em;color:var(--taquilla)}
.lang-switch button{padding:8px 3px;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;border-bottom:2px solid transparent;transition:color .2s, border-color .2s}
.lang-switch button:hover{color:var(--verde)}
.lang-switch button[aria-pressed="true"]{color:var(--verde);border-bottom-color:var(--dorsal);cursor:default}
.lang-switch button:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.lang-switch span{opacity:.5}
@media (max-width:640px){
  .lang-switch{margin-left:8px;padding-left:8px;font-size:10.5px;letter-spacing:.06em}
  .lang-switch button{padding:8px 2px}
}
/* Móvil: solo se muestra el idioma al que se puede cambiar, para que la cabecera quepa */
@media (max-width:640px){
  .lang-switch{margin-left:4px;padding-left:6px}
  .lang-switch span,.lang-switch button[aria-pressed="true"]{display:none}
}
@media (max-width:400px){ .nav a{padding:10px 3px} }
@media (max-width:400px){ .nav a{letter-spacing:.01em} .lang-switch{margin-left:2px;padding-left:5px} }

/* ===================== v22 · Versión móvil =====================
   Todo lo nuevo de móvil vive aquí. Fuera de estas media queries solo se ocultan
   los elementos móviles, así que el escritorio se ve exactamente igual. */
.menu-btn,.run-pad,.case-toc,.swipe-n,.player-tap{display:none}
.head-menu{display:contents}

/* Botones táctiles del juego: solo en pantallas táctiles */
@media (hover:none) and (pointer:coarse){
  .run.is-live{touch-action:none}
  .run-pad{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .pad-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;padding:0 12px;border:1.5px solid rgba(237,232,220,.35);border-radius:10px;background:rgba(14,32,24,.55);color:var(--hueso);font:800 18px/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:background .12s, transform .12s, border-color .12s}
  .pad-btn span{font:700 20px/1 var(--f-t)}
  .pad-btn.on{background:var(--dorsal);border-color:var(--dorsal);color:var(--negro);transform:scale(.97)}
  .pad-btn:focus-visible{outline:2px solid var(--dorsal);outline-offset:2px}
}

@media (max-width:640px){
  :root{--gutter:max(20px, env(safe-area-inset-left, 0px))}
  .wrap,.wrap.blocks{padding-right:max(20px, env(safe-area-inset-right, 0px))}

  /* --- Cabecera: logo, música y «Menú»; sin desenfoque (más fluido) --- */
  .site-head{background:rgba(237,232,220,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  .head-row{gap:10px}
  .brand-txt{display:inline-flex}
  .head-dock{margin-left:auto}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:-6px;padding:0 6px 0 10px;border:0;background:none;color:var(--verde);font:600 12px/1 var(--f-t);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .menu-btn:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
  .menu-ic{position:relative;width:20px;height:12px}
  .menu-ic i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease), top .3s var(--ease)}
  .menu-ic i:first-child{top:1px}.menu-ic i:last-child{top:9px}
  .menu-open .menu-ic i{top:5px}
  .menu-open .menu-ic i:first-child{transform:rotate(45deg)}.menu-open .menu-ic i:last-child{transform:rotate(-45deg)}
  /* Panel bajo la cabecera, a pantalla completa, estilo marcador */
  .head-menu{position:fixed;left:0;right:0;top:var(--hh, 61px);bottom:0;z-index:19;display:flex;flex-direction:column;justify-content:space-between;padding:36px max(24px, env(safe-area-inset-left, 0px)) calc(36px + env(safe-area-inset-bottom, 0px));background:var(--verde);color:var(--hueso);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s, transform .3s var(--ease), visibility 0s .3s}
  .menu-open .head-menu{visibility:visible;opacity:1;transform:none;transition:opacity .25s, transform .3s var(--ease)}
  .menu-open,.menu-open body{overflow:hidden}
  .menu-open .player.docked{visibility:hidden}
  .head-menu .nav{flex-direction:column;gap:0}
  .head-menu .nav li{border-bottom:1px solid rgba(237,232,220,.16)}
  .head-menu .nav a{display:flex;align-items:center;justify-content:space-between;padding:18px 0 14px;font:900 clamp(40px, 12.5vw, 58px)/.9 var(--f-d);letter-spacing:.01em;color:var(--hueso);border:0}
  .head-menu .nav a::after{content:"→";font:400 22px/1 var(--f-t);opacity:.5}
  .head-menu .nav a[aria-current="page"]{color:var(--dorsal)}
  .head-menu .lang-switch{align-self:flex-start;margin:28px 0 0;padding:0;border:0;gap:6px;font:600 14px/1 var(--f-t);letter-spacing:.16em;color:rgba(237,232,220,.6)}
  .head-menu .lang-switch span,.head-menu .lang-switch button[aria-pressed="true"]{display:inline-block}
  .head-menu .lang-switch button{min-width:48px;min-height:48px;padding:0 6px;color:inherit;border-bottom:2px solid transparent}
  .head-menu .lang-switch button[aria-pressed="true"]{color:var(--hueso);border-bottom-color:var(--dorsal)}
  .head-menu .lang-switch button:focus-visible,.head-menu .nav a:focus-visible{outline:2px solid var(--dorsal);outline-offset:2px}

  /* --- Música: área táctil de 44 px y tarjeta del primer play (iPhone) --- */
  .player,.player.docked{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(247,244,236,.96)}
  .player.in-head{background:none}
  .player.in-head .player-btn::after{content:"";position:absolute;inset:-5px}
  .player.ask-tap{animation:none}
  .player-tap{position:fixed;left:50%;top:calc(var(--hh, 61px) + 12px);z-index:1;width:276px;padding:162px 14px 14px;border-radius:14px;background:var(--negro);color:var(--hueso);box-shadow:0 18px 40px -12px rgba(0,0,0,.55);transform:translateX(-50%)}
  .player.ask-tap .player-tap{display:block}
  .pt-txt{display:block;padding-right:36px;font:600 13px/1.35 var(--f-t)}
  .pt-x{position:absolute;right:6px;bottom:6px;width:44px;height:44px;border:0;background:none;color:var(--hueso);font-size:24px;line-height:1;cursor:pointer}
  .player.ask-tap .player-disc{overflow:visible;animation:none}
  .player.ask-tap .player-vid{position:fixed;left:50%;top:calc(var(--hh, 61px) + 24px);z-index:2;width:248px;height:140px;margin-left:-124px;transform:none;border-radius:8px;opacity:1;-webkit-mask:none;mask:none}
  .player.ask-tap .player-vid iframe{pointer-events:auto}
  .player.ask-tap .player-hint{display:none}

  /* --- Escenario: sin desenfoques animados al hacer scroll --- */
  .stage .board-rig{filter:none;opacity:calc(.5 + var(--lit, 1) * .5)}
  .slide{filter:none}
  .cta-down{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(247,244,236,.94)}

  /* --- Pizarra: composición propia para móvil --- */
  .board{aspect-ratio:3/4}
  .board .mag{width:38px;height:38px}
  .board .mag::before{content:"";position:absolute;inset:-4px;border-radius:50%}
  .mag-n{font-size:17px}
  .mag-name{font-size:11.5px;padding:3px 5px 2px}
  .board .board-hint{display:none}
  .team-strip{flex-wrap:wrap;gap:12px;padding:14px 14px 12px}
  .team-meta{flex:1 1 100%}
  .team-ctrl{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:nowrap}
  .team-count{margin-right:auto;font-size:15px}
  .strip-btn{min-height:44px}
  .strip-btn:not(.wide){width:44px;min-width:44px}
  .pen-txt{display:inline}
  .pen-btn{min-width:0;padding:0 14px}
  /* Dibujo a pantalla completa */
  .board-locked,.board-locked body{overflow:hidden}
  .board-full{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));background:rgba(14,32,24,.97);touch-action:none;overscroll-behavior:contain;container-type:inline-size}
  .board-full .board-rig{width:min(100%, calc((100svh - 230px) * .75 + 16px));margin:0 auto;filter:none;opacity:1;transform:none !important}
  .board-full .board{touch-action:none}
  .bf-hint{margin:0;text-align:center;font:italic 400 13px/1.3 var(--f-t);color:rgba(241,236,223,.75)}

  /* --- Casos: índice fijo, cifras compactas y carruseles --- */
  .case-toc{display:block;position:sticky;top:var(--hh, 61px);z-index:15;background:rgba(237,232,220,.97);border-bottom:1px solid var(--linea)}
  .case-toc .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:0;padding-bottom:0}
  .case-toc .wrap::-webkit-scrollbar{display:none}
  .case-toc button{flex:none;min-height:46px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:none;color:var(--taquilla);font:600 12px/1 var(--f-t);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
  .case-toc button:first-child{padding-left:0}
  .case-toc button[aria-current="true"]{color:var(--verde);border-bottom-color:var(--dorsal)}
  .stats{margin-top:22px}
  .stats > div{padding:10px 10px 9px}
  .stats dd{font-size:30px}
  .stats dt{font-size:11px;letter-spacing:.1em}
  .blocks{padding:28px 0 4px}
  .block{padding:22px 0}
  .content-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .swipe-n{display:inline-block;margin-left:auto;font:600 12px/1 var(--f-t);letter-spacing:.12em;color:var(--taquilla);font-variant-numeric:tabular-nums}
  .pieces,.gallery{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;grid-auto-rows:auto;gap:12px;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(-1 * var(--gutter)) calc(-1 * max(20px, env(safe-area-inset-right, 0px)));padding-inline:var(--gutter) max(20px, env(safe-area-inset-right, 0px));scroll-padding-inline:var(--gutter)}
  .pieces::-webkit-scrollbar,.gallery::-webkit-scrollbar{display:none}
  .pieces > *,.gallery > li{scroll-snap-align:start}
  .pieces > .wide{grid-column:auto}
  .gallery{grid-auto-columns:58%}
  .content .recap-links{margin-top:14px}

  /* --- Legibilidad y áreas táctiles --- */
  .case-more{font-size:12.5px}
  .thumb-tag{font-size:12px}
  .recap-links a,.piece-foot .ext{display:inline-flex;align-items:center;min-height:44px}
  .foot-note a{display:inline-block;padding:14px 0}
  .g-btn{min-width:44px;min-height:44px}
}
@media (max-width:360px){
  .brand-txt{display:none}
  .head-menu .nav a{font-size:40px}
  .pad-btn{font-size:16px}
}
@media (max-width:640px){ .board.vert .team-top{top:22.5%} }
@media (max-width:640px){
  .board-full{background:#0e2018}
  /* Con «Borrar» visible, «Cambiar» queda solo con su icono y se oculta el contador para que todo quepa. */
  .team-ctrl:has([data-team=clear]:not([hidden])) .team-count{display:none}
  .team-ctrl:has([data-team=clear]:not([hidden])) [data-team=next]{width:44px;min-width:44px;padding:0;font-size:0}
  .team-ctrl:has([data-team=clear]:not([hidden])) [data-team=next] span[aria-hidden]{font-size:16px}
  .team-ctrl:has([data-team=clear]:not([hidden])){justify-content:flex-end}
}
@media (max-width:640px){ .site-head,.case-toc{background:rgb(237,232,220)} }
@media (max-width:640px){ .brand{padding-block:8px} .hero-cue{width:44px;height:44px} }
/* Móviles muy estrechos (≤360 px): fichas algo menores y controles compactos */
@media (max-width:360px){
  .board .mag{width:32px;height:32px}
  .mag-n{font-size:15px}
  .mag-name{font-size:10.5px;padding:2px 4px 1px}
  .board.vert .team-top{top:21%}
  .team-club.tape{font-size:15px}
  .team-nick{font-size:12px}
  .team-count{display:none}
  .team-ctrl{justify-content:flex-end}
  .team-ctrl .strip-btn.wide{padding:0 10px;letter-spacing:.06em}
}