/* CSV36 — Profundidad espacial premium
   Capas: atmósfera -> panel -> placa -> control -> primer plano.
   Refinamiento visual independiente; no altera navegación ni contenido. */
:root{
  --csv36-light-x:38%;
  --csv36-light-y:8%;
  --csv36-deep:#03101f;
  --csv36-shadow:4,18,36;
  --csv36-ease:cubic-bezier(.2,.82,.22,1);
}

/* El escenario se percibe detrás del cristal. */
body{background:#f4f6f8;}
.hero{
  perspective:1500px;
  perspective-origin:50% 34%;
  background:#07182a;
}
.hero::before{
  filter:saturate(.92) contrast(1.05) brightness(.76);
  transform:scale(1.075)!important;
}
.hero::after{height:170px!important;}
.hero .wrap::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:5% -8% 6%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at var(--csv36-light-x) var(--csv36-light-y),rgba(255,255,255,.13),transparent 38%),
    radial-gradient(ellipse at 78% 52%,rgba(24,91,170,.19),transparent 44%),
    linear-gradient(180deg,rgba(3,12,24,.02),rgba(3,12,24,.42));
  filter:blur(18px);
  transform:translateZ(-90px) scale(1.08);
}

/* Plano intermedio: la copia queda dentro del escenario, no pegada al fondo. */
.hero-copy{
  position:relative;
  z-index:3;
  transform:translateZ(34px);
  text-shadow:0 2px 18px rgba(0,0,0,.17);
}
.hero-copy::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-34px -36px -30px -42px;
  border-radius:42px;
  background:linear-gradient(135deg,rgba(5,24,45,.38),rgba(5,24,45,.08));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:.7;
}

/* Vitrina principal: marco, cristal, cámara de aire y objeto al fondo. */
.hero-card.csv-brand-plaque{
  position:relative!important;
  z-index:4;
  width:min(100%,560px);
  justify-self:end;
  padding:13px!important;
  overflow:visible!important;
  border-radius:40px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 42%,rgba(2,14,28,.19)),
    rgba(7,27,48,.32)!important;
  border:1px solid rgba(255,255,255,.32)!important;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.54),
    inset 0 -2px 4px rgba(1,12,25,.28),
    0 3px 0 rgba(255,255,255,.08),
    0 18px 28px rgba(0,0,0,.22),
    0 55px 100px rgba(0,0,0,.42)!important;
  transform:perspective(1250px) rotateY(-4deg) rotateX(1.7deg) translateZ(58px)!important;
  transform-style:preserve-3d;
  transition:transform .65s var(--csv36-ease),box-shadow .65s var(--csv36-ease)!important;
}
.hero-card.csv-brand-plaque::before{
  content:""!important;
  position:absolute!important;
  z-index:8!important;
  inset:2px!important;
  border-radius:37px!important;
  pointer-events:none!important;
  background:
    linear-gradient(117deg,rgba(255,255,255,.28),transparent 21% 74%,rgba(255,255,255,.07)),
    radial-gradient(ellipse at 26% 5%,rgba(255,255,255,.24),transparent 31%)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 0 24px rgba(255,255,255,.06)!important;
  opacity:1!important;
  animation:none!important;
}
.hero-card.csv-brand-plaque::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:9% 5% -9% 9%!important;
  border-radius:40px!important;
  pointer-events:none!important;
  background:rgba(0,0,0,.32)!important;
  filter:blur(22px)!important;
  transform:translate3d(18px,26px,-30px)!important;
  opacity:.75!important;
  animation:none!important;
}
.csv-logo-stage{
  position:relative!important;
  display:block!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  border-radius:29px!important;
  background:#0a1724!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 18px 34px rgba(255,255,255,.06),
    inset 0 -28px 46px rgba(0,0,0,.25)!important;
  transform:translateZ(-16px);
}
.csv-logo-stage > .csv-logo-main{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:29px!important;
  filter:saturate(.98) contrast(1.035) brightness(.98)!important;
  transform:scale(.985) translateZ(-8px)!important;
}
.hero-proof{
  position:relative;
  z-index:9;
  margin-top:10px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px rgba(0,0,0,.18)!important;
  transform:translateZ(22px);
}

/* Profundidad por capas en el contenido. */
main>section:not(.hero){position:relative;isolation:isolate;}
main>section:not(.hero)::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:8% 0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(24,68,118,.045),transparent 65%);
}
.card,.service-card,.help-card,.quick-card,.contact-card,.alliance-card,.station-card,.promo,.intro-box,.cta,.form-shell{
  transform-style:preserve-3d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 2px 3px rgba(var(--csv36-shadow),.05),
    0 13px 28px rgba(var(--csv36-shadow),.10),
    0 34px 62px rgba(var(--csv36-shadow),.07)!important;
}

