/* ===== Tokens ===== */
:root{
  --accent:#ffcc00; --accent-2:#ff9d00;
  --header-h:80px;
}
@media (min-width:1024px){
  :root{ --header-h:120px; }
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:'Montserrat','Chakra Petch',sans-serif;
  background:#0a0a0b; color:#e9e9ee;
  overflow-x:hidden;
  padding-top:var(--header-h);  /* header fijo */
}
h1,h2,h3,.brand span{
  font-family:'Chakra Petch','Montserrat',sans-serif;
  font-weight:700; letter-spacing:.5px;
}
a{ color:inherit; text-decoration:none }

/* ===== Backgrounds ===== */
.bg-fallback{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(255,204,0,.12) 0%, transparent 60%),
    radial-gradient(60% 50% at 70% 80%, rgba(255,157,0,.10) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a0b 0%, #0a0a0b 60%, #11141a 100%);
}
.bg-video{ position:fixed; inset:0; z-index:-3; }
.bg-video video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.06) brightness(.9) }
.bg-overlay{
  position:fixed; inset:0; z-index:-2;
  pointer-events:none;
}

/* Halo global */
@media(pointer:fine){
  .halo{ position:fixed; inset:0; z-index:-1;
    background: radial-gradient(200px 200px at var(--x,50%) var(--y,50%), rgba(255,204,0,.08), transparent 60%);
    pointer-events:none;
  }
}

/* ===== Layout ===== */
.wrap{ max-width:1100px; margin:0 auto; padding:0 18px }

/* ===== Navbar ===== */
.topnav{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  background:#000; z-index:1000; padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{ display:flex; align-items:center; gap:12px; line-height:1 }
.logo-badge{
  display:inline-grid; place-items:center;
  width:calc(var(--header-h)/2); height:calc(var(--header-h)/2);
  border-radius:50%; font-weight:900;
  font-size:calc((var(--header-h)/2) * .38);
  color:#111;
  background: radial-gradient(circle at 30% 30%, #ffdc5a, #ffcc00 60%, #ff9d00 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 1px 3px rgba(255,255,255,.35);
  border:1px solid rgba(0,0,0,.2);
}
.nav-icons{ display:flex; align-items:center; gap:18px }
.nav-icons a, .nav-icons #themeToggle{
  color:#fff; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; cursor:pointer;
}
.nav-icons svg{ width:26px; height:26px; stroke:currentColor; fill:none; transition: color .18s ease, transform .18s ease }
.nav-icons a:hover svg, .nav-icons #themeToggle:hover svg{
  color:var(--accent); transform:translateY(-1px)
}
@media (min-width: 1024px){
  .brand > span:last-child {
    font-size: 2rem !important;
    font-weight: 700; 
    letter-spacing: 1px;
  }
}

/* Idioma */
.lang{ display:flex; align-items:center; gap:8px; color:#fff }
.lang svg{ width:24px; height:24px }
.lang:hover svg, .lang:focus-within svg{ color:var(--accent) }
.lang select{
  appearance:auto; background:#111; color:#fff;
  border:1px solid #222; border-radius:8px; padding:6px 8px; outline:none;
}
.lang select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(255,204,0,.25);
}
.lang select option:checked{
  background:var(--accent);
  color:#111;
}

/* ===== Hero ===== */
.hero{
  position: relative;      /* asegura la pila por encima de z negativos */
  z-index: 1;
  min-height: 100svh;      /* ocupa el alto del frame */
  display: flex;
  align-items: flex-end;   /* al borde inferior */
  justify-content: center; /* centrado horizontal */
  padding-bottom: 50px;    /* tu gap de prueba */
}
.hero > .wrap{
  width: min(1100px, 92vw);
  margin: 0 auto;
  text-align: center;
}
.hero .lead.slogan{
  margin: 0 0 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
}

/* Botones y badges (ajuste fino) */
.hero .cta{ display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero .badges{ margin-top: 10px; opacity: .9; }

/* ===== Botones ===== */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:600;
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#111
}
.btn-ghost{
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.2); color:#fff
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.35) }
.btn-primary:hover{ box-shadow:0 10px 28px rgba(255,204,0,.25) }

/* ===== Cards ===== */
.grid{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr) }
.card{
  grid-column:span 12;
  background:linear-gradient(180deg, rgba(18,19,22,.6), rgba(0,0,0,0));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:22px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (min-width:760px){
  .card.third{ grid-column:span 4 }
  .card.half{ grid-column:span 6 }
}
.card::after{
  content:""; position:absolute; inset:-1px; border-radius:18px;
  background:radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(255,204,0,.18), transparent 60%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,204,0,.15) inset;
  border-color:rgba(255,204,0,.35);
}
.card:hover::after{ opacity:1 }

/* Icono de título */
.card h3{ display:flex; align-items:center; gap:10px; margin:0 0 8px }
.card h3 .icon{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:rgba(255,204,0,.10); border:1px solid rgba(255,204,0,.35);
  box-shadow:0 4px 18px rgba(255,204,0,.10) inset;
}
.card h3 .icon svg{ width:18px; height:18px; stroke:var(--accent) }

/* Texto */
.muted{ color:#b7b7c3 }
.bullets{ margin:10px 0 0; padding-left:18px }
.bullets li{ margin:6px 0 }

/* ===== Footer (no fijo) ===== */
.footer{
  margin-top:54px; background:#000; color:#fff; padding:28px 0 36px; border-top:1px solid rgba(255,255,255,.08);
}
.footer-logo{ display:grid; place-items:center; margin-bottom:8px }
.logo-xl{
  width:72px; height:72px; font-size:28px; display:inline-grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, #ffdc5a, #ffcc00 60%, #ff9d00 100%);
  border-radius:50%; color:#111; font-weight:900;
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 1px 3px rgba(255,255,255,.35);
  border:1px solid rgba(0,0,0,.2);
}
.footer-links{ display:flex; justify-content:center; gap:18px; margin:10px 0 }
.footer-links a{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:#fff
}
.footer-links svg{ width:22px; height:22px; stroke:currentColor; transition: color .18s ease, transform .18s ease }
.footer-links a:hover svg{ color:var(--accent); transform:translateY(-1px) }
.footer-copy{ text-align:center; font-size:13px; color:#cfcfd8 }

.footer-logo-gebicon{ display:grid; place-items:center; margin-bottom:8px }
.footer-logo-gebicon img{ 
width:96px; height:40px; }


/* ===== Reveal ===== */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s, transform .6s }
.reveal.in{ opacity:1; transform:none }

/* ===== Accesibilidad ===== */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }