:root{--fondo:#0E1113;--panel:#171C1F;--linea:#2A3236;--texto:#ECEFEE;--suave:#B8C2C5;--acento:#FF6B1A;--acento-txt:#FF8A4C;--wa:#25D366;--gut:clamp(16px,5vw,72px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--fondo);color:var(--texto);font:400 17px/1.55 'Barlow',system-ui,sans-serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;line-height:1;margin:0;text-transform:uppercase}
h2{font-size:clamp(40px,5vw,68px)}
p{margin:0}
:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}

.cab{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:14px var(--gut);background:var(--fondo);border-bottom:1px solid var(--linea)}
.marca img{height:40px;width:auto}
.pie-logo{height:24px;width:auto}
.pie-dir{font-style:normal;padding-right:72px}
.pie-dir a{color:var(--texto);text-decoration:underline;text-underline-offset:3px}
.menu{display:flex;flex-wrap:wrap;gap:4px 28px;font-weight:600;font-size:19px}
.menu{align-items:center;margin-inline:auto}
.menu>a{padding:8px 0}
.menu a:hover,.desp>button:hover{color:var(--acento-txt)}
.desp{position:relative}
.desp>button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.flecha{width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.sub{display:none;position:absolute;top:100%;left:0;z-index:40;width:310px;padding:14px 8px;background:var(--panel);border:1px solid var(--linea);box-shadow:0 12px 28px rgba(0,0,0,.5);font-size:17px}
.desp.abierto .sub{display:block}
.desp.abierto .flecha{transform:rotate(225deg);margin-top:4px}
@media (hover:hover){.desp:hover .sub,.desp:focus-within .sub{display:block}}
.sub-tit{padding:0 12px 8px;color:var(--acento-txt);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sub a{display:block;padding:9px 12px}
.sub a:hover{background:var(--linea);color:var(--texto)}
.sub b{display:block;font-weight:600}
.sub small{display:block;color:var(--suave);font-size:14px;font-weight:400}
.sub .sub-todos{margin-top:6px;border-top:1px solid var(--linea);padding-top:12px;font-size:15px;color:var(--acento-txt)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;font-weight:600;transition:opacity .15s}
.btn:hover{opacity:.88}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn-p{background:var(--acento);color:#190800}
.btn-g{border:1px solid #5A666B}
.btn-wa{background:var(--wa);color:#06220F}
.btn-peq{min-height:44px;padding:0 16px;font-size:15px}
.ancho{width:100%}

.hero{display:flex;flex-wrap:wrap}
.hero-txt{flex:1 1 420px;min-width:0;padding:clamp(40px,7vw,104px) var(--gut);display:flex;flex-direction:column;justify-content:center;gap:26px}
.etiq{color:var(--acento-txt);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.hero h1{font-size:clamp(52px,7vw,104px);line-height:.95}
.hero p.sub{max-width:34em;color:var(--suave);font-size:19px}
.hero img{flex:1.3 1 520px;min-width:0;width:100%;height:clamp(340px,56vw,760px);object-fit:cover}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-block:1px solid var(--linea)}
.datos div{padding:26px var(--gut)}
.datos strong{display:block;font:700 42px/1 'Barlow Condensed',sans-serif}
.datos span{color:var(--suave)}

.sec{padding:clamp(56px,7vw,104px) var(--gut)}
.sec-cab{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:32px}
.sec-cab p{color:var(--suave);max-width:34em}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filtros button{min-height:44px;padding:0 18px;background:none;border:1px solid #5A666B;color:var(--texto);font:600 15px 'Barlow',sans-serif;cursor:pointer}
.filtros button[aria-pressed=true]{background:var(--texto);border-color:var(--texto);color:var(--fondo)}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:16px}
.tarjeta{background:var(--panel);display:flex;flex-direction:column}
.tarjeta-foto{display:flex;align-items:center;justify-content:center;height:230px;background:#fff;color:#46525A;font-size:15px}
.tarjeta-foto img{width:100%;height:100%;object-fit:contain}
.tarjeta-txt{padding:22px;display:flex;flex-direction:column;gap:8px;flex-grow:1}
.tarjeta h3{font-size:36px}
.tarjeta h3 a:hover{color:var(--acento-txt)}
.linea-est{display:flex;justify-content:space-between;gap:12px;color:var(--acento-txt);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.est{color:var(--suave);letter-spacing:0;text-transform:none;white-space:nowrap}
.est.si{color:#6FE39A}
.tarjeta .res{color:var(--suave);flex-grow:1}
.precio{font:700 26px/1.1 'Barlow Condensed',sans-serif}
.precio small{display:block;font:400 13px 'Barlow',sans-serif;color:var(--suave)}
.tachado{color:var(--suave);text-decoration:line-through;font-size:15px}
.dos{display:flex;gap:8px;margin-top:8px}
.dos .btn{flex:1 1 0;padding:0 10px}
.btn-sec{border:1px solid #5A666B}

.partido{display:flex;flex-wrap:wrap;background:var(--panel)}
.partido img{flex:1 1 480px;min-width:0;width:100%;height:clamp(300px,42vw,600px);object-fit:cover}
.partido>div{flex:1 1 420px;min-width:0;padding:clamp(40px,6vw,88px) var(--gut);display:flex;flex-direction:column;justify-content:center;gap:20px}
.partido p{color:var(--suave)}

.banda{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.banda p{color:var(--suave);max-width:34em;margin-top:12px}
.vacio{padding:32px;background:var(--panel);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.vacio p{color:var(--suave);max-width:36em}

.tabla{overflow-x:auto}
table{width:100%;min-width:640px;border-collapse:collapse;text-align:left}
th,td{padding:10px 12px;border-bottom:1px solid var(--linea)}
thead th{font-size:14px;color:var(--suave);font-weight:600}
tbody th{font-weight:500}
td.cod{color:var(--suave);white-space:nowrap;font-size:15px}
td.pre{font-weight:600;white-space:nowrap}
td.acc{text-align:right;padding-right:0}

.ficha{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);padding:clamp(24px,4vw,56px) var(--gut)}
.ficha-foto{flex:1.4 1 480px;min-width:0;background:#fff;align-self:flex-start;display:flex;align-items:center;justify-content:center;min-height:320px;color:#46525A}
.ficha-foto img{width:100%;height:auto}
.ficha-txt{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:16px}
.ficha-txt h1{font-size:clamp(52px,6vw,88px)}
.ficha-txt>p{color:var(--suave)}
dl{margin:8px 0 0;display:grid;grid-template-columns:1fr auto}
dt,dd{padding:10px 0;border-top:1px solid var(--linea);margin:0}
dt{color:var(--suave)}
dd{font-weight:600;text-align:right}

.pie{padding:28px var(--gut);border-top:1px solid var(--linea);color:var(--suave);font-size:15px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.flotante{position:fixed;right:20px;bottom:20px;z-index:30;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#06220F;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.flotante svg{width:30px;height:30px;fill:currentColor}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
@media (max-width:640px){
  .cab{position:static}
  .menu{flex-direction:column;align-items:stretch;width:100%}
  .desp>button{width:100%;justify-content:space-between}
  .sub{position:static;width:100%;box-shadow:none}
  .hero img{order:-1}
  .pie{padding-bottom:92px}
  table{min-width:0}
  th:nth-child(2),td.cod{display:none}
  th,td{padding:10px 6px}
  .flotante{width:50px;height:50px;right:14px;bottom:14px}
}