/* ═══════════════════════════════════════════════════════════════════════
   AMG Car Detailing — Campaña de temporada (Halloween / Día de Muertos)
   ═══════════════════════════════════════════════════════════════════════
   Se activa SOLO por fecha, vía seasonal-campaign.js, que pone
   body[data-amg-campaign="halloween"|"muertos"]. Fuera de esas fechas el
   atributo no existe y absolutamente nada de este archivo se muestra —
   el sitio se ve exactamente igual que siempre (AMG clásico).

   Reglas de oro de este archivo:
   - Nunca toca precios, duración, disponibilidad ni ningún ID/listener
     existente. Solo re-tiñe lo que ya está ahí, o agrega elementos
     puramente decorativos nuevos con pointer-events:none.
   - Todo lo decorativo usa transform/opacity (o vive en z-index:-1 detrás
     del contenido real) para nunca tapar ni interceptar clics.
   - Todas las reglas que tocan tarjetas de servicio excluyen ".selected"
     para no pisar el brillo cian/rojo/dorado que ya indica la tarjeta
     elegida — esa es información funcional real, no decoración.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fondo nocturno + manchas de luz (muy sutil) ─────────────────────── */
body[data-amg-campaign]{background:#020204}
body[data-amg-campaign="halloween"] .gr{background:radial-gradient(ellipse,rgba(143,92,255,.15) 0%,transparent 70%)}
body[data-amg-campaign="halloween"] .gc{background:radial-gradient(ellipse,rgba(255,122,24,.11) 0%,transparent 70%)}
body[data-amg-campaign="muertos"] .gr{background:radial-gradient(ellipse,rgba(255,183,45,.14) 0%,transparent 70%)}
body[data-amg-campaign="muertos"] .gc{background:radial-gradient(ellipse,rgba(255,122,24,.10) 0%,transparent 70%)}

/* ── Telaraña + araña (solo Halloween) ───────────────────────────────── */
.amg-cobweb{display:none;position:absolute;top:2px;left:2px;width:clamp(62px,18vw,104px);height:clamp(62px,18vw,104px);z-index:-1;pointer-events:none;opacity:.5;color:rgba(214,188,255,.55)}
.amg-cobweb svg{display:block;width:100%;height:100%;overflow:visible}
.amg-cobweb .amg-thread{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round}
.amg-cobweb .amg-thread-fine{fill:none;stroke:currentColor;stroke-width:.6;stroke-linecap:round;opacity:.75}
.amg-cobweb .amg-spider-body{fill:#160c14;stroke:#c98bff;stroke-width:.7;stroke-opacity:.7}
.amg-cobweb .amg-spider-leg{fill:none;stroke:#160c14;stroke-width:1.1;stroke-linecap:round}
body[data-amg-campaign="halloween"] .amg-cobweb{display:block}

/* ── Luna de temporada (solo Halloween, decorativa) ──────────────────── */
.amg-moon{display:none;position:absolute;top:6px;right:6px;width:clamp(84px,24vw,144px);height:clamp(84px,24vw,144px);z-index:-1;pointer-events:none;opacity:.92;filter:drop-shadow(0 0 16px rgba(255,174,67,.22)) drop-shadow(0 0 46px rgba(143,92,255,.2))}
.amg-moon svg{display:block;width:100%;height:100%;overflow:visible}
.amg-moon-surface{fill:url(#amg-moon-surface);stroke:#ffd87d;stroke-opacity:.55;stroke-width:.7}
.amg-moon-aura{fill:url(#amg-moon-aura)}
.amg-moon-crater{fill:#8b553f;opacity:.24}
.amg-moon-crater.is-soft{fill:#fff1bd;opacity:.2}
.amg-moon-ridge{fill:none;stroke:#b66d48;stroke-opacity:.3;stroke-width:.7}
.amg-moon-star{fill:#fff5d2;opacity:.9}
body[data-amg-campaign="halloween"] .amg-moon{display:block}

/* ── Cempasúchil de temporada (solo Día de Muertos, decorativo) ──────── */
.amg-cempasuchil{display:none;position:absolute;top:8px;right:8px;width:clamp(58px,17vw,92px);height:auto;z-index:-1;pointer-events:none;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,165,30,.4))}
body[data-amg-campaign="muertos"] .amg-cempasuchil{display:block}
/* Un par de puntos de luz color marigold, muy tenues — el guiño de pétalos
   en reposo. Nada de movimiento: son estáticos, van detrás del contenido. */
body[data-amg-campaign="muertos"] .hero{overflow:hidden}
body[data-amg-campaign="muertos"] .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(circle 5px at 14% 22%,rgba(255,183,45,.35),transparent 70%),
  radial-gradient(circle 4px at 82% 68%,rgba(255,140,32,.3),transparent 70%)}

/* ── Tarjetas de servicio ─────────────────────────────────────────────
   Básico = morado, Premium = naranja, Delux = dorado/morado (Halloween).
   Día de Muertos usa la misma estructura en tonos ámbar/cempasúchil.
   Todo excluye ".selected" para no pisar el brillo de selección real. */
body[data-amg-campaign="halloween"] #tierCardBasico:not(.selected){
  border-color:rgba(168,85,247,.42);
  background:linear-gradient(145deg,rgba(139,64,201,.15),rgba(96,43,160,.035));
  box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.13),0 0 20px rgba(139,64,201,.12)}
body[data-amg-campaign="halloween"] #tierCardBasico .tier-price{color:#bc7cff}
body[data-amg-campaign="halloween"] #tierCardBasico .tier-list li::before{color:#bc7cff}

body[data-amg-campaign="halloween"] #tierCardPremium:not(.selected){
  border-color:rgba(255,122,24,.52);
  background:linear-gradient(145deg,rgba(255,112,22,.18),rgba(189,57,16,.035));
  box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15),0 0 24px rgba(255,101,20,.14)}
body[data-amg-campaign="halloween"] #tierCardPremium .tier-price{color:#ff9a45}

body[data-amg-campaign="halloween"] #tierCardDelux:not(.selected){
  border-color:rgba(255,192,69,.58);
  background:linear-gradient(135deg,rgba(255,183,45,.17),rgba(139,64,201,.11),rgba(255,93,21,.045));
  box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.16),0 0 28px rgba(255,136,30,.14),0 0 38px rgba(139,64,201,.1)}
body[data-amg-campaign="halloween"] #tierCardDelux .tier-price{color:#ffd36b}

body[data-amg-campaign="muertos"] #tierCardBasico:not(.selected){
  border-color:rgba(255,190,64,.4);
  background:linear-gradient(145deg,rgba(255,180,50,.13),rgba(120,60,20,.03));
  box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12),0 0 20px rgba(255,176,45,.12)}
