/* ─────────────────────────────────────────────────────────────
 * pastel.css — Pastel 3D + velas reales.
 *
 * Estructura esperada:
 *   .pastel-escena
 *     .pastel-3d            (flex column normal, no reverse)
 *       .velas-3d           (absoluto en el top)
 *         .vela × 3 con .mecha / .llama / .resplandor
 *       .pastel-piso.top
 *         .glaseado, .sprinkles
 *       .pastel-piso.medio
 *         .glaseado
 *       .pastel-piso.bajo
 *         .glaseado
 *     .pastel-plato
 *
 * El layout usa flex column (NO reverse) más overlap con margin-top
 * negativo, así cada piso encaja naturalmente sobre el siguiente.
 * ───────────────────────────────────────────────────────────── */

.pastel-escena {
  position: relative;
  width: 280px;
  margin: 24px auto 12px;
  /* Sin height fijo: deja que el contenido determine el tamaño. */
}

.pastel-3d {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Reservamos espacio arriba para las velas (que están absolutas). */
  padding-top: 78px;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.35));
  animation: pastel-respirar 4.5s ease-in-out infinite;
}

@keyframes pastel-respirar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── PISOS ────────────────────────────────────────────────── */
.pastel-piso {
  position: relative;
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      #fde0e0 0%,
      #f5b8c0 35%,
      #e89090 75%,
      #c46868 100%);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.12),
    inset 0 -8px 0 rgba(0, 0, 0, 0.08),
    inset 0 6px 8px rgba(255, 255, 255, 0.18);
}

.pastel-piso.top  { width: 130px; height: 50px; z-index: 4; }
.pastel-piso.medio{ width: 180px; height: 54px; margin-top: -10px; z-index: 3; border-radius: 16px; }
.pastel-piso.bajo { width: 230px; height: 62px; margin-top: -10px; z-index: 2; border-radius: 18px; }

/* Textura de líneas verticales que sugiere bizcocho */
.pastel-piso::after {
  content: "";
  position: absolute;
  inset: 8px 6px 12px;
  border-radius: inherit;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 11px,
    rgba(255, 255, 255, 0.06) 11px 12px
  );
  pointer-events: none;
}

/* ── GLASEADO con drips ──────────────────────────────────── */
.glaseado {
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 22px;
  background: #fff6f0;
  border-radius: 14px 14px 4px 4px;
  box-shadow: inset 0 -3px 0 rgba(255, 220, 220, 0.4);
  z-index: 1;
}

