/* Monograma azul sobre el vidrio, sin disco ni recorte. */
.brand-symbol {
  width: 54px;
  height: 48px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.brand-symbol img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.pillbar.on-dark .brand-symbol img { filter: brightness(0) invert(1); }
/* Más aire entre el contenido y el borde del pill. */
.pillbar { padding-right: 20px; }
.nav-cta {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
}
@media (max-width: 600px) {
  .brand-symbol { width: 46px; height: 42px; }
  .pillbar { padding-right: 14px; }
}
@media (max-width: 360px) { .brand-symbol { width: 40px; height: 36px; } }

/* Volumen al acercarse y compresión al pulsar. */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #08647c, #07516a 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(7,81,106,.08);
  transition: transform .32s cubic-bezier(.2,.8,.3,1.5), box-shadow .25s, background .25s, border-color .25s;
}
.button::before {
  content: '';
  position: absolute;
  inset: -50% auto -50% -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
.button:focus-visible {
  transform: translateY(-3px) scale(1.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px rgba(7,81,106,.25);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: linear-gradient(135deg, #08738a, #064a61 70%);
    transform: translateY(-3px) scale(1.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px rgba(7,81,106,.25);
    border-color: #0c6d87;
  }
  .button:hover::before {
    opacity: 1;
    transform: translateX(450%) skewX(-20deg);
    transition: transform .65s ease, opacity .15s;
  }
}
.button:active {
  transform: translateY(1px) scale(.96);
  box-shadow: inset 0 2px 6px rgba(0,25,40,.2), 0 2px 5px rgba(7,81,106,.12);
}
.button-ripple {
  position: absolute;
  width: var(--ripple-size);
  height: var(--ripple-size);
  left: var(--ripple-x);
  top: var(--ripple-y);
  border-radius: 50%;
  background: rgba(255,255,255,.26);
  pointer-events: none;
  animation: button-ripple .6s ease-out forwards;
}
@keyframes button-ripple {
  from { transform: translate(-50%,-50%) scale(0); opacity: .8; }
  to { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .button:hover, .button:focus-visible, .button:active { transform: none; }
  .button::before, .button-ripple { display: none; }
}