/* Baller · páginas de lectura vestidas de diario deportivo */
:root{color-scheme:dark;
  --ground:#0D1726;--ground-2:#0A1220;--panel:#15233A;--panel-2:#1C2E4A;--ink:#EAF0F7;--ink-soft:#A9B9D0;
  --ball:#F37021;--ball-ink:#1A0C02;--led:#FFB23E;--paper:#EAF0F7;--paper-ink:#0D1726;
  --display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;--text:"Barlow","Segoe UI",system-ui,sans-serif;
  --m:clamp(16px,2.6vw,40px);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 18px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--led);outline-offset:3px}
::selection{background:var(--ball);color:var(--ball-ink)}

/* cabecera: el nombre del diario */
.mast{display:flex;align-items:center;gap:12px 28px;padding:14px var(--m);background:var(--ground-2);position:relative;z-index:2}
.name{font:900 26px/1 var(--display);text-transform:uppercase;letter-spacing:.32em;text-decoration:none;color:var(--ink);margin-right:auto;display:flex;align-items:center;gap:12px}
.name img{width:32px;height:32px;flex:none}
.nav{display:flex;gap:4px 22px;flex-wrap:wrap;font-size:15px;font-weight:600}
.nav a{text-decoration:none;color:var(--ink-soft);padding:6px 0;transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--ball)}
.play{background:var(--ball);color:var(--ball-ink);font-weight:700;font-size:18px;text-decoration:none;padding:10px 22px;border-radius:0;transition:transform .2s var(--ease),background .2s}
.play:hover{background:var(--led)}.play:active{transform:scale(.96)}

/* portada */
.hero{padding:clamp(24px,4vw,56px) var(--m) 0}
h1{font:900 clamp(34px,var(--fit,8vw),176px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:0 0 clamp(20px,3vw,44px);text-wrap:balance;max-width:100%}
.hero-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:start}
.lead{font-size:clamp(20px,1.9vw,26px);line-height:1.4;margin:0 0 20px;max-width:30ch}
.byline{font-size:15px;color:var(--ink-soft);margin:0}
.hero-fig{margin:0}
.stack{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel)}
.stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;filter:grayscale(.15) contrast(1.05)}
.stack img.on{opacity:1}
.js .stack img.on{animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1%,-1%)}}
figcaption{font-size:15px;line-height:1.45;color:var(--ink-soft);margin-top:10px}
figcaption span{display:block}
figcaption a{color:var(--ink-soft)}

/* el artículo */
.art{padding:clamp(104px,9vw,140px) var(--m) 0}
.sec{max-width:700px;margin-bottom:clamp(72px,8vw,120px);position:relative}
.sec::after{content:"";display:table;clear:both}
h2{font:800 clamp(36px,3.6vw,56px)/.95 var(--display);text-transform:uppercase;margin:0 0 18px;text-wrap:balance}
h3{font:700 26px/1.2 var(--text);margin:30px 0 6px}
p,li{margin:0 0 16px}
.sec p,.sec li{max-width:65ch}
.sec a,.cards a,.nota a{text-decoration-color:var(--ball)}
.sec a:hover{color:var(--led)}
.nota{background:var(--panel);padding:20px 24px;margin:24px 0;max-width:700px}
.nota h2{font-size:28px}
table{width:100%;border-collapse:collapse;font-size:18px;margin:16px 0 24px}
th,td{padding:10px 10px 10px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--panel-2)}
th{font-weight:700}

