/* =========================================================
   AMBIENTE NAVIDENO - Tapiceria Las Mercedes
   Se activa SOLO con la clase "navidad" en el <body>.
   No toca estilos.css ni main.js. Para apagar en enero,
   basta quitar la clase de los 11 HTML.
   ========================================================= */

:root{
  --nav-dorado:#E3C878;
  --nav-dorado-hondo:#C9A84C;
  --nav-cuero:#2A1710;
  --nav-cuero-claro:#3C1A10;
  --nav-crema:#F3EADA;
  --nav-rojo:#7E1F14;
}

/* ---------- 1. NIEVE DORADA (sobre el hero y la pagina) ---------- */
body.navidad .nieve-navidad{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:3;
}
body.navidad .copo{
  position:absolute;
  top:-14px;
  border-radius:50%;
  background:var(--nav-dorado);
  box-shadow:0 0 5px rgba(227,200,120,.9);
  opacity:0;
  will-change:transform,opacity;
  animation-name:caeCopo;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes caeCopo{
  0%   {transform:translate3d(0,-20px,0);opacity:0}
  12%  {opacity:var(--op,.5)}
  88%  {opacity:var(--op,.5)}
  100% {transform:translate3d(var(--dx,20px),102vh,0);opacity:0}
}

/* ---------- 2. GUIRNALDA DE LUCES BAJO EL NAV ---------- */
body.navidad .guirnalda{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:22px;
  display:flex;
  justify-content:space-around;
  align-items:flex-start;
  pointer-events:none;
  z-index:1;
}
body.navidad .guirnalda::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,
    rgba(227,200,120,0) 0%,
    rgba(227,200,120,.55) 12%,
    rgba(227,200,120,.55) 88%,
    rgba(227,200,120,0) 100%);
}
body.navidad .bombillo{
  width:7px;
  height:11px;
  margin-top:1px;
  border-radius:0 0 50% 50% / 0 0 65% 65%;
  background:var(--c,#E3C878);
  box-shadow:0 0 7px 1px var(--c,#E3C878);
  animation:brillaBombillo 3.4s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
@keyframes brillaBombillo{
  0%,100%{opacity:.30;box-shadow:0 0 3px 0 var(--c)}
  45%    {opacity:1;  box-shadow:0 0 9px 2px var(--c)}
}

/* ---------- 3. CINTA DE TEMPORADA CON CUENTA REGRESIVA ---------- */
body.navidad .cinta-navidad{
  position:relative;
  background:linear-gradient(90deg,var(--nav-cuero) 0%,var(--nav-cuero-claro) 50%,var(--nav-cuero) 100%);
  padding:18px 24px;
  text-align:center;
  overflow:hidden;
  border-top:1px solid rgba(227,200,120,.18);
  border-bottom:1px solid rgba(227,200,120,.18);
}
body.navidad .cn-txt{
  font-family:'Fraunces',Georgia,serif;
  font-weight:300;
  font-size:1.08rem;
  line-height:1.6;
  color:var(--nav-crema);
  letter-spacing:.01em;
  margin:0;
}
body.navidad .cn-dias{
  color:var(--nav-dorado);
  font-style:italic;
  font-weight:400;
}
body.navidad .cn-cta{
  display:inline-block;
  margin-top:10px;
  padding:7px 20px;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--nav-cuero);
  background:var(--nav-dorado);
  border-radius:2px;
  transition:background .25s ease,transform .25s ease;
}
body.navidad .cn-cta:hover{background:#F0DCA3;transform:translateY(-1px)}
@media(max-width:700px){
  body.navidad .cn-txt{font-size:.95rem}
  body.navidad .cinta-navidad{padding:16px 18px}
}

/* ---------- 4. PAPA NOEL TAPICERO (franja inferior) ---------- */
body.navidad .paseo-navidad{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:220px;
  pointer-events:none;
  overflow:hidden;
  z-index:2;
}
body.navidad .papanoel{
  position:absolute;
  bottom:0;
  left:0;
  height:200px;
  width:auto;
  animation:paseoPapaNoel 25s linear infinite;
}
@keyframes paseoPapaNoel{
  0%  {transform:translateX(-240px)}
  100%{transform:translateX(calc(100vw + 240px))}
}

/* ---------- 5. GORRITO EN EL LOGO Y EN WHATSAPP ---------- */
body.navidad #nav .brand .brand-mark{position:relative}
body.navidad #nav .brand .brand-mark::after,
body.navidad .wa-float::after{
  content:"";
  position:absolute;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M3 29C5 13 15 2 29 3c4 3 3 11-2 15C19 24 11 28 3 29Z' fill='%237E1F14'/%3E%3Cpath d='M4 25c8-1 16-5 24-11 1 2 1 4 0 6C20 26 12 29 4 30Z' fill='%23A02A1C'/%3E%3Crect x='1' y='26' width='26' height='7' rx='3.5' fill='%23F7F2E8'/%3E%3Ccircle cx='32' cy='5' r='4.5' fill='%23F7F2E8'/%3E%3C/svg%3E");
  pointer-events:none;
}
body.navidad #nav .brand .brand-mark::after{
  width:34px;height:29px;
  top:-15px;left:-11px;
  transform:rotate(-12deg);
}
body.navidad .wa-float::after{
  width:26px;height:22px;
  top:-10px;left:-7px;
  transform:rotate(-16deg);
  z-index:2;
}

/* ---------- 6. SELLO DE ESQUINA EN EL HERO ---------- */
body.navidad .sello-navidad{
  position:absolute;
  top:0;right:0;
  width:190px;height:190px;
  overflow:hidden;
  pointer-events:none;
  z-index:4;
}
body.navidad .sello-navidad span{
  position:absolute;
  top:42px;right:-52px;
  width:230px;
  padding:9px 0;
  transform:rotate(45deg);
  text-align:center;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--nav-cuero);
  background:linear-gradient(135deg,#D9BE7E 0%,#F0DCA3 50%,#C9A84C 100%);
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}
@media(max-width:900px){
  body.navidad .sello-navidad{display:none}
}

/* ---------- 7. RESPETO A QUIEN PIDE MENOS MOVIMIENTO ---------- */
@media(prefers-reduced-motion:reduce){
  body.navidad .nieve-navidad,
  body.navidad .paseo-navidad{display:none}
  body.navidad .bombillo{animation:none;opacity:.75}
}