/* self-hosted brand typefaces (see /fonts) — Getla is the bold display face from the
   brand poster, EB Garamond the serif pairing used for subtitles like "CLUB" and
   "Winter Series". font-display:swap so text shows in a fallback immediately rather
   than staying invisible while these load. */
@font-face{font-family:'Getla';src:url('fonts/Getla.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'EB Garamond';src:url('fonts/EBGaramond-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'EB Garamond';src:url('fonts/EBGaramond-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'EB Garamond';src:url('fonts/EBGaramond-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'EB Garamond';src:url('fonts/EBGaramond-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap;}

@property --hero-num-hot{ syntax:'<number>'; inherits:true; initial-value:0; }

:root{
  /* natural palette — warm beige canvas, olive green predominant, terracotta orange as the
     one punctual contrast accent, dark olive for text */
  --color-beige:#e8e1cc;      /* page canvas — warm, not white */
  --color-card:#f8f4e9;       /* card surfaces — warm off-white, still not stark white */
  --color-dark-olive:#373d20; /* primary text / darkest neutral — flips to a light color
                                  in dark mode (see --ink), unlike --brand-dark-olive below */
  --color-olive:#717744;      /* predominant accent (signal) */
  --color-khaki:#bcbd8b;      /* secondary surface / tag accent */
  --color-terracotta:#c1592c; /* punctual contrast accent */
  --color-white:#ffffff;      /* max-contrast text only — never a surface */
  --brand-dark-olive:#373d20; /* the literal swatch for the hero gradient / CTA button —
                                  always this exact dark green regardless of theme, since
                                  those two spots are deliberately dark surfaces with fixed
                                  light text on top either way (unlike --color-dark-olive,
                                  which IS the page's flippable text/ink color) */
  --ink-rgb:55,61,32;         /* --ink as an r,g,b triplet, for every rgba(var(--ink-rgb),X)
                                  subtle-tint use below (borders, faint text, dividers) —
                                  flipping this one value in [data-theme="dark"] is what
                                  makes all of those read correctly on a dark surface too */

  --radius-cards:40px;
  --radius-medium:20px;
  --radius-small:16px;
  --radius-inputs:100px;
  --radius-pill:999px;

  /* legacy aliases so the rest of this file (and privacidad.html's inline styles)
     keep working unchanged, remapped onto the new palette/roles */
  --bg:var(--color-beige);
  --bg-elevated:var(--color-card);
  --bg-alt:color-mix(in srgb, var(--color-khaki) 32%, var(--color-beige));
  --surface-input:var(--color-card);
  --ink:var(--color-dark-olive);
  --ink-soft:rgba(var(--ink-rgb),.72);
  --ink-faint:rgba(var(--ink-rgb),.5);
  --signal:var(--color-olive);
  --signal-tint:rgba(113,119,68,.16);
  --signal-ink:var(--color-white);
  --danger:var(--color-terracotta);
  --danger-tint:rgba(193,89,44,.16);
  --border:rgba(var(--ink-rgb),.14);
  --shadow:none;
  --shadow-glow:none;
  --radius:var(--radius-cards);
  --radius-sm:var(--radius-medium);
  --header-bg:var(--color-card);
  --header-ink:var(--color-dark-olive);
  --header-ink-soft:rgba(var(--ink-rgb),.62);

  /* neumorphism (soft UI) — every raised control is a slab of its own background,
     shaped only by a dark shadow toward the light source's opposite corner and a light
     highlight toward the light source (no border). Large blur + small offset reads as
     soft/molded rather than a hard drop shadow; pressing/selecting flips both shadows
     inward (see --neu-pressed*) so it looks physically pushed in. -on-dark variants are
     for controls sitting on the hero/CTA's dark or saturated backgrounds, where
     ink-tinted shadows would vanish. -sm variants are the tighter version for compact
     controls (icon buttons, chips) where the full-size blur would overlap neighbours. */
  --neu-dark:rgba(var(--ink-rgb),.28);
  --neu-light:rgba(255,255,255,.9);
  --neu-dark-on-dark:rgba(0,0,0,.35);
  --neu-light-on-dark:rgba(255,255,255,.14);
  --neu-raised:9px 9px 20px var(--neu-dark),-9px -9px 20px var(--neu-light);
  --neu-pressed:inset 5px 5px 12px var(--neu-dark),inset -5px -5px 12px var(--neu-light);
  --neu-raised-sm:5px 5px 12px var(--neu-dark),-5px -5px 12px var(--neu-light);
  --neu-pressed-sm:inset 3px 3px 7px var(--neu-dark),inset -3px -3px 7px var(--neu-light);
  --neu-raised-on-dark:9px 9px 20px var(--neu-dark-on-dark),-9px -9px 20px var(--neu-light-on-dark);
  --neu-pressed-on-dark:inset 5px 5px 12px var(--neu-dark-on-dark),inset -5px -5px 12px var(--neu-light-on-dark);

  /* liquid glass — reserved for the two spots that actually have something worth
     blurring behind them (the header once content is scrolling underneath it, and the
     hero buttons over its gradient+dot texture): a blurred/saturated see-through fill,
     a bright thin rim to catch the "edge of glass", and a soft diagonal gloss streak
     layered into the background so it reads as curved glass, not just tinted plastic. */
  --glass-blur:blur(18px) saturate(180%);
  --glass-sheen:linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 38%);
  --glass-border:rgba(255,255,255,.4);
  --font-display:'Getla','Anton','Bebas Neue',Impact,sans-serif;
  --font-body:'DM Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --font-mono:var(--font-body);
  --font-dot:var(--font-display);
  --ease-out:cubic-bezier(.16,.8,.24,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --hero-p:0;
  --hero-amp:1; /* scroll-fx amplitude multiplier — turned down on small screens, see JS */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:500;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
strong,b{font-weight:inherit;}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.02em;text-wrap:balance;margin:0;line-height:1.02;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
input,textarea,select{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--signal);margin:0 0 .6rem;font-weight:500;}
.section-title{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:.7rem;}
.section-lead{max-width:60ch;color:var(--ink-soft);font-size:1.02rem;}
.section{padding:5rem 0;position:relative;}
.section--alt{background:var(--bg-alt);}
.section-inner{max-width:1080px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:1;}

/* editorial ghost-number marks — same big-translucent-numeral language as the hero's
   ball, reused as a running index (01, 02…) behind each section's heading so the page
   reads as one designed sequence instead of a stack of identical generic blocks */
.section-mark{position:absolute;left:1.5rem;top:-.6rem;z-index:-1;font-family:var(--font-display);font-weight:400;font-size:clamp(4rem,11vw,8.5rem);line-height:1;color:var(--ink);opacity:.055;letter-spacing:0;user-select:none;pointer-events:none;}
/* same treatment as the hero's padel-player illustration (partial opacity, blends with
   the section instead of sitting on top of it) — grounded at the bottom-right, facing
   left toward the sign-up form. */
.insc-player-illustration{position:absolute;right:1.5rem;bottom:0;width:min(42vw,760px);height:auto;opacity:.45;z-index:0;pointer-events:none;user-select:none;transform:scaleX(-1);}
@media (max-width:900px){ .insc-player-illustration{display:none;} }
/* pair the ghost section number with the illustration instead of hiding behind the
   heading — same trick as Cuadros' "04", just mirrored onto the illustration's side. */
#inscripcion .section-mark{left:auto;right:1.5rem;}
/* third illustration, mirrored onto the left — the title and bracket carousel form their
   own right-hand column (like Inscripción's card does opposite its illustration) so
   neither one crowds the other. */
.cuadros-player-illustration{position:absolute;left:1.5rem;bottom:0;width:min(38vw,680px);height:auto;opacity:.45;z-index:0;pointer-events:none;user-select:none;transform:scaleX(-1);}
@media (max-width:900px){ .cuadros-player-illustration{display:none;} }
.cuadros-content{position:relative;z-index:1;}
@media (min-width:901px){ .cuadros-content{margin-left:min(34vw,420px);} }
/* fourth illustration — moved here from the hero, which felt empty carrying a whole
   figure while this section carried none. Same left/number-pairing recipe (and now the
   same big scale) as Cuadros/Inscripción — it's sized wider than the content push on
   purpose, same as the other two, so it reads as a background figure bleeding in behind
   the cards rather than something the layout has to make literal room for. The push
   itself stays narrow (below) so the rules grid keeps its 3-column row. */
.formato-player-illustration{position:absolute;left:4rem;bottom:0;width:min(40vw,730px);height:auto;opacity:.45;z-index:0;pointer-events:none;user-select:none;}
@media (max-width:900px){ .formato-player-illustration{display:none;} }
.formato-content{position:relative;z-index:1;}
@media (min-width:901px){ .formato-content{margin-left:min(18vw,230px);} }

/* header */
.site-header{position:sticky;top:0;z-index:40;padding:.9rem 0;background:transparent;}
.header-inner{max-width:1040px;margin:0 auto;padding:.65rem 1.4rem;display:flex;align-items:center;gap:1.5rem;background:transparent;border-radius:var(--radius-pill);border:1px solid transparent;transition:background .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);}
.site-header.is-scrolled .header-inner{
  background:var(--glass-sheen),color-mix(in srgb, var(--header-bg) 60%, transparent);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-color:var(--glass-border);
  box-shadow:0 10px 30px rgba(var(--ink-rgb),.14),inset 0 1px 0 rgba(255,255,255,.5);
}
.header-logo{display:flex;align-items:center;gap:.32rem;flex-shrink:0;}
.header-logo .isotipo{height:1.25rem;width:auto;fill:var(--header-ink);flex-shrink:0;}
.brand-mark{font-family:var(--font-display);font-weight:400;color:var(--header-ink);letter-spacing:.02em;display:inline-flex;align-items:baseline;}
.brand-mark .dot{color:var(--signal);}
.header-logo .brand-mark{font-size:1.25rem;}
.header-logo .brand-sub{font-family:var(--font-body);font-weight:500;font-size:.62rem;color:var(--header-ink-soft);letter-spacing:.1em;text-transform:uppercase;margin-left:.15rem;}
.header-nav{display:flex;gap:1.4rem;flex:1;overflow-x:auto;scrollbar-width:none;}
.header-nav::-webkit-scrollbar{display:none;}
.header-nav a{position:relative;color:var(--header-ink-soft);font-size:.88rem;font-weight:500;white-space:nowrap;padding:.3rem 0;transition:color .15s;}
.header-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--signal);transition:right .28s var(--ease-out);}
.header-nav a:hover{color:var(--header-ink);}
.header-nav a:hover::after{right:0;}
.header-nav a.active{color:var(--header-ink);}
.header-nav a.active::after{right:0;}
.header-lock{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:.5rem;color:var(--header-ink-soft);font-family:var(--font-body);font-size:.74rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 100%, white 10%), color-mix(in srgb, var(--bg-elevated) 100%, black 4%));border:none;border-radius:var(--radius-pill);padding:.4rem .9rem .4rem .7rem;cursor:pointer;box-shadow:var(--neu-raised-sm);transition:box-shadow .15s,color .15s,transform .15s;}
.header-lock:hover{color:var(--header-ink);transform:translateY(-1px);}
.header-lock:active{box-shadow:var(--neu-pressed-sm);transform:translateY(0);}
.header-lock .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);flex-shrink:0;}
.header-lock--player .dot{background:var(--danger);}
.lock-label-short{display:none;}
.mobile-menu-btn{display:none;flex-shrink:0;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;background:linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 100%, white 10%), color-mix(in srgb, var(--bg-elevated) 100%, black 4%));border:none;border-radius:var(--radius-small);color:var(--header-ink);font-size:1.1rem;cursor:pointer;box-shadow:var(--neu-raised-sm);}
.mobile-menu-btn:active{box-shadow:var(--neu-pressed-sm);}
.theme-toggle{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;background:linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 100%, white 10%), color-mix(in srgb, var(--bg-elevated) 100%, black 4%));border:none;border-radius:50%;color:var(--header-ink);cursor:pointer;box-shadow:var(--neu-raised-sm);transition:box-shadow .15s,transform .15s,background .2s,color .2s;}
.theme-toggle:hover{transform:translateY(-1px);}
.theme-toggle:active{box-shadow:var(--neu-pressed-sm);transform:translateY(0);}
.theme-toggle svg{width:1.05rem;height:1.05rem;}
.mobile-nav-panel{display:none;}
.mobile-nav-panel.open{display:block;margin-top:.6rem;max-width:1040px;margin-left:auto;margin-right:auto;background:var(--header-bg);border-radius:var(--radius-cards);overflow:hidden;}
.mobile-nav-panel a{display:block;padding:1rem 1.5rem;color:var(--header-ink);font-size:1.05rem;font-weight:500;border-bottom:1px solid rgba(var(--ink-rgb),.1);}
.mobile-nav-panel a:last-child{border-bottom:none;}
.mobile-nav-panel a:active{color:var(--signal);}

