/* =====================================================================
   bases.css — Bases y condiciones del sorteo (/bases).
   Barber House Club, V39.

   AUTOCONTENIDA, igual que turno.css. No carga public.css (77 KB) para una
   pagina de lectura larga que se abre desde un link de Instagram, muchas
   veces con datos moviles. Los pocos tokens que necesita se repiten aca.
   Si cambia la identidad, hay que tocar tambien este archivo.

   Direccion: documento editorial. Un texto legal de 15 articulos se gana o
   se pierde en la lectura, asi que manda la tipografia: medida corta, aire
   entre articulos, numerales enormes de madera como ancla visual, y un
   indice fijo para no perderse. La madera es el UNICO acento, igual que en
   el resto del sitio.
   ===================================================================== */
:root {
    --ink:        #171717;
    --charcoal:   #242323;
    --graphite:   #393735;
    --gray-warm:  #AAA6A3;
    --gray-light: #D8D4D1;
    --white-warm: #F3F1EF;
    --wood:       #CDAF95;
    --wood-line:  rgba(205,175,149,.42);
    --wood-soft:  rgba(205,175,149,.12);
    --hair:       rgba(255,255,255,.10);
    --fd: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --fb: 'Jost', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` pierde contra display:grid/flex/block explicitos.
   Misma trampa documentada en turno.css. */
[hidden] { display: none !important; }

/* Nada de esta pagina debe poder scrollear en horizontal. La URL se abre
   desde Instagram, casi siempre en el navegador embebido del celular, donde
   un desborde lateral se siente roto. */
html { background: var(--ink); scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--ink);
    color: var(--gray-light);
    font-family: var(--fb);
    font-size: 17px; font-weight: 300; line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    /* Textura muy sutil: sin esto el fondo plano hace que 15 articulos se
       sientan un PDF. Con esto, papel. */
    background-image:
        radial-gradient(circle at 12% 0%, rgba(205,175,149,.05), transparent 45%),
        radial-gradient(circle at 88% 30%, rgba(205,175,149,.03), transparent 40%);
    background-attachment: fixed;
}

/* ---- Barra de progreso de lectura ----
   Un documento largo sin indicacion de avance se abandona. Son 3 px. */
.bs-progress {
    position: fixed; top: 0; left: 0; z-index: 60;
    height: 3px; width: 0;
    background: var(--wood);
    transition: width .1s linear;
}

/* ---- Barra superior ---- */
.bs-top {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px clamp(16px, 4vw, 40px);
    background: rgba(23,23,23,.86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hair);
}
.bs-back, .bs-print {
    font-family: var(--fd);
    font-size: 14px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--wood); text-decoration: none;
    background: none; border: 0; padding: 0; cursor: pointer;
}
.bs-print { border-bottom: 1px solid var(--wood-line); }

/* ---- Hero ---- */
.bs { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 60px; }

.bs-hero {
    position: relative;
    padding: clamp(48px, 9vw, 104px) 0 clamp(28px, 4vw, 44px);
    overflow: hidden;
}
/* El titulo fantasma que sangra por el borde: es el recurso firma del
   rediseno del publico. Aca ancla la pagina a la identidad sin necesidad
   de meter una foto. */
.bs-ghost {
    position: absolute; top: clamp(10px, 2vw, 30px); left: -.06em; z-index: 0;
    font-family: var(--fb); font-weight: 500;
    font-size: clamp(88px, 21vw, 250px); line-height: .78;
    letter-spacing: -.045em; text-transform: lowercase;
    color: rgba(255,255,255,.028);
    pointer-events: none; user-select: none; white-space: nowrap;
}
.bs-hero-in { position: relative; z-index: 1; }
.bs-kicker {
    margin: 0 0 12px;
    font-family: var(--fd); font-size: 14px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .3em; color: var(--wood);
}
.bs-hero h1 {
    margin: 0;
    font-family: var(--fb); font-weight: 300;
    font-size: clamp(42px, 8.2vw, 88px); line-height: .98;
    letter-spacing: -.035em; color: var(--white-warm);
}
.bs-sub {
    margin: 18px 0 0;
    font-family: var(--fd); font-size: clamp(16px, 2.4vw, 20px);
    text-transform: uppercase; letter-spacing: .16em; color: var(--gray-warm);
}

/* ---- Aviso de version vieja ---- */
.bs-aviso {
    margin-bottom: 22px; padding: 15px 18px;
    background: rgba(217,180,140,.10);
    border: 1px solid var(--wood-line); border-radius: 10px;
    font-size: 15px; color: var(--gray-light);
}
.bs-aviso strong { color: var(--wood); }
.bs-aviso a { color: var(--wood); }

/* ---- Ficha de metadatos ---- */
.bs-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; margin-bottom: clamp(36px, 6vw, 60px);
    background: var(--hair);
    border: 1px solid var(--hair); border-radius: 12px; overflow: hidden;
}
.bs-meta-i { padding: 16px 18px; background: var(--charcoal); }
.bs-meta-i span {
    display: block; margin-bottom: 5px;
    font-family: var(--fd); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .16em; color: var(--gray-warm);
}
.bs-meta-i strong {
    font-family: var(--fd); font-size: 21px; font-weight: 600;
    letter-spacing: .04em; color: var(--white-warm);
}

/* ---- Layout de dos columnas ---- */
.bs-cols { display: block; }

/* ---- Indice ---- */
.bs-toc { margin-bottom: 34px; }
.bs-toc-box {
    background: var(--charcoal);
    border: 1px solid var(--hair); border-radius: 12px;
    padding: 4px 16px;
}
.bs-toc-box > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 0; cursor: pointer; list-style: none;
    font-family: var(--fd); font-size: 15px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .18em; color: var(--wood);
}
.bs-toc-box > summary::-webkit-details-marker { display: none; }
.bs-toc-box > summary::after {
    content: '+'; margin-left: auto;
    font-size: 20px; line-height: 1; color: var(--gray-warm);
}
.bs-toc-box[open] > summary::after { content: '–'; }
.bs-toc-n {
    padding: 1px 8px; border-radius: 999px;
    background: var(--wood-soft); color: var(--wood);
    font-size: 12px; letter-spacing: .08em;
}
.bs-toc ol { list-style: none; margin: 0; padding: 0 0 12px; }
.bs-toc li + li { border-top: 1px solid rgba(255,255,255,.05); }
.bs-toc a {
    display: flex; gap: 12px; padding: 9px 0;
    font-size: 14.5px; color: var(--gray-warm); text-decoration: none;
    transition: color .15s ease;
}
.bs-toc a:hover { color: var(--white-warm); }
.bs-toc-num {
    flex: none; width: 22px;
    font-family: var(--fd); font-size: 14px; font-weight: 600;
    color: var(--wood); text-align: right;
}
/* Seccion que se esta leyendo. La marca el JS con IntersectionObserver. */
.bs-toc a.is-here { color: var(--white-warm); }
.bs-toc a.is-here .bs-toc-num { color: var(--white-warm); }

/* ---- El documento ---- */
.bs-doc { max-width: 68ch; }

.bs-lead {
    margin-bottom: 40px; padding-left: 20px;
    border-left: 2px solid var(--wood-line);
    font-size: 19px; color: var(--white-warm);
}
.bs-lead p { margin: 0 0 10px; }

.bs-art { padding-top: clamp(30px, 5vw, 46px); }
.bs-art + .bs-art { border-top: 1px solid var(--hair); }
/* Compensa la barra superior fija al saltar desde el indice. */
.bs-art { scroll-margin-top: 76px; }

.bs-art h2 {
    display: flex; align-items: baseline; gap: 16px;
    /* Titulos largos ("Modificaciones, suspension o cancelacion") tienen que
       poder bajar debajo del numeral en pantallas angostas. */
    flex-wrap: wrap;
    margin: 0 0 20px;
}
/* El numeral gigante y hueco: ancla la vista al recorrer el documento y da
   ritmo sin necesidad de reglas ni cajas. */
.bs-art-num {
    flex: none;
    font-family: var(--fd); font-weight: 700;
    font-size: clamp(40px, 7vw, 62px); line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--wood-line);
    letter-spacing: -.02em;
}
.bs-art-tit {
    font-family: var(--fd); font-weight: 600;
    font-size: clamp(23px, 3.6vw, 31px); line-height: 1.12;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--white-warm);
}

.bs-art p { margin: 0 0 15px; }
.bs-art p:last-child { margin-bottom: 0; }

.bs-sub-h {
    display: flex; align-items: baseline; gap: 11px;
    margin: 26px 0 10px;
    font-family: var(--fd); font-weight: 600;
    font-size: 19px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--wood);
}
.bs-sub-l {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--wood-line);
    font-size: 13px; letter-spacing: 0; color: var(--wood);
}

/* "Tope: sin tope" y similares. Es el dato que la gente busca cuando lee la
   seccion de chances, asi que se saca del parrafo y se destaca. */
.bs-tope {
    display: inline-flex; align-items: baseline; gap: 9px;
    /* flex-wrap + max-width: el tope de la seccion e es una frase larga
       ("sin tope, sujeto a criterio y aprobacion del Organizador") y en
       celular tiene que poder cortar en dos renglones en vez de desbordar. */
    flex-wrap: wrap; max-width: 100%;
    margin: 4px 0 15px !important; padding: 6px 13px;
    background: var(--wood-soft);
    border-radius: 18px;
    font-size: 14.5px; color: var(--gray-light);
}
.bs-tope span {
    font-family: var(--fd); font-size: 12.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em; color: var(--wood);
}

.bs-ul { margin: 0 0 16px; padding: 0; list-style: none; }
.bs-ul li {
    position: relative; padding-left: 22px; margin-bottom: 7px;
}
.bs-ul li::before {
    content: ''; position: absolute; left: 0; top: .78em;
    width: 11px; height: 1px; background: var(--wood);
}

/* ---- Cierre ---- */
.bs-cierre {
    margin-top: 54px; padding-top: 34px;
    border-top: 1px solid var(--wood-line);
    text-align: center;
}
.bs-cierre-t {
    margin: 0 0 18px;
    font-family: var(--fd); font-size: 19px;
    text-transform: uppercase; letter-spacing: .14em; color: var(--gray-warm);
}
.bs-btn {
    display: inline-block; padding: 15px 34px;
    background: var(--wood); color: var(--ink);
    border-radius: 999px; text-decoration: none;
    font-family: var(--fd); font-size: 17px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em;
}

/* ---- Vacio ---- */
.bs-vacio { text-align: center; padding: 40px 0 60px; }
.bs-vacio h2 {
    font-family: var(--fd); font-size: 27px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em; color: var(--white-warm);
    margin: 0 0 12px;
}
.bs-vacio p { margin: 0 0 24px; color: var(--gray-warm); }

/* ---- Pie ---- */
.bs-foot {
    margin-top: 60px; padding-top: 26px;
    border-top: 1px solid var(--hair);
    font-size: 13.5px; color: var(--gray-warm);
}
.bs-foot-meta { margin: 0 0 8px; }
.bs-foot-meta strong {
    font-family: var(--fd); font-weight: 600;
    text-transform: uppercase; letter-spacing: .16em; color: var(--white-warm);
}
.bs-foot-legal { margin: 0; max-width: 62ch; line-height: 1.6; }

/* =====================================================================
   Escritorio: el indice pasa a rail fijo al costado.
   ===================================================================== */
@media (min-width: 900px) {
    .bs-cols {
        display: grid; grid-template-columns: 258px 1fr; gap: clamp(36px, 5vw, 72px);
        align-items: start;
    }
    /* max-height + scroll: con 15 articulos el indice puede pasar el alto de
       la ventana, y sin esto las ultimas entradas quedan inalcanzables. */
    .bs-toc {
        position: sticky; top: 76px; margin-bottom: 0;
        max-height: calc(100vh - 96px); overflow-y: auto;
    }
    /* En escritorio hay lugar de sobra: el indice queda siempre abierto y el
       desplegable deja de tener sentido. */
    .bs-toc-box > summary { cursor: default; pointer-events: none; }
    .bs-toc-box > summary::after { display: none; }
}

/* =====================================================================
   Impresion. Es un documento legal: alguien lo va a imprimir o guardar en
   PDF, y en negro sobre negro no se lee nada.
   ===================================================================== */
@media print {
    html, body { background: #fff !important; color: #111 !important; }
    body { background-image: none !important; font-size: 11.5pt; }
    .bs-top, .bs-progress, .bs-toc, .bs-ghost, .bs-btn, .bs-cierre { display: none !important; }
    .bs { max-width: none; padding: 0; }
    .bs-cols { display: block; }
    .bs-doc { max-width: none; }
    .bs-hero { padding: 0 0 12pt; }
    .bs-hero h1 { font-size: 26pt; color: #111 !important; }
    .bs-kicker, .bs-sub { color: #555 !important; }
    .bs-art-tit, .bs-foot-meta strong { color: #111 !important; }
    .bs-art-num { color: #999 !important; -webkit-text-stroke: 0; font-size: 20pt; }
    .bs-sub-h { color: #111 !important; }
    .bs-tope { background: #f0f0f0 !important; }
    .bs-tope span { color: #555 !important; }
    .bs-meta { border-color: #ccc; background: #fff; }
    .bs-meta-i { background: #fff; }
    .bs-meta-i strong { color: #111 !important; }
    .bs-art { break-inside: avoid; page-break-inside: avoid; }
    .bs-ul li::before { background: #666; }
}