/* Reglas de página (venían del <helmet> de los tableros de Claude Design) */
body{margin:0;background:var(--fondo);color:var(--tinta)}
a{color:var(--rosa)}
a:hover{color:var(--tinta)}
a:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
img{max-width:100%}
@media (max-width:720px){.display-xl{font-size:56px}.display-l{font-size:40px}.cifra{font-size:40px}}
html,body{overflow-x:clip}


:root{--e-sale:cubic-bezier(.16,1,.3,1)}

/* Enlaces del menú: subrayado que crece desde la izquierda */
header nav a.cuerpo-s{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--e-sale)}
header nav a.cuerpo-s:hover{background-size:100% 1px}
/* Flechas que avanzan al pasar el cursor */
main nav a>[aria-hidden="true"]{display:inline-block;transition:transform .5s var(--e-sale)}
main nav a:hover>[aria-hidden="true"]{transform:translateX(4px)}

/* ── Catálogo de reels: mapa de temas que filtra y tarjetas por tema ── */
.reel,.mapa__seg,.filtros button{--c:var(--tinta);--sc:var(--fondo)}
[data-cat="competencias"],.filtros button[data-cat="competencias"]{--c:var(--rosa);--sc:var(--sobre-rosa)}
[data-cat="tecnica"],.filtros button[data-cat="tecnica"]{--c:var(--tinta);--sc:var(--fondo)}
[data-cat="barras"],.filtros button[data-cat="barras"]{--c:var(--neon);--sc:var(--tinta)}
[data-cat="equipo"],.filtros button[data-cat="equipo"]{--c:#F4C2D7;--sc:var(--tinta)}
[data-cat="entrevistas"],.filtros button[data-cat="entrevistas"]{--c:var(--piedra);--sc:var(--tinta)}

.mapa{display:flex;flex-direction:column;gap:20px}
.mapa__barra{display:flex;gap:4px;height:14px}
.mapa__seg{background:var(--c);border-radius:var(--radio-pill);transform-origin:0 50%;transition:opacity .5s ease,transform .5s var(--e-sale)}
.mapa[data-filtro]:not([data-filtro="todo"]) .mapa__seg{opacity:.18}
.mapa[data-filtro="competencias"] .mapa__seg[data-cat="competencias"],.mapa[data-filtro="tecnica"] .mapa__seg[data-cat="tecnica"],.mapa[data-filtro="barras"] .mapa__seg[data-cat="barras"],.mapa[data-filtro="equipo"] .mapa__seg[data-cat="equipo"],.mapa[data-filtro="entrevistas"] .mapa__seg[data-cat="entrevistas"]{opacity:1;transform:scaleY(1.45)}

.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtros[hidden]{display:none}
.filtros button{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--font-dato);letter-spacing:.1em;text-transform:uppercase;padding:11px 16px;border:1px solid var(--borde);border-radius:var(--radio-pill);background:transparent;color:var(--tinta);cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .4s var(--e-sale)}
.filtros button[data-cat]::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(18,16,19,.15)}
.filtros button:hover{border-color:var(--tinta);transform:translateY(-2px)}
.filtros button[aria-pressed="true"]{background:var(--c);color:var(--sc);border-color:var(--c)}
.filtros button[aria-pressed="true"]::before{background:var(--sc)}
.filtros button:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.filtros sup{font-size:9px;opacity:.65}