/* hero — taupe-to-dark-olive gradient keeps the brand green free to use as its own accent
   (the dot) without ever landing on a same-color background */
.hero{position:relative;color:var(--color-white);overflow:hidden;padding:4.5rem 0 4rem;margin:20px 20px 0;border-radius:var(--radius-cards);
  min-height:calc(100vh - 320px);display:flex;flex-direction:column;justify-content:center;
  background-image:linear-gradient(135deg, var(--color-terracotta) 0%, var(--brand-dark-olive) 100%);
  transform:scale(calc(1 - var(--hero-p) * 0.045 * var(--hero-amp)));transform-origin:center 38%;will-change:transform;
}
/* the halftone dots live entirely in canvas now (see heroDots* in JS) instead of a CSS
   background pattern: they still auto-drift exactly as before, but the SAME dots that
   are drifting also swell near the cursor — one set of dots, not a static layer plus a
   separate reactive one drawn on top of it. */
.hero-dots-canvas{position:absolute;inset:0;pointer-events:none;z-index:0;}
.hero-inner{max-width:1080px;margin-left:min(7vw,120px);padding:0 1.5rem;position:relative;z-index:2;
  transform:translateY(calc(var(--hero-p) * -34px * var(--hero-amp)));opacity:calc(1 - var(--hero-p) * 0.6);will-change:transform,opacity;}
