/* Superficies interactivas: la misma luz azul y violeta en todos los botones. */
:root {
  --vidrio-borde: rgba(217, 222, 255, .39);
  --vidrio-borde-activo: rgba(239, 231, 255, .72);
  --vidrio-sombra: inset 0 1px 0 rgba(255, 255, 255, .37),
    inset 0 -3px 9px rgba(6, 14, 43, .27),
    0 8px 22px rgba(0, 0, 0, .23),
    0 5px 24px rgba(95, 105, 232, .12);
}

.boton {
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
}

/* El botón claro sigue siendo la acción principal, con profundidad y tinte del fondo. */
.boton-blanco {
  border-color: rgba(255, 255, 255, .87);
  background:
    radial-gradient(ellipse 135px 65px at var(--brillo-x, 50%) var(--brillo-y, 0px), rgba(255, 255, 255, .94), transparent 84%),
    linear-gradient(172deg, rgba(255, 255, 255, .98) 0%, rgba(233, 239, 255, .91) 47%, rgba(173, 194, 243, .83) 100%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .96),
    inset 0 -4px 12px rgba(58, 73, 143, .2),
    0 0 0 1px rgba(198, 189, 255, .25),
    0 11px 31px rgba(0, 0, 0, .27),
    0 7px 34px rgba(113, 100, 241, .19);
}
.boton-blanco:hover,
.boton-blanco:focus-visible {
  border-color: #fff;
  box-shadow: inset 0 2px 1px #fff,
    inset 0 -3px 10px rgba(58, 73, 143, .15),
    0 0 0 2px rgba(221, 217, 255, .39),
    0 14px 36px rgba(0, 0, 0, .28),
    0 8px 47px rgba(132, 104, 251, .32);
}

.boton-vidrio {
  border-color: var(--vidrio-borde);
  background:
    radial-gradient(ellipse 145px 72px at var(--brillo-x, 50%) var(--brillo-y, 0px), rgba(243, 231, 255, .38), transparent 84%),
    linear-gradient(170deg, rgba(215, 206, 255, .24), rgba(64, 66, 139, .37) 52%, rgba(15, 28, 63, .57));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -4px 10px rgba(11, 14, 53, .28),
    0 8px 24px rgba(0, 0, 0, .23),
    0 5px 29px rgba(103, 90, 236, .13);
}
.boton-vidrio:hover,
.boton-vidrio:focus-visible {
  border-color: var(--vidrio-borde-activo);
  background:
    radial-gradient(ellipse 145px 72px at var(--brillo-x, 50%) var(--brillo-y, 0px), rgba(250, 239, 255, .48), transparent 84%),
    linear-gradient(170deg, rgba(226, 209, 255, .31), rgba(78, 76, 158, .44) 52%, rgba(21, 38, 84, .63));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52),
    inset 0 -3px 9px rgba(11, 14, 53, .22),
    0 11px 29px rgba(0, 0, 0, .25),
    0 6px 38px rgba(125, 103, 255, .24);
}

