/* ============================================================
   demo-club-futbol  ·  Demo deportivo (clubes de fútbol)
   Diseño del home/secciones. Dark, re-skineable via tokens del skin.
   Los overrides de ensamble de módulos (Capa 2) van aparte.
   ============================================================ */
html.demo-club-futbol{scroll-behavior:smooth}
html.demo-club-futbol body{background:var(--dark,#0A0C10);color:var(--light-text,#EAECEF);font-family:var(--font-family-primary,'Inter',-apple-system,sans-serif)}
html.demo-club-futbol .main{overflow-x:hidden}
html.demo-club-futbol .cf-disp{font-family:var(--font-family-secondary,'Oswald','Arial Narrow',sans-serif);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.95}

/* announcement / próximo partido */
html.demo-club-futbol .cf-annc{background:var(--primary,#E4141F);color:#fff;font-size:.8rem;font-weight:700}
html.demo-club-futbol .cf-annc .cf-in{display:flex;align-items:center;justify-content:center;gap:16px;padding:9px 24px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.03em;max-width:1200px;margin:0 auto}
html.demo-club-futbol .cf-annc b{background:rgba(0,0,0,.22);padding:2px 9px;border-radius:4px}
html.demo-club-futbol .cf-annc a{color:#fff;border:1px solid rgba(255,255,255,.6);padding:3px 11px;border-radius:20px;text-decoration:none}

/* hero */
html.demo-club-futbol .cf-hero{position:relative;min-height:80vh;display:flex;align-items:flex-end;overflow:hidden}
html.demo-club-futbol .cf-hero .cf-bg{position:absolute;inset:0;background-size:cover;background-position:center}
html.demo-club-futbol .cf-hero .cf-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.45),rgba(10,12,16,.12) 40%,var(--dark,#0A0C10) 100%),linear-gradient(90deg,rgba(10,12,16,.75),transparent 62%)}
html.demo-club-futbol .cf-hero .cf-wrap{position:relative;padding:120px 24px 72px;width:100%;max-width:1200px;margin:0 auto}
html.demo-club-futbol .cf-kick{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;margin-bottom:18px}
html.demo-club-futbol .cf-kick::before{content:"";width:34px;height:3px;background:var(--primary,#E4141F)}
html.demo-club-futbol .cf-hero h1{font-size:clamp(2.6rem,7vw,6rem);color:#fff;max-width:16ch;margin:0}
html.demo-club-futbol .cf-hero p{max-width:52ch;color:#d6dae0;font-size:1.05rem;margin:20px 0 30px}
html.demo-club-futbol .cf-btns{display:flex;gap:14px;flex-wrap:wrap}
html.demo-club-futbol .cf-btn{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;padding:15px 30px;border-radius:var(--border-radius,7px);display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:.15s;cursor:pointer;border:0}
html.demo-club-futbol .cf-btn.red{background:var(--primary,#E4141F);color:#fff}
html.demo-club-futbol .cf-btn.red:hover{filter:brightness(.9)}
html.demo-club-futbol .cf-btn.ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent}
html.demo-club-futbol .cf-btn.ghost:hover{background:#fff;color:var(--dark,#0A0C10)}
html.demo-club-futbol .cf-btn.white{background:#fff;color:var(--primary,#E4141F)}

/* franja de partidos */
html.demo-club-futbol .cf-matches{background:var(--secondary,#0F1319);border-top:3px solid var(--primary,#E4141F);border-bottom:1px solid var(--cf-line,#242a34)}
html.demo-club-futbol .cf-matches .cf-in{display:grid;grid-template-columns:1fr 1fr 1fr;max-width:1200px;margin:0 auto}
html.demo-club-futbol .cf-mcell{padding:24px 26px;border-right:1px solid var(--cf-line,#242a34);display:flex;flex-direction:column;gap:6px}
html.demo-club-futbol .cf-mcell:last-child{border-right:0}
html.demo-club-futbol .cf-mlab{font-size:.68rem;color:var(--muted,#98A2AD);text-transform:uppercase;letter-spacing:.16em;font-weight:700}
html.demo-club-futbol .cf-mrow{display:flex;align-items:center;gap:12px;font-size:1.02rem;color:#fff}
html.demo-club-futbol .cf-mscore{font-family:var(--font-family-secondary,'Oswald',sans-serif);font-size:2.1rem;color:#fff}
html.demo-club-futbol .cf-mscore.win{color:var(--primary,#E4141F)}
html.demo-club-futbol .cf-mvs{color:var(--muted,#98A2AD);font-weight:700}
html.demo-club-futbol .cf-mpos{font-family:var(--font-family-secondary,'Oswald',sans-serif);font-size:2.6rem;color:var(--tertiary,#E9B949)}
@media(max-width:820px){html.demo-club-futbol .cf-matches .cf-in{grid-template-columns:1fr}html.demo-club-futbol .cf-mcell{border-right:0;border-bottom:1px solid var(--cf-line,#242a34)}}

/* secciones genéricas */
html.demo-club-futbol .cf-sec{padding:78px 0}
html.demo-club-futbol .cf-sec .cf-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
html.demo-club-futbol .cf-shead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:34px;gap:20px;flex-wrap:wrap}
html.demo-club-futbol .cf-eyebrow{color:var(--primary,#E4141F);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;display:block;margin-bottom:8px}
html.demo-club-futbol .cf-shead h2{font-size:clamp(2rem,4.5vw,3.2rem);color:#fff;margin:0}
html.demo-club-futbol .cf-more{color:var(--muted,#98A2AD);font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.04em;border-bottom:2px solid var(--primary,#E4141F);padding-bottom:4px;text-decoration:none}

/* novedades (blog) */
html.demo-club-futbol .cf-ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
html.demo-club-futbol .cf-ncard{background:var(--secondary,#0F1319);border:1px solid var(--cf-line,#242a34);border-radius:12px;overflow:hidden;transition:.18s;display:block;text-decoration:none;color:inherit}
html.demo-club-futbol .cf-ncard:hover{transform:translateY(-4px);border-color:#333b47}
html.demo-club-futbol .cf-nimg{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative}
html.demo-club-futbol .cf-ncat{position:absolute;top:14px;left:14px;background:var(--primary,#E4141F);color:#fff;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:5px 10px;border-radius:4px}
html.demo-club-futbol .cf-nbody{padding:20px}
html.demo-club-futbol .cf-ndate{color:var(--muted,#98A2AD);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
html.demo-club-futbol .cf-nbody h3{font-size:1.14rem;color:#fff;margin:10px 0 14px;line-height:1.25}
html.demo-club-futbol .cf-nlink{color:var(--primary,#E4141F);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:900px){html.demo-club-futbol .cf-ngrid{grid-template-columns:1fr}}

/* plantel (team) */
html.demo-club-futbol .cf-plantel{background:var(--secondary,#0F1319)}
html.demo-club-futbol .cf-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
html.demo-club-futbol .cf-pcard{background:var(--cf-panel2,#161B23);border:1px solid var(--cf-line,#242a34);border-radius:12px;overflow:hidden;position:relative}
html.demo-club-futbol .cf-pimg{aspect-ratio:4/5;background-size:cover;background-position:center top;position:relative}
html.demo-club-futbol .cf-pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(15,19,25,.92))}
html.demo-club-futbol .cf-pnum{position:absolute;bottom:8px;right:14px;font-family:var(--font-family-secondary,'Oswald',sans-serif);font-size:3.2rem;color:#fff;opacity:.92;z-index:2;line-height:1}
html.demo-club-futbol .cf-pbody{padding:14px 16px}
html.demo-club-futbol .cf-pbody h4{font-size:1rem;color:#fff;margin:0}
html.demo-club-futbol .cf-ppos{color:var(--primary,#E4141F);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:900px){html.demo-club-futbol .cf-pgrid{grid-template-columns:repeat(2,1fr)}}

/* fotos (gallery) */
html.demo-club-futbol .cf-ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
html.demo-club-futbol .cf-gitem{aspect-ratio:1;background-size:cover;background-position:center;border-radius:10px;position:relative;overflow:hidden;display:block}
html.demo-club-futbol .cf-gitem::after{content:"";position:absolute;inset:0;background:rgba(228,20,31,0);transition:.2s}
html.demo-club-futbol .cf-gitem:hover::after{background:rgba(228,20,31,.25)}
@media(max-width:700px){html.demo-club-futbol .cf-ggrid{grid-template-columns:repeat(2,1fr)}}

/* sponsors (references) */
html.demo-club-futbol .cf-sponsors{border-top:1px solid var(--cf-line,#242a34);border-bottom:1px solid var(--cf-line,#242a34);background:var(--secondary,#0F1319)}
html.demo-club-futbol .cf-sprow{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:center;padding:44px 24px;max-width:1200px;margin:0 auto}
html.demo-club-futbol .cf-sp img{max-height:52px;width:auto;filter:grayscale(1) brightness(1.6);opacity:.7;transition:.2s}
html.demo-club-futbol .cf-sp:hover img{filter:none;opacity:1}
html.demo-club-futbol .cf-sp-txt{color:var(--muted,#98A2AD);font-weight:800;font-size:1.05rem;opacity:.75;font-family:var(--font-family-secondary,'Oswald',sans-serif);text-transform:uppercase}

/* banda hacete socio */
html.demo-club-futbol .cf-socioband{background:linear-gradient(120deg,var(--primary-100,#B00F1A),var(--primary,#E4141F))}
html.demo-club-futbol .cf-socioband .cf-in{padding:60px 24px;text-align:center;max-width:1200px;margin:0 auto}
html.demo-club-futbol .cf-socioband h2{font-size:clamp(2rem,5vw,3.4rem);color:#fff;margin:0}
html.demo-club-futbol .cf-socioband p{color:rgba(255,255,255,.9);max-width:50ch;margin:14px auto 26px;font-size:1.05rem}

/* faqs (home) */
html.demo-club-futbol .cf-faqs{max-width:820px;margin:0 auto}
html.demo-club-futbol .cf-faq{border-bottom:1px solid var(--cf-line,#242a34);padding:20px 0}
html.demo-club-futbol .cf-faq h4{color:#fff;font-size:1.08rem;margin:0 0 8px}
html.demo-club-futbol .cf-faq p{color:var(--muted,#98A2AD);margin:0}

/* ============================================================
   CAPA B · Ensamble de módulos (páginas internas)
   Los módulos blog/team/gallery/references/faqs se sirven con markup
   Porto genérico. La mayoría (references/faqs/gallery/blog-show) ya
   deciden dark solo vía is_demo_light_themed() (club NO está en la
   whitelist light → renderizan con la paleta dark en runtime).
   Acá van SOLO los overrides que esas vistas NO cubren por sí solas:
   - blog INDEX (única vista Porto que hardcodea bg-light/text-color-dark)
   - franja de sponsors bg-white de /references
   - cards de /team (Porto default = blancas → panel oscuro del club)
   Botones/badges/paginación → ya alineados por la Capa A global
   (cd-system-base.css). NO se repiten acá.
   Scope SIEMPRE html.demo-club-futbol .main …  ·  NUNCA @if($activeDemo).
   ============================================================ */

/* Tokens del club definidos una vez (los brand colors de runtime sólo
   pisan primary/secondary/tertiary/quaternary/dark/light; estos neutros
   y el radio del club los fijamos acá para que el ensamble sea consistente
   incluso con skin:auto). --border-radius pisa el 0 que fuerza el bloque
   inline de brandColors, preservando el radio del diseño aprobado. */
html.demo-club-futbol{
    --border-radius:7px;
    --cf-line:#242a34;
    --cf-panel:#0F1319;
    --cf-panel2:#161B23;
    --muted:#98A2AD;
    --light-text:#EAECEF;
}

/* Page-header unificado (todas las internas usan page-header-club-futbol
   vía dynamic-header). Aire consistente sobre el header sticky del demo. */
html.demo-club-futbol .main .cf-pagehead{margin-top:0}

/* Nav-pills de filtro (team/gallery) legibles en dark */
html.demo-club-futbol .main .sort-source .nav-link{color:var(--muted,#98A2AD);border-color:transparent}
html.demo-club-futbol .main .sort-source .nav-link:hover{color:#fff}
html.demo-club-futbol .main .sort-source .nav-item.active .nav-link,
html.demo-club-futbol .main .sort-source .nav-link.active{color:#fff;border-bottom:2px solid var(--primary,#E4141F)}

/* ---- Fondos de sección de módulo: bandas hardcodeadas claras → dark ----
   Sólo la aplican las vistas Porto que NO leen is_demo_light_themed()
   (blog index header + franja de sponsors de references). */
html.demo-club-futbol .main section.bg-light,
html.demo-club-futbol .main section.bg-white{background:var(--dark,#0A0C10) !important}
html.demo-club-futbol .main section.bg-light .text-color-dark,
html.demo-club-futbol .main section.bg-white .text-color-dark,
html.demo-club-futbol .main section.bg-light .text-4,
html.demo-club-futbol .main section.bg-white .text-4{color:var(--light-text,#EAECEF) !important}
html.demo-club-futbol .main section.bg-light .opacity-5,
html.demo-club-futbol .main section.bg-light .opacity-7{opacity:.85 !important}

/* ---- BLOG (Novedades) — index cards ----
   Porto: article.post .card-body.bg-light + text-color-dark = oscuro
   sobre oscuro. Card → panel del club, textos legibles, acento rojo. */
html.demo-club-futbol .main article.post .card{background:transparent !important;border:0 !important}
html.demo-club-futbol .main article.post .card-body,
html.demo-club-futbol .main article.post .card-body.bg-light{
    background:var(--cf-panel2,#161B23) !important;
    border:1px solid var(--cf-line,#242a34) !important;
    border-top:0 !important;
}
html.demo-club-futbol .main article.post .card .card-img-top{border-radius:0}
html.demo-club-futbol .main article.post .card h1,
html.demo-club-futbol .main article.post .card h2,
html.demo-club-futbol .main article.post .card h3,
html.demo-club-futbol .main article.post .card h4,
html.demo-club-futbol .main article.post .card h4 a,
html.demo-club-futbol .main article.post .card a.text-color-dark{color:#fff !important}
html.demo-club-futbol .main article.post .card h4 a:hover,
html.demo-club-futbol .main article.post .card a.text-color-dark:hover{color:var(--primary,#E4141F) !important}
html.demo-club-futbol .main article.post .card .card-text,
html.demo-club-futbol .main article.post .card .text-color-dark,
html.demo-club-futbol .main article.post .card p{color:var(--muted,#98A2AD) !important}
html.demo-club-futbol .main article.post .card .read-more,
html.demo-club-futbol .main article.post .card .text-color-primary{color:var(--primary,#E4141F) !important;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
/* fecha overlay sobre la imagen del post */
html.demo-club-futbol .main article.post .post-date{background:var(--primary,#E4141F) !important}
html.demo-club-futbol .main article.post .post-date .month{background:transparent !important;color:rgba(255,255,255,.85) !important}

/* ---- REFERENCES (Sponsors) — franja de logos ----
   La sección de logos destacados es bg-white (ya la volvimos dark arriba).
   Los chips blancos de cada logo se mantienen (los logos resaltan sobre
   dark). El resto de /references ya es dark vía is_demo_light_themed(). */
html.demo-club-futbol .main section.bg-white .rounded.shadow-sm{border-color:var(--cf-line,#242a34) !important}

/* ---- TEAM (Plantel) — cards ----
   Porto default = .card blanca. Bajo el club queda blanca sobre la sección
   var(--secondary): la pasamos a panel oscuro para que sea nativa al demo.
   .custom-box-shadow-1 sólo aparece en el módulo team bajo este demo. */
html.demo-club-futbol .main .card.custom-box-shadow-1{
    background:var(--cf-panel2,#161B23) !important;
    border:1px solid var(--cf-line,#242a34) !important;
    box-shadow:0 8px 28px rgba(0,0,0,.4) !important;
    transition:transform .18s,border-color .18s;
}
html.demo-club-futbol .main .card.custom-box-shadow-1:hover{transform:translateY(-4px);border-color:#333b47 !important}
html.demo-club-futbol .main .card.custom-box-shadow-1 .text-color-dark{color:#fff !important}
html.demo-club-futbol .main .card.custom-box-shadow-1 .text-color-dark:hover{color:var(--primary,#E4141F) !important}
html.demo-club-futbol .main .card.custom-box-shadow-1 .text-color-primary{color:var(--primary,#E4141F) !important;text-transform:uppercase;letter-spacing:.05em}

/* ---- FAQs / REFERENCES list / GALLERY ----
   Ya renderizan dark solos (leen is_demo_light_themed → club fuera de la
   whitelist light → var(--dark)/var(--secondary)/var(--primary)). Sólo
   afinamos el acento del acordeón de faqs al rojo del club por si el
   template deja algún borde/checkbox en el primary por defecto. */
html.demo-club-futbol .main #faqs-content .accordion-button:not(.collapsed){color:var(--primary,#E4141F)}
html.demo-club-futbol .main #gallery-content .text-muted{color:var(--muted,#98A2AD) !important}

/* ============================================================
   POLISH Capa 2 (2026-07-29) · superficies claras → dark
   Root cause verificado en runtime: el wrapper Porto <div class="body">
   computa background:#fff. La regla dark pintaba el <body> pero NO ese
   wrapper interno ni .main → cualquier zona sin fondo propio mostraba
   BLANCO: (a) el FAQ del home = .cf-sec transparente → texto blanco
   sobre blanco, ilegible; (b) el aire entre la última sección y el
   footer en TODAS las internas (blog/team/gallery/about). Un solo
   pintado dark del wrapper + .main + la sección genérica del home
   resuelve los 5 issues de banda blanca. Scope html.demo-club-futbol. */
html.demo-club-futbol .body{background:var(--dark,#0A0C10)}
html.demo-club-futbol .main{background:var(--dark,#0A0C10)}
/* sección genérica del home (FAQ / novedades): fondo explícito para
   no depender jamás del blanco del wrapper Porto. */
html.demo-club-futbol .cf-sec{background:var(--dark,#0A0C10)}

/* TEAM (Plantel) — fallback isotope. En runtime las 9 cards se revelan
   OK (isotope inicializa), pero si el JS no corre arrancan ocultas y el
   plantel quedaría invisible. Forzamos visible como red de seguridad
   (patrón del fix mfp-ready del lightbox). SIN !important a propósito:
   así el filtro por categoría de isotope (que oculta cards vía estilo
   inline) sigue funcionando cuando el JS sí corre. */
html.demo-club-futbol .main .team-list .isotope-item,
html.demo-club-futbol .main .team-list .sort-destination .isotope-item{opacity:1;visibility:visible}

/* POLISH v2: Porto .section trae border-top 5px #f4f4f4 → línea blanca en demo dark */
html.demo-club-futbol .main section.section,
html.demo-club-futbol .main .section {
    border-top-color: transparent !important;
}