/* --hero-num-hot is a registered (animatable) custom property so its own change can be
   CSS-transitioned smoothly on hover without also smoothing --hero-p — that one is
   JS-driven every scroll frame and must stay lag-free, so it's deliberately left out of
   the transition list below. */
.hero-num{position:absolute;right:-3.5rem;top:-6.5rem;font-family:var(--font-display);font-weight:400;font-size:min(60vw,84vh);line-height:1;color:var(--color-white);opacity:.14;z-index:1;pointer-events:none;user-select:none;
  transition:--hero-num-hot .6s var(--ease-out);
  transform:translateY(calc(var(--hero-p) * -80px * var(--hero-amp))) scale(calc((1 + var(--hero-p) * 0.24 * var(--hero-amp)) * (1 + var(--hero-num-hot) * 0.16))) rotate(calc(var(--hero-p) * 5deg * var(--hero-amp)));will-change:transform;}
.hero-num.is-hot{--hero-num-hot:1;}
.hero-court{display:none;}
.hero-eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:rgba(255,255,255,.85);font-weight:500;margin-bottom:1rem;}
.hero-title{font-size:clamp(3.4rem,13vw,10.5rem);letter-spacing:.02em;color:var(--color-white);}
.hero-title .dot{color:var(--signal);display:inline-block;}
.hero-brand-sub{font-family:var(--font-serif);font-weight:400;font-style:italic;font-size:clamp(1.3rem,3vw,1.8rem);color:rgba(255,255,255,.82);letter-spacing:.01em;margin-top:-.2rem;}
.hero-subtitle{font-family:var(--font-body);font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--color-white);margin-top:.9rem;font-weight:500;}
.hero-text{max-width:56ch;color:rgba(255,255,255,.82);font-size:1.06rem;margin-top:1.4rem;}
.hero-actions{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:2.1rem;}
.hero-actions .btn-primary,.hero-actions .btn-ghost{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);}
.hero-actions .btn-primary{background:var(--glass-sheen),linear-gradient(135deg, color-mix(in srgb, var(--signal) 62%, transparent), color-mix(in srgb, var(--signal) 34%, transparent));box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12);}
.hero-actions .btn-primary:active{box-shadow:0 4px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3);}
.hero-actions .btn-ghost{color:var(--color-white);background:var(--glass-sheen),rgba(255,255,255,.12);box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.35);}
.hero-actions .btn-ghost:hover{color:var(--color-khaki);}
.hero-actions .btn-ghost:active{box-shadow:0 4px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25);}
.hero-next{margin-top:2.6rem;font-size:.85rem;color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.24);padding-top:1.1rem;max-width:56ch;}
.hero-next strong{color:var(--color-white);}

/* hero entrance (plays once, on first paint only — see JS) */
@keyframes heroIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.hero-animate .hero-eyebrow{animation:heroIn .65s var(--ease-out) both;}
.hero-animate .hero-title{animation:heroIn .65s var(--ease-out) .08s both;}
.hero-animate .hero-brand-sub{animation:heroIn .65s var(--ease-out) .15s both;}
.hero-animate .hero-subtitle{animation:heroIn .65s var(--ease-out) .21s both;}
.hero-animate .hero-text{animation:heroIn .65s var(--ease-out) .28s both;}
.hero-animate .hero-actions{animation:heroIn .65s var(--ease-out) .36s both;}
.hero-animate .hero-next{animation:heroIn .65s var(--ease-out) .44s both;}

/* the dot as a bouncing ball — reuses the brand's own "dot = pelota" motif */
@keyframes bounceDot{0%,100%{transform:translateY(0) scaleX(1);}18%{transform:translateY(-2px) scaleX(1.15);}45%{transform:translateY(-20px) scaleX(.92);}70%{transform:translateY(0) scaleX(1.15);}82%{transform:translateY(-6px) scaleX(1);}}
.bounce-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--color-white);animation:bounceDot 1.9s ease-in-out infinite;}
.bounce-dot::after{content:"";}

/* buttons — soft UI (neumorphism): each button is a raised slab of its own background,
   shaped by a dark/light shadow pair instead of a hard border. Pressing it flips the
   shadow inward (inset) so it reads as physically pushed in rather than just darkened. */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-pill);font-weight:500;font-size:.95rem;border:none;cursor:pointer;background:linear-gradient(145deg, color-mix(in srgb, var(--bg) 100%, white 10%), color-mix(in srgb, var(--bg) 100%, black 5%));color:var(--ink);box-shadow:var(--neu-raised);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background .15s,color .15s;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(1px) scale(.98);box-shadow:var(--neu-pressed);background:linear-gradient(145deg, color-mix(in srgb, var(--bg) 100%, black 4%), color-mix(in srgb, var(--bg) 100%, white 6%));}
.btn-primary{background:linear-gradient(145deg, color-mix(in srgb, var(--signal) 100%, white 14%), color-mix(in srgb, var(--signal) 100%, black 10%));color:var(--signal-ink);box-shadow:9px 9px 20px rgba(0,0,0,.26),-9px -9px 20px rgba(255,255,255,.3);}
.btn-primary:active{box-shadow:inset 5px 5px 12px rgba(0,0,0,.3),inset -5px -5px 12px rgba(255,255,255,.2);background:linear-gradient(145deg, color-mix(in srgb, var(--signal) 100%, black 8%), color-mix(in srgb, var(--signal) 100%, white 10%));}
.btn-ghost{color:var(--ink);}
.btn-ghost:hover{color:var(--signal);}
.btn-outline{border-radius:var(--radius-cards);padding:1rem 1.4rem;}
.btn-danger{color:var(--danger);}
.btn-danger:hover{color:color-mix(in srgb, var(--danger) 80%, black);}
.btn-sm{padding:.45rem .85rem;font-size:.82rem;}
.btn[disabled]{opacity:.55;cursor:default;box-shadow:none;}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:-2.6rem;position:relative;z-index:3;}
.stat-tile{background:var(--signal);border-radius:var(--radius-cards);padding:1.8rem 1.6rem;transition:background .2s;}
.stat-tile:hover{background:color-mix(in srgb, var(--signal) 85%, black);}
.stat-tile .label{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:500;color:rgba(255,255,255,.82);margin-bottom:.5rem;}
.stat-tile .value{font-family:var(--font-display);font-size:1.7rem;font-weight:400;letter-spacing:.02em;color:var(--color-white);}

/* formato */
.formato-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem;margin-top:2rem;}
.formato-card{background:var(--bg-elevated);border-radius:var(--radius-cards);padding:1.8rem;}
.formato-card .step-num{font-family:var(--font-display);color:var(--signal);font-weight:400;font-size:1rem;letter-spacing:.08em;margin-bottom:.5rem;}
.formato-card h3{font-size:1.7rem;margin-bottom:.5rem;}
.formato-card p{color:var(--ink-soft);font-size:.95rem;}

