/* theboldseries.com · manual de marca BOLD v1.1 (rige todo): negro, Alabaster,
   Ash para apoyo, Dim Grey solo en filetes, un único Carmine por pantalla y a
   gran tamaño, alineación a la izquierda, sin degradados, sombras ni esquinas. */
:root{
  --bg:#010402; --raise:#0b0e0d; --text:#EBEAEA; --text-2:#c4c5c5; --ash:#767A7C;
  --line:#606467; --rule:rgba(235,234,234,.14); --carmine:#B80A2E;
  --font:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Inter,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Geist Mono",monospace;
  --gutter:clamp(20px,10vw,160px);
  --max:1240px;
  --expo:cubic-bezier(.16,1,.3,1);
  --t-hero:clamp(3rem,8.2vw,6rem);
  --t-h2:clamp(2.25rem,5.4vw,4.5rem);
  --t-h3:clamp(1.5rem,2.6vw,2.25rem);
  --t-lead:clamp(1.125rem,1.5vw,1.375rem);
  --t-fig:clamp(4.5rem,13vw,9.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:#3a3e3d var(--bg);accent-color:var(--text);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 1.0625rem/1.5 var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--text);color:var(--bg)}
:focus-visible{outline:2px solid var(--text);outline-offset:4px}
a{color:inherit}
img,video{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.wrap{padding-inline:var(--gutter)}
.inner{max-width:var(--max);margin-inline:auto}
section[id]{scroll-margin-top:72px}
.carmine{color:var(--carmine)}

/* tipografía */
h1,h2,h3{font-weight:700;text-wrap:balance}
.h-hero{font-size:var(--t-hero);line-height:.95;letter-spacing:-.035em}
.h2{font-weight:700;font-size:var(--t-h2);line-height:.98;letter-spacing:-.032em}
.h3{font-size:var(--t-h3);line-height:1.08;letter-spacing:-.024em}
.lead{font-size:var(--t-lead);line-height:1.42;color:var(--text-2);max-width:38em;text-wrap:pretty}
.prose{max-width:68ch;color:var(--text-2)}
.prose p+p{margin-top:1em}
.note{font-size:.875rem;line-height:1.45;color:var(--ash);max-width:72ch}
.fig{font-weight:600;font-size:var(--t-fig);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* acciones: rectas, sin sombras */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 26px;border:1px solid var(--text);background:var(--text);color:var(--bg);font:600 1rem/1 var(--font);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--text)}
.btn-line{background:transparent;color:var(--text);border-color:var(--line)}
.btn-line:hover{border-color:var(--text)}
.link{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--line);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--text)}
.acciones{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}

/* cabecera */
.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s}
.top.solid{background:rgba(1,4,2,.94);border-bottom:1px solid var(--rule)}
.top .bar{display:flex;align-items:center;gap:28px;height:68px}
.marca{white-space:nowrap;display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;letter-spacing:-.02em}
.marca img{width:36px;height:36px}
.nav{display:flex;gap:26px;margin-left:auto;font-size:.9375rem}
.nav a{text-decoration:none;color:var(--text-2)}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.idiomas{display:flex;gap:4px;font:600 .8125rem/1 var(--font)}
.idiomas a{padding:6px 7px;text-decoration:none;color:var(--ash)}
.idiomas a[aria-current]{color:var(--text)}
.top .btn{min-height:40px;padding:0 16px;font-size:.875rem}
.menu-btn{display:none;background:none;border:0;color:var(--text);font:600 .9375rem var(--font);cursor:pointer;padding:10px 0}

/* portada */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:rgba(1,4,2,.48)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(56px,12vh,128px)}
.hero .cuando{font-weight:600;color:var(--text-2);margin-bottom:22px;letter-spacing:-.005em}
.hero .lead{margin-top:22px;color:var(--text)}
.hero .acciones{margin-top:36px}
.pausa{position:absolute;z-index:2;right:var(--gutter);bottom:28px;background:none;border:1px solid var(--line);color:var(--text-2);font:600 .75rem/1 var(--font);padding:9px 12px;cursor:pointer}
.pausa:hover{color:var(--text);border-color:var(--text)}
.hero h1>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .hero h1>span{animation:entra 1.1s var(--expo) both}
  .hero h1>span+span{animation-delay:.12s}
  .hero .lead,.hero .acciones{animation:entra 1.1s .24s var(--expo) both}
}
@keyframes entra{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(.25em)}to{opacity:1;clip-path:inset(0 0 -10% 0);transform:none}}

