/* ---------------------------------------------------------------
   Paleta por zona.

   Cada zona del ranking es autónoma y tiene su propio tono, pero el
   mismo estilo: mismas formas, mismos tamaños, misma estructura. Lo
   único que cambia son estos valores.

   El acento va como terna RGB además de color: así las transparencias
   (rgba(var(--acento-rgb),.18)) salen solas del tono de cada zona, sin
   repetir el color escrito a mano en veinte lugares.

   Qué zona se aplica lo decide el dominio por el que entraste, y lo
   marca un script en el <head> de cada página.
   --------------------------------------------------------------- */
:root{
  --bg:#000; --panel:#0a0a0d; --panel-2:#131319;
  --acento-rgb:43,76,255; --acento-claro-rgb:107,132,255;
  --blue:rgb(var(--acento-rgb)); --blue-light:rgb(var(--acento-claro-rgb));
  --sobre-acento:#fff;
  /* El resplandor de la portada va aparte del acento: tiene que ser un
     color LUMINOSO, porque un degradado hecho con un color oscuro sobre
     fondo negro no se ve. En Punilla el azul ya es brillante y alcanza
     el mismo; en una zona con acento oscuro hay que levantarlo. */
  --glow-rgb:43,76,255; --glow-op:.30; --glow-op2:.08;
  --header-bg:rgba(0,0,0,.78);
  --demo-bg:#0d1233; --demo-text:#c9d2ff;
  --text:#fff; --text-dim:#a9b1c0; --text-faint:#7f8798;
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.06);
  --ok-rgb:74,222,128; --ok:rgb(var(--ok-rgb));
  --warn:#fbbf24; --danger:#ff7b7b;
  /* La rampa del tinte que va sobre las fotos. No sale del acento:
     tiene que ser oscura para que se lea el texto encima. Va por zona
     porque es lo único con color propio fuera de la paleta. */
  /* Tintes muy suaves para fondos de apoyo (contadores, sugerencias,
     cabeceras de tabla). Van por token porque sobre fondo claro un
     blanco al 5% es invisible: tienen que darse vuelta. */
  --sutil:rgba(255,255,255,.05); --sutil-mas:rgba(255,255,255,.10);
  /* La paleta de las placas que se comparten. Va aparte a proposito:
     una placa para Instagram es SIEMPRE oscura, aunque el sitio este
     en claro. Lo que si sigue es la zona: cada una tiene la suya. */
  --placa-bg:#000000; --placa-panel:#0a0a0d; --placa-linea:rgba(255,255,255,.12);
  --placa-texto:#ffffff; --placa-tenue:#a9b1c0; --placa-flojo:#7f8798;
  --placa-acento:#2b4cff; --placa-acento-claro:#6b84ff; --placa-ok:#4ade80;
  --placa-acento-rgb:43,76,255; --placa-glow-rgb:43,76,255;
  --tinte-1:11,18,64; --tinte-2:13,22,80; --tinte-3:20,30,120; --tinte-4:30,50,180;
  --tinte-texto:#cfd6ff; --tinte-medio:#b9c6ff; --tinte-tenue:#9db0ff;
  --radius:14px; --font:'Inter',system-ui,sans-serif;
}

/* Sierras Chicas: verde frio sobre negro. Mismo caracter que el azul de
   Punilla —saturado, frio, sobre fondo casi negro— pero inconfundible al
   lado. El fondo se levanta apenas del negro puro y tira a verde, para
   que las dos zonas no se confundan ni en una captura sin logo. */
:root[data-zona="sierras-chicas"]{
  --bg:#0a1210; --panel:#101e19; --panel-2:#182a24;
  --acento-rgb:16,185,129; --acento-claro-rgb:110,231,183;
  --glow-rgb:16,230,160; --glow-op:.34; --glow-op2:.09;
  /* Verde casi negro, no blanco: sobre el esmeralda encendido el
     blanco no se lee. */
  --sobre-acento:#042016;
  --header-bg:rgba(10,18,16,.82);
  --demo-bg:#07231a; --demo-text:#bfe8d6;
  --text:#f2f7f5; --text-dim:#a4b5af; --text-faint:#7c8c87;
  --line:rgba(226,255,244,.13); --line-soft:rgba(226,255,244,.06);
  /* En Punilla el acento es azul y lo positivo es verde: dos colores
     para dos trabajos. Aca el acento se llevo el verde, asi que lo
     positivo tiene que correrse de tono o el distintivo de "Clasificado"
     se pierde entre los numeros de posicion. Va a lima, que sigue
     leyendose como algo bueno y no se confunde con el esmeralda. */
  --ok-rgb:190,242,100;
  --tinte-1:2,28,21; --tinte-2:3,38,28; --tinte-3:4,70,50; --tinte-4:6,120,86;
  --tinte-texto:#cdebdd; --tinte-medio:#aee4c9; --tinte-tenue:#8cd9b4;
  --placa-bg:#0a1210; --placa-panel:#101e19; --placa-linea:rgba(226,255,244,.13);
  --placa-texto:#f2f7f5; --placa-tenue:#a4b5af; --placa-flojo:#7c8c87;
  --placa-acento:#10b981; --placa-acento-claro:#6ee7b7; --placa-ok:#bef264;
  --placa-acento-rgb:16,185,129; --placa-glow-rgb:16,230,160;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:820px}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.1}
:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px;border-radius:4px}
#site-top,#site-bottom{display:contents}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* demo banner */
.demo-bar{background:var(--demo-bg);border-bottom:1px solid rgba(var(--acento-claro-rgb),.3);color:var(--demo-text);font-size:.82rem;text-align:center;padding:8px 16px}
.demo-bar strong{color:#fff}

/* header */
header.site{position:sticky;top:0;z-index:60;background:var(--header-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.1rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.mark{width:22px;height:22px;flex-shrink:0}
nav.links{display:flex;gap:22px;font-size:.9rem;font-weight:500;white-space:nowrap}
nav.links a{text-decoration:none;color:var(--text-dim);transition:color .15s}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--text)}
.nav-ctas{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-ctas .btn{white-space:nowrap}
.menu-btn{display:none;background:transparent;border:1px solid var(--line);color:var(--text);font:600 .88rem var(--font);padding:9px 14px;border-radius:8px;cursor:pointer;min-height:44px}
.mobile-menu{display:none;border-top:1px solid var(--line-soft);background:var(--bg);padding:14px 28px 22px}
.mobile-menu a.mlink{display:block;padding:14px 0;border-bottom:1px solid var(--line-soft);color:var(--text-dim);text-decoration:none;font-weight:500;min-height:44px}
.mobile-menu .nav-ctas{margin-top:18px;flex-direction:column;align-items:stretch}
.mobile-menu .btn{justify-content:center}
header.site.open .mobile-menu{display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 .92rem var(--font);padding:11px 22px;border-radius:8px;border:1px solid transparent;cursor:pointer;text-decoration:none;color:var(--text);background:transparent;min-height:44px;justify-content:center}
.btn-primary{background:var(--blue);color:var(--sobre-acento)}
.btn-primary:hover{background:var(--blue-light)}
.btn-outline{border-color:var(--line)}
.btn-outline:hover{border-color:var(--text-dim)}
/* Botón que parece un enlace: "olvidé mi contraseña", "volver". */
.linkbtn{background:none;border:0;color:var(--blue-light);font:600 .88rem var(--font);cursor:pointer;padding:6px 0;min-height:36px}
.linkbtn:hover{color:var(--text)}
.linkbtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.btn-text{padding:11px 4px}
.btn-text:hover{color:var(--blue-light)}
.btn-sm{padding:8px 16px;font-size:.85rem;min-height:40px}
.arrow{display:inline-block}

/* hero */
.hero{position:relative;padding:110px 0 80px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-glow{position:absolute;left:50%;bottom:-30%;width:1100px;height:700px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(var(--glow-rgb),var(--glow-op)) 0%,rgba(var(--glow-rgb),var(--glow-op2)) 40%,transparent 70%)}
.hero-content{position:relative;z-index:2;text-align:center;max-width:780px;margin:0 auto}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--text-dim);border:1px solid var(--line);padding:7px 16px;border-radius:999px;margin-bottom:30px;background:rgba(0,0,0,.4)}
.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.hero h1{font-size:clamp(2.5rem,6vw,4.3rem);margin-bottom:22px}
.hero .lead{color:var(--text-dim);font-size:1.15rem;max-width:54ch;margin:0 auto 36px}
.hero-ctas{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap}
.marquee{position:relative;z-index:2;border-top:1px solid var(--line-soft);margin-top:80px;padding-top:30px;display:flex;justify-content:center;gap:64px;flex-wrap:wrap}
.marquee-item{text-align:center}
.marquee-item .num{font-weight:800;font-size:2.1rem;letter-spacing:-.02em}
.marquee-item .lbl{font-size:.82rem;color:var(--text-faint);margin-top:2px}

/* sections */
section.block{padding:100px 0}
.eyebrow{font-size:.84rem;color:var(--blue-light);font-weight:600;margin-bottom:14px;display:block}
.section-head{max-width:640px;margin-bottom:54px}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.5rem);margin-bottom:16px}
.section-head p{color:var(--text-dim);font-size:1.05rem}
.bg-panel{background:var(--panel)}


/* franja de fotos: acompaña, no protagoniza */
.franja{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.franja figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel)}
.franja img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(.98);opacity:.72}
.franja figure::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.34))}
@media (max-width:760px){.franja{grid-template-columns:1fr 1fr}.franja figure:nth-child(2){display:none}}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tl-item{background:var(--panel);padding:32px 26px}
.tl-node{font-size:.82rem;color:var(--blue-light);font-weight:700;margin-bottom:20px}
.tl-item h3{font-size:1.12rem;margin-bottom:10px;font-weight:600}
.tl-item p{color:var(--text-dim);font-size:.93rem}
.footnote{margin-top:20px;font-size:.82rem;color:var(--text-faint)}