/* cards / forms */
.card{background:var(--bg-elevated);border-radius:var(--radius-cards);padding:2.4rem;}
.form-grid{display:grid;gap:1rem;margin-top:1.6rem;max-width:440px;}
.field{display:flex;flex-direction:column;gap:.4rem;font-size:.88rem;color:var(--ink-soft);font-weight:500;}
.field input,.field textarea,.field select{border:1.5px solid rgba(var(--ink-rgb),.16);border-radius:var(--radius-medium);padding:.7rem .95rem;background:var(--surface-input);color:var(--ink);font-size:.95rem;transition:border-color .15s,background .15s;}
.field input,.field select{border-radius:var(--radius-inputs);}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--signal);background:var(--signal-tint);}
/* the "Ver"/"Ocultar" toggle sits inside the password pill itself, right-aligned; the
   input is always the last child of .field--password with nothing after it, so anchoring
   the button to the container's own bottom edge lines it up with the input in both the
   labeled (player login/signup) and label-less (organizer login) variants. */
.field--password{position:relative;}
.field--password input{padding-right:3.6rem;}
.password-toggle{position:absolute;right:.35rem;bottom:.3rem;background:transparent;border:none;color:var(--ink-faint);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;padding:.45rem .6rem;line-height:1;border-radius:var(--radius-pill);}
.password-toggle:hover{color:var(--signal);}
.form-hint{color:var(--ink-faint);font-size:.82rem;margin-top:1rem;}
.insc-preview{font-family:var(--font-body);font-size:.8rem;resize:vertical;background:var(--bg-alt);min-height:6.5em;}
.insc-actions{display:flex;gap:.7rem;flex-wrap:wrap;}

/* table */
.table-wrap{overflow-x:auto;margin-top:1.8rem;border-radius:var(--radius-medium);background:var(--bg-elevated);}
table.standings{border-collapse:collapse;width:100%;min-width:640px;}
table.standings th,table.standings td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid rgba(var(--ink-rgb),.1);font-size:.88rem;}
table.standings th{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-weight:500;}
table.standings th.num,table.standings td.num{text-align:right;}
table.standings td.num{font-variant-numeric:tabular-nums;font-family:var(--font-display);font-weight:400;letter-spacing:.02em;}
table.standings td.pts{font-weight:500;color:var(--ink);}
table.standings tbody tr{transition:background .15s;}
table.standings tbody tr:hover{background:var(--bg);}
table.standings tbody tr:last-child td{border-bottom:none;}
table.standings tbody tr:first-child td.pts{color:var(--signal);}

/* EIGHT Ranking — individual table (see computePlayerRanking) plus the player-profile
   modal a name opens into. */
.rank-delta{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.78rem;font-weight:500;white-space:nowrap;}
.rank-delta--up{color:var(--signal);}
.rank-delta--down{color:var(--danger);}
.rank-delta--flat{color:var(--ink-faint);}
.rank-name{background:none;border:none;padding:0;font:inherit;font-weight:500;color:var(--ink);cursor:pointer;text-align:left;text-underline-offset:3px;}
.rank-name:hover{color:var(--signal);text-decoration:underline;}
.rank-pos{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:50%;font-family:var(--font-display);font-weight:400;}
.rank-pos--1{background:var(--signal);color:var(--color-white);}
.rank-pos--2{background:var(--signal-tint);color:var(--signal);}
.rank-pos--3{background:rgba(var(--ink-rgb),.08);color:var(--ink-soft);}
.ranking-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.ranking-head .btn{flex-shrink:0;}
.form-dots{display:inline-flex;gap:.28rem;}
.form-dots--empty{color:var(--ink-faint);}
.form-dot{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;border-radius:50%;font-size:.6rem;font-weight:700;color:var(--color-white);}
.form-dot.win{background:var(--signal);}
.form-dot.loss{background:var(--danger);}
.modal-panel--profile{max-width:460px;}
.profile-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-top:.4rem;}
.profile-stat{background:var(--bg);border-radius:var(--radius-medium);padding:1rem 1.1rem;}
.profile-stat-value{font-family:var(--font-display);font-size:1.5rem;color:var(--signal);line-height:1.1;}
.profile-stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-top:.3rem;}
.profile-sparkline{margin-top:1.1rem;background:var(--bg);border-radius:var(--radius-medium);padding:.9rem 1rem .7rem;}
.profile-sparkline svg{width:100%;height:3.2rem;display:block;}
.profile-sparkline-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-top:.4rem;}
.profile-line{display:grid;grid-template-columns:repeat(4,auto);gap:.2rem 1.4rem;margin-top:1.4rem;font-size:.85rem;}
.profile-line span{color:var(--ink-faint);grid-row:1;}
.profile-line strong{grid-row:2;font-family:var(--font-display);font-size:1.2rem;font-weight:400;color:var(--ink);}
.h2h-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.7rem;}
.h2h-row{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border-radius:var(--radius-medium);padding:.6rem .9rem;font-size:.86rem;}
.h2h-score{font-family:var(--font-display);color:var(--signal);}

/* "clasificación viva" toast — a match just got saved, so tell the players it moved
   whoever it moved (see announceRankingChange). JS removes it from the DOM on a
   setTimeout rather than an animation-driven fade, since a re-mount from any unrelated
   Firestore listener while it's up would otherwise restart a time-based CSS exit and
   leave it lingering past its welcome. */
.ranking-toast-stack{position:fixed;top:5.4rem;right:1.2rem;z-index:80;display:flex;flex-direction:column;gap:.6rem;pointer-events:none;max-width:calc(100vw - 2.4rem);}
.ranking-toast{background:var(--bg-elevated);border-radius:var(--radius-medium);padding:.7rem 1rem;box-shadow:0 10px 26px rgba(var(--ink-rgb),.22);font-size:.85rem;display:flex;flex-direction:column;gap:.15rem;min-width:190px;animation:rankingToastIn .3s var(--ease-out);}
.ranking-toast-name{font-weight:600;color:var(--ink);}
.ranking-toast-move{font-family:var(--font-display);font-size:1.15rem;color:var(--ink-soft);letter-spacing:.02em;}
.ranking-toast-sep{color:var(--ink-faint);font-size:.9rem;}
.ranking-toast-delta{font-size:.76rem;font-weight:600;}
.ranking-toast--up .ranking-toast-delta{color:var(--signal);}
.ranking-toast--down .ranking-toast-delta{color:var(--danger);}
@keyframes rankingToastIn{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:translateX(0);}}
@media (max-width:640px){
  .ranking-toast-stack{left:1.2rem;right:1.2rem;}
  .ranking-toast{min-width:0;}
}