/* Drips: gotitas redondeadas pegadas al borde inferior del glaseado */
.glaseado::after {
  content: "";
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  height: 16px;
  background:
    radial-gradient(circle at 12% 0, #fff6f0 6px, transparent 7px),
    radial-gradient(circle at 30% 0, #fff6f0 9px, transparent 10px),
    radial-gradient(circle at 48% 0, #fff6f0 5px, transparent 6px),
    radial-gradient(circle at 64% 0, #fff6f0 8px, transparent 9px),
    radial-gradient(circle at 82% 0, #fff6f0 7px, transparent 8px),
    radial-gradient(circle at 95% 0, #fff6f0 5px, transparent 6px);
  background-repeat: no-repeat;
}

.pastel-piso.bajo .glaseado { background: #ffd6e0; }
.pastel-piso.bajo .glaseado::after {
  background:
    radial-gradient(circle at  8% 0, #ffd6e0 5px, transparent 6px),
    radial-gradient(circle at 22% 0, #ffd6e0 9px, transparent 10px),
    radial-gradient(circle at 38% 0, #ffd6e0 6px, transparent 7px),
    radial-gradient(circle at 52% 0, #ffd6e0 10px, transparent 11px),
    radial-gradient(circle at 68% 0, #ffd6e0 7px, transparent 8px),
    radial-gradient(circle at 84% 0, #ffd6e0 9px, transparent 10px),
    radial-gradient(circle at 96% 0, #ffd6e0 5px, transparent 6px);
  background-repeat: no-repeat;
}

/* ── SPRINKLES en el piso top ────────────────────────────── */
.sprinkles {
  position: absolute;
  top: 12px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.sprinkles span {
  position: absolute;
  width: 7px;
  height: 3px;
  border-radius: 2px;
}

.sprinkles span:nth-child(1) { top: 0;  left: 8%;  background: #ff6b81; transform: rotate(20deg); }
.sprinkles span:nth-child(2) { top: 4px; left: 28%; background: #f5c842; transform: rotate(-30deg); }
.sprinkles span:nth-child(3) { top: 0;  left: 48%; background: #0afab0; transform: rotate(60deg); }
.sprinkles span:nth-child(4) { top: 6px; left: 68%; background: #a0c4ff; transform: rotate(-15deg); }
.sprinkles span:nth-child(5) { top: 2px; left: 86%; background: #ff6b81; transform: rotate(45deg); }
.sprinkles span:nth-child(6) { top: 16px; left: 18%; background: #f5c842; transform: rotate(-50deg); }
.sprinkles span:nth-child(7) { top: 18px; left: 60%; background: #0afab0; transform: rotate(10deg); }
.sprinkles span:nth-child(8) { top: 22px; left: 42%; background: #ff6b81; transform: rotate(-25deg); }

/* ── VELAS ───────────────────────────────────────────────── */
.velas-3d {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 26px;
  height: 70px;
  align-items: flex-end;
  z-index: 10;
}

.vela {
  position: relative;
  width: 14px;
  height: 64px;
  /* padding + margin negativo expande el área tactil sin afectar el visual.
     Más limpio que un pseudo-elemento absoluto y funciona en touch. */
  padding: 24px 15px 0;
  margin: -24px -15px 0;
  touch-action: manipulation;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    #ff6b81 18%,
    #d8506a 80%,
    rgba(0, 0, 0, 0.25) 100%
  );
  box-shadow:
    inset -3px 0 4px rgba(0, 0, 0, 0.28),
    inset 3px 0 3px rgba(255, 255, 255, 0.32),
    0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.5s ease;
}

/* Color por vela: rosa, menta, durazno */
.vela:nth-child(2) {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    #b8e0d2 18%,
    #6fb8a0 80%,
    rgba(0, 0, 0, 0.25) 100%
  );
}
.vela:nth-child(3) {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    #ffd6a5 18%,
    #c89a64 80%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

/* Stripes horizontales sutiles de cera */
.vela::before {
  content: "";
  position: absolute;
  inset: 6px 2px 2px 2px;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 8px,
    rgba(0, 0, 0, 0.08) 8px 9px
  );
  border-radius: 2px;
  pointer-events: none;
}

/* Mecha */
.mecha {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: #2a1a0a;
  border-radius: 1px;
  z-index: 2;
}

/* Llama */
.llama {
  position: absolute;
  top: -26px;
  left: 50%;
  width: 16px;
  height: 24px;
  transform: translateX(-50%);
  background:
    radial-gradient(
      ellipse at 50% 75%,
      #fffce3 0%,
      #ffe14a 25%,
      #ff8a1f 60%,
      rgba(255, 60, 0, 0) 100%
    );
  border-radius: 50% 50% 25% 25% / 70% 70% 30% 30%;
  filter: drop-shadow(0 0 10px rgba(255, 150, 30, 0.85));
  pointer-events: none;
  animation: llama-flicker 0.16s ease-in-out infinite alternate;
  z-index: 3;
}

@keyframes llama-flicker {
  0%   { transform: translateX(-50%) scale(0.92, 1)    skewX(-2deg); opacity: 0.95; }
  100% { transform: translateX(-50%) scale(1.08, 1.05) skewX(3deg);  opacity: 1; }
}

/* Halo de luz alrededor de la llama */
.resplandor {
  position: absolute;
  top: -38px;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(255, 200, 80, 0.55) 0%,
    rgba(255, 100, 30, 0.0) 60%
  );
  pointer-events: none;
  filter: blur(2px);
  animation: halo-pulse 1.6s ease-in-out infinite;
  z-index: 1;
}

@keyframes halo-pulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.95; transform: translateX(-50%) scale(1.18); }
}

/* ── Estado apagada ─────────────────────────────────────── */
.vela.apagada .llama,
.vela.apagada .resplandor {
  opacity: 0 !important;
  transform: translateX(-50%) scale(0.2) !important;
  transition: opacity 0.45s ease, transform 0.45s ease;
  animation: none !important;
}

.vela.apagada .mecha {
  background: #444;
  box-shadow: 0 0 6px rgba(255, 90, 0, 0.7);
}

.vela.apagada {
  /* Leve "derretida" para que se note */
  transform: translateY(2px);
}

/* ── HUMO (se inyecta vía JS al apagar) ────────────────── */
.humo {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 220, 220, 0.7) 0%, rgba(220, 220, 220, 0) 70%);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  animation: humo-sube 2s ease-out forwards;
  z-index: 4;
}

@keyframes humo-sube {
  0%   { opacity: 0;   transform: translate(-50%, 0)   scale(0.6); }
  20%  { opacity: 0.75; }
  100% { opacity: 0;   transform: translate(-50%, -70px) scale(2);  }
}

/* ── PLATO ────────────────────────────────────────────── */
.pastel-plato {
  position: relative;
  width: 280px;
  height: 22px;
  margin: -8px auto 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 55%, #e8e8f0 0%, #c0c0d0 80%, #a8a8b8 100%);
  box-shadow:
    0 4px 0 #8e8ea4,
    0 14px 22px rgba(0, 0, 0, 0.45);
  z-index: 1;
}

/* ── CONTROLES (instrucción + botón de mic) ───────────── */
.pastel-controles {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.instruccion-pastel {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--dorado);
  font-size: 1rem;
  text-align: center;
  margin: 0;
  transition: opacity 0.5s, color 0.5s;
}

.instruccion-pastel.cumplido {
  color: var(--rosa);
  font-weight: 600;
}

.btn-soplar {
  background: linear-gradient(135deg, rgba(255, 107, 129, 0.22), rgba(245, 200, 66, 0.14));
  border: 1px solid rgba(255, 107, 129, 0.5);
  color: #fff;
  padding: 10px 22px;
  border-radius: 50px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-style: italic;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-soplar:hover {
  background: linear-gradient(135deg, rgba(255, 107, 129, 0.38), rgba(245, 200, 66, 0.28));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 107, 129, 0.35);
}

.btn-soplar.escuchando {
  border-color: var(--verde, #0afab0);
  animation: latido-mic 1.4s ease-in-out infinite;
}

@keyframes latido-mic {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 250, 176, 0.6); }
  50%      { box-shadow: 0 0 0 14px rgba(10, 250, 176, 0); }
}

.medidor-soplido {
  width: 170px;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
  display: none;
}

.medidor-soplido.activo { display: block; }

.medidor-soplido .barra {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0afab0, #f5c842, #ff6b81);
  border-radius: 3px;
  transition: width 0.05s linear;
}

/* ── RESPONSIVE móvil ─────────────────────────────────── */
@media (max-width: 560px) {
  .pastel-escena    { width: 240px; }
  .pastel-3d        { padding-top: 70px; }
  .pastel-piso.top  { width: 110px; height: 44px; }
  .pastel-piso.medio{ width: 152px; height: 48px; }
  .pastel-piso.bajo { width: 196px; height: 56px; }
  .pastel-plato     { width: 236px; height: 18px; }
  .velas-3d         { gap: 22px; height: 64px; }
  .vela             { width: 14px; height: 54px; }
  .llama            { width: 14px; height: 22px; top: -24px; }
  .resplandor       { width: 48px; height: 48px; top: -34px; }
  .btn-soplar       { font-size: 0.9rem; padding: 9px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pastel-3d,
  .llama,
  .resplandor,
  .humo { animation: none !important; }
  .pastel-3d { transform: none; }
}