/* ==========================================================
   MÓDULO DÍA DE MUERTOS — AT Design Studio
   Archivo temporal para la temporada de Día de Muertos.
   Para quitarlo: borra este archivo, muertos.js, y las líneas
   marcadas <!-- EDITAR: ... --> en index.html. Nada de esto
   toca script.js ni style.css.

   Paleta: amarillo cempasúchil #FFB703 · naranja #FF6A00 · negro #0A0A0A

   NOTA: las clases .halloween-ribbon y .halloween-colgantes conservan
   su nombre a propósito (la franja superior sigue siendo la de
   Halloween y así no hay que tocar el HTML de esos bloques).
   ========================================================== */

/* Empuja el navbar hacia abajo por la altura de la franja */
#navbar {
  top: 30px;
}
@media (max-width: 480px) {
  #navbar {
    top: 24px;
  }
}

/* ---- Colgantes bajo el navbar (se mecen individualmente con el scroll) ---- */
.halloween-colgantes{
  position:absolute;
  top:100%;
  left:0; width:100%;
  height:60px;
  z-index:-1; /* debajo del contenido del navbar, colgando por FUERA de él */
  overflow:visible; /* cada colgante se mece desde su propio eje, sin salirse de forma brusca */
  pointer-events:none;
}
.colgantes-cuerda{
  position:absolute;
  top:6px; left:0;
  display:flex;
  width:max-content;
}
.colgante{
  width:26px; height:34px;
  margin:0 4px;
  flex-shrink:0;
  display:flex; align-items:flex-start; justify-content:center;
  font-size:20px; line-height:1;
  transform-origin:top center; /* cada colgante se mece desde su propio hilo, no toda la cuerda junta */
  will-change:transform;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
}

@media (max-width:600px){
  .halloween-colgantes{height:40px}
  .colgantes-cuerda{top:4px}
  .colgante{width:18px;height:24px;margin:0 3px;font-size:15px}
}

/* ---- Franja superior con el mensaje — arriba de TODO, empuja al navbar hacia abajo ---- */
.halloween-ribbon{
  position:fixed;
  top:0; left:0; width:100%;
  height:30px;
  z-index:1001; /* por encima del navbar (1000): nunca queda tapado ni se cruza con los links */
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(10,8,4,0.94);
  backdrop-filter:blur(10px);
  border-bottom:2px solid;
  border-image:linear-gradient(90deg,#ff6a00,#ffb703,#0a0a0a) 1;
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:12.5px; letter-spacing:.6px;
  color:#f5f5f0;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  text-decoration:none;
  cursor:pointer;
  transition:background 0.2s;
}
.halloween-ribbon:hover{
  background:rgba(22,14,4,0.96);
}
@media (max-width:480px){
  .halloween-ribbon{height:24px; font-size:10.5px; letter-spacing:.3px}
}

/* ---- NIEBLA PROCEDURAL (CANVAS + BRUMA DE SUELO) ---- */
.hero-fog-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
  opacity:0.92;
}

/* Bruma de suelo que une el hero con la siguiente sección */
.hero-ground-mist{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:160px;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse 110% 90% at 50% 100%, rgba(38,16,0,0.85) 0%, rgba(255,140,0,0.18) 45%, transparent 80%),
    linear-gradient(to top, rgba(10,10,10,0.95), transparent);
  animation:respiracionBruma 12s ease-in-out infinite alternate;
}

@keyframes respiracionBruma{
  0%{opacity:0.8;transform:scaleY(0.95)}
  100%{opacity:1;transform:scaleY(1.08)}
}

/* Resplandor cálido sutil bajo el navbar */
#navbar::after{
  content:'';
  position:absolute;
  bottom:-14px;
  left:0;
  width:100%;
  height:16px;
  pointer-events:none;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255,183,3,0.32), rgba(255,106,0,0.18) 50%, transparent 100%);
  filter:blur(6px);
  z-index:-1;
}

/* ---- COLORES E INTERACCIÓN DE DÍA DE MUERTOS (BOTONES, CARDS, HOVERS) ---- */
/* Badge del Hero */
.hero-tag{
  background:rgba(255,183,3,0.14) !important;
  border-color:rgba(255,183,3,0.45) !important;
  color:#ffc933 !important;
  box-shadow:0 0 20px rgba(255,183,3,0.2), inset 0 0 10px rgba(255,183,3,0.08) !important;
}