/* jornadas / matches */
.jornadas{margin-top:2.2rem;display:flex;flex-direction:column;gap:1.6rem;}
.jornada h3{font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);font-weight:500;margin-bottom:.7rem;}
.match-list{display:flex;flex-direction:column;gap:.5rem;}
.match-row{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:.7rem;background:var(--bg-elevated);border-radius:var(--radius-medium);padding:.75rem 1.1rem;font-size:.92rem;transition:transform .2s;}
.match-row:hover{transform:translateX(2px);}
.match-row .vs{font-family:var(--font-body);color:var(--ink-faint);font-size:.75rem;text-align:center;}
.match-row .winner{color:var(--danger);}
.match-row .winner::after,
.bracket-match .winner::after{content:"W";display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;margin-left:.4rem;border-radius:50%;background:var(--danger);color:var(--color-white);font-size:.62rem;font-weight:500;line-height:1;vertical-align:middle;}
.match-row .score{font-family:var(--font-display);font-weight:400;color:var(--signal);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.match-row .marcador-detalle{color:var(--ink-faint);font-size:.78rem;margin-left:.4rem;}
.badge{font-family:var(--font-body);font-size:.72rem;font-weight:500;padding:.25rem .7rem;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.06em;}
.badge--pending{background:var(--danger-tint);color:var(--danger);}
.match-result{display:flex;align-items:center;gap:.5rem;}
.match-meta{grid-column:1/-1;font-size:.76rem;color:var(--ink-faint);}
.bracket-edit-row .match-meta{display:block;margin:-.35rem 0 .6rem;}
.ics-btn{display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;padding:0;color:var(--signal);font-size:.76rem;font-weight:500;cursor:pointer;text-underline-offset:2px;}
.ics-btn:hover{text-decoration:underline;}
.next-match-card{background:var(--signal);color:var(--signal-ink);border-radius:var(--radius-cards);padding:1.2rem 1.4rem;margin:1rem 0;}
.next-match-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75;}
.next-match-rival{font-family:var(--font-display);font-size:1.5rem;margin:.3rem 0;}
.next-match-when{font-size:.88rem;opacity:.9;margin-bottom:.8rem;}
.next-match-when--tbd{font-style:italic;opacity:.7;}
.next-match-card .btn{background:rgba(255,255,255,.16);color:var(--signal-ink);box-shadow:none;}
.next-match-card .btn:hover{background:rgba(255,255,255,.26);}

/* share-result — a quiet icon button that only shows up once a match actually has a
   score; generates the branded result-card image on click (see shareResult() in the
   main script) instead of linking anywhere. */
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;border:none;background:var(--signal-tint);color:var(--signal);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s,transform .15s;}
.share-btn:hover{background:var(--signal);color:var(--color-white);transform:translateY(-1px);}
.bracket-match .share-btn{position:absolute;top:.6rem;right:.6rem;}

/* bracket — single-round view reads each match as a card tossed into a loose carousel
   (alternating tilt); once there's a real progression (bracket--tree, 2+ rounds) the
   tilt drops out in favor of real connector lines drawn by layoutBracketConnectors(),
   which need flat, rectangular cards to line up against. Extra top/bottom room on the
   scroll track keeps tilted corners from clipping against overflow-y:hidden. */
.bracket{position:relative;display:flex;gap:2rem;overflow-x:auto;overflow-y:hidden;margin-top:2.2rem;padding:1.1rem .2rem 1.3rem;}
.bracket-round{flex:0 0 auto;min-width:240px;display:flex;flex-direction:column;gap:1.3rem;}
@media (min-width:641px){ .bracket--tree .bracket-round{justify-content:space-around;} }
.bracket-round h3{font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);font-weight:500;padding-bottom:.5rem;border-bottom:2px solid var(--signal);}
.bracket-match{position:relative;z-index:1;background:var(--bg-elevated);border-radius:var(--radius-medium);padding:.75rem .9rem;box-shadow:0 8px 18px rgba(var(--ink-rgb),.14);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out);}
.bracket:not(.bracket--tree) .bracket-match:nth-child(odd){transform:rotate(-1.3deg);}
.bracket:not(.bracket--tree) .bracket-match:nth-child(even){transform:rotate(1deg);}
.bracket-match:hover{transform:rotate(0deg) translateY(-4px) scale(1.03);box-shadow:0 14px 26px rgba(var(--ink-rgb),.2);}
.bracket-match div{padding:.25rem 0;font-size:.9rem;}
.bracket-match .winner{color:var(--danger);}
.bracket-score{font-size:.78rem;color:var(--ink-faint)!important;border-top:1px dashed rgba(var(--ink-rgb),.14);margin-top:.3rem;padding-top:.4rem!important;}
/* connector lines for the tree view — plain divs (not svg) so JS only ever deals with
   getBoundingClientRect numbers, positioned by layoutBracketConnectors(). Sits behind
   the match cards (z-index:1 above) via DOM order + z-index:0, not stacking-order luck. */
.bracket-connectors{position:absolute;top:0;left:0;z-index:0;pointer-events:none;}
.bconn-h{position:absolute;height:2px;background:rgba(var(--ink-rgb),.22);}
.bconn-v{position:absolute;width:2px;background:rgba(var(--ink-rgb),.22);}
/* mobile-only affordances for the swipe-between-rounds layout (see the max-width:640px
   rules that turn .bracket into full-width snap pages) — hidden on desktop, where every
   round is already visible side by side and there's nothing to hint at */
.bracket-swipe-hint{display:none;}
.bracket-dots{display:none;}

/* empty state */
.empty-state{margin-top:2rem;border:1.5px dashed rgba(var(--ink-rgb),.2);border-radius:var(--radius-cards);padding:2.4rem 1.8rem;text-align:center;color:var(--ink-soft);}
.empty-state .big{font-family:var(--font-display);font-size:1.7rem;letter-spacing:.02em;color:var(--ink);margin-bottom:.5rem;}
.empty-state p{max-width:44ch;margin:0 auto;font-size:.94rem;}

/* footer */
.site-footer{background:var(--header-bg);color:var(--header-ink-soft);padding:3rem 0 2.2rem;position:relative;overflow:hidden;border-top:1.5px dotted rgba(var(--ink-rgb),.18);}
.footer-inner{max-width:1080px;margin:0 auto;padding:0 1.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem;align-items:flex-start;position:relative;z-index:1;}
.footer-inner .brand-mark{font-size:1.6rem;}
.footer-note{font-size:.85rem;max-width:34ch;}
.footer-note strong{color:var(--header-ink);}
.footer-copy{font-size:.78rem;color:var(--ink-faint);margin-top:1.6rem;text-align:center;position:relative;z-index:1;}

