/* ==================== NUESTRA CASA: Inicio "Partido" en el nuevo estadio (spec 34) ==================== */
/* Noche cerrada (--casa-night) con celeste y blanco. Todo va prefijado .cs- */

/* ---------- 1. Héroe: foto del exterior de noche, el video de la tribuna detrás y el marcador ---------- */
.zone-dark.cs-hero{display:flex;flex-direction:column;justify-content:flex-end;height:clamp(380px,62svh,580px);padding-bottom:44px;background:var(--casa-night);box-shadow:0 1px 0 rgba(111,179,230,.9),0 16px 34px -14px rgba(111,179,230,.55)}
.zone-dark.cs-hero::before,.zone-dark.cs-hero::after{display:none}
.cs-hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(90% 60% at 50% 70%,rgba(111,179,230,.35),transparent 70%),linear-gradient(180deg,var(--abyss-2) 0%,var(--casa-night) 100%)}
.cs-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;transform-origin:50% 70%;animation:csKen 26s ease-in-out infinite alternate}
@keyframes csKen{0%{transform:scale(1.03)}100%{transform:scale(1.12)}}
/* Video oficial: doble exposición sobre el cielo, la cubierta blanca se enciende sobre la noche */
.cs-hero-vid{position:absolute;left:0;top:0;width:100%;height:62%;object-fit:cover;mix-blend-mode:screen;filter:grayscale(1) brightness(.8) contrast(1.2);opacity:0;transition:opacity 1.6s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 25%,transparent 100%);mask-image:linear-gradient(180deg,#000 25%,transparent 100%)}
.cs-hero-vid.on{opacity:.34}
.cs-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,23,.6) 0%,rgba(3,8,23,0) 20%,rgba(3,8,23,0) 42%,rgba(3,8,23,.72) 70%,var(--casa-night) 100%)}

.cs-hero-tx{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#cs-score-wrap{align-self:stretch}
.cs-h{font-family:var(--tech);font-weight:700;font-size:clamp(2.3rem,11.5vw,3.15rem);line-height:.92;letter-spacing:.005em;text-transform:uppercase;color:var(--white);text-shadow:0 4px 30px rgba(0,0,0,.55);max-width:11ch}
.cs-match{font-size:.86rem;font-weight:600;color:var(--on-dark-2);letter-spacing:.01em}

/* Marcador de vidrio: escudo, cifra grande y siglas del rival */
.cs-score{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:8px;width:100%;margin-top:6px;padding:10px 12px;border-radius:var(--r-tile);background:rgba(3,8,23,.5);border:1px solid var(--casa-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cs-eq{display:flex;flex-direction:column;align-items:center;gap:3px}
.cs-eq img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(111,179,230,.55))}
.cs-eq small{font-size:.66rem;font-weight:700;letter-spacing:.08em;color:var(--on-dark-2)}
.cs-sig{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--casa-line);font-family:var(--tech);font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--white)}
.cs-mid{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.cs-num{font-family:var(--num);font-weight:700;font-size:2.5rem;line-height:1;color:var(--white);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cs-num i{font-style:normal;margin:0 .14em;color:var(--celeste)}
.cs-cd{font-size:2.1rem}
.cs-live{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--celeste);white-space:nowrap}
.cs-live b{color:var(--white);font-family:var(--num);font-size:.9rem}
.cs-live .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(200,16,46,.6);animation:csLive 1.6s ease-out infinite}
@keyframes csLive{0%{box-shadow:0 0 0 0 rgba(200,16,46,.6)}100%{box-shadow:0 0 0 8px rgba(200,16,46,0)}}
.cs-score.vivo #cs-min{animation:csLate 1.6s ease-in-out infinite}
@keyframes csLate{0%,100%{opacity:1}50%{opacity:.55}}
.cs-score.fin .cs-live{color:var(--white)}

/* Sello de la primera visita: como el del certificado (spec 33), estampado en la esquina */
.cs-sello{position:absolute;z-index:2;top:calc(var(--header-h) + 10px);right:14px;width:96px;height:96px;border-radius:50%;padding:4px;border:1.5px solid rgba(111,179,230,.75);background:rgba(3,8,23,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:rotate(-9deg);box-shadow:0 0 22px rgba(111,179,230,.35);animation:csSello .6s cubic-bezier(.22,1,.36,1) .9s both}
.cs-sello-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;border-radius:50%;border:1px dashed rgba(111,179,230,.6);text-align:center}
.cs-sello img{width:22px;height:22px;object-fit:contain}
.cs-sello b{font-family:var(--tech);font-weight:700;font-size:.72rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--white)}
.cs-sello small{font-family:var(--num);font-weight:700;font-size:.7rem;color:var(--celeste)}
@keyframes csSello{0%{opacity:0;transform:rotate(-9deg) scale(1.08)}100%{opacity:1;transform:rotate(-9deg) scale(1)}}