.catalogo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:40px 20px}
.reel[hidden]{display:none}
.reel{display:flex;flex-direction:column;gap:14px}
.reel__marco{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--c);color:var(--sc);text-decoration:none;transition:transform .5s var(--e-sale),box-shadow .5s var(--e-sale)}
a.reel__marco:hover{color:var(--sc);transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(18,16,19,.55)}
a.reel__marco:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.reel__marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--e-sale)}
a.reel__marco:hover img{transform:scale(1.05)}
.reel__marco::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(18,16,19,.35),transparent 30%,transparent 70%,rgba(18,16,19,.35));pointer-events:none}
.reel__marco--tipo::after{display:none}
.reel__portada{position:absolute;left:16px;right:16px;bottom:18px;font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.reel__marco--tipo::before{content:"«";position:absolute;top:44px;left:12px;font-family:var(--font-display);font-style:italic;font-size:120px;line-height:1;opacity:.18}
.reel__chip{position:absolute;z-index:1;top:12px;left:12px;padding:6px 10px;border-radius:var(--radio-pill);background:var(--fondo);color:var(--tinta);font:500 10px/1 var(--font-dato);letter-spacing:.1em;text-transform:uppercase}
.reel__dur{position:absolute;z-index:1;top:12px;right:12px;font:500 11px/1 var(--font-dato);letter-spacing:.06em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.reel__marco--tipo .reel__dur{color:inherit;text-shadow:none}
.reel__play{position:absolute;z-index:1;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--neon);color:var(--sobre-neon);font-size:13px;padding-left:2px;opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .5s var(--e-sale)}
a.reel__marco:hover .reel__play,a.reel__marco:focus-visible .reel__play{opacity:1;transform:none}
.reel__sticker{position:absolute;z-index:2;top:40px;right:-6px;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--neon);color:var(--sobre-neon);font:600 10px/1.25 var(--font-dato);letter-spacing:.08em;text-transform:uppercase;transform:rotate(12deg);box-shadow:0 8px 20px -8px rgba(176,18,91,.6)}
.reel__info{display:flex;flex-direction:column;gap:6px}
.reel__titulo{margin:0;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:19px;line-height:1.2;text-wrap:balance}
.reel__con{margin:0;font-family:var(--font-texto);font-size:14px;color:var(--rosa)}
.reel__meta{margin:0;font:500 11px/1.3 var(--font-dato);letter-spacing:.1em;color:var(--tinta-suave)}
@media (max-width:720px){.catalogo{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}.reel__portada{font-size:22px;left:12px;right:12px}.reel__titulo{font-size:17px}.reel__sticker{width:68px;height:68px;font-size:8px;top:36px}}


.leyenda{margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;font:500 11px/1 var(--font-dato);letter-spacing:.1em;text-transform:uppercase}
.leyenda span{display:inline-flex;align-items:center;gap:8px}
.leyenda span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(18,16,19,.15)}
.leyenda sup{font-size:9px;opacity:.65}
.reel__pauta{position:absolute;z-index:1;left:12px;bottom:12px;padding:6px 10px;border-radius:var(--radio-pill);background:var(--tinta);color:var(--fondo);font:500 10px/1 var(--font-dato);letter-spacing:.1em;text-transform:uppercase}
.reel__datos{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 0;padding-top:10px;border-top:1px solid var(--linea)}
.reel__datos div{display:flex;flex-direction:column-reverse;gap:2px}
.reel__datos dt{font:500 10px/1.2 var(--font-dato);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.reel__datos dd{margin:0;font-family:var(--font-display);font-size:20px;line-height:1;font-variant-numeric:tabular-nums}

/* ── Proyectos: cifras, gráfica de barras y tablas ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));border-top:1px solid var(--tinta)}
.kpi{display:flex;flex-direction:column;gap:12px;padding:28px 28px 32px 0;border-bottom:1px solid var(--linea)}
.kpi>p{margin:0}
.kpi .cifra{font-size:clamp(48px,6vw,72px);color:var(--rosa);font-variant-numeric:tabular-nums}
.kpi .dato-s{color:var(--tinta-suave)}
.comp{display:flex;flex-direction:column;gap:6px;max-width:340px}
.comp div{display:grid;grid-template-columns:7.5rem 1fr auto;align-items:center;gap:10px;font:500 10px/1 var(--font-dato);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.comp i{display:block;height:10px;border-radius:0 4px 4px 0;background:var(--rosa);transform-origin:0 50%}
.comp--ref i{background:var(--borde)}
.comp b{font-weight:500;color:var(--tinta)}
.barras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--tinta)}
.barras li{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr) 4.5rem;align-items:center;gap:20px;padding:10px 0;border-bottom:1px solid var(--linea)}
.barras li:hover{background:var(--superficie)}
.barras__nombre{display:flex;flex-direction:column;gap:3px;font-family:var(--font-display);font-style:italic;font-size:17px;line-height:1.2}
.barras__nombre small{font:500 10px/1 var(--font-dato);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.barras__pista{height:18px}
.barras__barra{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--rosa);transform-origin:0 50%}
.barras .pauta .barras__barra{background:repeating-linear-gradient(135deg,var(--rosa) 0 4px,color-mix(in srgb,var(--rosa) 35%,var(--fondo)) 4px 8px)}
.barras__valor{font-family:var(--font-dato);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:720px){.barras li{grid-template-columns:minmax(0,1fr) 3.5rem;grid-template-areas:"n v" "p p";gap:8px 12px}.barras__nombre{grid-area:n}.barras__pista{grid-area:p;height:12px}.barras__valor{grid-area:v}}
.tabla{margin-top:24px}
.tabla summary{cursor:pointer;font:500 11px/1 var(--font-dato);letter-spacing:.1em;text-transform:uppercase;color:var(--rosa);padding:8px 0}
.tabla__marco{overflow-x:auto;margin-top:12px}
.tabla__marco table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.tabla__marco th,.tabla__marco td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla__marco thead th{font:500 10px/1.3 var(--font-dato);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);border-bottom-color:var(--tinta)}
.tabla__marco tbody th{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:16px}
.tabla__marco td{font-variant-numeric:tabular-nums}
.tabla__pauta{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:var(--radio-pill);background:var(--tinta);color:var(--fondo);font:500 9px/1 var(--font-dato);font-style:normal;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}
.tabla__marco--oscuro{margin-top:0}
.tabla__marco--oscuro th,.tabla__marco--oscuro td{border-bottom-color:rgba(245,243,244,.2)}
.tabla__marco--oscuro thead th{color:var(--sobre-bloque);opacity:.7;border-bottom-color:var(--sobre-bloque)}
.tabla__marco--oscuro td:nth-child(5){color:var(--acento-bloque);font-family:var(--font-display);font-size:18px}
.fuentes{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--tinta);color:var(--tinta-suave)}
.fuentes ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;max-width:80ch}

/* ── Movimiento: solo con la clase .mov (la pone el <head> si no se pidió reducir movimiento) ── */
@keyframes subir{from{opacity:0;transform:translateY(18px)}}
@keyframes entrar{from{opacity:0}}
@keyframes aparecer{to{opacity:1}}
@keyframes acercar{from{scale:1.18}}
@keyframes emblema{from{opacity:0;scale:.35}}
@keyframes flota{50%{translate:0 -10px}}
@keyframes fila{from{opacity:0;transform:translateY(14px)}}

/* Encabezado e inicio */
.mov body>div>header{animation:entrar 1.2s ease both}
.mov #inicio>div:first-child>:not(h1){animation:subir 1.1s var(--e-sale) both}
.mov #inicio>div:first-child>:nth-child(1){animation-delay:.1s}
.mov #inicio>div:first-child>:nth-child(3){animation-delay:.75s}
.mov #inicio>div:first-child>:nth-child(4){animation-delay:.85s}
.mov #inicio>div:first-child>:nth-child(5){animation-delay:.95s}
.mov .foto-hero{animation:entrar 1.4s ease .15s both}
.mov .foto-hero img{animation:acercar 2.2s var(--e-sale) .15s both}
.mov .foto-hero+p{animation:subir 1s var(--e-sale) 1.1s both}
/* El emblema «S» aparece y queda flotando sobre la foto */
.mov .emblema{animation:emblema 1.1s var(--e-sale) 1.2s both,flota 5s ease-in-out 2.3s infinite}
.mov .sh-ficha>*{animation:subir 1s var(--e-sale) both}
.mov .sh-ficha>:nth-child(1){animation-delay:1s}
.mov .sh-ficha>:nth-child(2){animation-delay:1.07s}

/* Títulos palabra por palabra (movimiento.js los parte; si el JS no llega, aparecen solos) */
.mov [data-partir]:not(.partido){opacity:0;animation:aparecer .5s 2s forwards}
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .12em .16em;margin:0 -.12em -.16em}
.pal>span{display:inline-block;transform:translateY(115%);transition:transform 1.2s var(--e-sale);transition-delay:calc(var(--p)*60ms + var(--d,0s))}
.visto .pal>span{transform:none}
.mov #inicio h1{--d:.2s}

