/* Web ANLOK 2026 · perla.css — los dos botones de la portada de inicio («Consulta gratuita» y «Servicios»), de perla
   (27/10/2026, a partir del PearlButton que pasó Xuban; el original es React, aquí CSS puro). Píldora de color con brillos
   de nácar por dentro, el texto que se funde hacia abajo y una estrella que pasa de ✧ a ✦ al pasar por encima.
   Estructura: a.btn.btn-perla(.btn-perla--ambar|--lila) > .perla__wrap > .perla__txt > (.perla__ico > span ✧ + span ✦) + texto.
   Va después de site.css y metal.css (el borde que gira no se aplica a .btn-perla). */

.inicio__botones .btn-perla{
  --perla-bg:#080808;
  padding:0;min-height:0;border:0;border-radius:100px;background-color:var(--perla-bg);
  color:rgba(255,255,255,.8);font-size:15.5px;font-weight:600;
  box-shadow:
    inset 0 .3rem .9rem rgba(255,255,255,.3),
    inset 0 -.1rem .3rem rgba(0,0,0,.7),
    inset 0 -.4rem .9rem rgba(255,255,255,.5),
    0 3rem 3rem rgba(0,0,0,.3),
    0 1rem 1rem -.6rem rgba(0,0,0,.8);
  transition:box-shadow .2s ease,transform .2s ease;
}
.perla__wrap{
  position:relative;display:block;overflow:hidden;border-radius:inherit;
  padding:13px 24px;   /* más pequeños (Xuban, 27/10): unos 45 px de alto */
}
.perla__wrap::before,.perla__wrap::after{content:"";position:absolute;pointer-events:none;transition:all .3s ease}
.perla__wrap::before{left:-15%;right:-15%;bottom:25%;top:-100%;border-radius:50%;background-color:rgba(255,255,255,.12)}
.perla__wrap::after{
  left:6%;right:6%;top:12%;bottom:40%;border-radius:22px 22px 0 0;
  box-shadow:inset 0 10px 8px -10px rgba(255,255,255,.8);
  background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);
}
.perla__txt{
  position:relative;display:flex;align-items:center;gap:8px;margin:0;transition:all .2s ease;transform:translateY(2%);
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,rgba(0,0,0,.5));mask-image:linear-gradient(to bottom,#000 45%,rgba(0,0,0,.5));
}
.perla__ico{display:inline-flex;font-size:1.05em;line-height:1}
.perla__ico span:nth-child(2){display:none}

.inicio__botones .btn-perla:hover{
  box-shadow:
    inset 0 .3rem .5rem rgba(255,255,255,.4),
    inset 0 -.1rem .3rem rgba(0,0,0,.7),
    inset 0 -.4rem .9rem rgba(255,255,255,.7),
    0 3rem 3rem rgba(0,0,0,.3),
    0 1rem 1rem -.6rem rgba(0,0,0,.8);
}
.btn-perla:is(:hover,:focus-visible) .perla__ico span:nth-child(1){display:none}
.btn-perla:is(:hover,:focus-visible) .perla__ico span:nth-child(2){display:inline-block}
.btn-perla:hover .perla__wrap::before{transform:translateY(-5%)}
.btn-perla:hover .perla__wrap::after{opacity:.4;transform:translateY(5%)}
.btn-perla:hover .perla__txt{transform:translateY(-4%)}
.inicio__botones .btn-perla:active{
  transform:translateY(4px);
  box-shadow:
    inset 0 .3rem .5rem rgba(255,255,255,.5),
    inset 0 -.1rem .3rem rgba(0,0,0,.8),
    inset 0 -.4rem .9rem rgba(255,255,255,.4),
    0 3rem 3rem rgba(0,0,0,.3),
    0 1rem 1rem -.6rem rgba(0,0,0,.8);
}

/* en los colores de la marca, no en negro (Xuban, 27/10): «Consulta gratuita» ámbar y «Servicios» lila */
.inicio__botones .btn-perla--ambar{--perla-bg:#F5A11F;color:#1B1C22}
.inicio__botones .btn-perla--lila{--perla-bg:#5B51F0;color:#FFFFFF}

@media (max-width:759px){
  .inicio__botones .btn-perla{font-size:14px}
  .perla__wrap{padding:13px 18px}
  .perla__txt{gap:8px}
}