/* ---------- Títulos de bloque ---------- */
.cs-k{display:block;font-family:var(--tech-wide);font-weight:600;font-size:1.12rem;letter-spacing:.08em;line-height:1.1;text-transform:uppercase;color:var(--white)}
.cs-sec{margin-top:30px}
.cs-sec>.cs-k{margin-bottom:12px}

/* ---------- 2. Tu ID es tu boleto: sube sobre la curva del héroe ---------- */
.cs-id{position:relative;z-index:2;margin-top:-26px;padding:14px;display:flex;flex-direction:column;gap:12px;background:rgba(10,26,68,.55);border-color:var(--casa-line)}
.cs-id-top{display:flex;align-items:center;gap:12px}
.cs-id-top>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-id-top small{font-size:.8rem;color:var(--on-dark-2);line-height:1.3}
.cs-id-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--celeste);color:var(--navy-g1)}
.cs-id-ic svg{width:22px;height:22px}
.cs-cells{display:grid;grid-template-columns:1.35fr 1fr .8fr 1fr;gap:6px}
.cs-cell{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line);min-width:0}
.cs-cell small{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.cs-cell b{font-family:var(--num);font-weight:700;font-size:1.45rem;line-height:1.05;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-id-btn{height:48px}

/* ---------- 3. Tu familia ---------- */
.cs-fam{padding:16px;display:flex;flex-direction:column;gap:14px}
.cs-fam-t{font-family:var(--tech);font-weight:700;font-size:1.4rem;line-height:1.05;text-transform:uppercase;color:var(--white)}
.cs-fam-l{list-style:none;padding:0;display:flex;gap:10px}
.cs-fam-l li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.cs-av{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,var(--celeste),var(--p2143));color:var(--navy-g1);font-family:var(--tech);font-weight:700;font-size:1.2rem;letter-spacing:.03em}
.cs-fam-l li.tu .cs-av{background:var(--white);box-shadow:0 0 0 3px rgba(111,179,230,.5),0 0 20px rgba(111,179,230,.55)}
.cs-fam-l b{font-size:.9rem;color:var(--white)}
.cs-fam-l small{font-family:var(--num);font-size:.82rem;color:var(--celeste);letter-spacing:.02em}
.cs-fam-pie{font-size:.78rem;color:var(--on-dark-2);text-align:center}

/* ---------- 4. Solo en casa: carrusel de tarjetas con foto ---------- */
.cs-sec .hs{--hs-top:62px}
.cs-rail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 8px;scroll-padding:0 16px;scrollbar-width:none}
.cs-rail::-webkit-scrollbar{display:none}
.cs-card{flex:0 0 66%;max-width:250px;scroll-snap-align:start;display:flex;flex-direction:column;text-align:left;border-radius:var(--r-tile);overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);color:var(--white);transition:transform .15s,border-color .15s}
.cs-card:hover{border-color:rgba(111,179,230,.5)}
.cs-card:active{transform:scale(.98)}
.cs-card-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--abyss-2)}
.cs-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.cs-card-img.menu{background:radial-gradient(70% 70% at 50% 45%,rgba(111,179,230,.4),transparent 70%),var(--abyss-2)}
.cs-card-img.menu img{object-fit:contain;padding:10px}
.cs-card-img.jersey{background:radial-gradient(70% 80% at 50% 30%,rgba(111,179,230,.45),transparent 70%),linear-gradient(180deg,var(--abyss-2),var(--casa-night))}
.cs-card-img.jersey svg{position:absolute;inset:6px 0 0;width:100%;height:calc(100% - 6px);filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.cs-card-img.zoom img{transform:scale(1.9);transform-origin:12% 30%}
.cs-card-img::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(3,8,23,.7));pointer-events:none}
.cs-card-ic{position:absolute;z-index:1;left:10px;bottom:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--glass-strong);border:1px solid var(--casa-line);color:var(--celeste)}
.cs-card-ic svg{width:18px;height:18px}
.cs-card-tx{display:flex;flex-direction:column;gap:4px;padding:12px 12px 14px}
.cs-card-tx b{font-size:.98rem;line-height:1.2}
.cs-card-tx small{font-size:.8rem;line-height:1.35;color:var(--on-dark-2)}