/* Los objetos accionables quedan delante de las placas. */
.csv33-action{
  transform:perspective(750px) rotateX(1.8deg) translate3d(0,-7px,24px)!important;
  transform-style:preserve-3d;
  border-top-color:rgba(255,255,255,.72)!important;
  border-bottom-color:rgba(3,26,54,.3)!important;
  box-shadow:
    inset 0 3px 2px rgba(255,255,255,.9),
    inset 0 -8px 12px rgba(3,25,52,.22),
    0 2px 0 rgba(255,255,255,.36),
    0 8px 0 rgba(4,31,66,.13),
    0 16px 22px rgba(4,25,48,.19),
    0 34px 42px rgba(4,25,48,.16)!important;
}
.csv33-action::before{
  top:3%!important;
  height:42%!important;
  opacity:.72!important;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.25) 52%,transparent)!important;
}
.csv33-action::after{
  inset:1px 1px 3px!important;
  border:1px solid rgba(255,255,255,.52)!important;
  box-shadow:inset 0 -2px 1px rgba(2,25,54,.14)!important;
}
@media(hover:hover) and (pointer:fine){
  .csv33-action:hover{
    transform:perspective(750px) rotateX(0deg) translate3d(0,-12px,34px) scale(1.018)!important;
    box-shadow:
      inset 0 3px 2px rgba(255,255,255,.94),
      inset 0 -9px 14px rgba(3,25,52,.21),
      0 3px 0 rgba(255,255,255,.38),
      0 9px 0 rgba(4,31,66,.12),
      0 22px 28px rgba(4,25,48,.2),
      0 46px 55px rgba(4,25,48,.19)!important;
  }
  .hero-card.csv-brand-plaque:hover{
    transform:perspective(1250px) rotateY(-1deg) rotateX(.4deg) translate3d(0,-8px,72px)!important;
    box-shadow:inset 0 2px 1px rgba(255,255,255,.58),inset 0 -2px 4px rgba(1,12,25,.25),0 22px 34px rgba(0,0,0,.23),0 68px 115px rgba(0,0,0,.45)!important;
  }
}
.csv33-action:active,.csv33-action.csv33-pressed{
  transform:perspective(750px) rotateX(-1deg) translate3d(0,1px,8px) scale(.972)!important;
  box-shadow:
    inset 0 5px 11px rgba(3,25,52,.26),
    inset 0 -1px 1px rgba(255,255,255,.48),
    0 2px 0 rgba(4,31,66,.11),
    0 7px 12px rgba(4,25,48,.14)!important;
}

/* WhatsApp conserva exactamente su material y comportamiento. */
.wa-premium,.wa-premium:hover,.wa-premium:active,#waLauncher,#waLauncher:hover,#waLauncher:active{
  transform:none!important;
}

/* Pantallas pequeñas: profundidad visible, perspectiva controlada y sin recortes. */
@media(max-width:980px){
  .hero{perspective:1100px;}
  .hero-copy{transform:none;}
  .hero-copy::after{inset:-24px -18px -22px;border-radius:30px;}
  .hero-card.csv-brand-plaque{
    justify-self:center;
    width:min(100%,540px);
    transform:perspective(1000px) rotateX(1.2deg) translate3d(0,0,26px)!important;
  }
}
@media(max-width:650px){
  .hero .wrap{padding-bottom:132px!important;}
  .hero-copy::after{opacity:.48;filter:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .hero-card.csv-brand-plaque{padding:9px!important;border-radius:29px!important;}
  .csv-logo-stage,.csv-logo-stage>.csv-logo-main{border-radius:21px!important;}
  .csv33-action{
    transform:perspective(650px) rotateX(1.5deg) translate3d(0,-5px,18px)!important;
    box-shadow:inset 0 2px 1px rgba(255,255,255,.88),inset 0 -7px 10px rgba(3,25,52,.2),0 6px 0 rgba(4,31,66,.12),0 13px 18px rgba(4,25,48,.17),0 25px 30px rgba(4,25,48,.13)!important;
  }
  .csv33-action:active,.csv33-action.csv33-pressed{transform:perspective(650px) translate3d(0,1px,5px) scale(.97)!important;}
}
@media(prefers-reduced-motion:reduce){
  .hero-card.csv-brand-plaque,.csv33-action{transition:none!important;}
  .hero-card.csv-brand-plaque:hover{transform:none!important;}
}