/* ===== Wuuff Puppy · Collar 3D del hero (collar-3d.css) =====
   Fondo de estudio como el de las fotos: pared lila de pliegues y piso durazno.
   El piso lo dibuja .hero-3d::before y su altura la ajusta collar-3d.js (--horizonte). */
.hero.hero-3d-set{
  background-color:#b9c3f6;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, #95a1e5 0, #cdd8fc 8%, #d4ddfd 24%, #c4cef9 56%, #adb8f0 88%, #95a1e5 100%);
  background-size:100% 100%, clamp(18px, 2.2vw, 30px) 100%;
}
.hero-3d{position:relative;aspect-ratio:6/5;max-width:100%;--horizonte:58.6%;}
.hero-3d::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:var(--horizonte);width:400vw;height:300vh;transform:translateX(-50%);
  background:linear-gradient(180deg,#f6c9cd 0,#fbd7d6 70px,#fee2df 260px,#ffe9e7 600px);
  box-shadow:0 -14px 28px rgba(110,100,190,.16);
}
.hero-3d-poster,.hero-3d canvas{position:absolute;inset:0;width:100% !important;height:100% !important;display:block;}
.hero-3d-poster{object-fit:contain;transition:opacity .5s ease;user-select:none;-webkit-user-drag:none;}
.hero-3d canvas{opacity:0;transition:opacity .5s ease;touch-action:none;cursor:grab;outline:none;-webkit-tap-highlight-color:transparent;}
.hero-3d canvas.arrastrando{cursor:grabbing;}
.hero-3d canvas:focus-visible{box-shadow:0 0 0 3px var(--navy,#2d4375);border-radius:18px;}
.hero-3d.listo canvas{opacity:1;}
.hero-3d.listo .hero-3d-poster{opacity:0;}
.hero-3d-chip{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,40%);z-index:2;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:#fff;color:var(--navy,#2d4375);font-weight:800;font-size:13.5px;line-height:1;
  padding:9px 16px;border-radius:20px;text-decoration:none;
  box-shadow:0 8px 22px rgba(45,67,117,.18);transition:transform .2s;
}
.hero-3d-chip b{color:var(--coral,#f17d57);font-weight:900;}
.hero-3d-chip:hover{transform:translate(-50%,calc(40% - 2px));}
.hero-3d-pista{
  position:absolute;top:1%;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;white-space:nowrap;
  background:rgba(255,255,255,.88);color:var(--navy,#2d4375);font-weight:800;font-size:12px;
  padding:6px 11px;border-radius:14px;box-shadow:0 4px 14px rgba(45,67,117,.12);
  transition:opacity .5s ease;
}
.hero-3d.tocado .hero-3d-pista{opacity:0;}
@media (prefers-reduced-motion: reduce){.hero-3d-poster,.hero-3d canvas,.hero-3d-pista{transition:none;}.ticker-inner{animation:none;}}

/* Título del hero (H2) un poco más pequeño */
.hero-3d-set .hero-title{font-size:clamp(34px,4.4vw,56px);margin-bottom:26px;}

/* Computador: texto a la izquierda, collar a la derecha */
@media (min-width:769px){
  .hero-3d-set .hero-text{max-width:min(560px, 50%);}
    /* sin transform: así el piso (::before) queda detrás del precio y los botones */
  .hero-3d-set .hero-3d{position:absolute;left:100%;top:50%;width:112%;max-width:none;margin-top:-45%;}
}
/* Celular: el collar va entre el título y el precio */
@media (max-width:768px){
  .hero-3d-set .hero-3d{width:min(100%, 480px);margin:0 auto 22px;}
  .hero-3d-set .hero-title{font-size:24px;margin-bottom:4px;}
}
@media (max-width:560px){
  .hero-3d-set .hero-3d{width:calc(100% + 32px);max-width:none;margin-left:-16px;margin-right:-16px;}
}