/* =============================================================
   Cocoa & Vainilla — versión de temporada (otoño y Halloween)
   Se suma a styles.css solo en la versión especial. Los adornos no
   tapan nada, no se pueden tocar y no cambian la paleta de la marca.
   ============================================================= */
/* Colores de los adornos (hojas y calabazas) */
.halloween {
  --calabaza: #E0762F;
  --ambar: #C98A2E;
  --oxido: #B5553A;
}

/* Telarañas finas en las esquinas de arriba, debajo de la barra */
.hw-telaranas { position: fixed; inset: 0; z-index: 70; pointer-events: none; color: #3A2620; }
.hw-tela { position: absolute; top: calc(var(--nav-h) - .2rem); width: clamp(5.5rem, 13vw, 8.5rem); height: auto; opacity: .2; }
.hw-tela--izq { left: 0; }
.hw-tela--der { right: 0; transform: scaleX(-1); }
html[data-tema="cocoa"] .hw-telaranas { color: #F6EBDD; }

/* Hojas que caen en la portada */
.hero { position: relative; }
.hero-head, .arches { position: relative; z-index: 1; }
.hw-hojas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hw-hoja {
  position: absolute; top: 0; left: var(--l); width: var(--s); height: var(--s); color: var(--c);
  opacity: 0; animation: hojaCae var(--d) linear var(--r) infinite;
}
.hw-hoja svg, .hw-hoja-quieta svg { width: 100%; height: 100%; display: block; }
@keyframes hojaCae {
  0% { transform: translate3d(0, -14vh, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .72; }
  88% { opacity: .72; }
  100% { transform: translate3d(var(--dx), 96vh, 0) rotate(300deg); opacity: 0; }
}

/* Calabacitas apoyadas al pie de los arcos */
.hw-calabaza { position: absolute; bottom: 0; display: block; pointer-events: none; z-index: 2; width: clamp(2.6rem, 5vw, 3.9rem); filter: drop-shadow(0 6px 10px rgba(58, 38, 32, .18)); }
.hw-calabaza--izq { left: 2.5%; transform: rotate(-6deg); }
.hw-calabaza--der { right: 3%; width: clamp(2rem, 3.6vw, 2.9rem); transform: rotate(7deg); }
/* En celular los arcos llegan a la orilla: ahí las calabazas estorban */
@media (max-width: 719px) {
  .hw-calabaza { display: none; }
  /* solo las hojas de las orillas, para que no crucen el logotipo */
  .hw-hojas .hw-hoja:nth-child(n+3):nth-child(-n+5) { display: none; }
}

/* Arañita que baja y sube de su hilo, junto al logotipo de la portada.
   --largo es hasta dónde baja; el hilo se estira con ella. */
.hw-arana {
  position: absolute; top: 0; left: 72%; z-index: 2; pointer-events: none;
  --largo: 9.5rem; --corto: .34;
  width: clamp(1.9rem, 3.4vw, 2.7rem); color: #3A2620; opacity: .55;
}
.hw-hilo {
  position: absolute; top: 0; left: 50%; width: 1.3px; height: var(--largo); margin-left: -.65px;
  background: currentColor; transform-origin: top center; transform: scaleY(var(--corto));
  animation: aranaHilo 8s ease-in-out infinite;
}
.hw-arana-cuerpo {
  position: absolute; top: var(--largo); left: 0; width: 100%;
  transform: translateY(calc(var(--largo) * (var(--corto) - 1)));
  animation: aranaBaja 8s ease-in-out infinite;
}
.hw-arana-cuerpo svg { width: 100%; height: auto; display: block; }
@keyframes aranaHilo { 0%, 100% { transform: scaleY(var(--corto)); } 50% { transform: scaleY(1); } }
@keyframes aranaBaja {
  0%, 100% { transform: translateY(calc(var(--largo) * (var(--corto) - 1))) rotate(-3deg); }
  50% { transform: translateY(0) rotate(3deg); }
}
@media (max-width: 859px) { .hw-arana { left: 84%; --largo: 7.5rem; } }
@media (max-width: 539px) { .hw-arana { left: 82%; --largo: 6.5rem; width: 1.9rem; } }

/* Murciélagos que cruzan despacio, con un aleteo apenas perceptible */
.hw-murcielagos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hw-murcielago {
  position: absolute; left: var(--l); top: var(--t); width: var(--s); color: #3A2620; opacity: .2;
  animation: murcielagoVuela var(--d) ease-in-out var(--r) infinite;
}
.hw-murcielago svg { width: 100%; height: auto; display: block; animation: murcielagoAletea 1.8s ease-in-out infinite; }
@keyframes murcielagoVuela {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(2.4rem, -1.2rem, 0); }
  50% { transform: translate3d(3.6rem, .7rem, 0); }
  75% { transform: translate3d(1.5rem, 1.5rem, 0); }
}
@keyframes murcielagoAletea { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.74); } }
@media (max-width: 719px) {
  /* en celular solo uno y abajo, para no cruzar por detrás del logotipo */
  .hero .hw-murcielago:nth-child(1) { --l: 6%; --t: 56%; --s: 2.4rem; }
  .hero .hw-murcielago:nth-child(2), .hero .hw-murcielago:nth-child(3) { display: none; }
}

