/* Contenedor general */
.mood{ padding:clamp(16px,5vw,40px) 0; background:#fff; }
.mood__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.mood__title{
  font-family: "Montserrat", system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:700; letter-spacing:.04em; margin:0 0 18px; font-size:clamp(22px,3vw,28px);
}

/* Masonry por columnas */
.mood__board{
  column-gap: 16px;
  column-fill: balance;
  column-width: 260px;   /* navegador decide cuántas columnas */
}
@media (min-width: 768px){ .mood__board{ column-gap:20px; column-width: 300px; } }

/* Ítems */
.mood__card{
  break-inside: avoid; display:block; margin:0 0 16px; position:relative; border-radius:14px; overflow:hidden;
  background:#f6f6f6; box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.mood__img{ display:block; width:100%; height:auto; object-fit:cover; }
.mood__badge{
  position:absolute; right:10px; bottom:10px; z-index:2;
  background:rgba(0,0,0,.72); color:#fff; font:600 12px/1 Montserrat,system-ui,Arial;
  letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:10px;
}
.mood__btn{
  position:absolute; inset:0; border:0; background:transparent; cursor:pointer;
  /* feedback al pulsar */
}
.mood__btn:active{ outline:2px solid rgba(0,0,0,.2); }

/* Efecto sutil al cargar */
.mood__img{ opacity:0; transform:scale(1.02); transition:opacity .35s ease, transform .35s ease; }
.mood__img.is-loaded{ opacity:1; transform:none; }
/* --- Coachmark inicial -------------------------------------------------- */
/* --- Coachmark inicial -------------------------------------------------- */
/* --- Coachmark inicial (grande + máquina de escribir) ------------------ */
.mood__coach{
  position: fixed;
  left: 50%;
  bottom: 20vh;
  transform: translateX(-50%);
  z-index: 99999;
  background: #111;
  color:#fff;
  font: 700 20px/1.35 Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding: 18px 22px;
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(0,0,0,.28);
  pointer-events: none;
  opacity: 0;                  /* aparece con la clase .is-on */
}
.mood__coach.is-on{ opacity:1; transition: opacity .25s ease; }

.mood__coach::after{
  content:"";
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  border:10px solid transparent; border-top-color:#111;
}

/* Texto con efecto máquina de escribir (3s exactos) */
.mood__coach .type{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  border-right: 2px solid #fff;      /* cursor */
  /* --chars la define JS con la longitud del mensaje */
  animation:
    typing 3s steps(var(--chars)) forwards,  /* 3s exactos */
    blink .9s step-end infinite;
}

/* ocultar */
.mood__coach.is-hide{
  opacity:0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

/* Animaciones */
@keyframes typing{ from{ width:0 } to{ width:100% } }
@keyframes blink { 50%{ border-color: transparent } }

@media (max-width:480px){
  .mood__coach{ bottom: 16vh; font-size:18px; padding:16px 18px; }
}

@media (prefers-reduced-motion: reduce){
  .mood__coach .type{ animation: none; border-right:0 }
}