/* categories: columnas dinámicas, sin huecos */
.cat-group-label{font-weight:600;font-size:.9rem;color:var(--text-dim);margin-bottom:14px}
.cat-strip{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cat-pill{background:var(--panel);padding:24px 10px;text-align:center}
.cat-pill .n{font-weight:700;font-size:1.4rem}
.cat-pill .lbl{font-size:.75rem;color:var(--text-faint);margin-top:4px;min-height:1.2em}
.cat-pill.edge{background:var(--panel-2)}
.cat-pill.edge .n{color:var(--blue-light)}
.rule-note{margin-top:28px;border-left:2px solid var(--blue);padding:2px 0 2px 18px;color:var(--text-dim);font-size:.96rem;max-width:64ch}
.rule-note strong{color:var(--text)}

/* panels, tabs (dos niveles) */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.filters{padding:22px 28px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:4px;align-self:flex-start}
.seg button{font:600 .88rem var(--font);color:var(--text-dim);background:transparent;border:0;border-radius:999px;padding:9px 20px;cursor:pointer;min-height:40px}
.seg button[aria-selected="true"]{background:var(--blue);color:var(--sobre-acento)}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{font:600 .85rem var(--font);padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--text-dim);min-height:40px}
.tab[aria-selected="true"]{background:rgba(var(--acento-rgb),.18);border-color:var(--blue-light);color:var(--text)}
.search-box{display:flex;align-items:center;gap:12px;padding:16px 28px;border-bottom:1px solid var(--line)}
.search-campo{position:relative;flex:1 1 220px;min-width:0}
.search-box .btn{flex:0 0 auto}
.search-box input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:11px 14px 11px 40px;color:var(--text);font:.92rem var(--font);min-height:44px}
.search-box input:focus{outline:none;border-color:var(--blue)}
.search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none}
.bar-list{padding:8px 28px 24px}
.bar-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.bar-row:last-child{border-bottom:none}
.bar-row .pos{font-weight:700;font-size:1.05rem;color:var(--text-faint)}
.bar-row.top .pos{color:var(--blue-light)}
.bar-name{font-weight:600;font-size:.97rem;margin-bottom:7px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.bar-name a{text-decoration:none}
.bar-name a:hover{color:var(--blue-light);text-decoration:underline}
.club{color:var(--text-faint);font-weight:400;font-size:.84rem}
.bar-track{height:4px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:var(--blue);border-radius:4px}
.bar-row.top .bar-fill{background:var(--blue-light)}
.bar-pts{font-weight:700;font-size:1.1rem;text-align:right}
.empty{padding:26px;text-align:center;color:var(--text-faint);font-size:.92rem}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:999px;background:rgba(var(--ok-rgb),.14);color:var(--ok);border:1px solid rgba(var(--ok-rgb),.35);white-space:nowrap}
.badge.prize{background:rgba(251,191,36,.12);color:var(--warn);border-color:rgba(251,191,36,.35)}
.badge.review{background:rgba(255,123,123,.12);color:var(--danger);border-color:rgba(255,123,123,.35)}
/* Jugador de ejemplo: tiene que leerse, pero sin competir con el
   'Afiliado' de los reales, que es el que importa. */
/* Cantidad de afiliados reales, al lado del nombre de la categoría. */
.tab .cuenta{opacity:.6;font-weight:600;font-size:.9em;margin-left:1px}
.tab[aria-selected="true"] .cuenta{opacity:.8}
.badge.demo{background:transparent;color:var(--text-faint);border-color:var(--line);font-weight:600}

/* full ranking */
.rank-head,.rank-row{display:grid;grid-template-columns:44px 1fr 70px 70px 90px 130px;gap:12px;align-items:center;padding:13px 28px}
.rank-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:600;border-bottom:1px solid var(--line);background:var(--panel-2)}
.rank-row{border-bottom:1px solid var(--line-soft);font-size:.95rem}
.rank-row.q{background:rgba(var(--acento-rgb),.06)}
.rank-row .pos{font-weight:700;color:var(--text-faint)}
.rank-row.q .pos{color:var(--blue-light)}
.rank-row .num{text-align:right;font-variant-numeric:tabular-nums}
.rank-row .pts{font-weight:700;text-align:right}
.rank-row a{text-decoration:none;font-weight:600}
.rank-row a:hover{color:var(--blue-light)}
.cut{padding:10px 28px;font-size:.78rem;color:var(--blue-light);border-bottom:1px dashed rgba(var(--acento-claro-rgb),.5);background:rgba(var(--acento-rgb),.05)}
.note{padding:18px 28px;font-size:.85rem;color:var(--text-faint)}

/* profile */
.profile{display:grid;grid-template-columns:170px 1fr;gap:38px;padding:36px}
.avatar{width:100%;aspect-ratio:1;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:700;color:var(--blue-light);background-size:cover;background-position:center}
.avatar-wrap{position:relative}
.avatar-edit{position:absolute;right:4px;bottom:4px;width:44px;height:44px;border-radius:50%;background:var(--blue);display:none;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem}
.avatar-edit.show{display:flex}
.profile h1,.profile h3{font-size:1.7rem;margin-bottom:8px}
.profile-meta{color:var(--text-dim);font-size:.94rem;margin-bottom:24px}
.profile-meta strong{color:var(--text)}
.stat-strip{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:26px}
.stat-strip div.s{flex:1;padding:16px;border-right:1px solid var(--line);text-align:center}
.stat-strip div.s:last-child{border-right:none}
.stat-strip .num{font-weight:700;font-size:1.4rem}
.stat-strip .lbl{font-size:.75rem;color:var(--text-faint);margin-top:2px}
.login-bar{display:flex;justify-content:flex-end;margin:24px 0 16px}
.photo-status{font-size:.78rem;color:var(--blue-light);margin-top:8px;text-align:center}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table.tbl{width:100%;border-collapse:collapse;min-width:760px;font-size:.88rem}
table.tbl th{text-align:left;background:var(--panel-2);color:var(--text-faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--text);vertical-align:top}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td a{text-decoration:none;color:var(--text)}
table.tbl td a:hover{color:var(--blue-light);text-decoration:underline}
td.win{color:var(--blue-light);font-weight:600}
td.loss{color:var(--text-dim)}
td.dim{color:var(--text-dim)}
h2.sub{font-size:1.2rem;margin:34px 0 14px}