/* Hojas quietas en el pie */
.footer { position: relative; overflow: clip; }
.hw-pie { position: absolute; inset: 0; pointer-events: none; }
.hw-hoja-quieta { position: absolute; width: var(--s); height: var(--s); color: var(--c); opacity: .6; transform: rotate(var(--g)); }

/* Pie: murciélagos, calabacitas y telarañas en las esquinas de abajo */
.hw-murcielago--pie { color: #F6EBDD; opacity: .16; }
.hw-calabaza-pie { position: absolute; bottom: 1.1rem; width: var(--s); transform: rotate(var(--g)); }
.hw-calabaza-pie svg { width: 100%; height: auto; display: block; }
.hw-tela-pie { position: absolute; bottom: 0; width: clamp(4.5rem, 10vw, 7rem); color: #F6EBDD; opacity: .14; }
.hw-tela-pie .hw-tela { position: static; top: auto; width: 100%; opacity: 1; }
.hw-tela-pie--izq { left: 0; transform: scaleY(-1); }
.hw-tela-pie--der { right: 0; transform: scale(-1, -1); }
@media (max-width: 719px) {
  .hw-murcielago--pie { display: none; }
  .hw-calabaza-pie { bottom: .6rem; width: 2rem; }
}

/* Toque cálido de otoño en la portada */
.halloween .hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45vh; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 100% at 50% 120%, rgba(224, 118, 47, .14) 0%, rgba(224, 118, 47, 0) 70%);
}

/* Con movimiento reducido, las hojas se quedan quietas */
@media (prefers-reduced-motion: reduce) {
  .hw-hoja { animation: none; opacity: .6; transform: translate3d(0, 30vh, 0) rotate(25deg); }
  .hw-hilo, .hw-arana-cuerpo, .hw-murcielago, .hw-murcielago svg { animation: none; }
}

/* Sección de temporada: pan de muerto y café */
.temp-grid { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.temp-card { display: flex; flex-direction: column; gap: 1.1rem; }
.temp-media { border-radius: 1.6rem 1.6rem 1.2rem 1.2rem; overflow: hidden; background: var(--soft); }
.temp-media img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .temp-card:hover .temp-media img { transform: scale(1.04); } }
.temp-body { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.temp-body h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.temp-body p { color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.temp-body .price {
  font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 500; color: var(--ink);
  font-size: 1.05rem; font-variant-numeric: lining-nums;
}
.temp-btn { margin-top: .4rem; }
@media (min-width: 720px) { .temp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 719px) { .temp-btn { width: 100%; } }

/* Calabacitas y una hoja en la sección de temporada */
.temporada { position: relative; overflow: clip; }
.temporada .wrap { position: relative; z-index: 1; }
.temp-calabaza, .temp-hoja { position: absolute; pointer-events: none; display: block; }
.temp-calabaza svg, .temp-hoja svg { width: 100%; height: 100%; display: block; }
.temp-calabaza { filter: drop-shadow(0 8px 14px rgba(58, 38, 32, .16)); }
.temp-calabaza--1 { width: clamp(6rem, 13vw, 11rem); right: 11%; top: 14%; transform: rotate(-7deg); }
.temp-calabaza--2 { width: clamp(4rem, 8.5vw, 7rem); right: 25%; top: 26%; transform: rotate(9deg); }
.temp-hoja { width: clamp(1.8rem, 3.4vw, 3rem); color: var(--oxido); opacity: .8; }
.temp-hoja--1 { right: 21%; top: 12%; transform: rotate(-24deg); }
/* En pantallas chicas el texto ocupa todo el ancho: queda una sola
   calabacita arriba a la derecha, donde no estorba */
@media (max-width: 859px) {
  .temp-calabaza--1 { width: 5.4rem; right: 3%; top: 3.4rem; }
  .temp-calabaza--2, .temp-hoja--1 { display: none; }
}
@media (max-width: 539px) {
  .temp-calabaza--1 { width: 4.2rem; top: 3.2rem; }
}