/* bloques */
.bloque{padding-block:clamp(96px,16vh,176px);border-top:1px solid var(--rule)}
.bloque>.inner>.h2{max-width:15ch}
#marcas>.inner>.h2{max-width:17ch}
.bloque .lead{margin-top:24px}
.dos{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,7vw,120px);align-items:start}

/* inscripción: una columna, precio debajo de los datos (JC, 01/10/2026) */
.apilado .datos{max-width:860px}
.apilado .precio{margin-top:72px;max-width:860px}
.precio{border-top:1px solid var(--line);padding-top:28px}
.precio .por{margin-top:12px;font-size:1.125rem;color:var(--text)}
.precio .note{margin-top:10px}
.datos{margin-top:56px;border-top:1px solid var(--line)}
.datos div{display:grid;grid-template-columns:minmax(120px,.38fr) 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.datos dt{color:var(--ash);font-size:.9375rem}
.datos dd{color:var(--text)}
#inscribete .acciones{margin-top:44px}

/* categorías */
.categorias{margin-top:64px;border-top:1px solid var(--line)}
.categorias li{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.categorias .nombre{font-size:var(--t-h3);font-weight:700;letter-spacing:-.024em;line-height:1.1}
.categorias .comp{font-family:var(--mono);font-size:.9375rem;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}
.categorias .det{grid-column:1/-1;font-size:.9375rem;color:var(--ash);margin-top:-8px}

/* estándares */
.estandares{margin-top:112px}
.pestanas{display:flex;flex-wrap:wrap;gap:0;margin-top:28px;border-bottom:1px solid var(--line)}
.pestanas button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--ash);font:600 1rem/1 var(--font);padding:16px 20px 16px 0;margin-right:20px;cursor:pointer}
.pestanas button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--text)}
.pestanas button:hover{color:var(--text)}
.panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px clamp(32px,6vw,96px);padding-top:40px}
.panel[hidden]{display:none}
.panel h3{font-size:.8125rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ash);padding-bottom:10px;border-bottom:1px solid var(--line)}
.panel table{width:100%;border-collapse:collapse}
.panel td{padding:12px 0;border-bottom:1px solid var(--rule)}
.panel td+td{text-align:right;font-family:var(--mono);font-size:.9375rem;font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap}
.panel .si{color:var(--text)}
.estandares .note{margin-top:32px}

/* marcas */
#marcas .h2+.h2{margin-top:.15em}
.pruebas{margin-top:96px;display:grid;gap:0;border-top:1px solid var(--line)}
.prueba{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px clamp(40px,7vw,120px);padding:56px 0;border-bottom:1px solid var(--rule)}
.prueba .h3{max-width:16ch}
.pasos{display:grid;gap:22px}
.pasos div{display:grid;grid-template-columns:minmax(110px,.32fr) 1fr;gap:20px}
.pasos dt{color:var(--text);font-weight:600}
.pasos dd{color:var(--text-2)}
.cifras{display:flex;flex-wrap:wrap;gap:28px 56px}
.cifras .num{font-size:clamp(2.5rem,5vw,3.75rem);font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.cifras .que{margin-top:10px;color:var(--text-2);max-width:34ch;font-size:.9375rem}
.prueba .note{margin-top:20px}
.contacto{margin-top:112px}
.form{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;max-width:860px}
.form label{display:grid;gap:8px;font-size:.875rem;color:var(--ash)}
.form .ancho{grid-column:1/-1}
.form input,.form textarea{background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--text);font:400 1.0625rem/1.4 var(--font);padding:10px 0;caret-color:var(--text);border-radius:0}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--text)}
.form textarea{min-height:110px;resize:vertical}
.form .acciones{grid-column:1/-1;margin-top:12px}