/* ---------- 5. La fachada que votaste ---------- */
.cs-fach{overflow:hidden}
.cs-fach-img{position:relative;aspect-ratio:16/9;background:var(--abyss-2)}
.cs-fach-img img{width:100%;height:100%;object-fit:cover;display:block}
.cs-fach-img .flag{position:absolute;left:12px;top:12px}
.cs-fach-tx{display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px}
.cs-fach-tx>b{font-family:var(--tech);font-weight:700;font-size:1.35rem;line-height:1.05;text-transform:uppercase;color:var(--white)}
.cs-fach-tx>small{font-size:.8rem;color:var(--on-dark-2)}
.cs-bars{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;margin-top:8px}
.cs-bars li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 10px;font-size:.8rem;color:var(--on-dark-2)}
.cs-bars li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-bars li b{grid-row:1;grid-column:2;font-family:var(--num);font-size:.95rem;color:var(--on-dark-2)}
.cs-bars li i{grid-column:1 / -1;position:relative;height:6px;border-radius:3px;background:var(--glass);overflow:hidden}
.cs-bars li i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:3px;background:var(--gray-med);opacity:.55}
.cs-bars li.on{color:var(--white)}
.cs-bars li.on b{color:var(--white)}
.cs-bars li.on i::before{background:linear-gradient(90deg,var(--p2143),var(--celeste));opacity:1;box-shadow:0 0 10px rgba(111,179,230,.6)}

/* ---------- 6. El complejo: vista aérea con un punto por zona ---------- */
.cs-cx{overflow:hidden}
.cs-cx-img{position:relative;aspect-ratio:3/2;background:var(--abyss-2)}
.cs-cx-img img{width:100%;height:100%;object-fit:cover;display:block}
.cs-pin{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--white);opacity:.55;transition:opacity .25s,transform .25s}
.cs-pin.on{opacity:1;background:var(--celeste);transform:scale(1.5);box-shadow:0 0 12px var(--celeste)}
.cs-pin.on::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--celeste);animation:csPin 1.8s ease-out infinite}
@keyframes csPin{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.cs-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 12px 0}
.cs-chip{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line);color:var(--on-dark-2);font-weight:600;font-size:.84rem;text-align:left}
.cs-chip svg{flex:none;width:18px;height:18px;color:var(--celeste)}
.cs-chip span{min-width:0;line-height:1.15}
.cs-chip.on{background:var(--white);border-color:var(--white);color:var(--navy-g1)}
.cs-chip.on svg{color:var(--p2143)}
.cs-cx-s{padding:10px 14px 14px;font-size:.84rem;color:var(--white);min-height:2.6em}

/* ---------- 7. Cierre: el lema del club y terminar la visita ---------- */
.cs-fin{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cs-fin img{width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(111,179,230,.6))}
.cs-lema{display:flex;flex-direction:column;gap:2px;font-family:var(--tech-wide);font-weight:600;font-size:.9rem;letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark-2)}
.cs-lema span:last-child{color:var(--white)}
.cs-fin .btn{margin-top:6px}

/* ---------- Entrada escalonada al desplazar ---------- */
@media (prefers-reduced-motion:no-preference){
  .cs-rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease var(--cs-d,0s),transform .65s cubic-bezier(.22,1,.36,1) var(--cs-d,0s)}
  .cs-rv.in{opacity:1;transform:none}
}

/* ---------- Pantallas bajas ---------- */
@media (max-height:700px){
  .zone-dark.cs-hero{padding-bottom:38px}
  .cs-h{font-size:clamp(2rem,10vw,2.6rem)}
  .cs-num{font-size:2.1rem}.cs-cd{font-size:1.8rem}
  .cs-score{padding:8px 10px}
  .cs-sello{width:84px;height:84px}
  .cs-sello b{font-size:.64rem}
}
@media (max-width:359px){
  .cs-cells{grid-template-columns:1.4fr 1fr .8fr 1fr;gap:4px}
  .cs-cell{padding:7px 7px}
  .cs-cell b{font-size:1.2rem}
  .cs-score{grid-template-columns:44px 1fr 44px}
  .cs-card{flex-basis:76%}
}

@media (prefers-reduced-motion:reduce){
  .cs-hero-img,.cs-sello,.cs-live .dot,.cs-score.vivo #cs-min,.cs-pin.on::after{animation:none}
  .cs-hero-img{transform:none}
}
@media (max-height:620px){
  .cs-sello{width:74px;height:74px;top:calc(var(--header-h) + 2px);right:10px}
  .cs-sello img{width:16px;height:16px}
  .cs-sello b{font-size:.56rem}.cs-sello small{font-size:.6rem}
}
.cs-match span{white-space:nowrap}
.cs-ez{display:flex;flex-direction:column;gap:12px;margin-top:16px}