:root{
      --green:#006600;
      --dark:#23282d;
      --glass: blur(14px);
      --card: rgba(255,255,255,.84);
    }

    body{
      margin:0;
      background:#0b1220;
      color:#fff;
      overflow-x:hidden;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    /* FULL HERO */
    .hero{
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      display:flex;
      align-items: center;
    }

    .hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(120deg, rgba(35,40,45,.92), rgba(0,102,0,.55)),
        url('../img/fondo.jpg') center/cover no-repeat;
      transform: scale(1.03);
      filter: saturate(1.05);
    }

    .hero::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 500px at 15% 20%, rgba(255,255,255,.14), transparent 60%),
        radial-gradient(900px 500px at 85% 30%, rgba(0,102,0,.18), transparent 60%);
      pointer-events:none;
    }

    .hero-inner{
      position:relative;
      z-index:2;
      width:100%;
      padding: 84px 0 28px;
    }

    /* TOP LOGO centered – sin chip (para que no se pierda) */
    .top-logo{
      position:absolute;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 6px 10px;
      border-radius: 14px;
      background: transparent; /* <- clave */
    }
    .top-logo img{
      height: 110px;
      width:auto;
      display:block;
      filter:
        drop-shadow(0 10px 16px rgba(0,0,0,.45))
        drop-shadow(0 2px 2px rgba(0,0,0,.35));
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: var(--glass);
      color:#fff;
      font-weight:600;
    }

    .subtitle{
      color: rgba(255,255,255,.88);
      font-size: 1.05rem;
    }

    /* Glass card */
    .glass-card{
      background: var(--card);
      border: 1px solid rgba(15,23,42,.10);
      border-radius: 18px;
      backdrop-filter: var(--glass);
      box-shadow: 0 22px 50px rgba(2,6,23,.30);
      color: #0f172a;
    }

    /* Buttons */
    .btn-brand{
      background: linear-gradient(135deg, var(--green), #0a7a0a);
      border: 0;
      color:#fff;
      box-shadow: 0 16px 28px rgba(0,102,0,.25);
    }
    .btn-brand:hover{ filter: brightness(1.04); color:#fff; }

    .btn-ghost{
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.25);
      color:#fff;
      backdrop-filter: var(--glass);
    }
    .btn-ghost:hover{
      background: rgba(255,255,255,.16);
      border-color: rgba(255,255,255,.35);
      color:#fff;
    }

    /* Chips */
    .chip{
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      padding:.65rem .85rem;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.10);
      backdrop-filter: var(--glass);
      color:#fff;
    }
    .chip i{ color: #a7ffb0; margin-top:2px; }
    .chip .lbl{
      font-size:.78rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:.78;
    }
    .chip .val{ font-weight:700; line-height:1.2; }

    /* Countdown */
    .countdown{
        display:flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
        flex-direction: row;
        justify-content: center;
    }
    .cd{
      min-width: 95px;
      text-align:center;
      padding: 10px 10px;
      border-radius: 14px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(15,23,42,.08);
      color:#0f172a;
      box-shadow: 0 12px 18px rgba(2,6,23,.12);
    }
    .cd .n{ font-weight:900; font-size: 1.35rem; color: var(--green); line-height:1; }
    .cd .t{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#64748b; }

    /* Lightbox */
    .lb{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.72);
      display:none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      padding: 18px;
    }
    .lb.open{ display:flex; }
    .lb-inner{
      max-width: min(1100px, 96vw);
      max-height: 90vh;
      position: relative;
    }
    .lb-img{
      width: 100%;
      height: auto;
      max-height: 90vh;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 30px 80px rgba(0,0,0,.55);
      background:#fff;
    }
    .lb-close{
      position:absolute;
      top:-14px;
      right:-14px;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.14);
      color:#fff;
      display:grid;
      place-items:center;
      cursor:pointer;
      backdrop-filter: var(--glass);
    }
    .lb-close:hover{ background: rgba(255,255,255,.22); }

    /* Loading overlay (tu #div_loading) */
    #div_loading{
      position: fixed;
      inset: 0;
      display:none; /* tu JS lo pone flex */
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,.45);
      z-index: 3000;
    }
    #div_loading .spinner-border{ width: 3rem; height: 3rem; }

    /* Mobile polish */
    @media (max-width: 991.98px){
      .hero-inner{ padding-top: 115px; }
      .top-logo img{ height: 70px; }
      h1{ font-size: 1.9rem !important; }
      .cd{ min-width: 65px; }
    }

    .error{
        display: block;
        margin-top: .25rem;
        font-size: .85rem;
        color: #dc3545; /* rojo Bootstrap */
        font-weight: 600;
    }