/* CasinoYajuego.co — guía independiente. Diseño propio: acento taxi-amarillo + motivo de chequeo. */

:root{
  --ink:#373a45;
  --ink-soft:#4e5261;
  --yellow:#ffb533;
  --yellow-deep:#e89b1a;
  --blue:#5e95e8;
  --paper:#f7f6f3;
  --paper-2:#ffffff;
  --line:#e4e1d8;
  --text:#2b2c33;
  --text-soft:#5c5e68;
  --ok:#2f9e5b;
  --radius:16px;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--blue)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;min-width:0}

.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.skip-link:focus{left:0}

/* ---------- taxi-checker divider (pure CSS pattern, no fixed-width children) ---------- */
.checker-strip{height:10px;width:100%;background-image:repeating-linear-gradient(90deg,var(--yellow) 0 26px,var(--ink) 26px 52px)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:3px solid var(--yellow)}
.header-row{max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
.brand{display:flex;align-items:center;gap:0;text-decoration:none;flex:0 0 auto}
.brand img{height:36px;width:auto;display:block}

.desk-nav{display:none}
.desk-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
.desk-nav a{color:#eceaf5;text-decoration:none;font-size:.95rem;font-weight:600;position:relative;padding:4px 0}
.desk-nav a.is-active{color:var(--yellow)}
.desk-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--yellow);border-radius:2px}