/* fotos dentro del texto: al costado en pantallas anchas, a lo ancho en las demás */
.fig{margin:0}
.fig-side img,.fig-wide img{width:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.fig-side{margin:8px 0 32px}
.fig-side img{aspect-ratio:4/3}
@media (min-width:1101px){
  .side{position:absolute;left:calc(100% + 6vw);top:0;width:min(34vw,480px);display:flex;flex-direction:column;gap:40px}
  .fig-side{margin:0}
  .fig-side img{aspect-ratio:4/5}
}
.fig-wide{margin:clamp(24px,4vw,64px) calc(-1 * var(--m)) clamp(96px,9vw,140px)}
.fig-wide img{aspect-ratio:21/9}
.fig-wide figcaption{padding:0 var(--m);max-width:760px}

/* lo interactivo: la ficha del scout */
.ficha{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);background:var(--panel);margin:clamp(32px,5vw,80px) calc(-1 * var(--m)) clamp(56px,7vw,120px);padding:clamp(28px,4vw,64px) var(--m)}
.ficha h2{color:var(--led)}
.ficha-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 16px}
.ficha-form label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}
.ficha-form input,.ficha-form select{font:700 26px/1.2 var(--text);color:var(--ink);background:var(--ground);border:2px solid var(--panel-2);padding:10px 12px;width:100%;border-radius:0;transition:border-color .2s}
.ficha-form input:hover,.ficha-form select:hover,.ficha-form input:focus,.ficha-form select:focus{border-color:var(--led);outline:none}
.ficha-res{font-size:18px;min-height:3em}
.ficha-tab{font-size:18px;align-self:center;margin:0}
.ficha-tab th[scope=row]{font:800 26px/1 var(--display);text-transform:uppercase}
.ficha-tab tr{transition:background .3s,color .3s}
.ficha-tab tr.fit{background:var(--ball);color:var(--ball-ink)}
.ficha-tab tr.fit td,.ficha-tab tr.fit th{border-color:var(--ball)}
.ficha-tab tr.fit th{padding-left:10px}
.r-v{font-weight:700}
.r-h{white-space:nowrap}

/* preguntas frecuentes como fichas de archivo */
.cards{max-width:820px;margin:0 0 40px}
.card{background:var(--panel);transition:background .25s}
.card:nth-child(even){background:var(--panel-2)}
.card[open]{background:var(--ball);color:var(--ball-ink)}
.card[open] a{color:var(--ball-ink)}
.card summary{cursor:pointer;list-style:none;font:800 26px/1.05 var(--display);text-transform:uppercase;padding:22px 24px 26px;transition:transform .2s var(--ease)}
.card summary::-webkit-details-marker{display:none}
.card summary:hover{transform:translateX(8px)}
.card .ans{padding:0 24px 26px;font-size:18px;max-width:60ch}

/* una sola palabra es el botón */
.band{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;min-height:78svh;background:var(--ball);color:var(--ball-ink);text-decoration:none;padding:24px var(--m) 20px;margin-top:clamp(56px,8vw,140px);transition:background .15s,color .15s}
.band:hover,.band:focus-visible{background:var(--ink);color:var(--ground)}
.band-s{font-size:18px;font-weight:700;max-width:24ch}
.band-a{width:48px;height:48px;transition:transform .25s var(--ease)}
.band:hover .band-a{transform:translate(6px,-6px)}
.band-w{grid-column:1/-1;align-self:end;font:900 clamp(96px,27vw,420px)/.78 var(--display);text-transform:uppercase;letter-spacing:-.02em}

