/* ════════════════════════════════════════════════════════════════════════════
   cd-cdl-art.css — CAPA DE ARTE de la pantalla de entrada
   Se apoya sobre cd-cdl.css sin sustituirlo. Aporta:
   · Bengala de partículas sobre <canvas> que sigue al cursor (chispas reales)
   · Aurora de fondo en movimiento lento
   · Halo cálido: la luz que la bengala derrama sobre la escena
   · Vidrio con reflejo especular en la tarjeta
   · Retratos FOTOGRÁFICOS en la vitrina (SVG solo como respaldo)
   Variables --mx/--my (0..1) las escribe el JS con suavizado.
   ════════════════════════════════════════════════════════════════════════════ */
#view-landing{ --mx:.5; --my:.35; --mvel:0; }

/* ── 1 · AURORA: dos velos que respiran, sin repetirse nunca igual ── */
.cdl-aurora{position:absolute;inset:-25%;z-index:0;pointer-events:none;
  filter:blur(52px) saturate(1.25);opacity:.55;mix-blend-mode:screen}
.cdl-aurora i{position:absolute;border-radius:50%;display:block}
.cdl-aurora i:nth-child(1){width:52%;height:46%;left:4%;top:8%;
  background:radial-gradient(circle at 40% 40%,rgba(245,190,60,.55),transparent 66%);
  animation:cdlAur1 26s ease-in-out infinite}
.cdl-aurora i:nth-child(2){width:56%;height:50%;right:2%;top:2%;
  background:radial-gradient(circle at 60% 40%,rgba(124,92,255,.5),transparent 66%);
  animation:cdlAur2 32s ease-in-out infinite}
.cdl-aurora i:nth-child(3){width:44%;height:40%;left:28%;bottom:-4%;
  background:radial-gradient(circle at 50% 60%,rgba(60,200,255,.34),transparent 68%);
  animation:cdlAur3 38s ease-in-out infinite}
@keyframes cdlAur1{0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(9%,6%) scale(1.14)} 66%{transform:translate(-5%,10%) scale(.94)}}
@keyframes cdlAur2{0%,100%{transform:translate(0,0) scale(1.05)}
  40%{transform:translate(-11%,8%) scale(.92)} 70%{transform:translate(6%,-5%) scale(1.16)}}
@keyframes cdlAur3{0%,100%{transform:translate(0,0) scale(.98)}
  50%{transform:translate(8%,-9%) scale(1.18)}}

/* ── 2 · BENGALA ────────────────────────────────────────────────────────
   CORRECCIÓN 23-jul-2026 (Max): lo que había aquí eran tres divs
   desenfocados de hasta 1100px — una MANCHA DE LUZ, no una bengala.
   Se sustituyen por un <canvas> de partículas (cd-cdl-art.js) y se deja
   solo un halo pequeño: la luz que la bengala DERRAMA sobre la escena.
   El canvas va en 'screen', así el negro residual de la estela no se ve. ── */
.cdl-flare{position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;opacity:.5;transition:opacity .6s ease}
#view-landing.cdl-live .cdl-flare{opacity:1}
.cdl-flare .halo{position:absolute;width:min(26vw,300px);aspect-ratio:1;border-radius:50%;
  left:calc(var(--mx) * 100%);top:calc(var(--my) * 100%);transform:translate(-50%,-50%);
  background:radial-gradient(circle,
     rgba(255,228,168,.30) 0%,
     rgba(255,168,60,.14) 26%,
     rgba(255,110,30,.05) 52%,
     transparent 72%);
  filter:blur(16px)}

.cdl-sparks{position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:screen;display:block}

/* la rejilla se ilumina alrededor del cursor */
.cdl-grid{
  -webkit-mask-image:radial-gradient(closest-side circle at calc(var(--mx)*100%) calc(var(--my)*100%),
    #000 0%, rgba(0,0,0,.35) 42%, transparent 74%);
          mask-image:radial-gradient(closest-side circle at calc(var(--mx)*100%) calc(var(--my)*100%),
    #000 0%, rgba(0,0,0,.35) 42%, transparent 74%);
  /* sin mask-size ni mask-position: la caja de la máscara ES el elemento,
     así los % del calc coinciden exactamente con la posición del cursor. */
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}

/* ── 3 · LA TARJETA COMO VIDRIO ─────────────────────────────────────────── */
.cdl-card{position:relative;overflow:hidden;
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15)}
/* filo de luz que recorre el borde superior según dónde esté el cursor */
.cdl-card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  background-size:38% 100%;background-repeat:no-repeat;
  background-position-x:calc(var(--mx) * 160% - 30%);opacity:.85}
/* reflejo especular: la lámina de vidrio devuelve la luz del cursor */
.cdl-card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at calc(var(--mx)*100%) calc(var(--my)*100%),
    rgba(255,255,255,.09),transparent 62%);
  opacity:.9;transition:opacity .4s}

/* ── 4 · RETRATOS de la vitrina ─────────────────────────────────────────── */
.cdl-stav{position:relative;overflow:hidden;padding:0;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.22)}
.cdl-stav svg{width:100%;height:100%;display:block}
/* fotografías reales de la vitrina (respaldo SVG si el CDN no responde) */
.cdl-stav .cdl-stimg{width:100%;height:100%;display:block;object-fit:cover;
  object-position:center 28%;background:#161a2a}
.cdl-st{transition:transform .35s cubic-bezier(.2,.85,.25,1)}
.cdl-st:hover{transform:translateY(-3px)}
.cdl-st:hover .cdl-stav{box-shadow:0 10px 26px -8px rgba(0,0,0,.8),
  0 0 0 2px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.3)}

/* ── 5 · Detalles ───────────────────────────────────────────────────────── */
.cdl-google, .cdl-primary{position:relative;overflow:hidden}
.cdl-google::after, .cdl-primary::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.3) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform .75s cubic-bezier(.3,0,.2,1)}
.cdl-google:hover::after, .cdl-primary:hover::after{transform:translateX(130%)}
.cdl-field{transition:border-color .3s, box-shadow .3s, background .3s}
.cdl-field:focus-within{border-color:rgba(245,200,66,.5);
  box-shadow:0 0 0 3px rgba(245,200,66,.1), 0 6px 20px -10px rgba(245,200,66,.5)}

@media (prefers-reduced-motion:reduce){
  .cdl-aurora i{animation:none}
  .cdl-flare{transition:none}
  .cdl-sparks{opacity:.85}
}