.header-actions{display:flex;align-items:center;gap:10px}
.header-actions .btn-yellow{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 18px;font-weight:800;font-size:.92rem;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap}
.btn-yellow{background:var(--yellow);color:#2a1c00}
.btn-yellow:hover{background:var(--yellow-deep)}
.btn-ghost{background:transparent;color:#eceaf5;border-color:#5a5d6a;display:none}
.btn svg{width:16px;height:16px;flex:0 0 auto}

.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;background:transparent;border:1px solid #5a5d6a;border-radius:10px;padding:0;cursor:pointer;flex:0 0 auto}
.burger-bar{display:block;height:2px;width:20px;margin:0 auto;background:#eceaf5;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] .burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-bar:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- mobile off-canvas nav (sibling of header, NOT nested, no backdrop-filter) ---------- */
.nav-scrim{position:fixed;inset:0;background:rgba(20,21,26,.55);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:70}
.nav-scrim.is-open{opacity:1;pointer-events:auto}
.mobile-nav{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--ink);z-index:80;transform:translateX(100%);transition:transform .22s ease;padding:18px 18px 24px;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.25)}
.mobile-nav.is-open{transform:translateX(0)}
.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mobile-nav__close{width:36px;height:36px;border-radius:10px;border:1px solid #5a5d6a;background:transparent;color:#eceaf5;font-size:1.3rem;line-height:1;cursor:pointer}
.mobile-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mobile-nav a{display:flex;align-items:center;gap:10px;color:#eceaf5;text-decoration:none;font-weight:700;padding:12px 10px;border-radius:10px}
.mobile-nav a.is-active{background:rgba(255,181,51,.14);color:var(--yellow)}
.mobile-nav a .chk{flex:0 0 auto}
.mobile-nav__actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.mobile-nav__note{color:#b7b9c4;font-size:.82rem;margin-top:18px;padding-top:14px;border-top:1px solid #4c4f5c}

/* checkmark glyph used everywhere as the recurring motif */
.chk{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;border:2px solid var(--blue);flex:0 0 auto}
.chk svg{width:12px;height:12px}
.chk path{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chk.chk-solid{background:var(--ink);border-color:var(--ink)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--ink),var(--ink-soft));color:#f2f1f6;position:relative}
.hero__inner{max-width:var(--maxw);margin:0 auto;padding:44px 20px 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;min-width:0}
.hero--internal .hero__inner{grid-template-columns:1fr;padding-bottom:34px}
.eyebrow{color:var(--yellow);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem;margin:0 0 10px}
.hero-title{font-size:clamp(1.6rem,4.2vw,2.5rem);font-weight:800;line-height:1.18;margin:0 0 14px;max-width:22ch}
.hero-title--sm{font-size:clamp(1.4rem,3.4vw,2rem);max-width:26ch}
.hero-sub{color:#d6d5e0;font-size:1.02rem;margin:0 0 22px;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn-outline{background:transparent;border-color:#6c6f7c;color:#f2f1f6}
.btn-outline:hover{border-color:var(--yellow);color:var(--yellow)}

.hero__badge{justify-self:center;width:min(230px,60vw);aspect-ratio:1/1;border-radius:32px;background:rgba(255,181,51,.08);border:2px solid rgba(255,181,51,.35);display:flex;align-items:center;justify-content:center}
.hero__badge svg{width:58%;height:58%}
.hero__badge path{fill:none;stroke:var(--yellow);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:12px 0;font-size:.82rem;color:var(--text-soft);max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.breadcrumbs li{display:flex;align-items:center;gap:6px}
.breadcrumbs li:not(:last-child)::after{content:"/";color:#b8b5a8;margin-left:6px}
.breadcrumbs a{color:var(--text-soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--blue)}

/* ---------- quick facts (checklist cards) ---------- */
.facts{padding:34px 0 6px}
.facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.fact-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;gap:12px;min-width:0}
.fact-card p{margin:0;display:flex;flex-direction:column;gap:4px}
.fact-card .fact-label{display:block;font-weight:800;font-size:.94rem;color:var(--ink)}
.fact-card .fact-value{display:block;color:var(--text-soft);font-size:.88rem}

/* ---------- article (the ONLY place with real headings) ---------- */
.content{padding:36px 0 10px}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:34px;min-width:0}
.seo-article{min-width:0;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,4vw,40px)}
.seo-article h1{font-size:clamp(1.5rem,3.6vw,2.15rem);line-height:1.22;margin:0 0 18px;color:var(--ink)}
.seo-article h2{font-size:clamp(1.15rem,2.6vw,1.4rem);margin:34px 0 12px;color:var(--ink);border-left:5px solid var(--yellow);padding-left:12px}
.seo-article h3{font-size:1.02rem;margin:22px 0 8px;color:var(--ink)}
.seo-article p{margin:0 0 14px;color:var(--text)}
.seo-article strong{color:var(--ink)}
.seo-article a{color:var(--blue);font-weight:700;text-decoration:underline}

/* FAQ inside article: native <details>/<summary> accordion built from master h3/p pairs.
   The question stays a real <h3> for correct document outline; no JS required to open/close. */
.faq-item{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;overflow:hidden;background:var(--paper)}
.faq-item summary{display:flex;align-items:center;gap:12px;justify-content:space-between;list-style:none;cursor:pointer;padding:14px 16px;background:var(--paper-2)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary h3{margin:0;font-size:.98rem;color:var(--ink);font-weight:700;min-width:0}
.faq-item .chk{transition:background .15s ease,border-color .15s ease}
.faq-item[open] summary .chk{background:var(--yellow);border-color:var(--yellow)}
.faq-item[open] summary .chk path{stroke:var(--ink)}
.faq-a{padding:12px 16px 16px}
.faq-a p{margin:0}

/* adaptive table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:0 0 16px;-webkit-overflow-scrolling:touch}
.seo-article table{border-collapse:collapse;width:100%;table-layout:fixed;min-width:420px}
.seo-article th,.seo-article td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;overflow-wrap:anywhere;font-size:.92rem}
.seo-article thead th{background:var(--paper);color:var(--ink);font-size:.82rem;text-transform:uppercase;letter-spacing:.02em}
@media (max-width:560px){
  .seo-article th,.seo-article td{padding:8px;font-size:.82rem}
}

/* sidebar */
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.side-card{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:18px}
.side-card .side-title{font-weight:800;color:var(--ink);margin:0 0 10px;font-size:.92rem;text-transform:uppercase;letter-spacing:.03em}
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.side-list li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--text-soft)}
.side-cta{background:var(--ink);color:#fff;text-align:center}
.side-cta p{margin:0 0 12px;font-size:.88rem;color:#d6d5e0}
.side-cta .btn{width:100%;justify-content:center}

/* ---------- disclaimer band ---------- */
.disclaimer{background:#fff4e0;border:1px solid #f0d6a0;border-radius:14px;padding:14px 16px;font-size:.86rem;color:#6b4f14;margin:0 0 24px;display:flex;gap:10px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#cfced9;margin-top:50px}
.footer-top{padding:38px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px;min-width:0}
.footer-brand{display:flex;align-items:center;margin-bottom:12px}
.footer-brand img{height:30px}
.footer-desc{font-size:.88rem;color:#a9a8b6;max-width:34ch;margin:0}
.footer-col p.side-title{color:#f2f1f6;font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;margin:0 0 12px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-col a{color:#cfced9;text-decoration:none;font-size:.88rem}
.footer-col a:hover{color:var(--yellow)}
.footer-bottom{border-top:1px solid #4c4f5c;padding:16px 0;font-size:.8rem;color:#9c9baa;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
.rg-line{font-weight:700;color:#d6d5e0}

/* ---------- 404 ---------- */
.error-page{padding:60px 0 70px;text-align:center}
.error-page .chk{width:64px;height:64px;border-radius:18px;margin:0 auto 18px}
.error-page .chk svg{width:34px;height:34px}
.error-page .chk path{stroke-width:4}
.error-page h1{font-size:clamp(1.6rem,4vw,2.1rem);color:var(--ink);margin:0 0 12px}
.error-page p{color:var(--text-soft);max-width:46ch;margin:0 auto 22px}
.error-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.error-links a{background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:9px 16px;text-decoration:none;color:var(--ink);font-weight:700;font-size:.88rem}
.error-links a:hover{border-color:var(--yellow)}

/* ---------- responsive ---------- */
@media (min-width:861px){
  .desk-nav{display:block}
  .btn-ghost{display:inline-flex}
  .header-actions .btn-yellow{display:inline-flex}
  .burger{display:none}
}
@media (max-width:860px){
  .content-grid{grid-template-columns:1fr}
  .side{order:2}
}
@media (max-width:640px){
  .hero__inner{grid-template-columns:1fr;padding-top:30px}
  .hero__badge{order:-1;width:120px;margin-bottom:6px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}
@media (max-width:400px){
  .header-row{padding:10px 14px}
  .brand img{height:30px}
}

/* ---------- blog listing + cards (taxi-checker motif, same tokens as the rest of the site) ---------- */
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin:14px 0 0;padding:0;list-style:none}
.hero-meta li{display:flex;align-items:center;gap:7px;color:#d6d5e0;font-size:.86rem}
.hero-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:0 0 auto}
.blog-list-wrap{padding:34px 0 10px}
.blog-grid{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;min-width:0}
.blog-card{display:flex;flex-direction:column;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.blog-card:hover{border-color:var(--yellow);transform:translateY(-2px)}
.blog-card .b-date{margin:0;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--blue)}
.blog-card .b-title{margin:0;font-size:1.08rem;font-weight:800;color:var(--ink);line-height:1.32}
.blog-card .b-excerpt{margin:0;color:var(--text-soft);font-size:.9rem;flex:1;line-height:1.5}
.blog-card .b-more{color:var(--yellow-deep);font-weight:800;font-size:.86rem}
.blog-crumb{margin:0 0 16px;font-size:.85rem;color:var(--text-soft)}
.blog-crumb a{color:var(--blue);text-decoration:none;font-weight:700}
.blog-crumb a:hover{text-decoration:underline}
.seo-article .blog-meta{margin:-8px 0 20px;color:var(--text-soft);font-size:.85rem}
@media (max-width:560px){
  .blog-grid{grid-template-columns:1fr}
}