/* gana.css — tema de gana777gua.com: azul, rojo y blanco */
:root{
  --azul:#1d3bbf;
  --azul-vivo:#2449e0;
  --azul-hondo:#0f2283;
  --noche:#081050;
  --rojo:#d7192a;
  --rojo-hondo:#a90f1d;
  --oro:#ffd128;
  --cielo:#edf2ff;
  --cielo-2:#dfe8ff;
  --tinta:#141c3a;
  --gris:#525d7d;
  --linea:#d5ddf3;
  --blanco:#fff;
  --radio:14px;
  --sombra:0 10px 30px rgba(15,34,131,.12);
  --titulos:"Saira",system-ui,sans-serif;
  --texto:"Hind",system-ui,sans-serif;
}
body{background:var(--blanco);color:var(--tinta);font-family:var(--texto);font-size:1.07rem;line-height:1.65}
a{color:var(--azul);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--rojo)}

/* --- franja roja superior --- */
.topbar{background:var(--rojo);color:#fff;font-size:.86rem;line-height:1.3}
.topbar-row{display:flex;gap:1.6rem;align-items:center;min-height:32px;padding-top:4px;padding-bottom:4px}
.topbar-row span{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.topbar-row span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oro)}
.topbar-row .topbar-end{margin-left:auto;font-weight:600}
.topbar-row .topbar-end::before{display:none}

