:root{--bg:#0b1410;--panel:#101a16;--panel-2:#0e1713;--line:#143327;--muted:#9eb2a9;--text:#e9ffef;--brand:#12c26d;--brand-2:#84cc16;--accent:#22e884;--danger:#ef4444;--ok:#22c55e}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:radial-gradient(1200px circle at 10% -10%,#0f1f17 0,transparent 50%),radial-gradient(1200px circle at 110% 110%,#0f1f17 0,transparent 50%),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial}
  a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{cursor:pointer}
  [hidden]{display:none!important}
  .container{max-width:1200px;margin:0 auto;padding:0 16px}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .space{height:24px}.shadow{box-shadow:0 10px 30px rgba(18,194,109,.15)}
  .panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:16px;padding:16px}
  .panelGlow{background:linear-gradient(180deg,#0f1f17,#0e1713);border-radius:18px;padding:2px;position:relative}
  .panelGlow::before{content:"";position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,#134e36 0%,#1b6a48 40%,#1a3c2d 70%);filter:blur(14px);opacity:.35;z-index:0}
  .panelGlow>.inside{position:relative;z-index:1;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:16px;padding:16px}
  .badge{display:inline-flex;gap:8px;align-items:center;background:rgba(34,200,120,.12);color:#bbffd8;border:1px solid #1f5a41;padding:8px 12px;border-radius:999px;font-weight:800;letter-spacing:.3px}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid #1f5a41;font-weight:800;letter-spacing:.2px;background:#13241c;color:#d9ffe9}
  .btn:hover{border-color:#2a7b58}.btn.primary{border-color:transparent;background:linear-gradient(90deg,#0fb86a,#67d657)}
  .btn.subtle{background:#0d1914}.btn.block{display:flex;justify-content:center;width:100%}
  .btn.success{border-color:transparent;background:linear-gradient(90deg,#10b981,#67d657);color:#062012;margin-right: 16px;}
  .btn.danger{border-color:#5c1a1a;background:linear-gradient(90deg,#ef4444,#f87171);color:#2b0a0a}
  .muted{color:var(--muted);padding:16px; padding-left: 0}
  .muted-featured{color:var(--muted);padding:0px; padding-left: 0}
  .muted-text{color:var(--muted);padding:16px; padding-left: 16px}

  
  .shadow-img{
  box-shadow:0 10px 30px rgba(18,194,109,.15);
  margin: 0 auto 16px;
  }
  
  /* Clase específica para estos botones */
.hero-btns {
  display: flex;
  gap: 12px;
}

/* Responsive: reduce tamaño en móvil */
@media (max-width: 640px) {
  .hero-btns .btn {
    /* transform: scale(0.85);  /* reduce tamaño 15% */
    transform-origin: center;
  }

  .hero-btns {
    flex-wrap: nowrap;        /* fuerza que se mantengan en la misma fila */
    justify-content: flex-start; /* opcional: ajusta alineación */
  }
}
  
  .hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Por defecto: móvil oculto, desktop visible */
.hero-img-mobile {
  display: none;
}

/* Desktop: el panel original se muestra */
.hero-row > .panel {
  display: block;
}

/* Móvil: <640px */
@media (max-width: 640px) {
  .hero-img-mobile {
    display: block;
    margin: 0 auto 16px; 
    /* margin-bottom: 16px; /* espacio entre imagen y título */
    width: 90%;          /* se adapta al ancho de la pantalla */
  }

  .hero-img-mobile img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
  }

  /* Oculta el panel original a la derecha */
  .hero-row > .panel {
    display: none;
  }
}


  
  .title{
  font-weight:900;
  letter-spacing:-.02em;
  padding:16px
  }

.title-xl {
  display: block;
  font-size: clamp(24px, 8vw, 52px); /* 🔹 escala según ancho de pantalla */
  line-height: 1.1;                  /* un poco más de espacio para dos líneas */
  margin: 0;
  word-break: break-word;             /* rompe palabras largas si es necesario */
  white-space: normal;                /* permite saltos de línea naturales */
  max-width: 100%;
}

/* Ajuste adicional en pantallas muy pequeñas */
@media (max-width: 480px) {
  .title-xl {
    font-size: clamp(20px, 10vw, 36px);
    text-align: left;  /* opcional: centra el texto */
    padding: 16px
  }
}
  
  .title-lg{
  font-size:30px;
  line-height:1.12;
  padding:16px
  }
  
  .title-lg {
  padding-top: 6px;
  padding-bottom: 0px;
  margin-top: 0;
  margin-bottom: 0px;
}

  
  .title-md{font-size:22px}
  .mono{font-family:ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
  .mono-badge{font-family:ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; margin-top: 4px;}
  .pill{border:1px solid #1f5a41;border-radius:999px;padding:8px 14px;background:#0e1a15;color:#c7ffe1;font-weight:700}
  .pill.active{color:#0b1a13;background:linear-gradient(90deg,#10b981,#84cc16);border-color:transparent}
  .grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:980px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.title-xl{font-size:36px}}
  @media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}.title-xl{font-size:30px}}
  header.nav{top:0;z-index:50;backdrop-filter:saturate(160%) blur(10px);background:rgba(10,18,15,.7);border-bottom:1px solid var(--line)}
  header .brand{display:flex;align-items:center;gap:10px}
  .logo{position:relative;width:40px;height:40px;border-radius:12px;overflow:hidden}
  .logo::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#19d47a,#a3e635)}
  .logo .inner{position:absolute;inset:2px;background:#0f1f17;border-radius:10px;display:grid;place-items:center}
  .logo svg{width:22px;height:22px}nav a{padding:10px 12px;border-radius:10px;font-weight:800;color:#c9ffe6}nav a:hover{color:#82ffc2}
  .hero{position:relative;overflow:hidden}
  .hero .pattern{position:absolute;inset:0;opacity:.06;pointer-events:none;background-image:
    radial-gradient(circle at 20% 20%, #35ff9b 0 2px, transparent 3px),
    radial-gradient(circle at 40% 60%, #35ff9b 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, #35ff9b 0 2px, transparent 3px);background-size:200px 200px;mix-blend-mode:screen}
  .cloverRow{display:flex;gap:8px;flex-wrap:wrap}
  .progress{height:8px;background:#0f1b16;border-radius:999px;overflow:hidden;border:1px solid #163c2c}.progress>span{display:block;height:100%;background:linear-gradient(90deg,#17c56d,#7ee63f)}
  .raffle-card img{width:100%;height:180px;object-fit:cover;border-radius:12px}
  
  /* Logo + texto a la izquierda */
.nav .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px; /* separa del borde */
}

/* Por defecto (desktop) oculto */
.nav .menu-toggle {
  display: none;
  cursor: pointer;
  padding: 10px;
}

/* En móvil (<768px) se muestra */
@media (max-width: 768px) {
  .nav .menu-toggle {
    display: block;
    cursor: pointer;
    padding: 10px 12.5px; /* arriba/abajo 10px, izquierda/derecha 12.5px → 25% más ancho */
    font-size: 24px; 
  }

  /* Oculta nav por defecto y lo muestra solo cuando se agrega la clase .show */
  .nav nav {
    display: none;
    flex-direction: column;
    gap: 12px;
    background: var(--panel);
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 16px;
  }

  .nav nav.show {
    display: flex;
  }
}


/* Estilos para links cuando se muestra */
.nav nav.show {
  display: flex;
}

  
  .hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px; /* espacio entre columnas */
}

/* Móvil: apila elementos y centra */
@media (max-width: 640px) {
  .hero-row {
    flex-direction: column;
    align-items: center;
  }

  .hero-row > div:first-child {
    order: 0; /* texto primero */
    width: 100%; /* ocupa todo el ancho disponible */
  }

  .hero-row > .panel {
    order: 1; /* imagen debajo del texto */
    margin-top: 16px;
    width: 90%; /* ajuste de ancho en móvil */
  }

  .hero-row img {
    width: 100%;
    height: auto; /* mantiene proporción */
  }
}

.hero .muted {
  padding: 0;
  margin-top: 4px;
}



/* GRID VIRTUAL */
.nums {
  position: relative;
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c1713;
  padding-right: 4px; /* menos padding para que no “coma” espacio */
    will-change: transform;
  overflow-anchor: none;
}

.nums .vpad {
  height: 0;
}

.nums .vwin {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px; /* menos gap para que se vean más juntos */
  will-change: transform;
  padding: 4px 0 4px 0; /* padding más pequeño */
}

.nums::-webkit-scrollbar {
  width: 6px; /* scrollbar más delgada */
}

.nums::-webkit-scrollbar-thumb {
  background: #1f5a41;
  border-radius: 8px;
}

.num {
  position: relative;
  width: 56px;
  height: 36px;
  border: 1px solid #1e3e30;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  background: #0e1a15;
  color: #ffffff; /* texto blanco por defecto */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  content-visibility: auto;
  contain-intrinsic-size: 36px 56px;
  transition: background 0.2s, color 0.2s;
}
.num.verified{
  width: 75px;
}

.num.sel {
  color: #062012;
  background: linear-gradient(90deg, #10b981, #84cc16);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.35);
}

.num.sold {
  color: #557a6a;
  background: #0d1612;
  border-color: #233b30;
  cursor: not-allowed;
}

.num.sold::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    #2a4e3c 6px,
    #2a4e3c 8px
  );
  opacity: 0.25;
}

.num.hold {
  background: #000;
  color: #7aa395;
  border-color: #000;
  cursor: not-allowed;
}

.nums-mini {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px; /* menos gap para mini grid */
}

#wLeft {
  margin-left: 16px; /* separa el botón izquierdo del borde */
}  
  
  .small{
  font-size:12px
  }
  
  html, body {
    height: 100%;          /* Necesario para que el flex funcione */
    margin: 0;             /* Quita márgenes por defecto */
    display: flex;
    flex-direction: column; /* Pone el footer al final */
  }

  main {
    flex: 1;               /* Hace que el contenido principal crezca */
  }
  
  .footer{
    border-top:1px solid var(--line);
    color:var(--muted);
    padding:16px 0
  }

/* Solo en pantallas móviles */
  @media (max-width: 768px) {
  .footer {
    /*position: fixed;*/
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 16px ;
  }
}
  
  .waFloat{position:fixed;right:16px;bottom:16px;background:linear-gradient(90deg,#1ad472,#7ee63f);color:#032515;border:1px solid #2a7b58;padding:12px 16px;border-radius:16px;font-weight:900;box-shadow:0 10px 25px rgba(18,194,109,.35);z-index:9999}
  .tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid #1f5a41;background:#0d1914;color:#a6ffcf}

  .slider{position:relative;border-radius:12px;overflow:hidden;height:320px}
  .slider img{width:100%;height:100%;object-fit:cover}
  

/* Ajuste de grid para móvil */
@media (max-width: 768px) {
  .grid.grid-2 {
    grid-template-columns: 1fr; /* una sola columna */
  }

  .grid {
    width: 100%;
    max-width: 100vw;           /* no más ancho que la pantalla visible */
    margin: 0 auto;             /* centra si hay padding o margen lateral */
    box-sizing: border-box;
  }

  .panel {
    width: 100%;
    max-width: 100vw;
  }
}

  /* styles para los dots de image slider show
  .dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center}
  .dots span{width:8px;height:8px;border-radius:999px;background:#11402e;box-shadow:0 0 0 1px #1f5a41 inset}
  .dots span.active{background:#22e884}
  */


  .modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;place-items:center;z-index:60}
  .modal.open{display:grid}
  .modal .box{max-width:720px;width:100%;padding:16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel-2))}
  .grid-2-compact{display:grid;grid-template-columns:1fr;gap:12px;align-items:center}
  .grid-2-compact>div:nth-child(2n+1){text-align:left}
  .grid-2-compact>div:nth-child(2n){text-align:right}
  @media (max-width:640px){.grid-2-compact{grid-template-columns:1fr}}
  input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0e1a15;color:#e9ffef!important}
  ::placeholder{color:#cfeede} select option{background:#0e1a15;color:#e9ffef}
  .pulse{animation:pulse 1s ease}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,232,132,.6)}100%{box-shadow:0 0 0 14px rgba(34,232,132,0)}}
  #d-info{text-align:center} #d-info .title-md{margin-bottom:6px}

  .checkout-grid{display:grid; grid-template-columns: 1.2fr 0.45fr 1fr 0.9fr; gap:12px; align-items:end}
  #cLada.narrow{max-width:100%}
  @media (max-width:800px){ .checkout-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .checkout-grid{grid-template-columns:1fr} }

  .contact-card{padding:16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel-2))}

  /* PAGOS */
  .pay-wrap{display:grid;gap:16px}
  .pay-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .wa-list{display:flex;flex-wrap:wrap;gap:8px}
  .wa-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);background:#0e1a15;border-radius:999px;font-weight:800;color:#c7ffe1}
  .wa-chip:hover{border-color:#2a7b58}
  .pay-section{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--panel-2));padding:0}
  .pay-section h4{margin:0;padding:14px 16px;border-bottom:1px solid var(--line);text-align:center;background:linear-gradient(90deg,#10b98133,#84cc1633);letter-spacing:.3px}
  .banks{display:grid;gap:12px;padding:12px}
  .bank-card{padding:16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#0f1915,#0d1713)}
  .bank-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .bank-name{display:flex;align-items:center;gap:10px;font-weight:900}
  .bank-name img{width:28px;height:28px;border-radius:6px;object-fit:contain;background:#0b1410;border:1px solid #143327}
  .kv{display:grid;grid-template-columns:110px 1fr auto;gap:8px;align-items:center;margin-top:6px}
  .kv .label{color:#a6cdbd}
  .copy{padding:6px 10px;border-radius:8px;border:1px solid #1f5a41;background:#0d1914;color:#a6ffcf;font-weight:800}
  .copy[data-val]{user-select:all}
  .stores{padding:12px}
  .store-card{padding:16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#0f1915,#0d1713);display:flex;align-items:center;justify-content:space-between}
  .store-left{display:flex;align-items:center;gap:10px}
  .store-left img{width:36px;height:36px;border-radius:8px;background:#0b1410;border:1px solid #143327;object-fit:contain}
  @media (max-width:720px){ .kv{grid-template-columns:100px 1fr} }

  /* VERIFICADOR */
  .verify-results{border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .verify-results table{width:100%;border-collapse:collapse}
  .verify-results thead th{background:#0e1a15;padding:10px;border-bottom:1px solid var(--line);text-align:left}
  .verify-results td{padding:10px;border-bottom:1px solid #0f1b16}
  .verify-results tr:last-child td{border-bottom:none}
  .status-paid{background:#0f7b2d;color:#fff;padding:6px 10px;border-radius:8px;font-weight:800}
  .status-unpaid{background:#ef4444;color:#fff;padding:6px 10px;border-radius:8px;font-weight:800}
  .mono-xs{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.3px}
  
  
.share-circle {
  width: 60px;              /* tamaño del botón */
  height: 60px;
  border: none;
  border-radius: 0;       /* botón redondo */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: transparent;
  transition: transform 0.15s ease;
}


.share-circle img {
  width: 60px;
  height: 60px;
  border-radius: 0;
  object-fit: contain;
}


.share-circle:hover {
  transform: scale(1.1);
}


.maquinasuerte{font-family:arial}