/* casinoconpasaporte.es — макет C «Nocturno». 13-08-2026 */
:root{
  --bg:#0b0e17; --bg-2:#121728; --card:#171d31; --card-2:#141a2c; --line:#26304d;
  --ink:#eaf0ff; --ink-2:#c3cee8; --muted:#95a3c4;
  --violet:#7c4dff; --violet-2:#a97bff; --lime:#c8f75a; --lime-d:#a8e034; --gold:#ffc93c;
  --ok:#3ddc97; --bad:#ff6b6b;
  --r-sm:10px; --r:16px; --r-lg:22px;
  --s-xs:.5rem; --s-sm:.75rem; --s-md:1rem; --s-lg:1.5rem; --s-xl:2.25rem;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.68 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  }
img{max-width:100%;height:auto}
h1,h2,h3,h4{letter-spacing:-.5px;line-height:1.2}
a{color:var(--violet-2)}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:4px}
a:hover{color:var(--lime)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s-md)}

/* ---------- header ---------- */
.site-header{background:rgba(11,14,23,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.header-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:nowrap;padding:.6rem 0}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);flex:0 0 auto}
.logo .mark{width:40px;height:40px;border-radius:12px;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;box-shadow:0 0 18px rgba(124,77,255,.4)}
.logo .mark img,.logo .mark svg{width:40px;height:40px;display:block}
.logo b{font-size:1.04rem;display:block;line-height:1.1}
.logo i{font-style:normal;font-size:.68rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--lime)}
.nav{display:flex;gap:1.35rem;flex-wrap:nowrap;min-width:0;margin-left:auto}
.nav a{text-decoration:none;color:var(--muted);font-size:.94rem;font-weight:600;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.header-cta{display:flex;gap:.55rem;flex:0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:12px;
  padding:.72rem 1.2rem;font-weight:800;text-decoration:none;font-size:.93rem;white-space:nowrap;
  border:2px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,var(--lime),var(--lime-d));color:#131a04;
  box-shadow:0 8px 22px rgba(200,247,90,.26)}
.btn-primary:hover{color:#131a04;filter:brightness(1.06)}
.btn-ghost{border-color:var(--violet);color:var(--violet-2);background:rgba(124,77,255,.1)}
.btn-ghost:hover{color:var(--ink);border-color:var(--violet-2)}
.burger{display:none;width:46px;height:46px;border:2px solid var(--line);border-radius:12px;
  align-items:center;justify-content:center;background:var(--card);flex:0 0 auto}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;
  background:var(--ink);position:relative;transition:.18s}
.burger span::before{content:"";position:absolute;top:-6px}
.burger span::after{content:"";position:absolute;top:6px}
.header-cta-mobile{display:none}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{max-width:var(--wrap);margin:0 auto;padding:.7rem var(--s-md);font-size:.88rem;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding:2.4rem 0 1.6rem;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1100px 420px at 72% -20%,rgba(124,77,255,.30),transparent 65%),
             radial-gradient(800px 340px at 8% 0%,rgba(200,247,90,.07),transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%)}
h1{font-size:clamp(1.9rem,4.6vw,3rem);margin:.85rem 0 .7rem}
.lead{font-size:1.09rem;color:var(--ink-2)}
.lead strong{color:var(--ink)}
.hero-img{margin:1.4rem 0 0}

/* ---------- content ---------- */
main{padding-bottom:1rem;overflow-wrap:anywhere}
main h2{font-size:clamp(1.32rem,2.6vw,1.62rem);margin:2.1rem 0 .8rem;display:flex;
  align-items:flex-start;gap:.6rem}
main h2::before{content:"";flex:0 0 auto;width:9px;height:1.2em;border-radius:4px;margin-top:.1em;
  background:linear-gradient(180deg,var(--lime),var(--violet))}
main h3{font-size:1.12rem;margin:1.5rem 0 .5rem;color:var(--ink)}
main p{margin:0 0 1rem}
main ul,main ol{margin:0 0 1.1rem;padding-left:1.3rem;color:var(--ink-2)}
main li{margin-bottom:.35rem}
main strong,main b{color:var(--ink)}
.callout{background:rgba(255,201,60,.08);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:1rem 1.1rem;margin:1.3rem 0;color:var(--ink-2)}
.callout b{color:var(--ink)}
.content-img{display:block;max-width:800px;width:100%;height:auto;margin:1.5rem auto;
  aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}

/* ---------- toc ---------- */
.toc{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.2rem;margin:1.7rem 0}
.toc b{display:block;margin-bottom:.55rem}
.toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem;font-size:.93rem}
.toc li{margin-bottom:.3rem;break-inside:avoid}
.toc a{color:var(--ink-2);text-decoration:none;display:inline-block;padding:.45rem 0;min-height:24px}
.toc a:hover{color:var(--lime)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2);margin:1.3rem 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
th,td{padding:.7rem .85rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:rgba(124,77,255,.16);color:var(--ink);font-weight:700}
tbody tr:last-child td{border-bottom:none}
td{color:var(--ink-2)}