/* organizer */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:1.2rem;animation:overlayIn .18s ease;}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
.modal-panel{background:var(--bg-elevated);border-radius:var(--radius-cards);max-width:640px;width:100%;max-height:88vh;overflow-y:auto;animation:modalIn .22s var(--ease-out);}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-panel--login{max-width:380px;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.6rem;border-bottom:1px solid rgba(var(--ink-rgb),.12);}
.modal-header h2{font-size:1.8rem;}
.modal-close{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;background:linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 100%, white 10%), color-mix(in srgb, var(--bg-elevated) 100%, black 5%));border:none;border-radius:50%;font-size:1.1rem;cursor:pointer;color:var(--ink-faint);line-height:1;box-shadow:var(--neu-raised-sm);transition:color .15s,transform .15s,box-shadow .15s;}
.modal-close:hover{color:var(--signal);transform:rotate(90deg);}
.modal-close:active{box-shadow:var(--neu-pressed-sm);}
.modal-body{padding:1.6rem;}
.login-body{padding:2rem 1.8rem 2.2rem;text-align:center;}
.login-body p{color:var(--ink-soft);font-size:.9rem;margin-bottom:1.3rem;}
.login-error{color:var(--danger);font-size:.84rem;margin-top:.6rem;}
.inline-link-btn{display:inline-block;background:none;border:none;padding:0;color:var(--ink-soft);font-size:.82rem;font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.inline-link-btn:hover{color:var(--signal);}
.tabs{display:flex;gap:.5rem;padding:1.2rem 1.6rem 1rem;overflow-x:auto;}
.tab-btn{padding:.6rem 1.1rem;border-radius:var(--radius-pill);font-size:.86rem;font-weight:500;color:var(--ink-faint);white-space:nowrap;background:linear-gradient(145deg, color-mix(in srgb, var(--bg) 100%, white 10%), color-mix(in srgb, var(--bg) 100%, black 4%));border:none;cursor:pointer;box-shadow:var(--neu-raised-sm);transition:color .15s,box-shadow .15s,background .15s;}
.tab-btn:hover:not(.active){color:var(--ink);}
.tab-btn.active{color:var(--signal);background:var(--signal-tint);box-shadow:var(--neu-pressed-sm);}
.subtabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;}
.subtab-btn{padding:.45rem 1rem;border-radius:var(--radius-pill);font-size:.82rem;font-weight:500;color:var(--ink-faint);background:linear-gradient(145deg, color-mix(in srgb, var(--bg) 100%, white 10%), color-mix(in srgb, var(--bg) 100%, black 4%));border:none;cursor:pointer;box-shadow:var(--neu-raised-sm);transition:color .15s,box-shadow .15s,background .15s;}
.subtab-btn:hover:not(.active){color:var(--ink);}
.subtab-btn.active{color:var(--signal);background:var(--signal-tint);box-shadow:var(--neu-pressed-sm);}
.org-list{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0 1.4rem;}
.org-row{display:flex;align-items:center;gap:.6rem;background:var(--bg);border-radius:var(--radius-medium);padding:.6rem .9rem;font-size:.88rem;flex-wrap:wrap;}
.org-row .grow{flex:1;min-width:120px;}
.org-row small{display:block;color:var(--ink-faint);font-size:.76rem;}
.org-inline-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;margin-top:1rem;padding-top:1rem;border-top:1px dashed rgba(var(--ink-rgb),.16);}
.org-inline-form .field{min-width:130px;flex:1;}
.bm-tbd-check{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--ink-soft);white-space:nowrap;align-self:flex-end;padding-bottom:.7rem;}
.bm-tbd-check input{width:auto;accent-color:var(--signal);}
.save-status{font-size:.82rem;color:var(--ink-faint);margin-top:1rem;min-height:1.2em;}
.save-status.ok{color:var(--signal);}
.save-status.err{color:var(--danger);}
.round-block{border-radius:var(--radius-medium);background:var(--bg);padding:1.1rem;margin-bottom:1rem;}
.round-block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem;}
.round-block-head h4{font-size:1.65rem;}

/* bracket match editor: fill in each set's score directly — no hyphens or slashes to type,
   the "7-5 / 7-6" display string is composed from these automatically on save */
.bracket-edit-row{background:var(--surface-input);border-radius:var(--radius-medium);padding:.8rem .9rem;margin-bottom:.6rem;}
.bracket-edit-teams{font-size:.9rem;font-weight:500;margin-bottom:.6rem;}
.bracket-edit-teams .vs{color:var(--ink-faint);font-weight:500;}
.bracket-edit-schedule{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:.7rem;}
.bracket-edit-schedule .field{min-width:130px;}
.bracket-edit-names{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:.7rem;}
.bracket-edit-side{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;flex:1;min-width:220px;}
.bracket-edit-side .field{flex:1;min-width:110px;}
.bracket-edit-sets{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-bottom:.6rem;}
.bm-set-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-right:.1rem;}
.bm-set-sep{color:var(--ink-faint);}
.bm-set-input{width:2.4rem;text-align:center;padding:.35rem;border:1.5px solid rgba(var(--ink-rgb),.16);border-radius:var(--radius-inputs);background:var(--bg);color:var(--ink);margin-right:.6rem;}
.bracket-edit-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.bracket-edit-actions select{border:1.5px solid rgba(var(--ink-rgb),.16);border-radius:var(--radius-inputs);padding:.5rem .8rem;background:var(--bg);color:var(--ink);font-size:.85rem;}

@media (max-width:760px){
  .header-nav{display:none;}
  .mobile-menu-btn{display:flex;}
}
@media (max-width:640px){
  .section{padding:3.4rem 0;}
  .header-inner{gap:.6rem;}
  .header-logo .brand-mark{font-size:1.05rem;}
  .header-logo .brand-sub{display:none;}
  .header-lock span.lock-label{display:none;}
  .header-lock{padding:.4rem .55rem;gap:.3rem;}
  .lock-label-short{display:inline;font-size:.6rem;font-weight:600;letter-spacing:.03em;}
  .hero{margin:14px 14px 0;}
  .hero-num{top:-1.2rem;right:-1.2rem;font-size:min(58vw,46vh);}
  .insc-actions{flex-direction:column;align-items:stretch;}
  .match-row{grid-template-columns:1fr;text-align:left;gap:.2rem;}
  .match-row .vs{display:none;}
  /* cuadros as full-width slides — one round per "page", swipe to move between them,
     instead of the desktop peek-next-column layout which cuts the last round in half
     on a narrow screen */
  .bracket{gap:0;scroll-snap-type:x mandatory;}
  .bracket-round{flex:0 0 100%;min-width:100%;scroll-snap-align:center;padding:0 .8rem;}
  .bracket-match:nth-child(odd){transform:rotate(-0.7deg);}
  .bracket-match:nth-child(even){transform:rotate(0.5deg);}
  /* swipe affordances: a hint line that fades away once the visitor actually swipes
     (see bracketDotsSetup in JS), plus a small dot per round showing count + position —
     the same pill/dot language as the rest of the site's pagination-style UI */
  .bracket-swipe-hint{display:flex;align-items:center;justify-content:flex-end;gap:.3rem;font-size:.78rem;color:var(--ink-faint);margin:-.6rem 0 .6rem;transition:opacity .3s var(--ease-out);}
  .bracket-swipe-hint.seen{opacity:0;}
  .bracket-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.9rem;}
  .bracket-dot{width:7px;height:7px;border-radius:50%;background:rgba(var(--ink-rgb),.18);transition:background .25s var(--ease-out),transform .25s var(--ease-out);}
  .bracket-dot.active{background:var(--signal);transform:scale(1.3);}
}
/* ---------- app-specific additions ---------- */
.status-banner{background:var(--signal-tint);color:var(--signal);border-radius:var(--radius-medium);padding:.8rem 1.1rem;font-size:.85rem;margin-top:1.6rem;}
.status-banner.err{background:var(--danger-tint);color:var(--danger);}
.insc-success{border-radius:var(--radius-cards);background:var(--bg-elevated);padding:1.8rem;text-align:center;animation:modalIn .35s var(--ease-out);}
.insc-success .big{font-family:var(--font-display);font-size:1.7rem;letter-spacing:.02em;margin-bottom:.5rem;}
.insc-success .big .dot-accent,.empty-state .big .dot-accent{color:var(--signal);}
.insc-success p{color:var(--ink-soft);font-size:.92rem;}
.req-row{display:flex;align-items:center;gap:.7rem;background:var(--bg);border-radius:var(--radius-medium);padding:.7rem .9rem;font-size:.88rem;flex-wrap:wrap;margin-bottom:.6rem;}
.req-row .grow{flex:1;min-width:140px;}
.req-row small{display:block;color:var(--ink-faint);font-size:.76rem;}
.status-pill{font-family:var(--font-body);font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;padding:.25rem .65rem;border-radius:var(--radius-pill);}
.status-pill.pending{background:var(--danger-tint);color:var(--danger);}
.status-pill.accepted{background:var(--signal-tint);color:var(--signal);}
.status-pill.rejected{background:rgba(var(--ink-rgb),.08);color:var(--ink-faint);}
.loading-note{color:var(--ink-faint);font-size:.9rem;margin-top:1.6rem;}