body[data-amg-campaign="muertos"] #tierCardBasico .tier-price{color:#ffcf6b}
body[data-amg-campaign="muertos"] #tierCardBasico .tier-list li::before{color:#ffcf6b}

body[data-amg-campaign="muertos"] #tierCardPremium:not(.selected){
  border-color:rgba(255,159,48,.5);
  background:linear-gradient(145deg,rgba(255,148,40,.17),rgba(150,60,10,.04));
  box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14),0 0 24px rgba(255,140,32,.14)}
body[data-amg-campaign="muertos"] #tierCardPremium .tier-price{color:#ff9a45}

body[data-amg-campaign="muertos"] #tierCardDelux:not(.selected){
  border-color:rgba(255,207,90,.6);
  background:linear-gradient(135deg,rgba(255,199,90,.19),rgba(200,110,20,.06));
  box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.16),0 0 30px rgba(255,180,60,.15)}
body[data-amg-campaign="muertos"] #tierCardDelux .tier-price{color:#ffd36b}

/* Brillo suave al hover en Premium (solo con mouse real, nunca en touch) */
@media (hover:hover) and (pointer:fine){
  body[data-amg-campaign="halloween"] #tierCardPremium:not(.selected):hover{box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.16),0 0 34px rgba(255,122,24,.26)}
  body[data-amg-campaign="muertos"] #tierCardPremium:not(.selected):hover{box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.16),0 0 34px rgba(255,159,48,.24)}
}

