/* CSV48.6 · Unificación final de píldoras azules
   Una única receta cromática y de luz para CTA recientes y existentes. */
:root{
  --csv48-pill-blue-top:#63c8ff;
  --csv48-pill-blue-mid:#0868df;
  --csv48-pill-blue-bottom:#043a9f;
  --csv48-pill-blue-edge:#032c7b;
  --csv48-pill-blue-glow:rgba(14,111,224,.34);
}

/* Controles azules funcionales, aunque no lleven la clase is-interactive. */
:where(
  .csv-utility-actions .btn,
  .csv-aenor-actions .btn,
  #informacion-oficial .actions .btn,
  .services-section .actions .btn,
  .contact-toggle .btn.dark,
  a.btn.dark,
  button.btn.dark,
  .btn.alt,
  .btn.outline,
  .csv-object--call,
  .csv-object--route
){
  --cta-top:var(--csv48-pill-blue-top);
  --cta-mid:var(--csv48-pill-blue-mid);
  --cta-bottom:var(--csv48-pill-blue-bottom);
  --cta-edge:var(--csv48-pill-blue-edge);
  --cta-glow:var(--csv48-pill-blue-glow);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:999px!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.08) 31%,rgba(255,255,255,0) 47%),
    radial-gradient(120% 105% at 50% -10%,var(--cta-top) 0%,var(--cta-mid) 48%,var(--cta-bottom) 100%)!important;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.88),
    inset 0 -5px 9px rgba(0,22,69,.28),
    inset 0 0 0 2px rgba(255,255,255,.14),
    0 2px 0 var(--cta-edge),
    0 8px 14px rgba(6,23,43,.20),
    0 14px 30px var(--cta-glow)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.42)!important;
  transform:translateY(0) translateZ(0);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease,filter .16s ease!important;
  -webkit-tap-highlight-color:transparent;
}

:where(
  .csv-utility-actions .btn,
  .csv-aenor-actions .btn,
  #informacion-oficial .actions .btn,
  .services-section .actions .btn,
  .contact-toggle .btn.dark,
  a.btn.dark,
  button.btn.dark,
  .btn.alt,
  .btn.outline,
  .csv-object--call,
  .csv-object--route
)::before{
  content:"";
  position:absolute;
  z-index:0;
  left:8%;right:8%;top:5%;height:45%;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.18));
  opacity:.72;
  pointer-events:none;
  transform:translateY(-2px);
}

:where(
  .csv-utility-actions .btn,
  .csv-aenor-actions .btn,
  #informacion-oficial .actions .btn,
  .services-section .actions .btn,
  .contact-toggle .btn.dark,
  a.btn.dark,
  button.btn.dark,
  .btn.alt,
  .btn.outline,
  .csv-object--call,
  .csv-object--route
)::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:-45% auto -45% -42%;
  width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  opacity:.42!important;
  transform:skewX(-18deg) translateX(-230%)!important;
  pointer-events:none;
  transition:transform .62s cubic-bezier(.2,.7,.2,1),opacity .2s ease!important;
}

:where(
  .csv-utility-actions .btn,
  .csv-aenor-actions .btn,
  #informacion-oficial .actions .btn,
  .services-section .actions .btn,
  .contact-toggle .btn.dark,
  a.btn.dark,
  button.btn.dark,
  .btn.alt,
  .btn.outline,
  .csv-object--call,
  .csv-object--route
) > *{position:relative;z-index:3;color:#fff!important;-webkit-text-fill-color:#fff!important}

@media (hover:hover){
  :where(
    .csv-utility-actions .btn,
    .csv-aenor-actions .btn,
    #informacion-oficial .actions .btn,
    .services-section .actions .btn,
    .contact-toggle .btn.dark,
    a.btn.dark,
    button.btn.dark,
    .btn.alt,
    .btn.outline,
    .csv-object--call,
    .csv-object--route
  ):hover{
    transform:translateY(-3px) scale(1.015)!important;
    filter:saturate(1.08) brightness(1.045)!important;
    box-shadow:
      inset 0 2px 1px rgba(255,255,255,.94),
      inset 0 -5px 9px rgba(0,22,69,.24),
      inset 0 0 0 2px rgba(255,255,255,.17),
      0 3px 0 var(--cta-edge),
      0 12px 20px rgba(6,23,43,.23),
      0 18px 38px var(--cta-glow)!important;
  }
  :where(
    .csv-utility-actions .btn,
    .csv-aenor-actions .btn,
    #informacion-oficial .actions .btn,
    .services-section .actions .btn,
    .contact-toggle .btn.dark,
    a.btn.dark,
    button.btn.dark,
    .btn.alt,
    .btn.outline,
    .csv-object--call,
    .csv-object--route
  ):hover::after{transform:skewX(-18deg) translateX(650%)!important;opacity:.58!important}
}

:where(
  .csv-utility-actions .btn,
  .csv-aenor-actions .btn,
  #informacion-oficial .actions .btn,
  .services-section .actions .btn,
  .contact-toggle .btn.dark,
  a.btn.dark,
  button.btn.dark,
  .btn.alt,
  .btn.outline,
  .csv-object--call,
  .csv-object--route
):active{
  transform:translateY(2px) scale(.985)!important;
  filter:brightness(.96) saturate(1.03)!important;
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,.25),
    inset 0 -1px 2px rgba(255,255,255,.48),
    0 1px 0 var(--cta-edge),
    0 4px 8px rgba(6,23,43,.18)!important;
}

/* WhatsApp queda excluido: conserva su verde oficial. */
:where(.csv-object--whatsapp,.wa-open){
  --cta-top:var(--csv-cta-green-1,#73f58a);
  --cta-mid:var(--csv-cta-green-2,#22c65a);
  --cta-bottom:var(--csv-cta-green-3,#078a36);
  --cta-edge:#056b2c;
  --cta-glow:rgba(24,190,83,.34);
}

@media(max-width:650px){
  :where(.csv-utility-actions .btn,.csv-aenor-actions .btn,#informacion-oficial .actions .btn,.services-section .actions .btn){
    min-height:50px;
    padding-inline:17px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  :where(.csv-utility-actions .btn,.csv-aenor-actions .btn,#informacion-oficial .actions .btn,.services-section .actions .btn,.contact-toggle .btn.dark,a.btn.dark,button.btn.dark,.btn.alt,.btn.outline,.csv-object--call,.csv-object--route){transition:none!important}
  :where(.csv-utility-actions .btn,.csv-aenor-actions .btn,#informacion-oficial .actions .btn,.services-section .actions .btn,.contact-toggle .btn.dark,a.btn.dark,button.btn.dark,.btn.alt,.btn.outline,.csv-object--call,.csv-object--route)::after{display:none!important}
}