/* Título con acento de cempasúchil y fuego de veladora */
.hero-title .accent{
  background:linear-gradient(135deg, #ffd23f 10%, #ffb703 45%, #ff6a00 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
  filter:drop-shadow(0 0 24px rgba(255,160,0,0.38));
}

/* Botones con brillo de veladora */
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(255,106,0,0.5), 0 0 24px rgba(255,183,3,0.4) !important;
}
.btn-secondary:hover{
  border-color:rgba(255,183,3,0.55) !important;
  box-shadow:0 0 20px rgba(255,183,3,0.25) !important;
}

/* Filtros de Categoría */
.cat-btn:hover{
  border-color:#ffb703 !important;
  color:#ffb703 !important;
  box-shadow:0 0 15px rgba(255,183,3,0.35) !important;
}
.cat-btn.active{
  background:linear-gradient(135deg,#ff6a00,#ffb703) !important;
  border-color:transparent !important;
  color:#0a0a0a !important;
  box-shadow:0 4px 22px rgba(255,106,0,0.5), 0 0 15px rgba(255,183,3,0.35) !important;
}

/* Tarjetas interactivas */
.service-card:hover{
  border-color:rgba(255,106,0,0.5) !important;
  box-shadow:0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(255,106,0,0.25) !important;
}
.feature-box:hover{
  border-color:rgba(255,183,3,0.5) !important;
  box-shadow:0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(255,183,3,0.25) !important;
}
.project-card:hover{
  border-color:rgba(255,106,0,0.5) !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.6), 0 0 25px rgba(255,106,0,0.22) !important;
}
.promo-card:hover{
  box-shadow:0 12px 40px rgba(255,106,0,0.4), 0 0 20px rgba(255,183,3,0.3) !important;
  border-color:rgba(255,183,3,0.55) !important;
}
.testimonial-shot:hover{
  border-color:rgba(255,183,3,0.5) !important;
  box-shadow:0 16px 40px rgba(255,183,3,0.3) !important;
}

@media (prefers-reduced-motion: reduce){
  .hero-ground-mist{animation:none}
}

/* ==========================================================
   CONTADOR — HONRAR A NUESTROS FIELES DIFUNTOS
   ========================================================== */
.muertos-countdown{
  max-width:900px;margin:80px auto 0;padding:48px 32px;
  text-align:center;position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,140,0,0.16), transparent 60%),
    linear-gradient(180deg, rgba(30,15,2,0.55), rgba(10,8,4,0.25));
  border:1px solid rgba(255,183,3,0.24);
  border-radius:24px;
}
.countdown-warning{
  font-family:'Syne',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:#ffb703;margin-bottom:14px;
  animation:brilloVeladora 3.4s ease-in-out infinite;
}
.countdown-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(24px,4.5vw,38px);
  margin-bottom:36px;color:#fff6e0;
  text-shadow:0 0 8px rgba(255,183,3,.5),0 0 22px rgba(255,106,0,.35);
}
.countdown-grid{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.countdown-unit{display:flex;flex-direction:column;align-items:center;min-width:76px}
.countdown-num{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(32px,7vw,54px);line-height:1;
  background:linear-gradient(180deg,#ffd23f,#ff6a00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 12px rgba(255,160,0,.35));
  animation:latidoSuave 2.4s ease-in-out infinite;
  display:inline-block;
}
.countdown-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gris-claro);margin-top:6px}
.countdown-sep{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(24px,5vw,40px);color:#ffb703;
  transform:translateY(-6px);opacity:.7;
}
.countdown-cierre{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(18px,3.6vw,27px);letter-spacing:.5px;
  margin-top:34px;color:#fff6e0;
  text-shadow:0 0 8px rgba(255,183,3,.45),0 0 20px rgba(255,106,0,.3);
}
.countdown-ornamento{
  margin-top:16px;
  font-size:22px;letter-spacing:12px;
  padding-left:12px; /* compensa el letter-spacing para que quede centrado */
  animation:brilloVeladora 3.4s ease-in-out infinite;
}

/* Brillo suave como de veladora */
@keyframes brilloVeladora{
  0%,100%{opacity:1}
  30%{opacity:.82}
  55%{opacity:1}
  78%{opacity:.9}
}
/* Latido leve en los números */
@keyframes latidoSuave{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.03)}
}
@media (prefers-reduced-motion: reduce){
  .countdown-warning,.countdown-num,.countdown-ornamento{animation:none}
}
@media (max-width:600px){
  .muertos-countdown{padding:36px 20px;margin-top:56px}
  .countdown-grid{gap:8px}
  .countdown-unit{min-width:60px}
  .countdown-ornamento{font-size:18px;letter-spacing:8px;padding-left:8px}
}