/* ====================================================
   SIGNATURE.CSS — "Il focolare"
   El wow moment: la brasa viva del hero + el vapor del
   plato recién salido del horno. Pieza única de
   ¡Que Cocine Valentina! (ver signature.md).
==================================================== */

/* === CAPA DE BRASAS + HARINA EN EL HERO === */
.qcv-signature {
  position: absolute;
  inset: 0;
  z-index: 2;                 /* sobre la foto/gradiente, bajo el contenido (z-3) */
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* La brasa SUMA luz sobre la foto oscura del hero */
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out-expo) 0.6s;
}

.qcv-signature.is-ready { opacity: 1; }

/* Halo cálido en la base del hero — la boca del horno.
   Refuerza el origen de las brasas sin depender del JS. */
.hero .hero-bg::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 80%;
  height: 45%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center bottom,
    rgba(237, 106, 43, 0.28) 0%,
    rgba(237, 106, 43, 0.12) 38%,
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: qcvHearthBreathe 7s var(--ease-smooth) infinite;
}

@keyframes qcvHearthBreathe {
  0%, 100% { opacity: 0.62; transform: translateX(-50%) scaleY(0.96); }
  50%      { opacity: 0.95; transform: translateX(-50%) scaleY(1.04); }
}

/* === VAPOR DEL PLATO SIGNATURE (Alba, recién horneada) === */
.plato-steam {
  position: absolute;
  top: 6%;
  left: 0;
  right: 0;
  height: 60%;
  z-index: 3;
  pointer-events: none;
  display: flex;
  justify-content: center;
  gap: 16%;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out-expo);
}

/* Aparece sólo al pasar por encima del plato — sutil, no invasivo */
.plato-card--feature:hover .plato-steam { opacity: 1; }

.plato-steam span {
  display: block;
  width: 10px;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(246, 236, 214, 0) 0%,
    rgba(246, 236, 214, 0.5) 45%,
    rgba(246, 236, 214, 0) 100%
  );
  filter: blur(6px);
  border-radius: 50%;
  transform: translateY(20%) scaleY(0.6);
  animation: qcvSteam 4.2s var(--ease-smooth) infinite;
}

.plato-steam span:nth-child(2) { animation-delay: 1.1s; animation-duration: 5s; }
.plato-steam span:nth-child(3) { animation-delay: 2.2s; animation-duration: 4.6s; }

@keyframes qcvSteam {
  0%   { opacity: 0; transform: translateY(30%) scaleY(0.5) translateX(0); }
  25%  { opacity: 0.7; }
  60%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-60%) scaleY(1.4) translateX(8px); }
}

/* === RESPETAR prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  .qcv-signature { opacity: 0.55; transition: none; }
  .hero .hero-bg::after { animation: none; opacity: 0.7; }
  .plato-steam { display: none; }
}

/* En móvil el vapor es decorativo y costoso: fuera */
@media (max-width: 768px) {
  .plato-steam { display: none; }
}