/* CarEstima Hero por capas — v9.23.5 */
.ce-hero-stage{
  position:relative!important;
  display:block!important;
  min-height:0!important;
  margin:0!important;
  transform:none!important;
  isolation:isolate;
}
.ce-hero-stage:after{display:none!important}
.ce-stage-inner{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:visible;
  isolation:isolate;
}

/* suelo CSS detrás */
.ce-stage-floor{
  position:absolute;
  z-index:0;
  left:10%;
  right:7%;
  bottom:1%;
  height:25%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(41,116,255,.22) 0%,
    rgba(87,55,212,.13) 32%,
    rgba(4,21,47,0) 72%);
  filter:blur(8px);
  transform:perspective(520px) rotateX(64deg);
}

/* SVG detrás de la imagen */
.ce-stage-rings{
  position:absolute;
  z-index:1;
  left:1.5%;
  top:76%;
  width:97%;
  height:24%;
  overflow:visible;
  pointer-events:none;
  mix-blend-mode:screen;
}
.ce-r{
  fill:none;
  stroke-linecap:round;
  transform-box:fill-box;
  transform-origin:center;
  filter:url(#ceRingGlow);
}
.ce-r1{stroke:url(#ceRingA);stroke-width:3.5;animation:ceR1 4.7s ease-in-out infinite}
.ce-r2{stroke:url(#ceRingB);stroke-width:2.9;animation:ceR2 4.7s ease-in-out 1.05s infinite}
.ce-r3{stroke:url(#ceRingA);stroke-width:2.4;animation:ceR3 4.7s ease-in-out 2.1s infinite}
.ce-r4{stroke:rgba(72,196,255,.56);stroke-width:2;animation:ceR4 3.8s ease-in-out infinite}

/* imagen transparente por encima de los aros */
.ce-stage-car{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 20px 28px rgba(0,20,75,.25));
}

/* paneles delante */
.ce-stage-panel{
  position:absolute;
  z-index:1;
  box-sizing:border-box;
  color:#f7f9ff;
  border:1px solid rgba(91,157,255,.58);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(6,20,52,.78),rgba(18,12,58,.58));
  box-shadow:0 0 20px rgba(61,110,255,.20),inset 0 0 16px rgba(110,77,255,.07);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* VALORACIÓN desplazada hacia la derecha */
.ce-stage-valuation{
  left:22%;
  top:1.5%;
  width:23%;
  padding:1.25% 1.3% 1.15%;
  animation:ceFloatL 5.4s ease-in-out infinite;
}
.ce-stage-title{
  margin:0 0 6%;
  font-size:clamp(9px,.92vw,16px);
  font-weight:700;
  letter-spacing:.04em;
}
.ce-stage-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5%;
  align-items:center;
  margin:5% 0;
}
.ce-stage-row>span{
  width:clamp(10px,1vw,18px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:clamp(6px,.62vw,11px);
  font-weight:800;
  color:#dffcff;
  border:1px solid rgba(69,213,255,.72);
  background:rgba(32,132,255,.15);
}
.ce-stage-row>i{
  height:clamp(4px,.4vw,7px);
  overflow:hidden;
  border-radius:99px;
  background:rgba(117,134,189,.17);
}
.ce-stage-row b{
  display:block;
  width:var(--w);
  height:100%;
  border-radius:inherit;
  transform-origin:left;
  background:linear-gradient(90deg,#6657ff,#aa4cff 56%,#43d5ff);
  box-shadow:0 0 9px rgba(119,84,255,.55);
  animation:ceFill 4.8s cubic-bezier(.2,.72,.25,1) infinite;
}

.ce-stage-price{
  right:4%;
  top:3%;
  width:24%;
  padding:1.2% 1.3% 1.05%;
  animation:ceFloatR 6.1s ease-in-out infinite;
}
.ce-stage-price-label{
  font-size:clamp(7px,.68vw,12px);
  font-weight:650;
  letter-spacing:.08em;
  color:#dbe7ff;
}
.ce-stage-price-value{
  margin-top:1.5%;
  font-size:clamp(15px,1.6vw,28px);
  font-weight:780;
  color:#fff;
  text-shadow:0 0 12px rgba(82,201,255,.3);
  animation:ceValue 3.8s ease-in-out infinite;
}
.ce-stage-chart{width:100%;height:auto;margin-top:3%;overflow:visible}
.ce-chart-grid{stroke:rgba(129,151,205,.14);stroke-width:1}
.ce-chart-line{
  fill:none;
  stroke:url(#ceChart);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:440;
  stroke-dashoffset:440;
  animation:ceChartDraw 5.2s ease-in-out infinite;
}
.ce-chart-dot{fill:#8fe9ff;filter:drop-shadow(0 0 4px #53cfff);animation:ceDot 2.8s ease-in-out infinite}

@keyframes ceR1{0%{transform:scale(.84);opacity:0}14%{opacity:.84}72%{opacity:.4}100%{transform:scale(1.07);opacity:0}}
@keyframes ceR2{0%{transform:scale(.81);opacity:0}16%{opacity:.7}75%{opacity:.32}100%{transform:scale(1.10);opacity:0}}
@keyframes ceR3{0%{transform:scale(.79);opacity:0}18%{opacity:.58}78%{opacity:.26}100%{transform:scale(1.13);opacity:0}}
@keyframes ceR4{0%,100%{opacity:.32;transform:scale(.985)}50%{opacity:.72;transform:scale(1.015)}}
@keyframes ceFloatL{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ceFloatR{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes ceFill{0%,10%{transform:scaleX(.12);opacity:.55}38%,72%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.94);opacity:.8}}
@keyframes ceValue{0%,100%{opacity:.9;text-shadow:0 0 9px rgba(82,201,255,.24)}50%{opacity:1;text-shadow:0 0 17px rgba(125,88,255,.45),0 0 10px rgba(62,216,255,.3)}}
@keyframes ceChartDraw{0%,10%{stroke-dashoffset:440;opacity:.45}42%,76%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.68}}
@keyframes ceDot{0%,100%{r:4;opacity:.72}50%{r:6;opacity:1}}

/* escritorio */
@media(min-width:901px){
  .ce-hero-stage{width:100%;max-width:720px;justify-self:end}
}

/* tablet */
@media(max-width:900px){
  .ce-hero-stage{width:min(100%,760px)!important;margin:8px auto 0!important}
}

/* móvil: mantener imagen grande y paneles sin tapar robots/coche */
@media(max-width:600px){
  .ce-hero-stage{
    width:calc(100% + 6px)!important;
    max-width:none!important;
    margin:5px -3px -3px!important;
  }
  .ce-stage-rings{left:-2%;top:76.5%;width:104%;height:22%}
  .ce-stage-floor{left:5%;right:4%;bottom:0;height:27%}

  .ce-stage-panel{border-radius:9px}
  .ce-stage-valuation{
    left:21%;
    top:0%;
    width:24%;
    padding:1.2% 1.2% 1.05%;
  }
  .ce-stage-price{
    right:2%;
    top:1%;
    width:25%;
    padding:1.15% 1.2% 1%;
  }
  .ce-stage-title{font-size:clamp(7px,2.15vw,10px)}
  .ce-stage-price-label{font-size:clamp(6px,1.8vw,9px)}
  .ce-stage-price-value{font-size:clamp(11px,3.6vw,16px)}
  .ce-stage-row>span{width:clamp(8px,2.2vw,10px);font-size:clamp(5px,1.5vw,7px)}
  .ce-stage-row>i{height:clamp(3px,.9vw,4px)}
}

/* neutralizar animación antigua del raster completo */
.ce-hero-image-mobile,.ce-hero-image-desktop{animation:none!important}
.ce-hero-stage:after{animation:none!important}

@media(prefers-reduced-motion:reduce){
  .ce-r,.ce-stage-panel,.ce-stage-row b,.ce-stage-price-value,.ce-chart-line,.ce-chart-dot{animation:none!important}
  .ce-chart-line{stroke-dashoffset:0}
}