/* 22betcl.cl — палитра снята с их кабинета и логотипа:
   глубокая бирюза #1b4147, фирменная #0d909a, красный акцент #f14d4d. */
:root{
  --f:#0c2025; --f2:#102b31; --f3:#173a41; --linea:rgba(13,144,154,.22);
  --turq:#0d909a; --turq-c:#3fc0c9; --rojo:#f14d4d; --verde:#2fa360;
  --t:#eaf2f3; --t2:#a8bcc0; --t3:#7d9499;
  --fd:"Archivo",Impact,sans-serif; --fb:"Inter",-apple-system,sans-serif;
  --fm:"JetBrains Mono",ui-monospace,monospace; --sp:clamp(2.2rem,5vw,3.4rem);
}
*{box-sizing:border-box}
body{margin:0;background:var(--f);color:var(--t);font:400 1.02rem/1.72 var(--fb);-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
img{max-width:100%;height:auto}
a{color:var(--turq-c)}
h1,h2,h3{font-family:var(--fd);line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.8vw,3.1rem)}
h2{font-size:clamp(1.55rem,3.2vw,2.2rem);margin-top:0}
h3{font-size:clamp(1.12rem,2vw,1.36rem);color:var(--turq-c);margin-top:1.6em}
p{margin:0 0 1.05em}

.top{position:sticky;top:0;z-index:40;background:rgba(12,32,37,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--t)}
.marca img{border-radius:7px}
.marca .wm{font:700 1.32rem/1 var(--fd);color:var(--turq-c)}
.marca .wm b{color:var(--rojo)}
.marca .sub{font:700 .68rem/1 var(--fm);color:var(--t3);letter-spacing:.08em;
  border-left:1px solid var(--linea);padding-left:10px}
@media(max-width:900px){.marca .sub{display:none}}
.nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.nav a{color:var(--t2);text-decoration:none;font-size:.92rem;padding:7px 10px;border-radius:8px}
.nav a:hover{color:var(--turq-c);background:rgba(13,144,154,.1)}
.edad{font:700 .76rem var(--fm);color:var(--turq-c);border:1px solid var(--linea);
  border-radius:8px;padding:4px 8px;white-space:nowrap}
@media(max-width:820px){.nav{display:none}.marca{margin-right:auto}}

.hero{background:linear-gradient(160deg,var(--f3),var(--f));border-bottom:1px solid var(--linea)}
.hero .wrap{padding-block:clamp(2.4rem,5vw,4rem)}
/* Текст идёт во всю ширину контейнера — без ранних переносов. */
.entrada{color:var(--t2);font-size:1.08rem}
.cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.btn{font:700 1rem var(--fb);color:#06241a;cursor:pointer;border:0;border-radius:10px;
  padding:.8rem 1.9rem;background:linear-gradient(180deg,#43c47c,var(--verde));
  box-shadow:0 9px 22px rgba(47,163,96,.26);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(47,163,96,.38)}
.cta-n{font:.84rem var(--fm);color:var(--t3)}

section{padding-block:var(--sp)}
section:nth-of-type(even){background:var(--f2)}
section.idx{padding-block:1.6rem;background:var(--f)}
.toc{background:var(--f3);border:1px solid var(--linea);border-radius:12px;padding:1rem 1.3rem}
.toc b{font:700 .74rem var(--fm);color:var(--t3);letter-spacing:.07em;text-transform:uppercase}
.toc ol{margin:.6rem 0 0;padding-left:1.2rem;columns:2;column-gap:2rem}
@media(max-width:640px){.toc ol{columns:1}}
.toc a{color:var(--t2);text-decoration:none}.toc a:hover{color:var(--turq-c)}

.destacado{font-size:1.08rem;background:rgba(13,144,154,.09);border:1px solid var(--linea);
  border-radius:12px;padding:1rem 1.2rem}
.nota{font-size:.92rem;color:var(--t3)}
.ausentes{font:700 1.02rem/1.9 var(--fb);color:var(--rojo);background:rgba(241,77,77,.07);
  border:1px solid rgba(241,77,77,.2);border-radius:12px;padding:.9rem 1.2rem}
.unv{background:var(--f3);border:1px solid var(--linea);border-radius:12px;padding:1rem 1.2rem;margin:1.3em 0}
.unv p{margin:.5rem 0 0;font-size:.94rem;color:var(--t2)}
.tag{display:inline-block;font:700 .66rem var(--fm);letter-spacing:.07em;text-transform:uppercase;
  background:var(--turq);color:#04181b;border-radius:6px;padding:.2rem .55rem}

.check{list-style:none;padding:0;margin:1.1em 0}
.check li{position:relative;padding-left:1.9rem;margin:.55rem 0;color:var(--t2)}
.check li::before{content:"✓";position:absolute;left:0;color:var(--verde);font-weight:700}
.pasos{counter-reset:c;list-style:none;padding:0;margin:1.2em 0}
.pasos li{counter-increment:c;position:relative;padding-left:3rem;margin:.9rem 0;color:var(--t2)}
.pasos li::before{content:counter(c);position:absolute;left:0;top:-2px;width:2.05rem;height:2.05rem;
  display:grid;place-items:center;border-radius:50%;background:rgba(13,144,154,.14);
  border:1px solid var(--linea);font:700 .92rem var(--fm);color:var(--turq-c)}

.tbl{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.96rem}
.tbl th{text-align:left;font:700 .74rem var(--fm);letter-spacing:.06em;text-transform:uppercase;
  color:var(--t3);padding:.7rem .9rem;border-bottom:1px solid var(--linea)}
.tbl td{padding:.75rem .9rem;border-bottom:1px solid rgba(168,188,192,.1);color:var(--t2);vertical-align:top}
@media(max-width:720px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--linea);border-radius:12px;margin-bottom:.9rem;padding:.5rem .2rem}
  .tbl td{border:0;padding:.45rem .9rem}
  .tbl td::before{content:attr(data-l);display:block;font:700 .66rem var(--fm);
    letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:.2rem}
}
.fig{margin:1.6em 0}
.fig img{width:100%;border-radius:12px;border:1px solid var(--linea)}
.fig figcaption{font:.82rem var(--fm);color:var(--t3);margin-top:.6rem}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:820px){.dos{grid-template-columns:1fr}}
.card{background:var(--f3);border:1px solid var(--linea);border-radius:13px;padding:1.2rem 1.4rem}
.card h3{margin-top:0}.card ul{margin:0;padding-left:1.1rem}
.card li{margin:.45rem 0;color:var(--t2)}

footer{border-top:1px solid var(--linea);padding-block:2.4rem 3rem;background:var(--f2)}
footer p{font-size:.89rem;color:var(--t3)}
.aviso{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem}
.pie{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:1.2rem}
.pie a{color:var(--t2);text-decoration:none;font-size:.9rem}


/* ══ Оценка ══ */
.nota-box{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(13,144,154,.16),rgba(47,163,96,.10));
  border:1px solid var(--linea);border-radius:16px;padding:1.3rem 1.6rem;margin:0 0 1.4em}
.nota-num{display:flex;align-items:baseline;gap:.35rem;font-family:var(--fd);line-height:1}
.nota-num b{font-size:clamp(3rem,7vw,4.4rem);color:var(--verde)}
.nota-num span{font-size:1.15rem;color:var(--t3)}
.nota-txt{flex:1 1 340px}
.nota-txt p{margin:0;color:var(--t2)}
.tbl.notas td:nth-child(2){font-family:var(--fd);font-size:1.2rem;color:var(--turq-c);white-space:nowrap}

/* ══ Сетки картинок ══ */
.rejilla{display:grid;gap:.9rem;margin:1.5em 0}
.rejilla.j5,.rejilla.s5{grid-template-columns:repeat(5,1fr)}
.rejilla.b4{grid-template-columns:repeat(4,1fr)}
.rejilla figure{margin:0}
.rejilla img{display:block;width:100%;border-radius:11px;border:1px solid var(--linea)}
.rejilla figcaption{font-size:.82rem;color:var(--t2);margin-top:.45rem;text-align:center;line-height:1.35}
.rejilla figcaption b{display:block;color:var(--t)}
.rejilla figcaption span{color:var(--t3);font-family:var(--fm);font-size:.74rem}
@media(max-width:1000px){.rejilla.j5,.rejilla.s5{grid-template-columns:repeat(3,1fr)}.rejilla.b4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rejilla.j5,.rejilla.s5{grid-template-columns:repeat(2,1fr)}.rejilla.b4{grid-template-columns:1fr}}

/* ══ CTA: кнопка в шапке + вторая в герое ══
   Обе — заглушки (data-pendiente): аффилиатных ссылок пока не ставим.
   Меняются на <a href> одной правкой, когда появится оффер. */
.btn-top{padding:.52rem 1.1rem;font-size:.92rem;border-radius:9px;
  box-shadow:0 6px 16px rgba(47,163,96,.24);white-space:nowrap}
@media(max-width:820px){.btn-top{padding:.46rem .9rem;font-size:.86rem}}
@media(max-width:420px){.btn-top{display:none}}
.btn-2{background:transparent;color:var(--turq-c);border:1px solid var(--turq);
  box-shadow:none}
.btn-2:hover{background:rgba(13,144,154,.12);box-shadow:none}
.cta-n{flex-basis:100%}