/* rules (formato) — the 3 same-shaped rule-cards (short lists) sit in this grid; the
   ranking explainer is different content entirely (see .rule-card--wide below) and sits
   as a full-width row underneath instead of forcing a 4th column here. */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1.8rem;}
.rule-card{background:var(--bg-elevated);border-radius:var(--radius-cards);padding:1.7rem 1.8rem;}
/* the ranking card sits below the 3-column grid rather than inside it (see renderFormato)
   — as a full-width sibling, 4 short facts read as two short rows instead of a tall
   single-column list, which is what actually saves the vertical space the 2x2 layout
   this replaces was spending on the same content. */
.rule-card--wide{margin-top:1.2rem;}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem 1.6rem;margin-top:.3rem;}
.fact-item{display:flex;flex-direction:column;gap:.3rem;}
.fact-item strong{color:var(--ink);font-weight:600;font-size:.92rem;}
.fact-item span{color:var(--ink-soft);font-size:.88rem;line-height:1.5;}
.rule-card h3{font-size:1.7rem;margin-bottom:1rem;}
.rule-list{display:flex;flex-direction:column;gap:.65rem;font-size:.92rem;color:var(--ink-soft);list-style:none;padding:0;margin:0;}
.rule-list li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;}
.rule-list li strong{color:var(--signal);font-weight:500;white-space:nowrap;}
.rule-list--ordered li{justify-content:flex-start;}
.rule-list--ordered li::before{content:counter(rule-item);counter-increment:rule-item;flex-shrink:0;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--signal-tint);color:var(--signal);font-family:var(--font-display);font-weight:400;font-size:.85rem;display:flex;align-items:center;justify-content:center;}
.rule-list--ordered{counter-reset:rule-item;}
.rule-list--bullets li{position:relative;padding-left:1.1rem;justify-content:flex-start;}
.rule-list--bullets li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--signal);}

/* cta band — the one deliberately warm, punctual spot for the taupe accent */
.cta-band{background:var(--color-terracotta);position:relative;overflow:hidden;margin:0 20px;border-radius:var(--radius-cards);}
.cta-band-inner{max-width:1080px;margin:0 auto;padding:2.4rem 1.8rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;position:relative;z-index:1;}
.cta-band h3{font-size:1.8rem;color:var(--color-white);}
.cta-band p{color:rgba(255,255,255,.82);font-size:.92rem;margin-top:.3rem;max-width:44ch;}
.cta-band .btn-primary{background:linear-gradient(145deg, color-mix(in srgb, var(--brand-dark-olive) 100%, white 12%), color-mix(in srgb, var(--brand-dark-olive) 100%, black 8%));color:var(--color-white);box-shadow:9px 9px 20px rgba(0,0,0,.32),-9px -9px 20px rgba(255,255,255,.12);}
.cta-band .btn-primary:active{box-shadow:inset 5px 5px 12px rgba(0,0,0,.34),inset -5px -5px 12px rgba(255,255,255,.1);}

/* faq — fifth illustration, mirrored onto the right like Inscripción's (content stays
   put on the left, ghost "05" moves over to sit with the illustration instead of hiding
   behind the heading). The question bars get the same alternating-tilt carousel treatment
   as the bracket matches, via the same fx-reveal data-tilt-z hookup (a plain CSS transform
   here would just get overwritten by that scroll-driven inline style). */
.faq-player-illustration{position:absolute;right:1.5rem;bottom:0;width:min(38vw,700px);height:auto;opacity:.45;z-index:0;pointer-events:none;user-select:none;transform:scaleX(-1);}
@media (max-width:900px){ .faq-player-illustration{display:none;} }
#faq .section-mark{left:auto;right:1.5rem;}
#faq .section-inner{position:relative;z-index:1;}
.faq-list{margin-top:1.8rem;display:flex;flex-direction:column;gap:1rem;max-width:640px;}
.faq-item{background:var(--bg-elevated);border-radius:var(--radius-medium);overflow:hidden;box-shadow:0 8px 18px rgba(var(--ink-rgb),.14);transition:box-shadow .25s var(--ease-out);}
.faq-item:hover{box-shadow:0 14px 26px rgba(var(--ink-rgb),.2);}
.faq-q{width:100%;text-align:left;background:transparent;border:none;padding:1.1rem 1.4rem;font-size:1.02rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;font-family:var(--font-body);font-weight:500;}
.faq-icon{color:var(--signal);font-size:1.1rem;flex-shrink:0;transition:transform .25s var(--ease-out);}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(180deg);}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.faq-a{padding:0 1.4rem 1.3rem;color:var(--ink-soft);font-size:.92rem;line-height:1.6;animation:faqOpen .22s var(--ease-out);}

/* contact / venue */
.contact-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.4rem;}
.venue-block{display:grid;grid-template-columns:1fr 1.3fr;gap:1.6rem;margin-top:2.2rem;align-items:stretch;}
.venue-info{background:var(--bg-elevated);border-radius:var(--radius-cards);padding:1.8rem;display:flex;flex-direction:column;gap:.9rem;justify-content:center;}
.venue-info h3{font-size:1.7rem;}
.venue-info p{color:var(--ink-soft);font-size:.92rem;line-height:1.6;}
.venue-map{border-radius:var(--radius-cards);overflow:hidden;min-height:260px;}
.venue-map iframe{width:100%;height:100%;min-height:260px;border:0;display:block;}
@media (max-width:760px){ .venue-block{grid-template-columns:1fr;} }