/* blog */
.entradas{margin-top:56px;border-top:1px solid var(--line)}
.entradas li{list-style:none;border-bottom:1px solid var(--rule)}
.entradas a{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 32px;padding:28px 0;text-decoration:none}
.entradas time{color:var(--ash);font-size:.9375rem;font-variant-numeric:tabular-nums}
.entradas .t{font-size:clamp(1.25rem,2vw,1.625rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;transition:color .2s}
.entradas .d{grid-column:2;color:var(--text-2);max-width:62ch}
.entradas a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
#blog .acciones{margin-top:36px}

/* artículo y rulebook */
.pagina{padding-top:148px;padding-bottom:120px}
.pagina .h2{max-width:20ch}
.articulo{margin-top:40px;max-width:70ch;color:var(--text-2);font-size:1.125rem;line-height:1.62}
.articulo h2,.articulo h3{color:var(--text);margin:2em 0 .6em;font-size:1.5rem;line-height:1.2;letter-spacing:-.02em}
.articulo p,.articulo ul,.articulo ol{margin-bottom:1.1em}
.articulo li{margin-left:1.2em;margin-bottom:.4em}
.articulo strong{color:var(--text)}
.articulo a{text-decoration-color:var(--line);text-underline-offset:.2em}
.articulo hr{border:0;border-top:1px solid var(--rule);margin:2.5em 0}
.migas{font-size:.875rem;color:var(--ash)}
.migas a{color:var(--text-2)}

/* páginas separadas */
.pagina>.inner>.h2,.pagina>.inner>.h-hero{max-width:16ch}
.pagina .sub{margin-top:.2em;max-width:20ch}
.pagina>.inner>.lead{margin-top:28px}
.cierre{margin-top:96px}
.mas ul{list-style:none;border-top:1px solid var(--line)}
.mas a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:28px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:var(--t-h3);font-weight:700;letter-spacing:-.024em;line-height:1.1}
.mas a span:last-child{color:var(--ash);transition:transform .3s var(--expo),color .2s}
.mas a:hover span:last-child{transform:translateX(6px);color:var(--text)}
.destacada{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px clamp(32px,5vw,72px);align-items:end;margin-top:56px;text-decoration:none}
.destacada img,.rejilla img,.cabecera-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--raise)}
.destacada time,.rejilla time{display:block;color:var(--ash);font-size:.875rem;margin:16px 0 8px}
.destacada .d{color:var(--text-2);margin-top:12px;max-width:52ch}
.destacada:hover .h3,.rejilla a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.rejilla{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px clamp(24px,3vw,40px);margin-top:72px;padding-top:56px;border-top:1px solid var(--line)}
.rejilla a{text-decoration:none;display:block}
.rejilla .t{display:block;font-size:1.25rem;font-weight:700;letter-spacing:-.018em;line-height:1.2}
.titular{margin-top:20px}
.cabecera-img{margin-top:48px;max-height:620px}
.seguir{margin-top:96px}
@media (max-width:900px){.destacada{grid-template-columns:1fr}.rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rejilla{grid-template-columns:1fr}}

.contacto .lead{margin-top:16px}
@media (max-width:760px){.hero::after{background:rgba(1,4,2,.6)}}
@media (max-width:380px){.pestanas button{margin-right:10px;padding-right:4px;font-size:.9375rem}}

/* pie */
.pie{border-top:1px solid var(--rule);padding-block:72px 48px}
.pie .filas{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:40px}
.pie .lema{font-size:var(--t-h3);font-weight:700;letter-spacing:-.024em;line-height:1.08;max-width:14ch}
.pie ul{list-style:none;display:grid;gap:10px;color:var(--text-2);font-size:.9375rem}
.pie a{text-decoration:none}
.pie a:hover{color:var(--text);text-decoration:underline;text-underline-offset:.2em}
.pie .note{margin-top:64px}

@media (max-width:900px){
  .dos,.prueba{grid-template-columns:1fr}
  .panel{grid-template-columns:1fr}
  .pie .filas{grid-template-columns:1fr 1fr}
  .pie .filas>div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  .nav,.top .bar>.btn{display:none}
  .menu-btn{display:block;margin-left:auto}
  .top.abierto{background:var(--bg);bottom:0}
  .top.abierto .nav{display:grid;position:absolute;top:68px;left:var(--gutter);right:var(--gutter);gap:4px;font-size:1.75rem;font-weight:700}
  .top.abierto .nav a{color:var(--text);padding:10px 0;border-bottom:1px solid var(--rule)}
  .idiomas{margin-left:8px}
  .marca span{display:none}
  .pestanas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pestanas button{white-space:nowrap;margin-right:14px;padding-right:6px}
  .pie .filas{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .entradas a{grid-template-columns:1fr}
  .entradas .d{grid-column:1}
  .datos div,.pasos div{grid-template-columns:1fr;gap:4px}
  .categorias li{grid-template-columns:1fr}
  .categorias .comp{text-align:left}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}