/* master */
.master-panel{position:relative;border:1px solid rgba(var(--acento-claro-rgb),.35);border-radius:var(--radius);padding:56px;overflow:hidden;background:rgb(var(--tinte-1))}
/* El encuadre va pegado al borde izquierdo de la foto: así el jugador
   queda sobre la mitad derecha del panel, que es donde el tinte aclara
   y donde no lo tapan el título ni el texto. */
.master-panel > .master-fondo{position:absolute;inset:0;z-index:0;background:url('img/fotos/juego-1.jpg') left bottom/auto 135% no-repeat;opacity:.63}
.master-panel > .master-tinte{position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,rgba(var(--tinte-1),.95) 0%,rgba(var(--tinte-2),.86) 40%,rgba(var(--tinte-4),.46) 72%,rgba(var(--acento-rgb),.26) 100%)}
.master-panel>*{position:relative;z-index:1}
.master-panel h2{margin-bottom:16px;font-size:clamp(1.9rem,3.6vw,2.5rem)}
.master-panel p{color:var(--tinte-texto);max-width:42ch;margin-bottom:34px;font-size:1.05rem}
.bracket{display:flex;align-items:center;gap:0;overflow-x:auto;padding-bottom:8px;margin-bottom:34px}
.bracket-col{display:flex;flex-direction:column;gap:14px;padding:0 24px;min-width:150px;position:relative}
.bracket-col:first-child{padding-left:0}
.bracket-col:not(:first-child)::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.2)}
.col-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinte-tenue);margin-bottom:2px;font-weight:600}
.bnode{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:10px 14px;font-size:.82rem;color:var(--text);white-space:nowrap}
.bnode.final{border-color:#fff;color:#fff;font-weight:700;background:rgba(255,255,255,.14)}

/* clubs */
.clubs-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.club-benefits{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:16px}
.club-benefits li{display:flex;gap:14px;align-items:flex-start;font-size:.98rem;color:var(--text-dim)}
.club-benefits .mk{width:18px;height:18px;border-radius:50%;background:rgba(var(--acento-rgb),.18);border:1px solid var(--blue);flex-shrink:0;margin-top:4px}
.cta-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.cta-card h3{font-size:1.25rem;margin-bottom:10px;font-weight:600}
.cta-card p{color:var(--text-dim);font-size:.94rem;margin-bottom:22px}
.club-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.club-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px}
.club-card h3{font-size:1.15rem}
.club-head{display:flex;gap:14px;align-items:center}
.club-logo{width:76px;height:76px;border-radius:16px;flex-shrink:0;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;color:var(--blue-light);overflow:hidden}
.club-logo.has-img{background:#fff}
.club-logo img{width:100%;height:100%;object-fit:contain}
.club-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.9rem}
.club-card dt{color:var(--text-faint)}
.club-card dd{color:var(--text)}
.tbd{color:var(--text-faint);font-style:italic}
.club-card .btn{align-self:flex-start}

/* sponsors */
.sponsor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sponsor-cell{background:var(--bg);aspect-ratio:1.3;display:flex;align-items:center;justify-content:center;padding:22px}
.sponsor-cell img{max-width:100%;max-height:100%;object-fit:contain}
.sponsor-cell.open{flex-direction:column;gap:6px;text-decoration:none;color:var(--text-dim);font-weight:600;font-size:.9rem;border:0;text-align:center;background:var(--panel)}
.sponsor-cell.open:hover{color:var(--text);background:var(--panel-2)}
.sponsor-cell.open span{font-size:1.6rem;line-height:1;color:var(--blue-light)}

/* calendar */
.cal-month{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);font-weight:700;margin:34px 0 12px}
.cal-item{display:grid;grid-template-columns:78px 1fr auto;grid-template-areas:'fecha info acciones' 'cats cats cats';
  column-gap:22px;row-gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:18px 22px;margin-bottom:10px}