/* back to top */
.back-to-top{position:fixed;right:1.4rem;bottom:1.4rem;width:2.8rem;height:2.8rem;border-radius:50%;background:linear-gradient(145deg, color-mix(in srgb, var(--signal) 100%, white 14%), color-mix(in srgb, var(--signal) 100%, black 10%));color:var(--signal-ink);border:none;font-size:1.2rem;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);box-shadow:9px 9px 20px rgba(0,0,0,.26),-9px -9px 20px rgba(255,255,255,.3);transition:opacity .2s,transform .2s,background .2s,box-shadow .15s;z-index:60;}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{transform:translateY(-3px);}
.back-to-top:active{box-shadow:inset 5px 5px 12px rgba(0,0,0,.3),inset -5px -5px 12px rgba(255,255,255,.2);transform:translateY(0);}

/* custom cursor — the logo's own green dot, standing in for the pointer. Position is
   set every mousemove with no CSS transition (must track the real cursor with zero lag);
   the hover "light up" (bigger, padel-ball khaki, glowing) is a separate property with
   its own transition, so it can animate smoothly without fighting the instantaneous
   position updates. Desktop-only: touch devices have no real cursor to replace. */
@media (hover:hover) and (pointer:fine){
  *{cursor:none!important;}
  input,textarea{cursor:text!important;}
  #cursor-dot{position:fixed;top:0;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--signal);pointer-events:none;z-index:9999;transition:width .2s var(--ease-out),height .2s var(--ease-out),margin .2s var(--ease-out),background .2s,box-shadow .2s;}
  #cursor-dot.is-active{width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--color-khaki);box-shadow:0 0 16px 4px rgba(113,119,68,.55),0 0 4px 1px #fff;}
}

/* footer legal link */
.footer-legal{font-size:.78rem;color:var(--ink-faint);margin-top:.5rem;text-align:center;position:relative;z-index:1;}
.footer-legal a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px;}
.footer-legal a:hover{color:var(--signal);}

/* admin: faq textarea */
.org-list textarea{width:100%;padding:.6rem .8rem;border:1.5px solid rgba(var(--ink-rgb),.16);border-radius:var(--radius-medium);background:var(--surface-input);color:var(--ink);font:inherit;font-size:.88rem;resize:vertical;min-height:3.4em;}
.org-list .faq-edit-row{align-items:stretch;flex-direction:column;gap:.5rem;}
.org-list .faq-edit-row input{width:100%;padding:.6rem .8rem;border:1.5px solid rgba(var(--ink-rgb),.16);border-radius:var(--radius-medium);background:var(--surface-input);color:var(--ink);font-size:.9rem;}
.org-list .faq-edit-row .row-actions{display:flex;gap:.4rem;}

/* ---------- scroll-driven fx (see JS: opacity/transform are recomputed every scroll
   frame from the element's live position — there is no CSS transition here on purpose,
   the visual state IS the scroll position, so it must track it 1:1 with zero lag,
   forwards and backwards alike) ---------- */
.fx-reveal{opacity:0;will-change:transform,opacity;}
.fx-parallax{will-change:transform;}

/* film-grain overlay — the flat beige/olive canvas otherwise reads as a solid vector
   fill; this adds a near-invisible paper-like texture across the whole page so surfaces
   feel tactile rather than flat. Fixed + pointer-events:none so it never affects layout
   or interaction, just sits on top of everything as a light multiply. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:500;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- dark mode ----------
   Toggled by the header's sun/moon button (see toggleTheme() in the main script) via a
   data-theme attribute on <html>, persisted to localStorage and defaulting to the
   visitor's OS preference until they actually use the toggle.

   Redefining the handful of --color-* tokens below flips almost the entire site for
   free, since everything above already reads color through --bg/--ink/--signal/--border
   etc. rather than hardcoding hex, and every one of those "subtle ink tint" borders/
   shadows/dividers scattered through the file goes through rgba(var(--ink-rgb),X) rather
   than a literal rgba(85,61,32,X) for the same reason (see --ink-rgb in :root).

   The one thing that does NOT fall out of that swap: neumorphic buttons. A soft-UI
   raised slab is shaped by a dark shadow AND a light highlight pointing opposite each
   other — on a dark surface the "light" side has nothing bright enough to borrow, so it
   reads as a bug (a faint grey smudge) rather than a style. Every button-like control
   switches to the site's own liquid-glass recipe instead — already used for the hero
   buttons and the scrolled header, so this isn't a new visual language, just applying an
   existing one more widely now that there's a surface (the whole page) worth blurring
   behind it. */
:root[data-theme="dark"]{
  --color-beige:#1c1e14;
  --color-card:#26281b;
  --color-dark-olive:#eee7d3;
  --color-olive:#a3ae70;
  --color-khaki:#8b8f63;
  --color-terracotta:#dd8355;
  --ink-rgb:238,231,211;
  --signal-tint:rgba(163,174,112,.2);
  --danger-tint:rgba(221,131,85,.2);
}
[data-theme="dark"] body::after{ opacity:.08; mix-blend-mode:overlay; }
[data-theme="dark"] .modal-overlay{ background:rgba(0,0,0,.72); }
[data-theme="dark"] .site-header.is-scrolled .header-inner{
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);
}

/* glass buttons — same recipe as .hero-actions/.is-scrolled: a blurred, saturated,
   see-through fill behind a bright thin rim, instead of the light-mode neumorphic pair. */
[data-theme="dark"] .btn,
[data-theme="dark"] .header-lock,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .mobile-menu-btn,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .subtab-btn,
[data-theme="dark"] .back-to-top{
  background:var(--glass-sheen), rgba(255,255,255,.07);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1);
  color:var(--ink);
}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .header-lock:hover,
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .back-to-top:hover{
  background:var(--glass-sheen), rgba(255,255,255,.12);
}
[data-theme="dark"] .btn:active,
[data-theme="dark"] .header-lock:active,
[data-theme="dark"] .theme-toggle:active,
[data-theme="dark"] .mobile-menu-btn:active,
[data-theme="dark"] .modal-close:active{
  background:var(--glass-sheen), rgba(255,255,255,.04);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.4);
}
[data-theme="dark"] .btn[disabled]{ box-shadow:none; }
[data-theme="dark"] .btn-primary{
  background:var(--glass-sheen), linear-gradient(135deg, color-mix(in srgb, var(--signal) 55%, transparent), color-mix(in srgb, var(--signal) 28%, transparent));
  color:#fff;
  border-color:rgba(255,255,255,.3);
}
[data-theme="dark"] .btn-primary:active{
  background:var(--glass-sheen), linear-gradient(135deg, color-mix(in srgb, var(--signal) 40%, transparent), color-mix(in srgb, var(--signal) 20%, transparent));
}
[data-theme="dark"] .cta-band .btn-primary{
  background:var(--glass-sheen), rgba(0,0,0,.22);
  color:#fff;
  border-color:rgba(255,255,255,.3);
}
[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .subtab-btn.active{
  background:var(--glass-sheen), color-mix(in srgb, var(--signal) 24%, transparent);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.3);
  color:var(--signal);
}