:root{
  --bg:#0a0b0e; --bg2:#101319; --card:#151920; --card2:#1a1f28; --line:#242a34;
  --txt:#eceae6; --dim:#95958f; --dim2:#6d6d68;
  --oro:#c9a227; --oro2:#e6c463; --rojo:#a8342c; --rojo2:#d1483d;
  --verde:#4fae6c; --azul:#5b8dd9;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
a{color:var(--oro2)}
h1,h2,h3{line-height:1.15}

/* ================= CABECERA ================= */
header{position:sticky;top:0;z-index:60;background:rgba(10,11,14,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.logo{font-weight:800;letter-spacing:.1em;font-size:15px;text-decoration:none;color:var(--txt);white-space:nowrap}
.logo span{color:var(--oro);margin:0 5px}
.logo small{color:var(--dim);font-weight:500;letter-spacing:.04em}
.nav nav{display:flex;gap:16px;font-size:13.5px;flex-wrap:wrap}
.nav nav a{color:var(--dim);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav nav a:hover{color:var(--txt)}
.nav nav a.on{color:var(--oro2);border-bottom-color:var(--oro)}
.estado{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--dim);white-space:nowrap}
.estado b{color:var(--txt);font-family:var(--mono)}
.punto{width:8px;height:8px;border-radius:50%;background:var(--dim2);flex:none}
.punto.up{background:var(--verde);box-shadow:0 0 9px var(--verde)}
.punto.down{background:var(--rojo2)}
.hamb{display:none;cursor:pointer;font-size:22px;color:var(--dim)}

/* ================= PORTADA ================= */
.hero{
  text-align:center;padding:76px 0 60px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 380px at 50% -8%, rgba(201,162,39,.20), transparent 62%),
    radial-gradient(700px 300px at 80% 20%, rgba(168,52,44,.13), transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg));
}
.badge{display:inline-block;border:1px solid rgba(201,162,39,.5);color:var(--oro2);
  border-radius:999px;padding:5px 15px;font:700 11px/1 var(--mono);letter-spacing:.16em;margin-bottom:20px}
.hero h1{font-size:clamp(36px,7vw,64px);letter-spacing:-.02em;font-weight:800;
  background:linear-gradient(180deg,#fff,#c8bfa4);-webkit-background-clip:text;background-clip:text;color:transparent}
.lema{color:var(--dim);font-size:clamp(15px,2.1vw,19px);margin:14px auto 0;max-width:620px}

/* -------- cuenta atras -------- */
.cuenta-atras{margin:30px auto 0;max-width:520px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.ca-tit{font:700 11px/1 var(--mono);letter-spacing:.2em;color:var(--oro);margin-bottom:14px}
.ca-nums{display:flex;justify-content:center;gap:10px}
.ca-nums>div{flex:1;background:#0b0d11;border:1px solid var(--line);border-radius:9px;padding:12px 4px}
.ca-nums span{display:block;font:700 26px/1 var(--mono);color:var(--txt)}
.ca-nums small{display:block;font-size:10.5px;color:var(--dim);margin-top:5px;letter-spacing:.08em;text-transform:uppercase}
.ca-fecha{margin-top:12px;font-size:12.5px;color:var(--dim)}
.cuenta-atras.abierto .ca-nums{opacity:.35}

/* -------- rates -------- */
.rates{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:30px 0 4px}
.rates .r{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line);border-top:2px solid var(--oro);
  border-radius:11px;padding:14px 20px;min-width:104px;
}
.rates .r span{display:block;font:800 26px/1 var(--mono);color:var(--oro2)}
.rates .r small{display:block;font-size:11px;color:var(--dim);margin-top:6px;letter-spacing:.09em;text-transform:uppercase}
.chico-rates{justify-content:flex-start;margin:16px 0 30px}
.chico-rates .r{min-width:92px;padding:11px 16px}
.chico-rates .r span{font-size:21px}

.acciones{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.estado-linea{margin-top:24px;font-size:13.5px;color:var(--dim);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}

/* ================= SECCIONES ================= */
main{padding-bottom:60px}
section{padding:50px 0}
section+section{border-top:1px solid var(--line)}
h1{font-size:clamp(28px,5vw,42px);letter-spacing:-.02em;margin-bottom:10px}
h2{font-size:clamp(21px,3vw,29px);margin-bottom:9px}
h3{font-size:16.5px;margin-bottom:7px}
.lead{color:var(--dim);margin-bottom:26px;max-width:700px}
.chico{color:var(--dim);font-size:13px}
.estrecho{max-width:560px}

/* -------- tarjetas de numeros -------- */
.tarjetas{display:flex;gap:11px;flex-wrap:wrap}
.t{flex:1;min-width:118px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:16px 14px;text-align:center}
.t .n{display:block;font:800 22px/1.15 var(--mono);color:var(--oro2)}
.t .e{display:block;font-size:11.5px;color:var(--dim);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}

/* -------- botones -------- */
.btn{display:inline-block;background:linear-gradient(180deg,var(--oro2),var(--oro));color:#1a1408;border:0;border-radius:9px;
  padding:12px 21px;font:700 14px/1 var(--sans);cursor:pointer;text-decoration:none;transition:filter .15s,transform .12s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn.sec:hover{border-color:#3c434f;background:#191d24;filter:none}
.btn.grande{padding:14px 26px;font-size:15px}
.chico-btn{padding:9px 15px;font-size:13px}
.desactivado{opacity:.4;cursor:not-allowed}

/* -------- rejilla -------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;transition:border-color .2s,transform .2s}
.card:hover{border-color:#39414e;transform:translateY(-2px)}
.card p{color:var(--dim);font-size:14px}
.card .ico{font-size:22px;display:block;margin-bottom:10px}
.card.voto .btn{margin-top:12px}
.card.apagado{opacity:.55}
.producto .precio{margin:12px 0 10px;font:800 21px/1 var(--mono);color:var(--oro2)}
.form-compra{display:flex;gap:8px;flex-wrap:wrap}
.form-compra select{flex:1;min-width:128px}

/* -------- pasos -------- */
.pasos{list-style:none;counter-reset:p;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pasos li{counter-increment:p;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 20px 20px 22px;position:relative}
.pasos li::before{content:counter(p,decimal-leading-zero);display:block;
  font:800 13px/1 var(--mono);color:var(--oro);margin-bottom:10px;letter-spacing:.1em}
.pasos p{color:var(--dim);font-size:14px;margin-bottom:12px}

/* -------- dos columnas -------- */
.dosc{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.tabla-info{width:100%;border-collapse:collapse;font-size:14.5px}
.tabla-info td{padding:11px 4px;border-bottom:1px solid var(--line)}
.tabla-info td:first-child{color:var(--dim);width:52%}
.tabla-info td:last-child{text-align:right;font-weight:600}
.caja-cta{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);
  border-radius:13px;padding:24px;text-align:center}
.caja-cta.ancho{max-width:600px;margin:0 auto}
.caja-cta p{color:var(--dim);font-size:14px;margin-bottom:16px}

/* -------- formularios -------- */
.form{display:grid;gap:14px;max-width:440px;margin:18px 0}
.form-linea{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-linea label{flex:1;min-width:200px}
label{display:block;font-size:13.5px;color:var(--dim)}
input[type=text],input[type=password],select{
  width:100%;margin-top:6px;background:#08090c;border:1px solid var(--line);
  color:var(--txt);border-radius:8px;padding:11px 13px;font:400 15px/1.3 var(--sans)}
input:focus,select:focus{outline:0;border-color:var(--oro)}

/* -------- avisos -------- */
.aviso,.error,.exito{border-radius:11px;padding:17px 19px;margin:16px 0;font-size:14.5px}
.aviso{background:var(--card);border:1px solid var(--line)}
.error{background:rgba(209,72,61,.12);border:1px solid rgba(209,72,61,.45);color:#f0b5b0}
.exito{background:rgba(79,174,108,.12);border:1px solid rgba(79,174,108,.45);color:#b8e8c6}
.exito h2{color:#d8f5e2}
.caja{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin:16px 0}
code{font-family:var(--mono);background:#08090c;border:1px solid var(--line);border-radius:5px;padding:2px 6px;font-size:13px;color:var(--oro2)}
pre.cod{background:#08090c;border:1px solid var(--line);border-radius:8px;padding:12px;
  overflow-x:auto;font:13px/1.5 var(--mono);color:var(--oro2);margin-top:10px}

/* -------- tablas -------- */
.tabla{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;display:block;overflow-x:auto}
.tabla th,.tabla td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tabla th{color:var(--dim);font:600 11.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase}
.tabla tr:hover td{background:#14171d}
.tabla .pos{font-family:var(--mono);color:var(--dim)}
.tabla .pos.medalla{color:var(--oro2);font-weight:700}
.tabla .acc{display:flex;gap:6px}
.tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px}
.tag.ok{background:rgba(79,174,108,.16);color:#8ed9a6}
.tag.no{background:rgba(209,72,61,.16);color:#e8a9a4}

/* -------- pestanas / chips -------- */
.pestanas{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pestanas a{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:13px;text-decoration:none;color:var(--dim)}
.pestanas a:hover,.pestanas a.on{color:var(--oro2);border-color:rgba(201,162,39,.45)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13.5px}
.chip small{color:var(--dim);margin-left:5px;font-family:var(--mono)}

/* -------- reglas -------- */
ol.rules{list-style:none;counter-reset:r;display:grid;gap:11px;margin-top:8px}
ol.rules li{counter-increment:r;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--rojo);border-radius:10px;padding:15px 17px 15px 52px;position:relative}
ol.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:16px;top:15px;
  font:700 13px/1.4 var(--mono);color:var(--rojo2)}
ol.rules b{font-size:15px}
ol.rules p{color:var(--dim);font-size:13.5px;margin-top:3px}
.mini{margin:8px 0 0 18px;font-size:14px;color:var(--dim)}
.mini li{margin:3px 0}
.fila-titulo{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}

/* ================= PIE ================= */
footer{padding:30px 0;border-top:1px solid var(--line);background:var(--bg2)}
.pie{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.pie-links{display:flex;gap:18px;font-size:13.5px;flex-wrap:wrap}
.pie-links a{color:var(--dim);text-decoration:none}
.pie-links a:hover{color:var(--oro2)}

/* ================= MOVIL ================= */
@media (max-width:860px){
  .hamb{display:block;order:2}
  .nav nav{display:none;order:4;width:100%;justify-content:center;gap:14px;padding-bottom:12px}
  #menu-tog:checked ~ nav{display:flex}
  .nav{height:auto;padding:12px 0;flex-wrap:wrap}
  .estado{order:3}
}
@media (max-width:640px){
  .hero{padding:52px 0 44px}
  section{padding:38px 0}
  .rates .r{min-width:88px;padding:12px 14px}
  .rates .r span{font-size:21px}
  .ca-nums span{font-size:21px}
}

/* ===================== AGREGADOS PARA GUNZ ===================== */
.barra-top{background:#07080a;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.barra-top .wrap{display:flex;align-items:center;gap:10px;height:34px;flex-wrap:wrap}
.bt-sep{color:var(--dim2)}
.bt-derecha{margin-left:auto;display:flex;gap:14px}
.barra-top a{color:var(--dim);text-decoration:none}
.barra-top a:hover{color:var(--txt)}
.barra-top a.destacado{color:var(--oro2);font-weight:600}
.bt-estado{display:flex;align-items:center;gap:6px}

.hero{position:relative;overflow:hidden}
.hero-fondo{position:absolute;inset:0;
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(168,52,44,.20), transparent 60%),
    radial-gradient(700px 300px at 80% 10%, rgba(91,141,217,.13), transparent 60%);
  pointer-events:none}
.hero-cont{position:relative}
.hero-datos{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero-datos .hd{background:rgba(21,25,32,.82);border:1px solid var(--line);border-radius:10px;
  padding:12px 18px;min-width:104px;display:flex;flex-direction:column;align-items:center;gap:3px}
.hero-datos .hd b{font:800 17px/1 var(--mono);color:var(--oro2)}
.hero-datos .hd small{font-size:10.5px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}

.col2{display:grid;gap:22px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.col2{grid-template-columns:1fr}}
.titulo-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.ver-mas{font-size:13px;color:var(--oro2);text-decoration:none;white-space:nowrap}
.ver-mas:hover{text-decoration:underline}

.noticia{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:13px}
.noticia .n-fecha{font:600 11.5px/1 var(--mono);color:var(--dim);letter-spacing:.06em;margin-bottom:8px}
.noticia h3,.noticia h2{margin-bottom:8px}
.noticia p,.noticia .n-cuerpo{color:var(--dim);font-size:14.5px}
.noticia.grande{padding:26px;margin-bottom:18px}
.noticia.grande .n-cuerpo{color:var(--txt);opacity:.88}

.lateral{display:grid;gap:13px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.panel h3{font-size:15px}
.destacado-panel{background:linear-gradient(180deg,var(--card2),var(--card));text-align:center}
.destacado-panel p{margin:8px 0 14px}

.lista-top{list-style:none;counter-reset:none;display:grid;gap:2px;margin-top:6px}
.lista-top li{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:7px;font-size:13.5px}
.lista-top li:hover{background:#191d24}
.lt-pos{width:22px;text-align:center;font:700 12px/1 var(--mono);color:var(--dim2);flex:none}
.lt-pos.m1{color:#e6c463}.lt-pos.m2{color:#c9cbd1}.lt-pos.m3{color:#c98b4b}
.lt-nom{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-val{color:var(--dim);font-family:var(--mono);font-size:12px;flex:none}

.franja{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card.destacada{border-color:rgba(201,162,39,.45);position:relative}
.etiqueta{position:absolute;top:-9px;right:14px;background:var(--oro);color:#1a1408;
  font:700 10.5px/1 var(--sans);letter-spacing:.06em;padding:4px 9px;border-radius:5px;text-transform:uppercase}

.faq details{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:15px 18px;margin-bottom:9px}
.faq summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--oro2);font-weight:700;margin-right:9px}
.faq details[open] summary::before{content:'−'}
.faq details p{color:var(--dim);font-size:14.5px;margin-top:10px}

textarea{width:100%;margin-top:6px;background:#08090c;border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:11px 13px;font:400 14.5px/1.5 var(--sans);resize:vertical}
textarea:focus{outline:0;border-color:var(--oro)}

.pie{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px;text-align:left}
.pie-col{display:flex;flex-direction:column;gap:5px}
.pie-col b{margin-bottom:5px;font-size:14px}
.pie-col a{color:var(--dim);text-decoration:none;font-size:13.5px}
.pie-col a:hover{color:var(--oro2)}
