/* ===== Botón de teléfono Tarot (versión integrada en plugin) ===== */

/* Contenedor bajo el nombre */
.tarot-card .tarot-telefono{
  margin:10px 0 20px;
  display:flex;
  justify-content:center;
}

/* Botón principal */
.tarot-phone-btn{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:13rem;
  height:3rem;
  overflow:hidden;
  cursor:pointer;
  border-radius:5rem;
  border:double 4px transparent;
  background-size:300% 300%;
  transition:.5s;
  animation:gradient_301 5s ease infinite;
  text-decoration:none;
  backdrop-filter:blur(1rem);
  text-align:center;

  /* mismo gradient para contenido y borde */
  background-image:
    linear-gradient(137.48deg,#ffdb3b 10%,#fe53bb 45%,#8f51ea 67%,#0044ff 87%),
    linear-gradient(137.48deg,#ffdb3b 10%,#fe53bb 45%,#8f51ea 67%,#0044ff 87%);
  background-origin:border-box;
  background-clip:content-box, border-box;
}

/* Texto */
.tarot-phone-btn .label{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.05;
}
.tarot-phone-btn .country{
  text-transform:lowercase;
  color:#fff;
  font-size:15px;
  letter-spacing:.5px;
  text-shadow:0 0 4px rgba(255,255,255,.6);
}
.tarot-phone-btn .country::first-letter{
  text-transform:uppercase;
}
.tarot-phone-btn .phone{
  margin-top:2px;
  color:#fff;
  font-weight:700;
  font-size:18px;
  text-shadow:0 0 4px rgba(255,255,255,.6);
}

/* Fondo de estrellas (sin oscurecer) */
.tarot-phone-btn .tarot-container-stars{
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:5rem;
  transition:.3s;
  background:transparent;
  backdrop-filter:none;
}
.tarot-phone-btn:hover .tarot-container-stars{
  background:transparent;
}

/* Glow decorativo */
.tarot-phone-btn .tarot-glow{
  position:absolute;
  display:flex;
  width:12rem;
}
.tarot-phone-btn .tarot-circle{
  width:100%;
  height:30px;
  filter:blur(2rem);
  animation:pulse_3011 4s infinite;
  z-index:-1;
}
.tarot-phone-btn .tarot-circle:nth-of-type(1){
  background:rgba(254,83,186,.45);
}
.tarot-phone-btn .tarot-circle:nth-of-type(2){
  background:rgba(142,81,234,.45);
}

/* Hover / Active */
.tarot-phone-btn:hover{
  transform:scale(1.1);
}
.tarot-phone-btn:active{
  border:double 4px #fe53bb;
  animation:none;
  background-origin:border-box;
  background-clip:content-box,border-box;
}
.tarot-phone-btn:active .tarot-circle{
  background:#fe53bb;
}

/* Estrellas */
.tarot-phone-btn .tarot-stars{
  position:relative;
  background:transparent;
  width:200rem;
  height:200rem;
}
.tarot-phone-btn .tarot-stars::after{
  content:"";
  position:absolute;
  top:-10rem;
  left:-100rem;
  width:100%;
  height:100%;
  animation:animStarRotate 90s linear infinite;
  background-image:radial-gradient(#ffffff 1px,transparent 1%);
  background-size:50px 50px;
}
.tarot-phone-btn .tarot-stars::before{
  content:"";
  position:absolute;
  top:0;
  left:-50%;
  width:170%;
  height:500%;
  animation:animStar 60s linear infinite;
  opacity:.5;
  background-image:radial-gradient(#ffffff 1px,transparent 1%);
  background-size:50px 50px;
}

/* Animaciones */
@keyframes animStar{
  from{transform:translateY(0)}
  to{transform:translateY(-135rem)}
}
@keyframes animStarRotate{
  from{transform:rotate(360deg)}
  to{transform:rotate(0)}
}
@keyframes gradient_301{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes pulse_3011{
  0%{transform:scale(.75);box-shadow:0 0 0 0 rgba(0,0,0,.7)}
  70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0,0,0,0)}
  100%{transform:scale(.75);box-shadow:0 0 0 0 rgba(0,0,0,0)}
}