/* Aparición al hacer scroll; si el JS no llega, todo aparece a los 3 s */
.mov [data-rev],.mov [data-escalonar]>*{opacity:0;animation:aparecer .01s 3s forwards}
.mov .rev{opacity:0;transform:translateY(28px);animation:none;transition:opacity 1s var(--e-sale),transform 1.3s var(--e-sale);transition-delay:calc(var(--i,0)*90ms)}
.mov .rev.visto{opacity:1;transform:none}
.mov .rev .foto img{scale:1.18;transition:scale 2s var(--e-sale),transform 1s var(--e-sale);transition-delay:calc(var(--i,0)*90ms + .1s),0s}
.mov .rev.visto .foto img{scale:1}

/* Catálogo: el mapa crece al aparecer y las tarjetas salen y entran escalonadas al filtrar */
@keyframes crecer{from{transform:scaleX(0)}}
.mov .mapa.visto .mapa__seg{animation:crecer 1.1s var(--e-sale) both}
.mov .mapa.visto .mapa__seg:nth-child(2){animation-delay:.08s}
.mov .mapa.visto .mapa__seg:nth-child(3){animation-delay:.16s}
.mov .mapa.visto .mapa__seg:nth-child(4){animation-delay:.24s}
.mov .mapa.visto .mapa__seg:nth-child(5){animation-delay:.32s}
.mov .grafica.visto .barras__barra{animation:crecer 1.2s var(--e-sale) both}
.mov .grafica.visto li:nth-child(n+2) .barras__barra{animation-delay:.06s}
.mov .grafica.visto li:nth-child(n+4) .barras__barra{animation-delay:.12s}
.mov .grafica.visto li:nth-child(n+7) .barras__barra{animation-delay:.18s}
.mov .grafica.visto li:nth-child(n+10) .barras__barra{animation-delay:.24s}
.mov .kpi.visto .comp i{animation:crecer 1.2s var(--e-sale) .2s both}
.catalogo .reel.sale{opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .2s ease,transform .2s ease}
.mov .catalogo .reel.entra{animation:fila .8s var(--e-sale) both;animation-delay:calc(var(--n)*55ms)}

/* Hover de fotos y botones */
.foto img,.foto-hero img{transition:transform 1s var(--e-sale)}
.foto:hover img,.foto-hero:hover img{transform:scale(1.04)}
.mov .sh-boton{transition:background-color .25s ease,color .25s ease,transform .4s var(--e-sale)}
.mov .sh-boton:hover{transform:translateY(-2px)}

/* Bio */
.mov main>*{animation:subir 1.1s var(--e-sale) both}
.mov main>:nth-child(2){animation-delay:.15s}
.mov main>:nth-child(3){animation-delay:.5s}
.mov main>:nth-child(4){animation-delay:.65s}
.mov main section>a{animation:subir 1s var(--e-sale) both}
.mov main section>a:nth-of-type(1){animation-delay:.25s}
.mov main section>a:nth-of-type(2){animation-delay:.35s}
.mov main section>a:nth-of-type(3){animation-delay:.45s}