/* CSV33 — Controles elevados: los elementos accionables se distinguen de la información */
:root{
  --csv33-radius:999px;
  --csv33-ease:cubic-bezier(.2,.82,.22,1);
  --csv33-spring:cubic-bezier(.2,1.35,.35,1);
  --csv33-rest:
    inset 0 2px 1px rgba(255,255,255,.82),
    inset 0 -5px 8px rgba(4,25,48,.15),
    0 5px 7px rgba(4,25,48,.11),
    0 13px 20px rgba(4,25,48,.18);
  --csv33-hover:
    inset 0 3px 2px rgba(255,255,255,.88),
    inset 0 -6px 10px rgba(4,25,48,.16),
    0 8px 10px rgba(4,25,48,.12),
    0 20px 30px rgba(4,25,48,.22);
  --csv33-press:
    inset 0 3px 8px rgba(4,25,48,.22),
    inset 0 -1px 1px rgba(255,255,255,.42),
    0 2px 3px rgba(4,25,48,.10),
    0 6px 9px rgba(4,25,48,.12);
}

/* Únicamente los controles accionables adquieren cuerpo y elevación. */
.csv33-action{
  position:relative!important;
  isolation:isolate;
  border-radius:var(--csv33-radius)!important;
  box-shadow:var(--csv33-rest)!important;
  transform:translate3d(0,-2px,0);
  transform-origin:center;
  transition:transform .2s var(--csv33-spring),box-shadow .2s var(--csv33-ease),filter .2s ease!important;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}

/* Luz superior y canto inferior: la pieza parece fabricada, no dibujada. */
.csv33-action::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  pointer-events:none!important;
  left:8%!important;
  right:8%!important;
  top:4%!important;
  height:34%!important;
  border-radius:inherit!important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18) 58%,transparent)!important;
  opacity:.62!important;
  mix-blend-mode:screen;
}
.csv33-action::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  pointer-events:none!important;
  inset:1px!important;
  border-radius:inherit!important;
  border:1px solid rgba(255,255,255,.48)!important;
  box-shadow:inset 0 -1px 0 rgba(4,25,48,.10)!important;
  background:none!important;
}
.csv33-action > *{position:relative;z-index:2}

@media (hover:hover) and (pointer:fine){
  .csv33-action:hover{
    transform:translate3d(0,-7px,0) scale(1.012)!important;
    box-shadow:var(--csv33-hover)!important;
    filter:saturate(1.035) brightness(1.018);
  }
}

.csv33-action:active,
.csv33-action.csv33-pressed{
  transform:translate3d(0,2px,0) scale(.976)!important;
  box-shadow:var(--csv33-press)!important;
  filter:brightness(.985) saturate(.99);
  transition-duration:.08s!important;
}
.csv33-action.csv33-release{animation:csv33-release .36s var(--csv33-spring)}
@keyframes csv33-release{
  0%{transform:translate3d(0,2px,0) scale(.976)}
  60%{transform:translate3d(0,-4px,0) scale(1.012)}
  100%{transform:translate3d(0,-2px,0) scale(1)}
}

/* Las tarjetas completas que son enlaces conservan su geometría, pero flotan como placas. */
.csv33-action.csv33-card{
  border-radius:22px!important;
  overflow:hidden;
}

/* Los selectores de estación replican el patrón de las cuatro bolitas azules. */
.station-tab.csv33-action{
  border-radius:999px!important;
  overflow:visible!important;
}
.station-tab.csv33-action[aria-selected="true"],
.station-tab.csv33-action.active{
  transform:translate3d(0,-6px,0);
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,.78),
    inset 0 -10px 15px rgba(0,43,128,.34),
    0 8px 11px rgba(5,55,146,.20),
    0 20px 31px rgba(4,36,89,.28)!important;
}

/* WhatsApp queda visualmente intacto; no recibe el material CSV33. */
.wa-premium.csv33-action,
#waLauncher.csv33-action,
.floatbar .wa-premium.csv33-action,
a[href*="wa.me"].wa-premium.csv33-action{
  box-shadow:revert-layer!important;
  transform:none!important;
  filter:none!important;
}
.wa-premium.csv33-action::before,
#waLauncher.csv33-action::before,
.wa-premium.csv33-action::after,
#waLauncher.csv33-action::after{display:none!important}

/* Foco visible y preciso. */
.csv33-action:focus-visible{outline:3px solid rgba(239,125,0,.74)!important;outline-offset:5px!important}

@media(max-width:650px){
  .csv33-action{transform:translate3d(0,-1px,0)}
  .csv33-action:active,.csv33-action.csv33-pressed{transform:translate3d(0,2px,0) scale(.97)!important}
}
@media(prefers-reduced-motion:reduce){
  .csv33-action{transition:none!important;animation:none!important}
  .csv33-action:hover,.csv33-action:active,.csv33-action.csv33-pressed,.csv33-action.csv33-release{transform:none!important}
}

/* CSV34 — ajuste de profundidad y contraste de controles */
.csv33-action{
  transform:translate3d(0,-4px,0);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.86),
    inset 0 -6px 10px rgba(4,25,48,.18),
    0 7px 9px rgba(4,25,48,.13),
    0 17px 27px rgba(4,25,48,.22)!important;
}
.csv33-action.csv33-on-dark,
.csv33-action.csv33-on-dark:link,
.csv33-action.csv33-on-dark:visited,
.csv33-action.csv33-on-dark:hover,
.csv33-action.csv33-on-dark:focus,
.csv33-action.csv33-on-dark:active{
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,20,52,.35)!important;
}
.csv33-action.csv33-on-dark *,
.csv33-action.csv33-on-dark svg{
  color:#fff!important;
  fill:currentColor;
}
.csv33-action.csv33-on-light,
.csv33-action.csv33-on-light:link,
.csv33-action.csv33-on-light:visited{
  color:#083861!important;
}
.csv33-action.csv33-on-light *{color:inherit!important}

/* Clases semánticas conocidas: contraste inequívoco. */
.btn.dark.csv33-action,
.location.csv33-action,
.hero-station-nav a.csv33-action,
.station-actions a.location.csv33-action,
.menu a.csv33-action[aria-current="page"]{
  color:#fff!important;
}
.btn.outline.csv33-action,
.call.csv33-action,
.menu-toggle.csv33-action{
  color:#083861!important;
}

@media(max-width:650px){
  .csv33-action{transform:translate3d(0,-3px,0)}
}