/* sigue leyendo, como cartel */
.poster{display:flex;flex-direction:column;padding:clamp(56px,7vw,110px) var(--m)}
.poster a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-decoration:none;transition:color .2s}
.pw{font:900 clamp(56px,9.4vw,150px)/.92 var(--display);text-transform:uppercase;transition:transform .3s var(--ease)}
.pf{font-size:18px;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.poster a:hover{color:var(--ball)}.poster a:hover .pw{transform:translateX(12px)}

/* pie: el nombre vuelve a todo el ancho */
.foot{background:var(--paper);color:var(--paper-ink);min-height:90svh;display:grid;grid-template-rows:auto 1fr auto auto;padding:40px var(--m) 20px}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.cols p{font-weight:700;margin:0 0 8px}
.cols a{display:block;color:#3A4A62;text-decoration:none;font-size:18px;padding:3px 0;transition:color .2s}
.cols a:hover{color:var(--paper-ink);text-decoration:underline}
.credits span{display:block;font-size:15px;color:#3A4A62;margin-top:6px;max-width:32ch}
.word{grid-row:3;width:100%;height:auto;fill:var(--paper-ink);font:900 140px var(--display);margin-top:48px}
.legal{grid-row:4;font-size:15px;margin:12px 0 0;color:#3A4A62}

/* entradas al hacer scroll (el contenido se ve igual si el script no corre) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .hero h1,.js .hero .dek,.js .hero-fig{animation:rise .9s var(--ease) both}
.js .hero .dek{animation-delay:.12s}.js .hero-fig{animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* portal: resumen arriba, datos grandes y el artículo completo plegado */
.resumen{max-width:1100px;margin:0 0 clamp(40px,5vw,72px)}
.puntos{list-style:none;margin:0 0 64px;padding:0;max-width:700px}
.puntos li{position:relative;padding:0 0 0 28px;margin:0 0 14px;font-size:18px;line-height:1.45}
.puntos li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--ball)}
.datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.datos div{background:var(--panel);padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px}
.datos div:nth-child(2){background:var(--panel-2)}
.datos b{font:900 clamp(36px,3.6vw,56px)/.9 var(--display);color:var(--led);font-variant-numeric:tabular-nums}
.datos span{font-size:18px;line-height:1.35}
.full{margin:0 0 clamp(40px,5vw,72px)}
.full summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;background:var(--ground-2);padding:22px 24px;max-width:1100px;transition:background .2s}
.full summary::-webkit-details-marker{display:none}
.full summary:hover{background:var(--panel)}
.full-t{font:800 clamp(36px,3.6vw,56px)/.95 var(--display);text-transform:uppercase}
.full-t::after{content:" +";color:var(--ball)}
.full[open] .full-t::after{content:" −"}
.full-m{font-size:18px;color:var(--ink-soft);white-space:nowrap}
.full-in{padding-top:clamp(40px,5vw,72px)}
.more-link{display:inline-block;margin-top:20px;font-weight:700;font-size:18px;text-decoration-color:var(--ball)}
.more-link:hover{color:var(--led)}
/* portada: una tarjeta con foto por sección */
.secciones{padding:clamp(104px,10vw,150px) var(--m) 0}
.pad{padding:0 var(--m)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px) 16px}
.tile{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.15) contrast(1.05);transition:transform .5s var(--ease)}
.tile:first-child{grid-column:span 2}
.tile:first-child img{aspect-ratio:16/9}
.tile{overflow:hidden}
.tile:hover img{transform:scale(1.04)}
.tt{font:800 clamp(36px,3.6vw,56px)/.95 var(--display);text-transform:uppercase;margin-top:6px;transition:color .2s}
.tile:hover .tt{color:var(--ball)}
.td{font-size:18px;line-height:1.4}
.tm{font-size:18px;color:var(--ink-soft)}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .datos{grid-template-columns:1fr}
  .datos div{flex-direction:row;align-items:baseline;gap:14px;padding:16px 18px}
  .datos b{min-width:3.2ch}
  .puntos li{font-size:18px}
  .full summary{flex-direction:column;gap:6px;padding:18px}
  .tiles{grid-template-columns:1fr}
  .tile:first-child{grid-column:auto}
}

@media (max-width:860px){
  .hero-row{grid-template-columns:1fr}
  .lead{max-width:none}
  .ficha{grid-template-columns:1fr}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body{font-size:17px}
  .mast{flex-wrap:wrap;gap:10px 16px}
  .name{font-size:26px;letter-spacing:.24em}
  .nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:18px;scrollbar-width:none}
  .nav a{white-space:nowrap}
  .stack{aspect-ratio:4/3}
  .ficha-form{grid-template-columns:1fr 1fr}
  .ficha-form label:first-child{grid-column:1/-1}
  .ficha-tab{font-size:15px}.ficha-tab th[scope=row]{font-size:20px}
  .poster a{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:18px}
  .pw{font-size:12vw}.pf{font-size:15px}
  .band{min-height:46svh}.band-s{font-size:17px}.band-a{width:32px;height:32px}
  .foot{min-height:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}