.cal-item .cal-date{grid-area:fecha}
.cal-item .cal-info{grid-area:info;min-width:0}
.cal-item .cal-acciones{grid-area:acciones;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cal-item .chips{grid-area:cats;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
/* Sin categorías que mostrar, la fila de abajo no ocupa lugar. */
.cal-item .chips:empty{display:none}
.cal-date{text-align:center;line-height:1.05}
.cal-date .d{font-size:1.7rem;font-weight:800}
.cal-date .m{font-size:.75rem;text-transform:uppercase;color:var(--blue-light);font-weight:700;letter-spacing:.06em}
.cal-item h3{font-size:1.02rem;margin-bottom:4px}
.cal-item .meta{font-size:.86rem;color:var(--text-dim)}
.chip{display:inline-block;font-size:.75rem;font-weight:600;padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--text-dim);white-space:nowrap}
.chip.hl{border-color:var(--blue-light);color:var(--text);background:rgba(var(--acento-rgb),.2)}
.filter-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
.filter-row select{background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 14px;font:.9rem var(--font);min-height:44px}

/* forms */
.page-hero{padding:70px 0 34px}
.page-hero h1{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:14px}
.page-hero p{color:var(--text-dim);font-size:1.08rem;max-width:60ch}
.form-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px;margin-bottom:90px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.field{margin-bottom:18px}
.row .field{margin-bottom:0}
.field label,.field .lab{display:block;font-size:.84rem;font-weight:600;margin-bottom:7px;color:var(--text)}
.field input,.field select,.field textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--text);font:.95rem var(--font);min-height:46px}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
/* Fechas y horas en el teléfono.
   En iOS, un input de fecha no hereda el color del texto: lo pinta de
   negro. Sobre el fondo oscuro del sitio eso hace que la fecha elegida
   quede invisible, y el que la carga cree que no se guardó nada. Pasa lo
   mismo con el iconito del calendario, que es negro sobre negro. */
input[type="date"],input[type="time"]{
  -webkit-appearance:none;appearance:none;
  color:var(--text);-webkit-text-fill-color:var(--text);
  background-color:var(--panel-2);min-height:46px}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{
  text-align:left;color:var(--text);-webkit-text-fill-color:var(--text)}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit{color:var(--text)}
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field{color:var(--text)}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.65);cursor:pointer}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.hint{font-size:.8rem;color:var(--text-faint);margin-top:6px}
.error-msg{font-size:.84rem;color:var(--danger);margin-top:6px;min-height:1.2em}
.gender-toggle{display:flex;gap:10px}
.gender-toggle label{margin:0;flex:1;position:relative;display:block}
.field .gender-toggle input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;border:0;left:0;top:0}
.gender-toggle span{display:block;text-align:center;padding:12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-weight:600;font-size:.92rem;background:var(--panel-2)}
.gender-toggle input:checked+span{border-color:var(--blue);background:rgba(var(--acento-rgb),.18)}
.gender-toggle input:focus-visible+span{outline:2px solid var(--blue-light);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--text-dim);margin:6px 0 22px}
.check input{margin-top:4px;width:20px;height:20px;flex-shrink:0}
.submit-btn{width:100%;background:var(--blue);color:var(--sobre-acento);border:0;border-radius:8px;padding:15px;font:700 1rem var(--font);cursor:pointer;min-height:48px}
.submit-btn:hover{background:var(--blue-light)}
.submit-btn:disabled{opacity:.6;cursor:wait}
.cat-help{margin-top:10px;font-size:.88rem;color:var(--text-dim);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.step[hidden]{display:none}
.success{text-align:center;padding:20px 0}
.success .ok{width:56px;height:56px;border-radius:50%;background:rgba(var(--ok-rgb),.15);border:1px solid var(--ok);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 18px}
.success h2{margin-bottom:10px;font-size:1.6rem}
.success p{color:var(--text-dim)}
.matricula{display:inline-block;margin:16px 0;font-size:2.2rem;font-weight:800;letter-spacing:.02em;color:var(--blue-light)}
.demo-note{font-size:.82rem;color:var(--text-faint);border-left:2px solid var(--line);padding-left:12px;margin:18px 0}
.callout{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin:20px 0;font-size:.95rem;color:var(--text-dim)}
.callout strong{color:var(--text)}
.callout.accent{border-left:3px solid var(--blue)}

/* document (reglamento, privacidad, master) */
.doc-body{display:grid;grid-template-columns:250px 1fr;gap:64px;padding:60px 0 100px;align-items:start}
.toc{position:sticky;top:110px}
.toc h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin-bottom:14px;font-weight:600}
.toc a{display:block;font-size:.9rem;color:var(--text-dim);text-decoration:none;padding:7px 0 7px 14px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--text);border-color:var(--text-dim)}
.toc a.active{color:var(--blue-light);border-color:var(--blue)}
.content section{padding:0 0 50px;border-bottom:1px solid var(--line-soft);margin-bottom:50px;scroll-margin-top:110px}
.content section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.sec-num{font-size:.82rem;color:var(--blue-light);font-weight:700;margin-bottom:10px;display:block}
.content h2{font-size:1.65rem;margin-bottom:18px}
.content h3{font-size:1.1rem;margin:26px 0 10px;font-weight:600}
.content p{color:var(--text-dim);margin-bottom:14px;max-width:74ch}
.content p strong,.content li strong{color:var(--text);font-weight:600}
.content ul,.content ol{color:var(--text-dim);margin:0 0 14px 20px;max-width:74ch}
.content li{margin-bottom:8px}
.content li::marker{color:var(--blue-light)}
table.reg{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem}
table.reg th{text-align:left;color:var(--text-faint);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding:10px 14px;border-bottom:1px solid var(--line)}
table.reg td{padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--text-dim)}
table.reg td strong{color:var(--text)}
table.reg td.n{text-align:right;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.cat-inline{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 8px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);font-size:.82rem;font-weight:600;color:var(--blue-light);margin:0 2px}
.schedule{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:10px}
.sched-row{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line-soft);align-items:center}
.sched-row:last-child{border-bottom:none}
.sched-day{font-weight:700;font-size:.9rem;color:var(--blue-light)}
.sched-items{display:flex;gap:10px;flex-wrap:wrap}
.sched-chip{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:.85rem;color:var(--text-dim)}
.quali-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.quali-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
.quali-card h3{font-size:1rem;margin:0 0 8px}
.quali-card .n{font-weight:800;font-size:1.7rem;color:var(--blue-light);margin-bottom:4px}
.quali-card p{font-size:.88rem;margin-bottom:0}
.timeline-v{border-left:2px solid var(--line);margin:18px 0 18px 6px;padding-left:22px}
.timeline-v .tv{position:relative;margin-bottom:18px}
.timeline-v .tv::before{content:'';position:absolute;left:-29px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.timeline-v .tv b{display:block;color:var(--text)}

/* footer */
footer.site{border-top:1px solid var(--line-soft);padding:54px 0 32px}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:36px}
.foot-links{display:flex;gap:52px;flex-wrap:wrap}
.foot-links h4{font-size:.82rem;font-weight:600;margin-bottom:12px}
.foot-links a{display:block;font-size:.9rem;color:var(--text-dim);text-decoration:none;margin-bottom:9px}
.foot-links a:hover{color:var(--blue-light)}
.fine{border-top:1px solid var(--line-soft);padding-top:22px;font-size:.8rem;color:var(--text-faint)}
/* El número de versión. Apenas visible a propósito: no es para el
   jugador, es para saber de un vistazo si el caché está sirviendo una
   copia vieja. */