/* Cristal oscuro para controles pequeños; las etiquetas informativas no son botones. */
.boton-circulo,
.servicio-abrir,
.pill-paso,
.tipo-cotizar,
.boton-pausa,
.faq-icono {
  border: 1px solid var(--vidrio-borde);
  background:
    radial-gradient(ellipse 90px 48px at var(--brillo-x, 38%) var(--brillo-y, 0px), rgba(231, 222, 255, .3), transparent 82%),
    linear-gradient(157deg, rgba(157, 171, 249, .19), rgba(62, 65, 134, .32) 53%, rgba(16, 28, 65, .48));
  box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.boton-circulo:hover,
.boton-circulo:focus-visible,
.servicio-abrir:hover,
.servicio-abrir:focus-visible,
.pill-paso:hover,
.pill-paso:focus-visible,
.tipo-cotizar:hover,
.tipo-cotizar:focus-visible,
.boton-pausa:hover,
.boton-pausa:focus-visible,
.faq-pregunta:hover .faq-icono,
.faq-pregunta:focus-visible .faq-icono {
  border-color: var(--vidrio-borde-activo);
  background:
    radial-gradient(ellipse 90px 48px at var(--brillo-x, 38%) var(--brillo-y, 0px), rgba(244, 230, 255, .46), transparent 82%),
    linear-gradient(157deg, rgba(177, 190, 255, .27), rgba(78, 74, 153, .42) 53%, rgba(24, 42, 88, .56));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .51),
    inset 0 -2px 8px rgba(8, 17, 54, .25),
    0 10px 24px rgba(0, 0, 0, .26),
    0 6px 31px rgba(117, 105, 250, .24);
}
.pill-paso.activa {
  border-color: rgba(180, 208, 255, .8);
  background:
    radial-gradient(ellipse 105px 44px at var(--brillo-x, 40%) var(--brillo-y, 0px), rgba(245, 236, 255, .49), transparent 83%),
    linear-gradient(160deg, rgba(138, 176, 255, .35), rgba(60, 92, 184, .43) 62%, rgba(19, 44, 96, .55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 23px rgba(27, 85, 200, .25);
}
.servicio.abierto .servicio-abrir,
.faq-item.abierto .faq-icono {
  color: #101a39;
  border-color: rgba(255, 255, 255, .92);
  background: linear-gradient(165deg, rgba(255, 255, 255, .98), rgba(188, 205, 249, .86));
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(73, 95, 169, .18), 0 7px 22px rgba(96, 132, 236, .29);
}
.faq-pregunta:hover,
.faq-pregunta:focus-visible {
  background: radial-gradient(ellipse 75% 120% at var(--brillo-x, 70%) var(--brillo-y, 0px), rgba(153, 175, 255, .11), transparent 78%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}

/* Filtros y navegación: la selección conserva su movimiento y gana un borde óptico. */
.filtro:hover,
.filtro:focus-visible {
  color: #fff;
  background: radial-gradient(ellipse 95px 40px at var(--brillo-x, 50%) var(--brillo-y, 0px), rgba(228, 217, 255, .24), transparent 84%), rgba(158, 178, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 11px rgba(93, 99, 229, .13);
}
.filtro.activo,
.filtro.activo:hover,
.filtro.activo:focus-visible { background: transparent; box-shadow: none; color: #101629; }
.filtros-indicador {
  border: 1px solid rgba(255, 255, 255, .86);
  background:
    radial-gradient(ellipse 120px 44px at 30% 0%, rgba(255, 255, 255, .96), transparent 85%),
    linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(208, 221, 255, .87) 58%, rgba(157, 181, 238, .85));
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 9px rgba(56, 79, 157, .16),
    0 0 0 1px rgba(169, 187, 255, .19), 0 7px 23px rgba(88, 124, 235, .32);
}
.nav-indicador,
.nav-enlaces a.activo {
  background: linear-gradient(170deg, rgba(243, 234, 255, .22), rgba(139, 161, 248, .12) 45%, rgba(77, 87, 161, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 7px rgba(11, 18, 58, .14);
}
.nav-enlaces a:hover,
.nav-enlaces a:focus-visible { background-color: rgba(223, 215, 255, .09); }

.video-play {
  border: 1px solid rgba(255, 255, 255, .88);
  background:
    radial-gradient(ellipse 65px 37px at var(--brillo-x, 35%) var(--brillo-y, 0px), #fff, transparent 85%),
    linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(199, 217, 255, .87) 65%, rgba(151, 183, 242, .83));
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(61, 88, 160, .2),
    0 9px 25px rgba(0, 0, 0, .34), 0 3px 22px rgba(119, 147, 255, .21);
}
.video:hover .video-play,
.video-play:focus-visible {
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(61, 88, 160, .16),
    0 12px 30px rgba(0, 0, 0, .39), 0 5px 29px rgba(145, 165, 255, .37);
}

/* El verde de WhatsApp mantiene sus ondas y expansión; solo recibe la misma luz. */
.whatsapp-flotante {
  border-color: rgba(101, 236, 156, .66);
  background-image: linear-gradient(150deg, rgba(234, 255, 240, .18), transparent 48%, rgba(2, 32, 17, .19));
  box-shadow: inset 0 1px 0 rgba(227, 255, 236, .33), inset 0 -3px 10px rgba(0, 37, 18, .31),
    0 12px 32px rgba(0, 0, 0, .38), 0 0 25px rgba(37, 211, 102, .16);
}
.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible {
  background-color: #25d366;
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .44), transparent 48%, rgba(0, 92, 38, .2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64), inset 0 -4px 10px rgba(0, 92, 38, .22),
    0 16px 40px rgba(0, 0, 0, .36), 0 0 30px rgba(37, 211, 102, .36);
}
.boton.marca-whatsapp:hover,
.boton.marca-whatsapp:focus-visible {
  border-color: rgba(69, 234, 126, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72),
    0 0 0 1px rgba(37, 211, 102, .48), 0 12px 36px rgba(0, 0, 0, .25),
    0 8px 41px rgba(37, 211, 102, .32);
}
.boton-circulo.marca-instagram:hover,
.boton-circulo.marca-instagram:focus-visible {
  border-color: rgba(253, 89, 73, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 30px rgba(214, 36, 159, .45);
}
.boton-circulo.marca-tiktok:hover,
.boton-circulo.marca-tiktok:focus-visible {
  border-color: rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), -4px 0 16px rgba(37, 244, 238, .45), 4px 0 16px rgba(254, 44, 85, .45);
}

@media (prefers-reduced-motion: reduce) {
  .boton-circulo, .servicio-abrir, .pill-paso, .tipo-cotizar, .boton-pausa, .faq-icono { transition-duration: .01ms; }
}