/* ===== RESET / BASE ===== */
*,*::before,*::after {box-sizing:border-box;}
:root {--text:#a39f9f;--bg-top:#030b3d;--bg-bottom:#000006;}
html,body {
  margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  color:var(--text);line-height:1.4;
  background:linear-gradient(10deg,var(--bg-top) 0%,var(--bg-bottom) 50%);
  background-attachment:fixed;
}

/* ===== UTILIDADES ===== */
a {text-decoration:none;color:inherit;}
img {display:block;max-width:100%;height:auto;will-change:transform;}
.hidden {display:none!important;}
.center {display:flex;align-items:center;justify-content:center;}

/* ===== TOP INFO ===== */
.top-info {padding:15px;font-size:1.2rem;font-weight:bold;color:var(--text);}

/* ===== GRID PRINCIPAL ===== */
.icon-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:2rem;padding:2rem;max-width:1600px;margin:auto;
}
.icon-card {
  position:relative;display:flex;flex-direction:column;
  align-items:center;transition:transform .2s ease-in-out;z-index:1;
}
.icon-card img {
  transition:transform .3s ease,filter .3s ease,box-shadow .3s ease;
  filter:brightness(1);box-shadow:none;
}
.icon-card img:hover {
  transform:scale(1.12) translateY(1);
  animation:halo-electrico-multicolor 1s ease-in-out infinite;
}

/* ===== ETIQUETAS DE ICONOS ===== */
.icon-card span {
  position:absolute;bottom:-10px;left:0;right:0;margin:auto;
  text-align:center;background:transparent;color:#00fd61;
  padding:6px 10px;border-radius:6px;white-space:nowrap;
  font-size:20px;opacity:0;visibility:hidden;
  transform:scale(0) translateY(6px);transform-origin:center top;
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;z-index:10;
}
.icon-card:hover span {opacity:1;visibility:visible;transform:scale(1) translateY(0);}

/* ===== ANIMACIÓN HALO ===== */
@keyframes halo-electrico-multicolor {
  0% {filter:brightness(1.45) drop-shadow(0 0 8px rgba(255,0,0,.8)) drop-shadow(0 0 18px rgba(255,0,0,.5));}
  20% {filter:brightness(1.55) drop-shadow(0 0 10px rgba(255,140,0,1)) drop-shadow(0 0 22px rgba(255,140,0,.6));}
  40% {filter:brightness(1.5) drop-shadow(0 0 10px rgba(255,255,0,1)) drop-shadow(0 0 24px rgba(255,255,0,.6));}
  60% {filter:brightness(1.55) drop-shadow(0 0 12px rgba(0,255,0,1)) drop-shadow(0 0 26px rgba(0,255,0,.6));}
  80% {filter:brightness(1.6) drop-shadow(0 0 12px rgba(0,180,255,1)) drop-shadow(0 0 28px rgba(0,180,255,.7));}
  100% {filter:brightness(1.45) drop-shadow(0 0 8px rgba(255,0,255,.9)) drop-shadow(0 0 20px rgba(255,0,255,.5));}
}

/* ===== BUSCADOR ===== */
.buscador-simple {
  display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:530px;margin-top:10px;
}
.buscador-simple input {
  width:100%;padding:12px;font-size:18px;
  border:2px solid #f1effa;border-radius:6px;
  background:#f1effa;color:#092866;
}
.buscador-simple button {
  padding:12px;font-size:18px;background:#2944dd;color:#fff;
  border:none;border-radius:6px;cursor:pointer;
}
.buscador-simple button:hover {background:#3658f1;}

/* ===== BANNERS / FRASES ===== */
.banner-block {text-align:center;position:relative;z-index:2;}
.banner-block img {margin:auto;display:block;}
.google-block img {width:200px;max-width:33%;margin:0 auto;object-fit:contain;}
.frase {font-size:1.3rem;color:#99FF00;margin:0 auto;max-width:1000px;line-height:1.5;}
.frase-final {text-align:center;margin:40px 0 20px;font-size:18px;}
.banner-extra {display:block;width:255px;margin:30px auto 0;}
.banner-extra img {width:100%;cursor:pointer;}

/* ===== ESTRELLAS PRINCIPALES (CAPA SUAVE) ===== */
.stars::before {
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle 1px rgba(27,66,151,.95),transparent 1px),
    radial-gradient(circle 1px rgba(112,91,230,.85),transparent 1px),
    radial-gradient(circle .8px rgba(255,255,255,.7),transparent .8px);
  background-size:120px 120px,200px 200px,320px 320px;
  background-position:10px 20px,60px 140px,200px 60px;
  opacity:.18;filter:blur(.6px);transform:translateZ(0);
}

/* ===== MICRO-ESTRELLAS (CAPA PROFUNDA) ===== */
.stars-deep {
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:hidden;
}
.stars-deep .micro-star {
  position:absolute;width:1px;height:1px;background:rgb(143,204,240);
  border-radius:50%;opacity:0;transition:opacity 600ms ease;
  will-change:opacity,transform;transform:translateZ(0);
}
.micro-star.small {transform:translate(-50%,-50%) scale(.6);}
.micro-star.mid {transform:translate(-50%,-50%) scale(1);}
.micro-star.large {transform:translate(-50%,-50%) scale(1.4);}

/* ===== DESTELLO (BURST) ===== */
@keyframes star-burst {
  0% {opacity:0;transform:scale(.3) rotate(0deg);}
  30% {opacity:1;transform:scale(1.5) rotate(40deg);}
  60% {opacity:1;transform:scale(1.9) rotate(110deg);}
  100% {opacity:0;transform:scale(.4) rotate(160deg);}
}
.micro-star.burst {
  animation:star-burst 1.8s ease-out forwards;
}
.micro-star.burst::before,
.micro-star.burst::after {
  content:"";position:absolute;left:50%;top:50%;
  width:2px;height:16px;transform-origin:center;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 100%);
  filter:blur(.05px);pointer-events:none;
}
.micro-star.burst::before {transform:translate(-50%,-50%) rotate(0deg);}
.micro-star.burst::after {transform:translate(-50%,-50%) rotate(90deg);}

/* ===== GOOGLE PORTAL ===== */
.google-block-portal {pointer-events:auto;z-index:99;position:fixed;}

/* ===== ANIMACIÓN TELEGRAM ===== */
.fly-wrapper {position:relative;display:inline-block;animation:planeFloat 2.2s ease-in-out infinite;}
.telegram-plane {width:100%;height:auto;}
@keyframes planeFloat {
  0% {transform:translateY(-12px);}
  50% {transform:translateY(12px);}
  100% {transform:translateY(-12px);}
}

/* ===== MEDIA QUERIES ===== */
@media (max-width:640px){
  .stars-deep {display:none;}
  .stars::before {background-size:180px 180px,360px 360px,520px 520px;opacity:.10;filter:blur(.9px);}
  #svg-stars {opacity:.8;}
}