/* ---------- faq ---------- */
.faq{margin:1rem 0 0}
.faq h3{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.75rem .95rem;margin:.9rem 0 0;font-size:1.02rem}
.faq p{background:var(--bg-2);border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--r-sm) var(--r-sm);padding:.85rem .95rem;margin:0;color:var(--ink-2)}

/* ---------- offers ---------- */
.offers{margin:2rem 0;border:1px solid var(--violet);border-radius:var(--r-lg);padding:1.3rem;
  background:linear-gradient(180deg,rgba(124,77,255,.12),rgba(124,77,255,.02))}
.offers-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem}
.offers-h h2{margin:0;font-size:1.4rem}
.offers-h h2::before{display:none}
.offers-h span{font-size:.79rem;color:var(--muted)}
.offer{display:grid;grid-template-columns:180px 1fr 210px;gap:1rem;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;margin-bottom:.85rem;position:relative}
.offer>*{min-width:0}
.offer--top{border-color:var(--lime);box-shadow:0 0 0 1px rgba(200,247,90,.22),0 16px 34px rgba(0,0,0,.45)}
.offer-rib{position:absolute;top:-11px;left:16px;background:var(--lime);color:#131a04;
  font-size:.71rem;font-weight:900;padding:.15rem .6rem;border-radius:6px;
  text-transform:uppercase;letter-spacing:.6px}
.offer-brand{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.offer-logo{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;
  background:#0d1120;border:1px solid var(--line);border-radius:12px;padding:.45rem}
.offer-brand small{color:var(--muted);font-size:.77rem;line-height:1.3}
.offer-body h3{margin:0 0 .35rem;font-size:1.1rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.offer-doc{display:inline-flex;align-items:center;gap:.3rem;background:rgba(61,220,151,.12);
  border:1px solid rgba(61,220,151,.35);color:var(--ok);border-radius:8px;padding:.18rem .5rem;
  font-size:.75rem;font-weight:700;letter-spacing:.2px}
.offer-bonus{margin:0 0 .45rem;font-size:.92rem;color:var(--gold);font-weight:600}
.feats{list-style:none;margin:.4rem 0 .6rem;padding:0;font-size:.88rem;color:var(--ink-2)}
.feats li{padding-left:1.2rem;position:relative;margin-bottom:.25rem}
.feats li::before{content:"✓";position:absolute;left:0;color:var(--lime);font-weight:900}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tag{font-size:.73rem;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:.16rem .45rem}
.offer-act{display:grid;gap:.5rem;text-align:center;justify-items:stretch}
.offer-score{font-size:1.6rem;font-weight:800;line-height:1}
.offer-score small{font-size:.76rem;color:var(--muted);font-weight:600;margin-left:.15rem}
.offer-note{font-size:.73rem;color:var(--muted);line-height:1.3}

/* ---------- footer ---------- */
.site-footer{background:#070a12;color:var(--muted);margin-top:2.5rem;padding:2.2rem 0 1.5rem;
  font-size:.9rem;border-top:1px solid var(--line)}
.site-footer a{color:var(--ink-2);text-decoration:none;display:inline-block;padding:.45rem 0;min-height:24px}
.site-footer a:hover{color:var(--lime)}
.fgrid{display:grid;grid-template-columns:2fr 1fr;gap:2rem}
.fgrid b{color:var(--ink);display:block;margin-bottom:.5rem}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:.35rem}
.fbottom{border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem}
.age{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--bad);color:var(--bad);font-weight:800;font-size:.76rem;flex:0 0 auto}

/* ---------- mobile ---------- */
@media (max-width:1000px){
  html{scroll-padding-top:146px}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:999;flex-direction:column;
    gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:.5rem var(--s-md)}
  .nav.open{display:flex}
  .nav a{padding:.7rem 0;border-bottom:1px solid var(--line);font-size:1rem;color:var(--ink-2)}
  .nav a:last-child{border-bottom:none}
  .site-header .wrap{position:relative}
  .header-row{justify-content:space-between;gap:.6rem}
  .header-cta{display:none}
  .burger{display:flex}
  .header-cta-mobile{display:flex;gap:.55rem;padding:0 0 .7rem}
  .header-cta-mobile .btn{flex:1 1 0;min-width:0;padding:.78rem .5rem;font-size:.9rem}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .offer{grid-template-columns:1fr;gap:.85rem}
  .offer-logo{height:74px}
  .toc ol{columns:1}
  .fgrid{grid-template-columns:1fr}
  .hero{padding-top:1.6rem}
}
@media (max-width:600px){
  body{font-size:15.5px}
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .offers{padding:.9rem;border-radius:var(--r)}
  .kpis{grid-template-columns:1fr 1fr;gap:.6rem}
  .tag,.offer-note{font-size:.8rem}
  .offer-doc{font-size:.82rem}
}