.fine .ver{margin-left:10px;opacity:.38;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.fine .ver:hover{opacity:.9}

/* 1200 y no 1140: el nombre mas largo, "RANKING SIERRAS CHICAS",
   necesita 1130 px de barra, y abajo de 1180 de ventana ya no
   entran. Mejor la hamburguesa un poco antes que el menu partido. */
@media (max-width:1200px){
  nav.links,.nav>.nav-ctas{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .timeline{grid-template-columns:1fr 1fr}
  .marquee{gap:34px}
  .profile{grid-template-columns:minmax(0,1fr);text-align:center;padding:26px}
  .profile>div{min-width:0}
  .avatar{width:140px;margin:0 auto}
  .stat-strip{flex-wrap:wrap}
  .stat-strip div.s{flex:1 1 50%;border-bottom:1px solid var(--line)}
  .clubs-grid,.pains,.answer,.quali-grid{grid-template-columns:1fr}
  /* minmax(0,1fr) y no 1fr: una columna de grilla toma por defecto el ancho
     mínimo de su contenido, así que una tabla ancha estiraba toda la página
     y el reglamento se iba 69px a la derecha en el celular. */
  .doc-body{grid-template-columns:minmax(0,1fr);gap:0}
  .doc-body .content{min-width:0}
  table.reg{table-layout:fixed;font-size:.84rem}
  table.reg th,table.reg td{padding-left:8px;padding-right:8px;overflow-wrap:anywhere}
  .toc{position:static;margin-bottom:36px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
  .cat-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sponsor-grid{grid-template-columns:repeat(2,1fr)}
  .master-panel{padding:38px 24px}
  .rank-head,.rank-row{grid-template-columns:36px 1fr 60px 84px;padding:13px 18px}
  .rank-head .hide-m,.rank-row .hide-m{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .hero{padding:80px 0 60px}
  section.block{padding:70px 0}
  .timeline{grid-template-columns:1fr}
  .cat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* En teléfono, uno abajo del otro: cada logo usa todo el ancho y se lee.
     A dos columnas quedaban del tamaño de una estampilla. */
  .sponsor-grid{grid-template-columns:1fr}
  .sponsor-cell{aspect-ratio:auto;min-height:124px;padding:20px 26px}
  /* Techo de altura: sin esto, un logo cuadrado estira su celda al ancho
     completo y queda un bloque enorme al lado de uno apaisado. */
  .sponsor-cell img{max-height:96px}
  .sponsor-cell.open{flex-direction:row;gap:10px;min-height:64px;padding:14px;font-size:.88rem}
  .sponsor-cell.open span{font-size:1.3rem}
  .row{grid-template-columns:1fr}
  .form-panel{padding:22px}
  .cal-item{grid-template-columns:60px 1fr;grid-template-areas:'fecha info' 'acciones acciones' 'cats cats';column-gap:14px;row-gap:12px}
  .cal-item .cal-acciones{justify-content:flex-start}
  .filters{padding:18px}
  .search-box,.bar-list{padding-left:18px;padding-right:18px}
  .search-box{flex-wrap:wrap}
  .sched-row{grid-template-columns:1fr}
  .bar-row{gap:12px}
  .mobile-menu{padding:14px 18px 22px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- la casilla de mensajes ----------
   La lista de conversaciones y el hilo de una. Sigue el acento de la
   zona como todo lo demás: los colores salen de las variables. */
.conv{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;
  padding:12px 14px;margin-bottom:8px;color:var(--text);font:inherit}
.conv:hover{background:var(--panel-2);border-color:var(--line)}
.conv-ava{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.92rem;color:var(--blue-light)}
.conv-ava img{width:100%;height:100%;object-fit:cover}
.conv-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.conv-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.conv-fecha{font-size:.76rem;color:var(--text-faint);flex:0 0 auto}
.conv-ult{font-size:.86rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-n{flex:0 0 auto;min-width:22px;height:22px;border-radius:11px;background:var(--blue);
  color:var(--sobre-acento);font-size:.74rem;font-weight:700;display:flex;align-items:center;
  justify-content:center;padding:0 7px}

.hilo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);margin-bottom:14px;flex-wrap:wrap}
.hilo-top a{font-weight:700;text-decoration:none}
.hilo-top a:hover{color:var(--blue-light)}
.hilo{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding:4px}
.burbuja{max-width:78%;align-self:flex-start;background:var(--panel-2);
  border:1px solid var(--line-soft);border-radius:14px;padding:10px 14px}
.burbuja.mia{align-self:flex-end;background:rgba(var(--acento-rgb),.14);
  border-color:rgba(var(--acento-claro-rgb),.3)}
.burbuja-txt{font-size:.92rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.burbuja-pie{display:flex;gap:10px;align-items:center;margin-top:5px;
  font-size:.74rem;color:var(--text-faint)}
.burbuja-pie .den{font-size:.74rem;padding:0;min-height:0;color:var(--text-faint)}
.burbuja-pie .den:hover{color:var(--danger)}
.hilo-responder{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.hilo-responder textarea{flex:1;resize:vertical;min-height:46px}
@media (max-width:640px){
  .burbuja{max-width:88%}
  .hilo-responder{flex-direction:column;align-items:stretch}
}


/* ---------- el tablón de "busco partido" ----------
   Tarjetas en grilla. Siguen el acento de la zona como todo lo demás. */
.pedidos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.pedido{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;
  padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.pedido.mio{border-color:rgba(var(--acento-claro-rgb),.4);background:rgba(var(--acento-rgb),.05)}
.pedido header{display:flex;align-items:center;gap:12px}
.pedido-ava{flex:0 0 42px;width:42px;height:42px;border-radius:50%;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.88rem;color:var(--blue-light)}
.pedido-ava img{width:100%;height:100%;object-fit:cover}
.pedido-nombre{font-weight:700;text-decoration:none;color:var(--text)}
.pedido-nombre:hover{color:var(--blue-light)}
.pedido-meta{font-size:.78rem;color:var(--text-faint)}
.pedido-busca{font-size:.92rem;color:var(--text);margin:0}
.pedido-cuando{font-size:.86rem;color:var(--text-dim);margin:0;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}
.pedido-club{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:999px;
  padding:2px 10px;font-size:.78rem;color:var(--text-dim)}
.pedido-nota{font-size:.88rem;color:var(--text-dim);margin:0;font-style:italic}
.pedido footer{margin-top:auto;padding-top:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pedido-motivo{font-size:.84rem;color:var(--text-faint)}

/* Las casillas de categorías y días del formulario de publicar. */
.cats-check{display:flex;flex-wrap:wrap;gap:8px 16px}
.cats-check label{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;
  color:var(--text-dim);cursor:pointer;white-space:nowrap}
/* Tamanio fijo y sin estirarse: si no, cuando la etiqueta ocupa dos
   lineas el cuadradito crece con ella y queda enorme. */
.cats-check input{margin:0;flex:0 0 auto;width:17px;height:17px;min-height:0}
@media (max-width:640px){ .pedidos{grid-template-columns:1fr} }

/* La casilla de los filtros del tablón, alineada con los select. */
.filtro-check{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;
  color:var(--text-dim);cursor:pointer;min-height:44px;white-space:nowrap}
.filtro-check input{margin:0;flex:0 0 auto;width:17px;height:17px;min-height:0}

/* Conversaciones de jugadores que se dieron de baja: el texto queda,
   pero no hay a quién contestarle. */
.conv-baja{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-dim);border:1px solid var(--linea);border-radius:999px;
  padding:1px 7px;margin-left:8px;white-space:nowrap;font-weight:600}
.hilo-cerrado{margin-top:14px;padding:13px 15px;border-radius:12px;
  background:rgba(var(--acento-rgb),.06);border:1px solid var(--linea);
  color:var(--text-dim);font-size:.88rem;line-height:1.55}

/* Vista previa de otra zona: una franja fija abajo, para que nunca
   quede la duda de qué se está mirando. Solo aparece cuando se entró
   con ?zona=... desde una dirección que no es la de esa zona. */
:root[data-previa="1"] .previa-franja{display:flex}
/* La franja es fija: sin este aire taparia el final del pie,
   que en celular ocupa dos lineas. */
:root[data-previa="1"] body{padding-bottom:92px}
.previa-franja{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:10px 16px;font-size:.84rem;font-weight:600;
  background:rgb(var(--acento-rgb));color:var(--sobre-acento);
  box-shadow:0 -6px 20px rgba(0,0,0,.35)}
.previa-franja a{color:inherit;text-decoration:underline;font-weight:700}

/* En qué ranking se está anotando el que se afilia. Va antes del
   formulario a propósito: enterarse después sería una sorpresa. */
.aviso-zona{margin-top:14px;padding:12px 15px;border-radius:12px;
  background:rgba(var(--acento-rgb),.08);border:1px solid rgba(var(--acento-rgb),.28);
  color:var(--text-dim);font-size:.9rem;line-height:1.55;max-width:62ch}
.aviso-zona strong{color:var(--text)}


/* =====================================================================
   DISEÑO C · secciones alternadas
   El sitio sigue oscuro. Lo que cambia es que las secciones se van
   turnando mientras bajás —oscura, clara, oscura, clara— para cortar
   tanto negro seguido.
   Se prende con ?diseno=c. Mientras no se pida, nada de esto aplica.
   ===================================================================== */

/* Solo alternan las secciones de CONTENIDO (`.block`). Las de estado
   —"sin permiso", "sin matrícula", "panel"— no lo son, así que no
   entran: si entraran, en admin o en Mi cuenta se pintaría una clara
   al azar según cuál esté visible.

   Los colores de una sección clara, por zona. Solo se declaran; abajo
   se aplican. */
:root[data-diseno="c"]{
  --claro-bg:#f1f4f8; --claro-panel:#ffffff; --claro-panel-2:#e7ecf4;
  --claro-texto:#0b0d16; --claro-tenue:#4b5464; --claro-flojo:#5b6577;
  --claro-linea:#dde3ed; --claro-linea-suave:#e9edf4;
  --claro-acento-claro:43,76,255; --claro-ok:19,107,54;
  --claro-sutil:rgba(11,13,22,.045); --claro-sutil-mas:rgba(11,13,22,.085);
}
:root[data-diseno="c"][data-zona="sierras-chicas"]{
  --claro-bg:#eef4f1; --claro-panel:#ffffff; --claro-panel-2:#e3ece8;
  --claro-texto:#0a1210; --claro-tenue:#48574f; --claro-flojo:#55615a;
  --claro-linea:#d8e5df; --claro-linea-suave:#e6efeb;
  --claro-acento-claro:4,120,87; --claro-ok:63,107,12;
}

/* ---- la sección clara ----
   En la portada van las PARES: el sistema, el ranking en vivo, el
   calendario, los clubes y la afiliación. La 1 es la portada grande,
   que se queda oscura. */
:root[data-diseno="c"] main > section.block:nth-of-type(even),
:root[data-diseno="c"] body > section.block:nth-of-type(even),
:root[data-diseno="c"] .seccion-clara{
  background:var(--claro-bg);
  --bg:var(--claro-bg);
  --panel:var(--claro-panel); --panel-2:var(--claro-panel-2);
  --text:var(--claro-texto); --text-dim:var(--claro-tenue); --text-faint:var(--claro-flojo);
  --line:var(--claro-linea); --line-soft:var(--claro-linea-suave);
  --sutil:var(--claro-sutil, rgba(11,13,22,.045));
  --sutil-mas:var(--claro-sutil-mas, rgba(11,13,22,.085));
  /* OJO: no alcanza con cambiar la terna. `--blue-light` y `--ok` se
     resolvieron en la raíz con el valor oscuro y bajan ya calculados,
     así que hay que volver a declararlos acá. */
  --acento-claro-rgb:var(--claro-acento-claro);
  --ok-rgb:var(--claro-ok);
  --blue-light:rgb(var(--acento-claro-rgb));
  --ok:rgb(var(--ok-rgb));
  color:var(--text);
}

/* Las secciones claras ya traen su propio fondo: el `bg-panel` que
   usaban antes para diferenciarse deja de hacer falta. */
:root[data-diseno="c"] main > section.block:nth-of-type(even).bg-panel,
:root[data-diseno="c"] body > section.block:nth-of-type(even).bg-panel{
  background:var(--claro-bg);
}

/* Los paneles de adentro, con un poco de relieve para despegarse del
   fondo claro. */
:root[data-diseno="c"] main > section.block:nth-of-type(even) .panel,
:root[data-diseno="c"] body > section.block:nth-of-type(even) .panel,
:root[data-diseno="c"] main > section.block:nth-of-type(even) .club-card,
:root[data-diseno="c"] body > section.block:nth-of-type(even) .club-card,
:root[data-diseno="c"] main > section.block:nth-of-type(even) .cal-item,
:root[data-diseno="c"] body > section.block:nth-of-type(even) .cal-item{
  box-shadow:0 1px 2px rgba(11,13,22,.06);
}

/* Blanco fijo sobre un fondo translúcido: adentro de una sección clara
   desaparece. Se arregla en la hoja general, no acá, pero queda dicho
   por si alguien busca. */

/* El panel del Máster sigue oscuro con su foto. Si le toca caer en una
   sección clara, se despega con sombra. */
:root[data-diseno="c"] .master-panel{
  --text:#ffffff; --text-dim:var(--tinte-texto);
  box-shadow:0 10px 34px rgba(11,13,22,.18);
}

/* La franja de fotos y las grillas separadas por 1px: dentro de una
   sección clara la línea tiene que ser la clara. */
:root[data-diseno="c"] main > section.block:nth-of-type(even) .timeline,
:root[data-diseno="c"] body > section.block:nth-of-type(even) .timeline,
:root[data-diseno="c"] main > section.block:nth-of-type(even) .cat-strip,
:root[data-diseno="c"] body > section.block:nth-of-type(even) .cat-strip{
  background:var(--line);border-color:var(--line);
}