/* ==========================================
   Crystal Glass Links Component PRO
   ========================================== */

.cg-links-widget {
  --cg-primary: #ffffff;
  --cg-glass: rgba(255, 255, 255, 0.18);
  --cg-glass-hover: rgba(255, 255, 255, 0.28);
  --cg-border: rgba(255, 255, 255, 0.45);
  --cg-shadow: rgba(0, 0, 0, 0.35);

  width: min(92%, 420px);
  margin: 10px auto;
  position: relative;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;

  isolation: isolate;
}


/* Luz ambiental detrás del cristal */
.cg-links-widget::before {
  content: "";
  position: absolute;
  inset: -30px;

  background:
    radial-gradient(
      circle at top left,
      rgba(0, 170, 255, .45),
      transparent 45%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(160, 80, 255, .35),
      transparent 45%
    );

  filter: blur(35px);
  z-index: -1;
}


/* ===================
   BOTÓN PRINCIPAL
   =================== */

.cg-toggle-btn {

  width: 100%;
  min-height: 60px;

  padding: 18px 24px;

  border-radius: 22px;
  border: 1px solid var(--cg-border);

  color: black;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.30),
      rgba(255,255,255,.08)
    );

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  box-shadow:

    0 20px 45px var(--cg-shadow),

    inset 0 1px 1px rgba(255,255,255,.8),

    inset 0 -15px 30px rgba(0,0,0,.15);


  display:flex;
  align-items:center;
  justify-content:space-between;


  font-size:1.1rem;
  font-weight:700;

  cursor:pointer;

  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;

}


.cg-toggle-btn:hover {

  transform:
    translateY(-4px)
    scale(1.02);


  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.45),
      rgba(255,255,255,.15)
    );


  box-shadow:
    0 30px 60px rgba(0,0,0,.45),
    inset 0 1px 2px white;

}


/* icono */

.cg-icon {

  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
    rgba(255,255,255,.20);

  border:
    1px solid rgba(255,255,255,.4);

  font-size:1.5rem;

  transition:.4s ease;

}


/* ===================
   PANEL LINKS
   =================== */

.cg-links-panel {

  margin-top:18px;

  padding:18px;

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.25),
      rgba(255,255,255,.08)
    );


  border:
    1px solid rgba(255,255,255,.45);


  backdrop-filter:
    blur(30px);

  -webkit-backdrop-filter:
    blur(30px);



  box-shadow:

    0 30px 70px rgba(0,0,0,.45),

    inset 0 1px 2px rgba(255,255,255,.8);


  display:flex;
  flex-direction:column;
  gap:12px;


  opacity:0;

  max-height:0;

  overflow:hidden;

  transform:
    translateY(-20px)
    scale(.96);


  transition:

    opacity .4s ease,
    max-height .5s ease,
    transform .4s ease;

}



/* enlaces */

.cg-links-panel a {

  position:relative;

  overflow:hidden;

  padding:

    15px 18px;


  border-radius:18px;


  color:rgb(0, 0, 0);

  text-decoration:none;

  font-weight:600;


  background:

    linear-gradient(
      120deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.08)
    );


  border:

    1px solid rgba(255,255,255,.3);


  box-shadow:

    inset 0 1px 1px rgba(255,255,255,.5);


  transition:.35s ease;

}



.cg-links-panel a::before {

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  transform:
    translateX(-100%);

  transition:.6s;

}



.cg-links-panel a:hover::before {

  transform:
    translateX(100%);

}



.cg-links-panel a:hover {

  transform:
    translateX(8px)
    scale(1.03);


  background:
    rgba(255,255,255,.32);


  box-shadow:

    0 10px 30px rgba(0,0,0,.25);

}



/* ===================
   ESTADO ABIERTO
   =================== */


.cg-links-widget.cg-open
.cg-links-panel {

  opacity:1;

  max-height:500px;


  transform:
    translateY(0)
    scale(1);

}



.cg-links-widget.cg-open
.cg-icon {

  transform:
    rotate(45deg);

}



/* ===================
   RESPONSIVE
   =================== */


@media(max-width:600px){

  .cg-links-widget {

    width:94%;

  }


  .cg-toggle-btn {

    min-height:55px;

    padding:
      15px 18px;

  }


  .cg-links-panel {

    padding:14px;

  }


  .cg-links-panel a {

    padding:
      13px 15px;

  }

}