/* Insignia "Cera de regalo" dentro de la tarjeta Premium (la agrega JS) */
.amg-campaign-gift{display:none;align-items:center;gap:7px;margin:10px 0 0;padding:7px 8px;border:1px solid rgba(255,159,72,.36);border-radius:7px;background:rgba(255,116,24,.1);color:#ffcfaa;font:500 9.5px/1.35 "Inter",sans-serif}
.amg-campaign-gift svg{width:15px;height:15px;flex:none;color:#ff9a45}
.amg-campaign-gift b{color:#fff2e6;font-weight:600}
body[data-amg-campaign="muertos"] .amg-campaign-gift{border-color:rgba(255,190,64,.4);background:rgba(255,159,48,.1);color:#ffdcae}
body[data-amg-campaign="muertos"] .amg-campaign-gift svg{color:#ffc247}
body[data-amg-campaign] .amg-campaign-gift{display:flex}

/* ── Carrusel: tratamiento nocturno sutil ────────────────────────────── */
body[data-amg-campaign="halloween"] .carousel-slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(160deg,rgba(139,64,201,.16),transparent 55%,rgba(255,122,24,.1))}
body[data-amg-campaign="muertos"] .carousel-slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(160deg,rgba(255,183,45,.14),transparent 55%,rgba(255,122,24,.08))}

/* ── Confirmación: acento naranja/morado + nota de temporada ─────────── */
body[data-amg-campaign="halloween"] .confirm-icon{box-shadow:0 0 20px rgba(255,122,24,.22),0 0 46px rgba(143,92,255,.26)}
body[data-amg-campaign="muertos"] .confirm-icon{box-shadow:0 0 20px rgba(255,183,45,.24),0 0 46px rgba(255,122,24,.2)}

.amg-season-note{display:none;margin:10px 0 0;padding:10px 12px;border-left:2px solid #ff9a45;border-radius:0 8px 8px 0;background:rgba(255,122,24,.08);color:#f0d9c4;font:500 12px/1.5 "Inter",sans-serif}
body[data-amg-campaign] .amg-season-note{display:block}
body[data-amg-campaign="muertos"] .amg-season-note{border-left-color:#ffc247;background:rgba(255,183,45,.09);color:#ffe6bd}

/* Fila "Regalo de temporada" dentro de la tarjeta de confirmación (JS) */
.amg-confirm-gift .confirm-val{color:#ff9a45}
body[data-amg-campaign="muertos"] .amg-confirm-gift .confirm-val{color:#ffc247}

/* ── Pétalos: solo después de guardar la cita con éxito ──────────────── */
.amg-petal-layer{position:fixed;inset:0;z-index:130;pointer-events:none;overflow:hidden}
.amg-petal{display:block;position:absolute;left:var(--x);top:-28px;width:var(--size);height:calc(var(--size) * .66);border-radius:72% 20% 72% 20%;background:radial-gradient(ellipse at 30% 28%,#ffe68c 0 12%,var(--color) 45%,#e95418 100%);box-shadow:inset 1px 1px 1px rgba(255,255,255,.45),0 1px 3px rgba(123,35,0,.28);will-change:transform,opacity;animation:amg-petal-rain var(--duration) cubic-bezier(.77,0,.175,1) var(--delay) forwards}
@keyframes amg-petal-rain{
  0%{opacity:0;transform:translate3d(0,-20px,0) rotate(var(--rotation)) scale(.8)}
  10%{opacity:1}
  48%{opacity:1;transform:translate3d(var(--sway),45vh,0) rotate(calc(var(--rotation) + 180deg)) scale(.95)}
  100%{opacity:0;transform:translate3d(var(--travel),110vh,0) rotate(calc(var(--rotation) + var(--spin))) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .amg-petal{animation:amg-petal-fade 700ms ease var(--delay) forwards}
  @keyframes amg-petal-fade{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
}

/* ── Ajustes móviles ──────────────────────────────────────────────────
   El sitio ya es mobile-first (ver comentario en el <style> principal);
   estos valores ya están en clamp() y se achican solos. Aquí solo se
   recorta un poco más en pantallas muy angostas para que nunca compitan
   con el título del hero. */
@media (max-width:360px){
  .amg-moon{width:clamp(72px,24vw,110px);height:clamp(72px,24vw,110px);top:4px;right:4px}
  .amg-cobweb{width:clamp(52px,18vw,80px);height:clamp(52px,18vw,80px)}
  .amg-cempasuchil{width:clamp(50px,17vw,72px);top:6px;right:6px}
}

/* Nunca provocar scroll horizontal por un adorno que se salga del hero. */
.hero{overflow:hidden}