/* CSV31 — Objetos flotantes: sistema inmersivo y homogéneo */
:root{
  --csv31-light-x: 34%;
  --csv31-light-y: 8%;
  --csv31-radius: 22px;
  --csv31-radius-pill: 999px;
  --csv31-lift: 7px;
  --csv31-shadow-rest:
    0 2px 2px rgba(255,255,255,.72) inset,
    0 -7px 12px rgba(6,29,55,.12) inset,
    0 10px 16px rgba(6,23,43,.13),
    0 24px 40px rgba(6,23,43,.16);
  --csv31-shadow-hover:
    0 3px 3px rgba(255,255,255,.82) inset,
    0 -9px 14px rgba(6,29,55,.13) inset,
    0 15px 22px rgba(6,23,43,.15),
    0 34px 56px rgba(6,23,43,.20);
  --csv31-shadow-press:
    0 1px 1px rgba(255,255,255,.55) inset,
    0 -3px 7px rgba(6,29,55,.18) inset,
    0 4px 7px rgba(6,23,43,.13),
    0 9px 15px rgba(6,23,43,.12);
  --csv31-ease: cubic-bezier(.2,.85,.2,1);
  --csv31-spring: cubic-bezier(.18,1.22,.34,1);
}

/* Todo objeto accionable comparte material, luz y física. */
.csv31-object{
  position:relative!important;
  isolation:isolate;
  transform:translate3d(0,0,0);
  transform-origin:center;
  overflow:visible;
  box-shadow:var(--csv31-shadow-rest)!important;
  transition:
    transform .22s var(--csv31-spring),
    box-shadow .22s var(--csv31-ease),
    filter .22s ease,
    border-color .22s ease!important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  cursor:pointer;
}

/* Reflejo superior, como policarbonato pulido. */
.csv31-object::before{
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  left:9%; right:9%; top:5%;
  height:33%;
  border-radius:inherit;
  background:
    radial-gradient(ellipse at var(--csv31-light-x) var(--csv31-light-y),rgba(255,255,255,.88),rgba(255,255,255,.26) 38%,transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.08) 68%,transparent);
  opacity:.64;
  mix-blend-mode:screen;
}

/* Aro fino que define el espesor del objeto. */
.csv31-object::after{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;
  inset:1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1px rgba(6,23,43,.035);
}

/* El contenido queda por encima de los reflejos. */
.csv31-object > *{position:relative;z-index:5}

@media (hover:hover) and (pointer:fine){
  .csv31-object:hover{
    transform:translate3d(0,calc(var(--csv31-lift) * -1),0) scale(1.012)!important;
    box-shadow:var(--csv31-shadow-hover)!important;
    filter:saturate(1.045) brightness(1.018);
  }
}

.csv31-object:active,
.csv31-object.is-pressing{
  transform:translate3d(0,3px,0) scale(.976)!important;
  box-shadow:var(--csv31-shadow-press)!important;
  filter:saturate(.985) brightness(.99);
  transition-duration:.09s!important;
}

.csv31-object.is-releasing{
  animation:csv31-release .38s var(--csv31-spring);
}
@keyframes csv31-release{
  0%{transform:translate3d(0,3px,0) scale(.976)}
  58%{transform:translate3d(0,-3px,0) scale(1.012)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

/* Botones y acciones: pieza compacta y claramente pulsable. */
:where(a.btn,button.btn,.station-action,.card-actions a,.social a,.wa-open,
       a[href^="tel:"],a[href^="mailto:"],a[href*="wa.me"],a[href*="maps"],
       .menu-toggle,.repsol-pill).csv31-object{
  border-radius:var(--csv31-radius-pill)!important;
  border:1px solid rgba(6,23,43,.10)!important;
}

/* Tarjetas navegables: placa suspendida completa. */
:where(a.card,a.help-card,a.service-card,a.quick-card,a.contact-card,
       a.service-chip,.csv31-card-object).csv31-object{
  border-radius:var(--csv31-radius)!important;
  overflow:hidden;
  border:1px solid rgba(6,23,43,.08)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(239,244,249,.97))!important;
}

/* Los iconos accionables parecen piezas independientes encima de la placa. */
.csv31-object :where(.icon,.ico,i,svg,img.icon){
  filter:drop-shadow(0 7px 8px rgba(6,23,43,.21));
  transition:transform .22s var(--csv31-spring),filter .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .csv31-object:hover :where(.icon,.ico,i,svg,img.icon){
    transform:translateY(-2px) scale(1.035);
    filter:drop-shadow(0 10px 11px rgba(6,23,43,.24));
  }
}

/* WhatsApp conserva su identidad pero gana cuerpo esférico. */
:where(.wa-premium,.floating-whatsapp,.floatbar a[href*="wa.me"],a[href*="wa.me"]).csv31-object{
  border-radius:50%!important;
  box-shadow:
    inset 0 5px 7px rgba(255,255,255,.78),
    inset 0 -12px 18px rgba(0,88,39,.35),
    0 12px 17px rgba(0,108,48,.28),
    0 27px 44px rgba(3,83,39,.35)!important;
}
:where(.wa-premium,.floating-whatsapp,.floatbar a[href*="wa.me"],a[href*="wa.me"]).csv31-object::before{
  left:22%;right:28%;top:10%;height:29%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.88),rgba(255,255,255,.10) 72%);
  opacity:.78;
}

/* El selector azul sigue siendo el patrón de máxima flotación. */
.station-tab.active.csv31-object,
.station-tab[aria-selected="true"].csv31-object{
  --csv31-lift:10px;
  z-index:20!important;
  overflow:visible!important;
  box-shadow:
    inset 0 5px 7px rgba(255,255,255,.76),
    inset 0 -12px 18px rgba(0,40,128,.36),
    0 12px 17px rgba(8,64,170,.25),
    0 29px 44px rgba(4,37,91,.29)!important;
}

/* Acciones sobre fondos oscuros: halo local para separarlas del plano. */
:is(.hero,.dark,.station-visual,.promo-card) .csv31-object{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.08));
}

/* La información no accionable permanece en el fondo. */
.csv31-informational{
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
}

/* Foco accesible sin romper el material. */
.csv31-object:focus-visible{
  outline:3px solid rgba(239,125,0,.72)!important;
  outline-offset:5px!important;
}

/* En móvil el volumen se conserva, pero sin saltos exagerados. */
@media(max-width:650px){
  :root{--csv31-lift:5px}
  .csv31-object{transition-duration:.18s!important}
  .csv31-object:active,.csv31-object.is-pressing{
    transform:translate3d(0,2px,0) scale(.972)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .csv31-object{transition:none!important;animation:none!important}
  .csv31-object:hover,.csv31-object:active,.csv31-object.is-pressing,.csv31-object.is-releasing{
    transform:none!important;
  }
}