/* --- barra azul --- */
.navbar{background:var(--azul);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 0 var(--azul-hondo)}
.navbar-row{display:flex;align-items:center;gap:1rem;min-height:70px}
.navbar-brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;flex-shrink:0}
.navbar-brand:hover{color:#fff}
.navbar-brand img{width:46px;height:46px}
.brand-word{font-family:var(--titulos);font-weight:800;font-size:1.55rem;letter-spacing:.02em;line-height:1}
.brand-word b{color:var(--oro);font-weight:800}
.brand-place{display:block;font-family:var(--texto);font-weight:500;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85;margin-top:3px}
.navbar-collapse{display:flex;align-items:center;gap:1rem;margin-left:auto}
.navbar-nav{display:flex;gap:.2rem;list-style:none;margin:0;padding:0}
.nav-link{display:block;color:#fff;text-decoration:none;font-family:var(--titulos);font-weight:600;font-size:1rem;padding:.55rem .8rem;border-radius:8px}
.nav-link:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-link.active{background:#fff;color:var(--azul)}
.navbar-toggler{display:none;margin-left:auto;background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff;border-radius:8px;padding:.45rem .7rem;font-family:var(--titulos);font-weight:600;font-size:.95rem;cursor:pointer;align-items:center;gap:.5rem}
.toggler-bars{display:inline-block;width:18px;height:2px;background:#fff;position:relative}
.toggler-bars::before,.toggler-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
.toggler-bars::before{top:-6px}.toggler-bars::after{top:6px}
.btn-primary{background:var(--rojo);color:#fff;border-color:var(--rojo);font-family:var(--titulos);letter-spacing:.02em}
.btn-primary:hover{background:var(--rojo-hondo);border-color:var(--rojo-hondo);color:#fff;transform:translateY(-1px)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline-light:hover{background:#fff;color:var(--azul)}

/* --- cinta típica (tejido) --- */
.woven{height:10px;background:
  linear-gradient(135deg,var(--rojo) 25%,transparent 25%) -6px 0/12px 10px,
  linear-gradient(225deg,var(--rojo) 25%,transparent 25%) -6px 0/12px 10px,
  linear-gradient(315deg,var(--oro) 25%,transparent 25%) 0 0/12px 10px,
  linear-gradient(45deg,var(--oro) 25%,transparent 25%) 0 0/12px 10px,
  var(--azul-hondo)}

/* --- franja de ruta --- */
.page-band{background:var(--cielo);border-bottom:1px solid var(--linea)}
.crumb-list{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:.75rem 0;font-size:.92rem;color:var(--gris)}
.crumb-list li+li::before{content:"›";margin-right:.35rem;color:var(--rojo);font-weight:700}
.crumb-list a{color:var(--azul);text-decoration:none}
.crumb-list a:hover{text-decoration:underline}

/* --- texto principal --- */
.article-content{padding-top:2.2rem;padding-bottom:1rem}
.article-content h1{font-family:var(--titulos);font-weight:800;color:var(--azul-hondo);font-size:clamp(1.85rem,4.2vw,2.9rem);line-height:1.12;margin:0 0 .9rem;letter-spacing:-.01em}
.article-content h2{font-family:var(--titulos);font-weight:700;color:var(--azul-hondo);font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.2;margin:2.4rem 0 .8rem;padding-left:.9rem;border-left:5px solid var(--rojo)}
.article-content h3{font-family:var(--titulos);font-weight:600;color:var(--tinta);font-size:1.15rem;margin:1.5rem 0 .4rem}
.article-content p{margin:0 0 1rem}
.article-content .lead{font-size:1.2rem;line-height:1.6;color:#26315a}
.article-content ul,.article-content ol{padding-left:1.4rem;margin:0 0 1.1rem}
.article-content li{margin-bottom:.4rem}
.article-content ul li::marker{color:var(--rojo)}
.article-content ol li::marker{color:var(--azul);font-weight:700;font-family:var(--titulos)}
.article-content .note{font-size:.95rem;color:var(--gris);border-top:1px dashed var(--linea);padding-top:1rem;margin-top:2rem}
.data-date{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--rojo);background:#fff1f2;border:1px solid #f7c6cb;border-radius:999px;padding:.25rem .85rem;margin:0 0 1.2rem!important}
.data-date::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rojo)}

.table-responsive{margin:1.2rem 0 1.4rem;border:1px solid var(--linea);border-radius:var(--radio)}
.table{width:100%;border-collapse:collapse;font-size:.98rem;background:#fff}
.table th{background:var(--azul);color:#fff;font-family:var(--titulos);font-weight:600;text-align:left;padding:.7rem .9rem;white-space:nowrap}
.table td{padding:.65rem .9rem;border-top:1px solid var(--linea);vertical-align:top}
.table tbody tr:nth-child(even) td{background:#f6f8ff}
.table td:first-child{font-weight:600;color:var(--azul-hondo)}

.figure-wide{margin:1.6rem 0;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.figure-wide img{width:100%;height:auto;display:block}
.figure-badge{margin:1.4rem 0;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;background:var(--noche);color:#dfe6ff;padding:1rem 1.2rem;border-radius:var(--radio)}
.figure-badge img{width:220px;height:auto}
.figure-badge figcaption{font-size:.92rem;flex:1 1 200px}
.figure-senator{background:#120d2e}

/* escudos y logos de juegos */
.crest-strip{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:center;background:var(--cielo);border:1px solid var(--linea);border-radius:var(--radio);padding:1.2rem;margin:1.4rem 0}
.crest-strip img{height:72px;width:auto}
.crest-strip figcaption{flex-basis:100%;text-align:center;font-size:.9rem;color:var(--gris)}
.jack-logos{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0 .4rem}
.jack-logo{display:flex;align-items:center;gap:.6rem;background:var(--noche);color:#fff;border-radius:12px;padding:.5rem .9rem .5rem .5rem;font-family:var(--titulos);font-weight:600;font-size:.95rem}
.jack-logo img{width:56px;height:56px}
.jack-logo b{color:var(--oro);font-weight:700}

/* llamada final */
.cta-band{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;background:linear-gradient(110deg,var(--azul) 0%,var(--azul-hondo) 100%);color:#fff;border-radius:var(--radio);padding:1.3rem 1.5rem;margin:2.2rem 0 1rem;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;border:18px solid rgba(255,209,40,.18)}
.cta-band img{width:52px;height:52px}
.cta-band p{margin:0;flex:1 1 260px;font-size:1.02rem}
.cta-band .btn{position:relative;z-index:1}

/* --- portada: tarjetas altas --- */
.home-intro{max-width:900px}
.home-content>p,.home-content>h2,.home-content>h3,.home-content>ul,.home-content>ol{max-width:820px}
.home-content>.cta-band{max-width:none}
.cat-row{margin-top:1.6rem;margin-bottom:.6rem}
.cat-row>div{margin-bottom:1.4rem}
.cat-card{height:100%;min-height:520px;border-radius:18px;overflow:hidden;color:#fff;box-shadow:var(--sombra);transition:transform .2s,box-shadow .2s}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(15,34,131,.22)}
.cat-art{position:relative;height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cat-card .card-body{padding:1.1rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.card-title{font-family:var(--titulos);font-weight:800;font-size:1.65rem;text-transform:uppercase;letter-spacing:.03em;line-height:1;color:var(--oro);margin:0}
.cat-card p{margin:0;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.92)}
.cat-card .card-title{color:var(--oro);font-size:1.65rem;line-height:1}
.cat-link{margin-top:auto;font-family:var(--titulos);font-weight:600;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.cat-arrow{display:inline-block;transition:transform .2s}
.cat-card:hover .cat-arrow{transform:translateX(4px)}
.cat-link:hover{color:#fff}
.cat-sports{background:linear-gradient(180deg,#1f45d6 0%,#0f2283 100%)}
.cat-sports .cat-art{background:
  radial-gradient(circle at 50% 120%,rgba(255,255,255,.25) 0 30%,transparent 31%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 40px,transparent 40px 80px)}
.crest-grid{display:grid;grid-template-columns:repeat(2,96px);gap:16px}
.crest-grid span{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.crest-grid img{height:70px;width:auto;max-width:76px;object-fit:contain}
.cat-art-note{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.cat-casino{background:linear-gradient(180deg,#3a1d9a 0%,#160a52 100%)}
.cat-casino .cat-art img{width:100%;height:100%;object-fit:cover;object-position:center top}
.cat-live{background:linear-gradient(180deg,#e0263a 0%,#8e0b18 100%)}
.cat-live .cat-art{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18) 0,transparent 60%)}
.wheel{width:210px;height:210px;border-radius:50%;position:relative;
  background:conic-gradient(#1b1b1b 0 10deg,#c4111f 10deg 20deg,#1b1b1b 20deg 30deg,#c4111f 30deg 40deg,#1b1b1b 40deg 50deg,#c4111f 50deg 60deg,#1b1b1b 60deg 70deg,#c4111f 70deg 80deg,#1b1b1b 80deg 90deg,#c4111f 90deg 100deg,#1b1b1b 100deg 110deg,#c4111f 110deg 120deg,#1b1b1b 120deg 130deg,#c4111f 130deg 140deg,#1b1b1b 140deg 150deg,#c4111f 150deg 160deg,#1b1b1b 160deg 170deg,#c4111f 170deg 180deg,#1b1b1b 180deg 190deg,#c4111f 190deg 200deg,#1b1b1b 200deg 210deg,#c4111f 210deg 220deg,#1b1b1b 220deg 230deg,#c4111f 230deg 240deg,#1b1b1b 240deg 250deg,#c4111f 250deg 260deg,#1b1b1b 260deg 270deg,#c4111f 270deg 280deg,#1b1b1b 280deg 290deg,#c4111f 290deg 300deg,#1b1b1b 300deg 310deg,#c4111f 310deg 320deg,#1b1b1b 320deg 330deg,#c4111f 330deg 340deg,#1b1b1b 340deg 350deg,#139a4a 350deg 360deg);
  border:10px solid #c79a2a;box-shadow:0 0 0 4px #6d4b0c,0 14px 30px rgba(0,0,0,.4);animation:giro 18s linear infinite}
.wheel::before{content:"";position:absolute;inset:38px;border-radius:50%;background:radial-gradient(circle,#ffe58a 0 18%,#c79a2a 19% 30%,#5a3a06 31% 33%,#a5741a 34% 100%)}
.wheel::after{content:"";position:absolute;top:22px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.5)}
@keyframes giro{to{transform:rotate(360deg)}}
.live-pill{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--rojo);font-family:var(--titulos);font-weight:700;font-size:.82rem;letter-spacing:.08em;border-radius:999px;padding:.2rem .7rem}
.live-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rojo);animation:pulso 1.4s ease-in-out infinite}
@keyframes pulso{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.wheel,.live-pill::before{animation:none}}

/* --- bloque En quetzales --- */
.quetzal-block{display:flex;flex-wrap:wrap;background:var(--azul);color:#fff;border-radius:20px;overflow:hidden;margin:1.4rem 0 2rem;box-shadow:var(--sombra)}
.quetzal-side{flex:1 1 300px;padding:2rem 1.8rem;position:relative;background:
  radial-gradient(circle at 0 100%,rgba(255,209,40,.22) 0 120px,transparent 121px),var(--azul)}
.quetzal-mark{font-family:var(--titulos);font-weight:800;font-size:5.5rem;line-height:.9;color:var(--oro);display:block}
.quetzal-title{font-family:var(--titulos);font-weight:800;font-size:2rem;text-transform:uppercase;letter-spacing:.03em;margin:.3rem 0 .6rem;display:block}
.quetzal-side p{color:#dfe7ff;margin:0 0 .8rem}
.quetzal-side a{color:#fff}
.ticket{flex:1.4 1 380px;background:#fff;color:var(--tinta);margin:1.2rem;border-radius:14px;padding:1.1rem 1.3rem;position:relative;
  background-image:radial-gradient(circle at 0 50%,var(--azul) 0 9px,transparent 10px),radial-gradient(circle at 100% 50%,var(--azul) 0 9px,transparent 10px)}
.ticket-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px dashed var(--linea);padding-bottom:.6rem;margin-bottom:.4rem;font-family:var(--titulos);font-weight:700;color:var(--azul-hondo);font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}
.ticket-head span:last-child{color:var(--rojo)}
.ticket dl{margin:0}
.ticket-row{display:flex;align-items:baseline;gap:.5rem;padding:.38rem 0;font-size:.97rem}
.ticket-row dt{color:var(--gris);flex:0 1 auto}
.ticket-row .dots{flex:1 1 20px;border-bottom:2px dotted #c6cfe8;transform:translateY(-4px);min-width:16px}
.ticket-row dd{margin:0;font-weight:700;color:var(--azul-hondo);text-align:right;font-family:var(--titulos)}

/* --- guías (recursos) --- */
.guide-list{display:grid;grid-template-columns:1fr;gap:.8rem;list-style:none;padding:0!important;margin:1.2rem 0 1.6rem!important}
.guide-list li{margin:0;position:relative;background:#fff;border:1px solid var(--linea);border-left:5px solid var(--azul);border-radius:12px;padding:.85rem 1rem}
.guide-list li:nth-child(3n+2){border-left-color:var(--rojo)}
.guide-list li:nth-child(3n){border-left-color:var(--oro)}
.guide-list a{font-family:var(--titulos);font-weight:700;font-size:1.06rem;text-decoration:none;color:var(--azul-hondo)}
.guide-list a:hover{color:var(--rojo)}
.guide-list span{display:block;color:var(--gris);font-size:.95rem;margin-top:.15rem}
@media (min-width:768px){.guide-list{grid-template-columns:1fr 1fr}}

/* --- anterior / siguiente --- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0 3rem}
.pager a{display:block;border:2px solid var(--linea);border-radius:var(--radio);padding:.9rem 1.1rem;text-decoration:none;color:var(--azul-hondo);background:#fff;transition:border-color .15s,background .15s}
.pager a:hover{border-color:var(--azul);background:var(--cielo)}
.pager small{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--rojo);font-weight:600}
.pager strong{font-family:var(--titulos);font-weight:700;font-size:1.05rem}
.pager .pager-next{text-align:right;grid-column:2}

/* --- pie --- */
.site-footer{background:var(--noche);color:#c9d3f5;margin-top:2rem;font-size:.97rem}
.footer-main{padding:2.6rem 0 1.6rem}
.footer-main .row>div{margin-bottom:1.4rem}
.footer-brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;margin-bottom:.9rem}
.footer-brand img{width:44px;height:44px}
.footer-brand:hover{color:#fff}
.footer-label{font-family:var(--titulos);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;margin:0 0 .7rem}
.footer-links li{margin-bottom:.4rem}
.footer-links a{color:#c9d3f5;text-decoration:none}
.footer-links a:hover{color:var(--oro)}
.footer-about{margin:0;max-width:420px}
.footer-rg{background:var(--rojo);color:#fff}
.footer-rg .container{display:flex;align-items:center;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.footer-rg img{width:40px;height:40px;flex-shrink:0}
.footer-rg p{margin:0;font-size:.95rem;line-height:1.45}
.footer-rg a{color:#fff;font-weight:600}
.footer-base{background:#050a38;color:#8f9bd0;font-size:.88rem}
.footer-base .container{padding-top:.8rem;padding-bottom:.8rem}

/* --- 404 --- */
.lost{padding:3.5rem 0 2rem;text-align:center}
.lost-code{font-family:var(--titulos);font-weight:800;font-size:clamp(4rem,14vw,8rem);line-height:1;color:var(--azul);margin:0}
.lost-code span{color:var(--rojo)}
.lost-text{font-size:1.15rem;max-width:560px;margin:.6rem auto 1.6rem}
.lost-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;list-style:none;padding:0;margin:0 0 1.6rem}
.lost-links a{display:block;border:2px solid var(--azul);border-radius:999px;padding:.45rem 1.1rem;text-decoration:none;font-family:var(--titulos);font-weight:600}
.lost-links a:hover{background:var(--azul);color:#fff}

/* --- móvil --- */
@media (max-width:991px){
  .navbar-toggler{display:inline-flex}
  .navbar-collapse{display:none;position:absolute;left:0;right:0;top:100%;background:var(--azul-hondo);flex-direction:column;align-items:stretch;padding:.8rem 16px 1.2rem;gap:.8rem;box-shadow:0 12px 24px rgba(0,0,0,.25)}
  .navbar-collapse.show{display:flex}
  .navbar-nav{flex-direction:column}
  .nav-link{padding:.7rem .8rem;font-size:1.05rem}
  .navbar-row{position:relative}
}
@media (max-width:767px){
  body{font-size:1.02rem}
  .article-content .lead{font-size:1.1rem}
  .topbar-row{gap:1rem;font-size:.8rem}
  .topbar-row span:nth-child(2),.topbar-row span:nth-child(3){display:none}
  .cat-card{min-height:0}
  .cat-art{height:240px}
  .ticket{margin:0 .8rem 1rem}
  .ticket-row{font-size:.92rem;justify-content:space-between;border-bottom:1px dotted #c6cfe8}
  .ticket-row .dots{display:none}
  .ticket-row dt{flex:1 1 55%}
  .ticket-row:last-child{border-bottom:0}
  .quetzal-side{padding:1.5rem 1.3rem}
  .quetzal-mark{font-size:4rem}
  .pager{grid-template-columns:1fr}
  .pager .pager-next{grid-column:1}
  .table{font-size:.92rem}
  .table th,.table td{padding:.55rem .65rem}
  .figure-badge img{width:180px}
  .footer-rg .container{align-items:flex-start}
}
@media (max-width:420px){
  .brand-word{font-size:1.3rem}
  .navbar-brand img{width:40px;height:40px}
  .brand-place{display:none}
  .topbar-row .topbar-end{display:none}
  .crest-grid{grid-template-columns:repeat(2,84px)}
  .crest-grid span{width:84px;height:84px}
  .crest-grid img{height:60px}
}