/* ════════════════════════════════════════════════
   CUPONES DE AMOR — styles.css
   ════════════════════════════════════════════════
   Secciones:
   1. Variables / Reset
   2. Fondo y cuerpo
   3. Modo Gamer (overrides)
   4. Header
   5. Frase aleatoria
   6. Línea decorativa & corazón secreto
   7. Campo secreto
   8. Tabs
   9. Contador
   10. Temporizador
   11. Grilla
   12. Cupón (vale)
   13. Efectos especiales de cupones
   14. Modal canje
   15. Modal secreto
   16. Música
   17. Toast
   18. Mini chat
   19. Confetti & partículas
   20. Frases de fondo
   21. Gamer banner
   ════════════════════════════════════════════════ */


/* ─── 1. VARIABLES / RESET ─────────────────────── */
:root {
  --rosa:          #e8a0b4;
  --rosa-oscuro:   #c26e8a;
  --crema:         #fdf6f0;
  --crema-oscuro:  #f5e8d8;
  --texto:         #3d2b2b;
  --texto-suave:   #7a5a5a;
  --dorado:        #c9a96e;
  --rojo:          #c0392b;
  --rojo-oscuro:   #922b21;
  --rojo-suave:    #f9ebea;

  /* Gamer palette */
  --gamer-bg:      #0a0a1a;
  --gamer-accent:  #00ffcc;
  --gamer-pink:    #ff00aa;
  --gamer-purple:  #8800ff;
  --gamer-yellow:  #ffee00;
}

* { margin: 0; padding: 0; box-sizing: border-box; }


/* ─── 2. FONDO Y CUERPO ────────────────────────── */
body {
  background-color: var(--crema);
  font-family: 'Lato', sans-serif;
  color: var(--texto);
  min-height: 100vh;
  transition: background 0.5s, color 0.5s;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(232,160,180,0.18) 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(201,169,110,0.12) 0%, transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(192,57,43,0.06)   0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.contenedor {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  padding: 3rem 1.25rem 6rem;
}


/* ─── 3. MODO GAMER (overrides) ────────────────── */
body.gamer-mode {
  background-color: var(--gamer-bg);
  color: var(--gamer-accent);
}
body.gamer-mode::before { display: none; }

body.gamer-mode .contenedor::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,  transparent, transparent 2px, rgba(0,255,204,0.03) 2px, rgba(0,255,204,0.03) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,255,204,0.02) 2px, rgba(0,255,204,0.02) 4px);
  pointer-events: none;
  z-index: 0;
}
body.gamer-mode .contenedor { padding-top: 4rem; }

body.gamer-mode h1 {
  color: var(--gamer-accent);
  text-shadow: 0 0 20px var(--gamer-accent);
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(1rem, 3vw, 1.8rem);
}
body.gamer-mode h1 em          { color: var(--gamer-pink); }
body.gamer-mode .subtitulo-header { color: var(--gamer-pink); letter-spacing: 0.3em; }

body.gamer-mode .tab             { border-color: var(--gamer-accent); color: var(--gamer-accent); background: transparent; }
body.gamer-mode .tab:hover,
body.gamer-mode .tab.activo      { background: var(--gamer-accent); color: #000; }
body.gamer-mode .tab.tab-sexy    { border-color: var(--gamer-pink); color: var(--gamer-pink); }
body.gamer-mode .tab.tab-sexy.activo { background: var(--gamer-pink); color: #000; }
body.gamer-mode #tab-gamer           { display: inline-block; }
body.gamer-mode .tab.tab-gamer       { border-color: var(--gamer-yellow); color: var(--gamer-yellow); }
body.gamer-mode .tab.tab-gamer.activo { background: var(--gamer-yellow); color: #000; }

body.gamer-mode .vale {
  background: #0d0d2b;
  border: 1px solid var(--gamer-accent);
  box-shadow: 0 0 18px rgba(0,255,204,0.2), inset 0 0 20px rgba(0,255,204,0.03);
}
body.gamer-mode .vale::before   { border-color: var(--gamer-purple); opacity: 0.7; }
body.gamer-mode .vale:hover     { box-shadow: 0 0 35px rgba(0,255,204,0.5); transform: translateY(-5px) scale(1.02); }
body.gamer-mode .vale::after {
  background:
    radial-gradient(circle at -0.8% 50%, #0d0d2b 8px, transparent 8px),
    radial-gradient(circle at 100.8% 50%, #0d0d2b 8px, transparent 8px);
}
body.gamer-mode .vale:hover::after {
  background:
    radial-gradient(circle at 0%   50%, var(--gamer-bg) 8px, transparent 8px),
    radial-gradient(circle at 100% 50%, var(--gamer-bg) 8px, transparent 8px);
}
body.gamer-mode .vale-titulo    { color: var(--gamer-accent); font-family: 'Press Start 2P', cursive; font-size: 0.72rem; line-height: 1.6; }
body.gamer-mode .vale-descripcion { color: rgba(0,255,204,0.7); }
body.gamer-mode .vale-pie       { background: linear-gradient(135deg, var(--gamer-purple), var(--gamer-pink)); }
body.gamer-mode .vale-pie .vale-label { color: #fff; }
body.gamer-mode .btn-canjear    { border-color: var(--gamer-accent); color: var(--gamer-accent); }
body.gamer-mode .btn-canjear:hover { background: var(--gamer-accent); color: #000; }
body.gamer-mode .sello          { border-color: var(--gamer-yellow); color: var(--gamer-yellow); }
body.gamer-mode .sello          { background: rgba(0,0,0,0.6); }
body.gamer-mode .contador       { color: rgba(0,255,204,0.6); }
body.gamer-mode .contador span  { color: var(--gamer-accent); }
body.gamer-mode .vale-badge     { background: linear-gradient(135deg, var(--gamer-accent), var(--gamer-purple)); color: #000; }
body.gamer-mode .vale-emoji     { filter: drop-shadow(0 0 8px var(--gamer-accent)); }

body.gamer-mode .frase-aleatoria { color: rgba(0,255,204,0.7); font-family: 'Press Start 2P', cursive; font-size: 0.6rem; line-height: 1.8; font-style: normal; }
body.gamer-mode .fondo-frase    { color: rgba(0,255,204,0.07); font-family: 'Press Start 2P', cursive; font-style: normal; font-size: clamp(0.45rem, 1vw, 0.65rem); }
body.gamer-mode .linea-dec::before { background: linear-gradient(to right, transparent, var(--gamer-accent)); }
body.gamer-mode .linea-dec::after  { background: linear-gradient(to left,  transparent, var(--gamer-accent)); }
body.gamer-mode .campo-secreto  { background: rgba(0,255,204,0.05); border-color: var(--gamer-accent); color: var(--gamer-accent); }

body.gamer-mode .btn-musica     { background: var(--gamer-purple); box-shadow: 0 0 20px rgba(136,0,255,0.6); }
body.gamer-mode .toast          { background: var(--gamer-accent); color: #000; font-family: 'Press Start 2P', cursive; font-size: 0.6rem; }
body.gamer-mode .modal          { background: #0d0d2b; border: 1px solid var(--gamer-accent); }
body.gamer-mode .modal-titulo   { color: var(--gamer-accent); }
body.gamer-mode .modal-subtitulo { color: rgba(0,255,204,0.7); }
body.gamer-mode .mini-chat      { background: #0d0d2b; border-color: var(--gamer-accent); }
body.gamer-mode .mini-chat .chat-titulo { background: linear-gradient(135deg, var(--gamer-purple), var(--gamer-pink)); }
body.gamer-mode .chat-burbuja.Fresh { background: var(--gamer-purple); }
body.gamer-mode .chat-burbuja.Kin   { background: #1a1a3e; border: 1px solid var(--gamer-pink); color: var(--gamer-pink); }

body.gamer-mode .temporizador-widget { border-color: var(--gamer-accent); background: #0d0d2b; color: var(--gamer-accent); box-shadow: 0 0 15px rgba(0,255,204,0.3); }
body.gamer-mode .temporizador-widget .temp-titulo { color: var(--gamer-pink); }
body.gamer-mode .temp-countdown { font-family: 'Press Start 2P', cursive; font-size: clamp(0.7rem, 2vw, 1rem); color: var(--gamer-accent); text-shadow: 0 0 10px var(--gamer-accent); }
body.gamer-mode .temp-subtexto  { color: rgba(0,255,204,0.6); }
body.gamer-mode .temp-barra-wrap { background: rgba(0,255,204,0.15); }
body.gamer-mode .temp-barra     { background: linear-gradient(90deg, var(--gamer-accent), var(--gamer-purple)); }


/* ─── 4. HEADER ────────────────────────────────── */
header { text-align: center; margin-bottom: 1.5rem; }

.subtitulo-header {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rosa-oscuro);
  margin-bottom: 0.75rem;
  transition: color 0.5s;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 7vw, 3.6rem);
  font-weight: 400;
  color: var(--texto);
  line-height: 1.15;
  margin-bottom: 0.5rem;
  transition: color 0.5s, font-size 0.5s;
}
h1 em { color: var(--rosa-oscuro); font-style: italic; transition: color 0.5s; }


/* ─── 5. FRASE ALEATORIA ───────────────────────── */
.frase-aleatoria {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-bottom: 1.5rem;
  min-height: 1.4em;
  opacity: 0;
  animation: aparecer 1s ease 0.5s forwards;
  transition: color 0.5s;
}
@keyframes aparecer { to { opacity: 1; } }


/* ─── 6. LÍNEA DECORATIVA & CORAZÓN SECRETO ───── */
.linea-dec {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.linea-dec::before,
.linea-dec::after { content: ''; height: 1px; width: 80px; }
.linea-dec::before { background: linear-gradient(to right, transparent, var(--dorado)); }
.linea-dec::after  { background: linear-gradient(to left,  transparent, var(--dorado)); }

.corazon-secreto {
  font-size: 1.8rem;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.corazon-secreto:active { transform: scale(1.4); }
.corazon-secreto.latiendo { animation: latidoRapido 0.3s ease 1; }
@keyframes latidoRapido {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.5); }
}


/* ─── 7. CAMPO SECRETO ─────────────────────────── */
.campo-secreto-wrap {
  margin: 0.5rem 0 1rem;
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s, max-height 0.4s;
}
.campo-secreto-wrap.visible { opacity: 1; max-height: 60px; }
.campo-secreto {
  background: rgba(255,255,255,0.5);
  border: 1px dashed var(--rosa);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--texto-suave);
  outline: none;
  width: min(280px, 90%);
  font-family: 'Lato', sans-serif;
  text-align: center;
  transition: border 0.3s, background 0.3s;
}
.campo-secreto:focus { border-color: var(--rosa-oscuro); background: rgba(255,255,255,0.8); }


/* ─── 8. TABS ──────────────────────────────────── */
.tabs {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  padding: 0 0.5rem;
}
.tab {
  border: 1.5px solid var(--rosa);
  background: none;
  border-radius: 30px;
  padding: 0.55rem 1.1rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--rosa-oscuro);
  cursor: pointer;
  transition: all 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.tab:hover, .tab:active    { background: var(--rosa); color: #fff; }
.tab.activo                { background: var(--rosa-oscuro); border-color: var(--rosa-oscuro); color: #fff; }
.tab.tab-sexy              { border-color: var(--rojo); color: var(--rojo); }
.tab.tab-sexy:hover,
.tab.tab-sexy:active       { background: var(--rojo); color: #fff; }
.tab.tab-sexy.activo       { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); color: #fff; }
.tab.tab-gamer             { border-color: var(--gamer-purple); color: var(--gamer-purple); font-size: 0.75rem; }
.tab.tab-gamer:hover,
.tab.tab-gamer.activo      { background: var(--gamer-purple); color: #fff; }
#tab-gamer                 { display: none; }
.tab.tab-sexy              { display: none; } /* se muestra solo con contraseña */
.tab.tab-cotidiano         { border-color: #f0a500; color: #b87800; }
.tab.tab-cotidiano:hover,
.tab.tab-cotidiano.activo  { background: #f0a500; border-color: #f0a500; color: #fff; }


/* ─── 9. CONTADOR ──────────────────────────────── */
.contador {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
  letter-spacing: 0.05em;
  transition: color 0.5s;
}
.contador span { font-weight: 700; color: var(--rosa-oscuro); transition: color 0.5s; }


/* ─── 10. TEMPORIZADOR ─────────────────────────── */
.temporizador-widget {
  text-align: center;
  margin-bottom: 2rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--rosa);
  border-radius: 16px;
  padding: 1rem 1.5rem;
  backdrop-filter: blur(6px);
  transition: all 0.5s;
}
.temp-titulo {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rosa-oscuro);
  margin-bottom: 0.5rem;
  transition: color 0.5s;
}
.temp-countdown {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  color: var(--texto);
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: color 0.5s, font-family 0.5s;
}
.temp-subtexto {
  font-size: 0.72rem;
  color: var(--texto-suave);
  margin-top: 0.3rem;
  transition: color 0.5s;
}
.temp-barra-wrap {
  margin-top: 0.75rem;
  height: 6px;
  background: var(--crema-oscuro);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.5s;
}
.temp-barra {
  height: 100%;
  background: linear-gradient(90deg, var(--rosa), var(--rosa-oscuro));
  border-radius: 10px;
  transition: width 1s linear, background 0.5s;
}


/* ─── 11. GRILLA ───────────────────────────────── */
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}


/* ─── 12. CUPÓN (VALE) ─────────────────────────── */
.vale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(61,43,43,0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.5s, border 0.5s;
  position: relative;
  opacity: 0;
  animation: fadeUp 0.45s ease forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada dramática al cambiar de modo */
@keyframes modeEnter {
  0%   { opacity: 0; transform: translateY(24px) scale(0.93); filter: brightness(2); }
  40%  { filter: brightness(1.4); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    filter: brightness(1); }
}
.vale.mode-transition {
  animation: modeEnter 0.55s cubic-bezier(.175,.885,.32,1.275) forwards !important;
}

/* Flash de pantalla al activar un modo */
.mode-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  animation: modeFlash 0.6s ease forwards;
}
.mode-flash.gamer { background: radial-gradient(ellipse at center, rgba(0,255,204,0.35), transparent 70%); }
.mode-flash.sexy  { background: radial-gradient(ellipse at center, rgba(255,45,107,0.35),  transparent 70%); }
.mode-flash.off   { background: radial-gradient(ellipse at center, rgba(255,255,255,0.2),   transparent 70%); }
@keyframes modeFlash {
  0%   { opacity: 0;   transform: scale(0.8); }
  30%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: 0;   transform: scale(1.3); }
}
.vale:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 36px rgba(61,43,43,0.13);
}
/* hover con color por categoría */
.vale.cotidiano:hover {
  box-shadow: 0 10px 36px rgba(74,144,217,0.25), 0 0 20px rgba(74,144,217,0.15);
}
.vale.sexy:hover {
  box-shadow: 0 10px 36px rgba(255,45,107,0.25), 0 0 20px rgba(255,45,107,0.15);
}
.vale.gamer-card:hover {
  box-shadow: 0 10px 36px rgba(0,255,204,0.2), 0 0 20px rgba(0,255,204,0.1);
}
/* el romántico usa el genérico pero con tinte rosa */
.vale:not(.cotidiano):not(.sexy):not(.gamer-card):hover {
  box-shadow: 0 10px 36px rgba(194,110,138,0.2), 0 0 16px rgba(232,160,180,0.15);
}



/* borde interior — solo en hover para no generar puntitos */
.vale::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 11px;
  border: 1.5px solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, border-color 0.3s;
}
.vale:hover::before {
  border: 1.5px solid var(--rosa);
  opacity: 0.3;
}
.vale.sexy:hover::before   { border-color: var(--rojo); }
.vale.cotidiano:hover::before { border-color: var(--cot-azul); }
.vale.gamer-card:hover::before { border-color: var(--gamer-accent); }

/* muesca tipo ticket */
.vale::after {
  content: '';
  position: absolute;
  bottom: 53px;
  left: 0px; right: 0px;
  height: 16px;
  background:
    radial-gradient(circle at 0%   50%, var(--crema) 8px, transparent 8px),
    radial-gradient(circle at 100% 50%, var(--crema) 8px, transparent 8px);
  pointer-events: none;
  transition: background 0.5s;
  z-index: 3;
}

.vale-cuerpo {
  padding: 2rem 1.5rem 1.5rem;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.7rem;
  transition: background 0.5s;
  position: relative; /* needed for efecto-shine */
  flex-grow: 1;
}
.vale-emoji {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.2rem;
  position: relative;
  transition: filter 0.5s;
}
.vale-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.3;
  transition: color 0.5s, font-family 0.5s;
}
.vale-descripcion {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85rem;
  color: var(--texto-suave);
  line-height: 1.6;
  font-weight: 300;
  transition: color 0.5s;
}
.vale-pie {
  background: linear-gradient(135deg, var(--rosa) 0%, var(--rosa-oscuro) 100%);
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.5s;
}
.vale.sexy .vale-pie { background: linear-gradient(135deg, #e74c3c 0%, var(--rojo-oscuro) 100%); }

/* ── Cupones cotidianos — paleta azul ── */
:root {
  --cot-azul:       #4a90d9;
  --cot-azul-osc:   #2c6fad;
  --cot-azul-suave: #e8f2fc;
  --cot-cielo:      #7ab8f5;
}
.vale.cotidiano {
  background: #fff;
  border: 1px solid rgba(74,144,217,0.25);
}
.vale.cotidiano::before  { border-color: var(--cot-azul); opacity: 0.35; }
.vale.cotidiano::after   {
  background:
    radial-gradient(circle at 0%   50%, var(--crema) 8px, transparent 8px),
    radial-gradient(circle at 100% 50%, var(--crema) 8px, transparent 8px);
}
.vale.cotidiano:hover    { box-shadow: 0 10px 36px rgba(74,144,217,0.18); }
.vale.cotidiano .vale-titulo     { color: var(--cot-azul-osc); }
.vale.cotidiano .vale-descripcion { color: #5a7fa0; }
.vale.cotidiano .vale-pie        { background: linear-gradient(135deg, var(--cot-azul) 0%, var(--cot-azul-osc) 100%); }
.vale.cotidiano .vale-emoji      { filter: drop-shadow(0 2px 6px rgba(74,144,217,0.35)); }
.vale.cotidiano .btn-canjear     { border-color: var(--cot-azul); color: var(--cot-azul-osc); }
.vale.cotidiano .btn-canjear:hover { background: var(--cot-azul); color: #fff; border-color: var(--cot-azul); }
.vale.cotidiano .sello           { border-color: var(--cot-azul-osc); color: var(--cot-azul-osc); }
.vale-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
}
.vale-numero {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: #fff;
  opacity: 0.65;
}

/* botón canjear */
.btn-canjear {
  position: absolute;
  top: 12px; right: 12px;
  background: none;
  border: 1.5px solid var(--rosa);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--rosa-oscuro);
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  transition: all 0.2s;
  z-index: 2;
  min-height: 34px;
  -webkit-tap-highlight-color: transparent;
}
.vale.sexy .btn-canjear            { border-color: var(--rojo); color: var(--rojo); }
.btn-canjear:hover,
.btn-canjear:active                { background: var(--rosa); color: #fff; }
.vale.sexy .btn-canjear:hover,
.vale.sexy .btn-canjear:active     { background: var(--rojo); color: #fff; }
.vale.canjeado .vale-cuerpo        { opacity: 0.38; filter: grayscale(0.6); }
.vale.canjeado .btn-canjear        { opacity: 0.3; pointer-events: none; }

/* sello "Canjeado" */
.sello {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -65%) rotate(-14deg);
  border: 2.5px solid var(--rosa-oscuro);
  border-radius: 8px;
  padding: 0.25rem 0.75rem;
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--rosa-oscuro);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  white-space: nowrap;
  background: rgba(255,255,255,0.6);
}
.vale.sexy .sello     { border-color: var(--rojo); color: var(--rojo); }
.vale.canjeado .sello { opacity: 0.85; }
/* ── Tachado animado al canjear ── */
.vale-tachado {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--rosa-oscuro), var(--rojo));
  border-radius: 4px;
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
  z-index: 10;
  transition: width 0.6s cubic-bezier(.77,0,.18,1);
  opacity: 0;
}
.vale.canjeado .vale-tachado {
  width: 84%;
  opacity: 0.75;
}
.vale.sexy .vale-tachado {
  background: linear-gradient(90deg, var(--rojo), #ff6b6b);
}
body.gamer-mode .vale .vale-tachado {
  background: linear-gradient(90deg, var(--gamer-accent), var(--gamer-pink));
}



/* badge tipo "Gamer" */
.vale-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: linear-gradient(135deg, var(--rosa), var(--rosa-oscuro));
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-family: 'Lato', sans-serif;
  z-index: 2;
}

/* ── Auras por categoría ── */
.vale::after-aura { display: none; } /* placeholder */

/* Aura romántica — rosa suave difusa */
.vale:not(.cotidiano):not(.sexy):not(.gamer-card):not(.canjeado)::before {
  box-shadow: inset 0 0 0 1.5px rgba(232,160,180,0.3);
}

/* Franja de color superior por categoría */
.vale-categoria-franja {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  pointer-events: none;
  z-index: 4;
}
.vale:not(.cotidiano):not(.sexy):not(.gamer-card) .vale-categoria-franja {
  background: linear-gradient(90deg, var(--rosa), var(--rosa-oscuro), var(--rosa));
  background-size: 200% 100%;
  animation: franjaShimmer 3s ease-in-out infinite;
}
.vale.cotidiano .vale-categoria-franja {
  background: linear-gradient(90deg, var(--cot-azul), var(--cot-cielo), var(--cot-azul));
  background-size: 200% 100%;
  animation: franjaShimmer 3s ease-in-out infinite;
}
.vale.sexy .vale-categoria-franja {
  background: linear-gradient(90deg, var(--rojo-oscuro), #ff2d6b, #ff80aa, #ff2d6b, var(--rojo-oscuro));
  background-size: 200% 100%;
  animation: franjaShimmer 2s ease-in-out infinite;
}
.vale.gamer-card .vale-categoria-franja {
  background: linear-gradient(90deg, var(--gamer-purple), var(--gamer-accent), var(--gamer-pink), var(--gamer-accent), var(--gamer-purple));
  background-size: 300% 100%;
  animation: franjaShimmer 1.5s linear infinite;
}
@keyframes franjaShimmer {
  0%, 100% { background-position: 0%   50%; }
  50%       { background-position: 100% 50%; }
}

/* Aura exterior por categoría */
.vale.aura-romantica {
  box-shadow: 0 2px 20px rgba(61,43,43,0.07), 0 0 0 2px rgba(232,160,180,0.15);
}
.vale.aura-romantica:hover {
  box-shadow: 0 10px 36px rgba(194,110,138,0.2), 0 0 0 2px rgba(232,160,180,0.3), 0 0 20px rgba(232,160,180,0.15);
}
.vale.cotidiano.aura-cotidiana {
  box-shadow: 0 2px 20px rgba(61,43,43,0.07), 0 0 0 2px rgba(74,144,217,0.15);
}
.vale.cotidiano.aura-cotidiana:hover {
  box-shadow: 0 10px 36px rgba(74,144,217,0.2), 0 0 0 2px rgba(74,144,217,0.3), 0 0 20px rgba(74,144,217,0.15);
}
.vale.sexy.aura-sexy {
  box-shadow: 0 2px 20px rgba(61,43,43,0.07), 0 0 0 2px rgba(255,45,107,0.2);
}
.vale.sexy.aura-sexy:hover {
  box-shadow: 0 10px 36px rgba(255,45,107,0.25), 0 0 0 2px rgba(255,45,107,0.4), 0 0 25px rgba(255,45,107,0.15);
}
.vale.gamer-card.aura-gamer {
  box-shadow: 0 2px 20px rgba(61,43,43,0.07), 0 0 0 2px rgba(0,255,204,0.2);
}
.vale.gamer-card.aura-gamer:hover {
  box-shadow: 0 10px 36px rgba(0,255,204,0.2), 0 0 0 2px rgba(0,255,204,0.4), 0 0 25px rgba(0,255,204,0.1);
}

.badge-sexy {
  background: linear-gradient(135deg, #ff2d6b, #c2185b);
  box-shadow: 0 0 10px rgba(255, 45, 107, 0.6);
  color: #fff;
}
/* ─── 13. EFECTOS ESPECIALES DE CUPONES ────────── */
/* efecto-brillo: parpadeo del borde */
.vale.efecto-brillo::before {
  animation: brilloDashedBorder 2s linear infinite;
}
@keyframes brilloDashedBorder {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.8; }
}

/* efecto-sparkle: chispa sobre el emoji */
.vale.efecto-sparkle .vale-emoji::after {
  content: '✨';
  position: absolute;
  font-size: 0.8rem;
  top: -4px; right: -8px;
  animation: chispa 1.5s ease-in-out infinite;
}
@keyframes chispa {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%       { opacity: 1; transform: scale(1.2); }
}

/* efecto-glow: pulso de sombra rosa */
.vale.efecto-glow {
  box-shadow: 0 2px 20px rgba(61,43,43,0.07), 0 0 0 0 rgba(232,160,180,0.4);
  animation: fadeUp 0.45s ease forwards, glowPulse 3s ease-in-out infinite 0.5s;
}
.vale.efecto-glow:hover {
  box-shadow: 0 10px 36px rgba(61,43,43,0.13), 0 0 25px rgba(232,160,180,0.5);
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 2px 20px rgba(61,43,43,0.07), 0 0 8px  rgba(232,160,180,0.2);  }
  50%       { box-shadow: 0 2px 20px rgba(61,43,43,0.07), 0 0 22px rgba(232,160,180,0.55); }
}

/* efecto-shine: destello diagonal */
.vale.efecto-shine .vale-cuerpo {
  overflow: hidden;
}
.vale.efecto-shine .vale-cuerpo::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  transform: skewX(-15deg);
  animation: shine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 70%, 100% { left: -60%; opacity: 0; }
  40%           { left: 130%; opacity: 1; }
}

/* efecto-float: levitación suave continua */
.vale.efecto-float {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vale.efecto-float:hover {
  transform: translateY(-8px) rotate(1deg) !important;
  box-shadow: 0 16px 40px rgba(61,43,43,0.18) !important;
}
@keyframes float {
  0%, 100% { transform: rotate(-1deg) translateY(0px); }
  50%       { transform: rotate(1deg) translateY(-5px); }
}


/* efecto-corazones: corazoncitos flotando alrededor del cupón al hacer hover */
.vale.efecto-corazones::after {
  display: none; /* reseteamos el ::after del ticket */
}
.vale.efecto-corazones {
  overflow: visible !important;
}
.vale.efecto-corazones .vale-cuerpo::before {
  content: '♥ ♡ ♥ ♡ ♥';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--rosa);
  letter-spacing: 0.4rem;
  opacity: 0;
  transition: opacity 0.4s, top 0.4s;
  white-space: nowrap;
  pointer-events: none;
}
.vale.efecto-corazones:hover .vale-cuerpo::before {
  opacity: 1;
  top: -22px;
}

/* keyframe para efecto-corazones JS */
@keyframes corazonFlotante {
  0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-45px) scale(1.3) rotate(15deg); }
}
.vale.efecto-corazones { overflow: visible !important; }




/* efecto-berenjenas: berenjenas flotando al hover */
@keyframes berenjena {
  0%   { opacity: 1; transform: translateY(0) scale(1) rotate(-10deg); }
  100% { opacity: 0; transform: translateY(-55px) scale(1.4) rotate(20deg); }
}
.vale.efecto-berenjenas { overflow: visible !important; }

/* efecto-pixels: cuadraditos pixelados flotando */
@keyframes pixelFlotante {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  50%  { opacity: 0.8; transform: translateY(-20px) scale(0.8); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.3); }
}
.vale.efecto-pixels { overflow: visible !important; }







/* efecto-golden: cupón premium dorado */
.vale.efecto-golden {
  border: 2px solid rgba(201,169,110,0.8) !important;
  animation: fadeUp 0.45s ease forwards, goldenPulse 2.5s ease-in-out infinite 0.5s;
  background: linear-gradient(160deg, #fffdf5 0%, #fff8e1 50%, #fffdf5 100%) !important;
}

.vale.efecto-golden .vale-titulo {
  background: linear-gradient(90deg, #b8860b, #f0d060, #c9a96e, #f0d060, #b8860b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldenTextShimmer 3s linear infinite;
}
@keyframes goldenTextShimmer {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}

.vale.efecto-golden .vale-emoji {
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.9)) drop-shadow(0 0 24px rgba(255,200,0,0.5)) !important;
  animation: goldenEmojiPulse 2s ease-in-out infinite;
}
@keyframes goldenEmojiPulse {
  0%, 100% { transform: scale(1)    rotate(-2deg); filter: drop-shadow(0 0 12px rgba(255,215,0,0.9)); }
  50%       { transform: scale(1.15) rotate(2deg);  filter: drop-shadow(0 0 24px rgba(255,215,0,1))   drop-shadow(0 0 48px rgba(255,200,0,0.6)); }
}

@keyframes goldenPulse {
  0%, 100% {
    box-shadow: 0 2px 20px rgba(61,43,43,0.07),
                0 0 15px rgba(201,169,110,0.4),
                0 0 0 2px rgba(201,169,110,0.3);
  }
  50% {
    box-shadow: 0 2px 20px rgba(61,43,43,0.07),
                0 0 40px rgba(255,215,0,0.7),
                0 0 80px rgba(255,200,0,0.3),
                0 0 0 3px rgba(201,169,110,0.6);
  }
}

.vale.efecto-golden:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow:
    0 16px 48px rgba(61,43,43,0.15),
    0 0 60px rgba(255,215,0,0.8),
    0 0 120px rgba(255,200,0,0.4),
    0 0 0 3px rgba(201,169,110,0.8) !important;
}

.vale.efecto-golden::before {
  border: 2px solid rgba(201,169,110,0.6) !important;
  border-style: solid !important;
  opacity: 1 !important;
  animation: goldenBorder 1.8s ease-in-out infinite !important;
  inset: 0 !important;
  border-radius: 16px !important;
}
@keyframes goldenBorder {
  0%, 100% { border-color: rgba(201,169,110,0.4); box-shadow: inset 0 0 12px rgba(255,215,0,0.1); }
  50%       { border-color: rgba(255,215,0,0.9);   box-shadow: inset 0 0 24px rgba(255,215,0,0.25); }
}

.vale.efecto-golden .vale-pie {
  background: linear-gradient(135deg, #8b6914 0%, #c9a030 25%, #f0d060 50%, #c9a030 75%, #8b6914 100%) !important;
  background-size: 200% 100% !important;
  animation: goldenPieShimmer 2s linear infinite !important;
}
@keyframes goldenPieShimmer {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}

.vale.efecto-golden .btn-canjear {
  border-color: #c9a96e !important;
  color: #8b6914 !important;
  font-weight: 700 !important;
}
.vale.efecto-golden .btn-canjear:hover {
  background: linear-gradient(135deg, #c9a030, #f0d060) !important;
  color: #fff !important;
  border-color: #c9a030 !important;
  box-shadow: 0 4px 16px rgba(255,215,0,0.5) !important;
}

.vale.efecto-golden { overflow: visible !important; }

@keyframes goldenParticula {
  0%, 100% { transform: translateY(0)    rotate(0deg)   scale(1);   opacity: 0.6; }
  50%       { transform: translateY(-10px) rotate(20deg) scale(1.3); opacity: 1; }
}
@keyframes goldenExplosion {
  0%   { transform: translateY(0)     scale(1);   opacity: 1; }
  100% { transform: translateY(-50px) scale(0.4); opacity: 0; }
}
@keyframes goldenShine {
  0%, 55%, 100% { left: -80%; opacity: 0; }
  30%            { left: 140%; opacity: 1; }
}

/* efecto-tilt: inclinación 3D al hover */
.vale.efecto-tilt {
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.vale.efecto-tilt:hover {
  transform: perspective(600px) rotateY(-8deg) rotateX(4deg) scale(1.04) !important;
  box-shadow: 8px 14px 40px rgba(61,43,43,0.2) !important;
  filter: brightness(1.04);
}

/* efecto-neon-rose: borde neón rosa pulsante */
.vale.efecto-neon-rose {
  border: 1px solid var(--rosa-oscuro);
  box-shadow: 0 0 8px rgba(194,110,138,0.4), inset 0 0 8px rgba(194,110,138,0.05);
  animation: fadeUp 0.45s ease forwards, neonRose 2.5s ease-in-out infinite 0.5s;
}
.vale.efecto-neon-rose:hover {
  box-shadow: 0 0 22px rgba(194,110,138,0.7), 0 0 45px rgba(194,110,138,0.25), inset 0 0 14px rgba(194,110,138,0.08);
}
@keyframes neonRose {
  0%, 100% { box-shadow: 0 0 8px  rgba(194,110,138,0.35), inset 0 0 8px  rgba(194,110,138,0.04); }
  50%       { box-shadow: 0 0 22px rgba(194,110,138,0.65), inset 0 0 14px rgba(194,110,138,0.08); }
}

/* efecto-aura-rose: halo difuso alrededor del cupón */
.vale.efecto-aura-rose::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center, rgba(232,160,180,0.22) 0%, transparent 70%);
  pointer-events: none;
  animation: auraRose 3s ease-in-out infinite;
  z-index: 0;
}
@keyframes auraRose {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.9; transform: scale(1.04); }
}


/* ─── 14. MODAL CANJE ──────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(61,43,43,0.45);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(3px);
  padding: 1rem;
}
.overlay.visible { opacity: 1; pointer-events: all; }
.modal {
  background: #fff;
  border-radius: 20px;
  padding: 2.2rem 1.75rem;
  max-width: 360px;
  width: 100%;
  text-align: center;
  transform: scale(0.88);
  transition: transform 0.3s cubic-bezier(.175,.885,.32,1.275), background 0.5s;
  box-shadow: 0 20px 60px rgba(61,43,43,0.2);
}
.overlay.visible .modal { transform: scale(1); }
.modal-emoji    { font-size: 2.6rem; margin-bottom: 0.85rem; }
.modal-titulo   { font-family: 'Playfair Display', serif; font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--texto); line-height: 1.3; }
.modal-subtitulo { font-size: 0.86rem; color: var(--texto-suave); margin-bottom: 1.5rem; line-height: 1.6; }
.modal-botones  { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.btn-confirmar,
.btn-cancelar {
  border-radius: 30px;
  padding: 0.7rem 1.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s;
  border: 1.5px solid;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.btn-confirmar              { background: var(--rosa-oscuro); border-color: var(--rosa-oscuro); color: #fff; }
.btn-confirmar:hover        { background: #a85b78; }
.btn-confirmar.sexy-btn     { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); }
.btn-confirmar.sexy-btn:hover { background: var(--rojo); }
.btn-cancelar               { background: none; border-color: var(--rosa); color: var(--texto-suave); }
.btn-cancelar:hover         { background: var(--crema-oscuro); }


/* ─── 15. MODAL SECRETO ────────────────────────── */
.overlay-secreto {
  position: fixed;
  inset: 0;
  background: rgba(10,5,20,0.9);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  backdrop-filter: blur(8px);
  padding: 1rem;
}
.overlay-secreto.visible { opacity: 1; pointer-events: all; }
.modal-secreto {
  background: linear-gradient(135deg, #1a0a2e, #2d0a1e);
  border: 1px solid rgba(255,100,200,0.4);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  transform: scale(0.85);
  transition: transform 0.4s cubic-bezier(.175,.885,.32,1.275);
  box-shadow: 0 0 60px rgba(200,50,150,0.3), inset 0 0 40px rgba(200,50,150,0.05);
  position: relative;
  overflow: hidden;
}
.overlay-secreto.visible .modal-secreto { transform: scale(1); }
.modal-secreto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,100,200,0.02) 10px, rgba(255,100,200,0.02) 20px);
  pointer-events: none;
}
.secreto-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #ff80d4;
  margin-bottom: 1rem;
  text-shadow: 0 0 20px rgba(255,128,212,0.5);
  animation: tituloPulso 2s ease-in-out infinite;
}
@keyframes tituloPulso {
  0%, 100% { text-shadow: 0 0 20px rgba(255,128,212,0.5); }
  50%       { text-shadow: 0 0 40px rgba(255,128,212,0.9), 0 0 80px rgba(255,128,212,0.3); }
}
.secreto-texto {
  font-size: 0.95rem;
  color: rgba(255,200,240,0.85);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  white-space: pre-line;
}
.btn-cerrar-secreto {
  background: linear-gradient(135deg, #8800ff, #ff00aa);
  border: none;
  border-radius: 30px;
  padding: 0.7rem 1.8rem;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-transform: uppercase;
}
.btn-cerrar-secreto:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(255,0,170,0.5); }
.particulas-secreto { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particula {
  position: absolute;
  font-size: 1.2rem;
  animation: caerParticula linear infinite;
  opacity: 0;
}
@keyframes caerParticula {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100%) rotate(360deg); opacity: 0; }
}


/* ─── 16. MÚSICA ───────────────────────────────── */
.musica-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 90;
}
.btn-musica {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--rosa-oscuro);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 20px rgba(194,110,138,0.4);
  z-index: 90;
  transition: transform 0.2s, box-shadow 0.2s, background 0.5s;
  -webkit-tap-highlight-color: transparent;
}
.btn-musica:hover  { transform: scale(1.08); box-shadow: 0 6px 28px rgba(194,110,138,0.55); }
.btn-musica:active { transform: scale(0.95); }
.btn-musica.tocando { animation: pulso 2s ease-in-out infinite; }
@keyframes pulso {
  0%, 100% { box-shadow: 0 4px 20px rgba(194,110,138,0.4); }
  50%       { box-shadow: 0 4px 32px rgba(194,110,138,0.75); }
}
.onda {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--rosa-oscuro);
  opacity: 0;
  pointer-events: none;
  z-index: 89;
}
.btn-musica.tocando ~ .onda               { animation: onda 2s ease-out infinite; }
.btn-musica.tocando ~ .onda:nth-child(2)  { animation-delay: 0.5s; }
.btn-musica.tocando ~ .onda:nth-child(3)  { animation-delay: 1s; }
@keyframes onda {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}


/* ─── 17. TOAST ────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 5rem; left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--texto);
  color: #fff;
  padding: 0.85rem 1.5rem;
  border-radius: 30px;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  transition: transform 0.4s cubic-bezier(.175,.885,.32,1.275);
  z-index: 100;
  white-space: nowrap;
  max-width: 88vw;
  text-align: center;
}
.toast.visible { transform: translateX(-50%) translateY(0); }


/* ─── 18. MINI CHAT ────────────────────────────── */
.mini-chat {
  position: fixed;
  bottom: 1.5rem; left: 1.5rem;
  width: min(300px, calc(100vw - 3rem));
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--rosa);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(61,43,43,0.12);
  z-index: 80;
  backdrop-filter: blur(10px);
  max-height: 0;
  transition: max-height 0.6s ease, box-shadow 0.5s;
  opacity: 0;
}
.mini-chat.visible { max-height: 400px; opacity: 1; }
.chat-titulo {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-oscuro));
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.5s;
}
.chat-titulo-punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4eff91;
  animation: parpadeo 2s ease infinite;
}
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.chat-mensajes {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
}
.chat-burbuja {
  max-width: 85%;
  padding: 0.45rem 0.75rem;
  border-radius: 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  animation: aparecerBurbuja 0.35s ease;
  opacity: 0;
  animation-fill-mode: forwards;
}
@keyframes aparecerBurbuja {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-burbuja.Fresh {
  background: var(--rosa-oscuro);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-burbuja.Kin {
  background: var(--crema-oscuro);
  color: var(--texto);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-nombre {
  font-size: 0.62rem;
  opacity: 0.65;
  margin-bottom: 0.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.chat-typing {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 12px;
  width: fit-content;
  margin: 5px 0;
  background: #e5e5ea; /* estilo iPhone */
}
.chat-typing span {
  width: 6px;
  height: 6px;
  background: #555;
  border-radius: 50%;
  opacity: 0.3;
  animation: typingAnim 1.2s infinite;
}

/* 🔥 delays distintos (clave para que no vayan juntos) */
.typing span:nth-child(1) {
  animation-delay: 0s;
}
.typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing span:nth-child(3) {
  animation-delay: 0.4s;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingAnim {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.btn-chat-toggle {
  position: fixed;
  bottom: 1.5rem; left: 1.5rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--rosa-oscuro);
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #fff;
  z-index: 81;
  box-shadow: 0 4px 16px rgba(194,110,138,0.35);
  transition: transform 0.2s, background 0.5s;
  -webkit-tap-highlight-color: transparent;
}
.btn-chat-toggle:hover { transform: scale(1.08); }
body.gamer-mode .btn-chat-toggle { background: var(--gamer-purple); }

.btn-chat-cerrar {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.1rem 0.2rem;
  transition: color 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-chat-cerrar:hover { color: #fff; transform: scale(1.2); }


/* ─── 19. CONFETTI ─────────────────────────────── */
.confetti-pieza {
  position: fixed;
  width: 8px; height: 8px;
  pointer-events: none;
  z-index: 999;
  animation: caerConfetti linear forwards;
}
@keyframes caerConfetti {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}


/* ─── 20. FRASES DE FONDO ──────────────────────── */
.fondo-frases {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.fondo-frase {
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: rgba(194,110,138,0.12);
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  white-space: nowrap;
  animation: fraseSubir linear infinite;
  user-select: none;
}
@keyframes fraseSubir {
  0%   { transform: translateY(0) translateX(0);    opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}









.efecto-star {
  box-shadow: 0 0 20px gold;
  animation: star 1.5s infinite alternate;
}

@keyframes star {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

/* ─── 21. GAMER BANNER ─────────────────────────── */
.gamer-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, var(--gamer-purple), var(--gamer-pink), var(--gamer-accent));
  color: #000;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.55rem;
  text-align: center;
  padding: 0.4rem;
  z-index: 200;
  letter-spacing: 0.1em;
  animation: gamerBannerSlide 0.5s ease;
}
body.gamer-mode .gamer-banner { display: block; }
@keyframes gamerBannerSlide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
  


  
}

/* ─── 22. MODO SEXY ─────────────────────────────── */
:root {
  --sexy-bg:    #0d0005;
  --sexy-accent:#ff2d6b;
  --sexy-rose:  #ff80aa;
  --sexy-deep:  #8b0030;
  --sexy-gold:  #ffb347;
}

body.sexy-mode { background-color: var(--sexy-bg); color: var(--sexy-rose); }
body.sexy-mode::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,45,107,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(139,0,48,0.25)   0%, transparent 55%),
    radial-gradient(ellipse at 50% 10%, rgba(255,128,170,0.08) 0%, transparent 40%);
  pointer-events:none; z-index:0;
}
body.sexy-mode .contenedor::before {
  content:''; position:fixed; inset:0;
  background:
    repeating-linear-gradient(0deg,  transparent,transparent 40px,rgba(255,45,107,0.03) 40px,rgba(255,45,107,0.03) 41px),
    repeating-linear-gradient(90deg, transparent,transparent 40px,rgba(255,45,107,0.02) 40px,rgba(255,45,107,0.02) 41px);
  pointer-events:none; z-index:0;
  animation: sexyGridShift 8s linear infinite;
}
@keyframes sexyGridShift { from{background-position:0 0} to{background-position:41px 41px} }
body.sexy-mode .contenedor { padding-top: 4rem; }

body.sexy-mode h1 {
  color: var(--sexy-rose);
  font-style: italic;
  animation: sexyTitlePulse 3s ease-in-out infinite;
}
@keyframes sexyTitlePulse {
  0%,100% { text-shadow: 0 0 20px rgba(255,45,107,0.5); }
  50%     { text-shadow: 0 0 50px rgba(255,45,107,0.9), 0 0 90px rgba(255,45,107,0.3); }
}
body.sexy-mode h1 em { color: var(--sexy-gold); }
body.sexy-mode .subtitulo-header { color: var(--sexy-accent); letter-spacing:0.4em; }
body.sexy-mode .linea-dec::before { background: linear-gradient(to right, transparent, var(--sexy-accent)); }
body.sexy-mode .linea-dec::after  { background: linear-gradient(to left,  transparent, var(--sexy-accent)); }
body.sexy-mode .frase-aleatoria   { color: rgba(255,128,170,0.8); }

body.sexy-mode .tab { border-color:var(--sexy-accent); color:var(--sexy-rose); background:transparent; }
body.sexy-mode .tab:hover,
body.sexy-mode .tab.activo { background:var(--sexy-accent); color:#fff; border-color:var(--sexy-accent); }
body.sexy-mode .tab.tab-sexy { border-color:var(--sexy-gold); color:var(--sexy-gold); display:inline-block; }
body.sexy-mode .tab.tab-sexy.activo { background:var(--sexy-gold); color:#000; }

body.sexy-mode .vale {
  background: linear-gradient(160deg, #1a0010 0%, #2a0018 100%);
  border: 1px solid rgba(255,45,107,0.35);
  box-shadow: 0 0 20px rgba(255,45,107,0.15);
}
body.sexy-mode .vale::before { border-color: rgba(255,45,107,0.4); }
body.sexy-mode .vale::after {
  background:
    radial-gradient(circle at -0.8% 50%, #1a0010 8px, transparent 8px),
    radial-gradient(circle at 100.8% 50%, #1a0010 8px, transparent 8px);
}
body.sexy-mode .vale:hover {
  box-shadow: 0 0 40px rgba(255,45,107,0.45), 0 8px 30px rgba(139,0,48,0.3);
  transform: translateY(-6px) scale(1.02);
}
body.sexy-mode .vale-titulo     { color:var(--sexy-rose); font-style:italic; }
body.sexy-mode .vale-descripcion { color:rgba(255,128,170,0.65); }
body.sexy-mode .vale-pie        { background: linear-gradient(135deg, var(--sexy-deep), var(--sexy-accent)); }
body.sexy-mode .btn-canjear     { border-color:var(--sexy-accent); color:var(--sexy-rose); }
body.sexy-mode .btn-canjear:hover { background:var(--sexy-accent); color:#fff; }
body.sexy-mode .sello           { border-color:var(--sexy-accent); color:var(--sexy-accent); background:rgba(0,0,0,0.5); }
body.sexy-mode .vale-emoji      { filter: drop-shadow(0 0 10px rgba(255,45,107,0.8)); }

body.sexy-mode .temporizador-widget {
  border-color:var(--sexy-accent); background:rgba(26,0,10,0.8);
  box-shadow: 0 0 20px rgba(255,45,107,0.2);
}
body.sexy-mode .temp-titulo    { color:var(--sexy-gold); }
body.sexy-mode .temp-countdown { color:var(--sexy-rose); text-shadow:0 0 10px rgba(255,45,107,0.5); }
body.sexy-mode .temp-subtexto  { color:rgba(255,128,170,0.6); }
body.sexy-mode .temp-barra-wrap { background:rgba(255,45,107,0.15); }
body.sexy-mode .temp-barra     { background: linear-gradient(90deg, var(--sexy-deep), var(--sexy-accent), var(--sexy-gold)); }

body.sexy-mode .contador       { color:rgba(255,128,170,0.5); }
body.sexy-mode .contador span  { color:var(--sexy-accent); }
body.sexy-mode .campo-secreto  { background:rgba(255,45,107,0.05); border-color:var(--sexy-accent); color:var(--sexy-rose); }
body.sexy-mode .btn-musica     { background:linear-gradient(135deg,var(--sexy-deep),var(--sexy-accent)); box-shadow:0 0 20px rgba(255,45,107,0.5); }
body.sexy-mode .toast          { background:var(--sexy-accent); color:#fff; }
body.sexy-mode .mini-chat      { background:#12000a; border-color:var(--sexy-accent); }
body.sexy-mode .mini-chat .chat-titulo { background:linear-gradient(135deg,var(--sexy-deep),var(--sexy-accent)); }
body.sexy-mode .chat-burbuja.Fresh { background:var(--sexy-accent); }
body.sexy-mode .chat-burbuja.Kin   { background:#200010; border:1px solid var(--sexy-rose); color:var(--sexy-rose); }
body.sexy-mode .btn-chat-toggle    { background:linear-gradient(135deg,var(--sexy-deep),var(--sexy-accent)); }
body.sexy-mode .modal          { background:#1a000a; border:1px solid var(--sexy-accent); }
body.sexy-mode .modal-titulo   { color:var(--sexy-rose); }
body.sexy-mode .modal-subtitulo { color:rgba(255,128,170,0.7); }
body.sexy-mode .fondo-frase    { color:rgba(255,45,107,0.08); }

.sexy-banner {
  display:none; position:fixed; top:0; left:0; right:0;
  background: linear-gradient(90deg, var(--sexy-deep), var(--sexy-accent), var(--sexy-gold), var(--sexy-accent), var(--sexy-deep));
  background-size:200% 100%;
  color:#fff; font-family:'Playfair Display',serif; font-style:italic;
  font-size:0.85rem; text-align:center; padding:0.45rem;
  z-index:200; letter-spacing:0.15em;
  animation: sexyBannerSlide 0.5s ease, sexyBannerShimmer 4s linear infinite;
}
body.sexy-mode .sexy-banner { display:block; }
@keyframes sexyBannerSlide  { from{transform:translateY(-100%)} to{transform:translateY(0)} }
@keyframes sexyBannerShimmer { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* forzar overflow visible para efectos JS en todos los modos */
/* fix muescas en cupones con efectos JS */
body.sexy-mode .vale.efecto-berenjenas::after,
body.gamer-mode .vale.efecto-pixels::after,
body.gamer-mode .vale.efecto-berenjenas::after {
  display: none;
}

/* ─── CONTADOR DÍAS JUNTOS ──────────────────────── */
.dias-juntos {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-bottom: 0.5rem;
  transition: color 0.5s;
}
.dias-juntos span {
  font-weight: 700;
  color: var(--rosa-oscuro);
  font-size: 1.1rem;
  transition: color 0.5s;
}
body.gamer-mode .dias-juntos { color: rgba(0,255,204,0.6); font-style: normal; font-family: 'Press Start 2P', cursive; font-size: 0.5rem; line-height: 2; }
body.gamer-mode .dias-juntos span { color: var(--gamer-accent); }
body.sexy-mode .dias-juntos { color: rgba(255,128,170,0.7); }
body.sexy-mode .dias-juntos span { color: var(--sexy-accent); }



/* ─── 23. PANTALLA DE BIENVENIDA ───────────────── */
.bienvenida-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #fdf6f0 0%, #fce8f0 50%, #f5e8d8 100%);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.bienvenida-overlay.saliendo {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}
.bienvenida-overlay.oculto { display: none; }

.bienvenida-card {
  text-align: center;
  position: relative;
  animation: bienvenidaEntrada 1s cubic-bezier(.175,.885,.32,1.275) forwards;
}
@keyframes bienvenidaEntrada {
  from { opacity: 0; transform: translateY(30px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.bienvenida-corazones {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  overflow: visible;
}
.bienvenida-corazon-flotante {
  position: absolute;
  font-size: 1.2rem;
  animation: bienvenidaCorazonFlota linear infinite;
  opacity: 0;
}
@keyframes bienvenidaCorazonFlota {
  0%   { transform: translateY(0) rotate(0deg);    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-120px) rotate(20deg); opacity: 0; }
}

.bienvenida-emoji {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: bienvenidaEmoji 2s ease-in-out infinite;
}
@keyframes bienvenidaEmoji {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%       { transform: scale(1.12) rotate(3deg); }
}

.bienvenida-titulo {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 8vw, 3.2rem);
  font-weight: 400;
  color: var(--texto);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.bienvenida-subtitulo {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  color: var(--texto-suave);
  margin-bottom: 1rem;
  max-width: 320px;
  line-height: 1.6;
}

.bienvenida-dias {
  font-size: 0.82rem;
  color: var(--rosa-oscuro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  font-family: 'Lato', sans-serif;
}

.bienvenida-btn {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-oscuro));
  border: none;
  border-radius: 50px;
  padding: 0.9rem 2.5rem;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 24px rgba(194,110,138,0.4);
  animation: pulsoBtn 2.5s ease-in-out infinite 1s;
}
.bienvenida-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 32px rgba(194,110,138,0.6);
}
@keyframes pulsoBtn {
  0%, 100% { box-shadow: 0 6px 24px rgba(194,110,138,0.4); }
  50%       { box-shadow: 0 6px 36px rgba(194,110,138,0.7); }
}

/* modo gamer */
body.gamer-mode .bienvenida-overlay { background: linear-gradient(135deg, #0a0a1a, #0d0d2b); }
body.gamer-mode .bienvenida-titulo  { color: var(--gamer-accent); text-shadow: 0 0 20px var(--gamer-accent); }
body.gamer-mode .bienvenida-subtitulo { color: rgba(0,255,204,0.7); }
body.gamer-mode .bienvenida-dias    { color: var(--gamer-pink); }
body.gamer-mode .bienvenida-btn     { background: linear-gradient(135deg, var(--gamer-purple), var(--gamer-pink)); }


.vale.efecto-golden::after {
  display: none;
}



/* efecto-aura-corazones: corazones orbitando alrededor del cupón */
.vale.efecto-aura-corazones {
  overflow: visible !important;
}


/* efecto-magnetico */
.vale.efecto-magnetico {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.vale.efecto-magnetico.magnetico-activo {
  transform: translate(var(--mag-x, 0), var(--mag-y, 0))
             perspective(600px)
             rotateX(var(--mag-rx, 0))
             rotateY(var(--mag-ry, 0))
             scale(1.04) !important;
  box-shadow: 0 20px 50px rgba(61,43,43,0.18),
              0 0 30px rgba(232,160,180,0.25) !important;
  filter: brightness(1.05);
}

.vale.efecto-magnetico:not(.magnetico-activo) {
  transform: translate(0, 0) perspective(600px) rotateX(0) rotateY(0) scale(1) !important;
  transition: transform 0.5s cubic-bezier(.175,.885,.32,1.275),
              box-shadow 0.5s ease !important;
}


/* efecto-ripple: onda desde el cursor */
@keyframes rippleOnda {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
.vale.efecto-ripple { overflow: hidden !important; }

@keyframes chispaElectrica {
  0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-50px) scale(1.4) rotate(25deg); }
}
.vale.efecto-chispas { overflow: visible !important; }


.vale-emoji-img {
  width: 2.8rem;
  height: 2.8rem;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}


@keyframes customFlotante {
  0%   { transform: translateY(0)    scale(1);    opacity: 1; }
  100% { transform: translateY(-50px) scale(0.5); opacity: 0; }
}
@keyframes customPermanente {
  0%, 100% { transform: translateY(0)   rotate(-5deg) scale(1);    opacity: 0.5; }
  50%       { transform: translateY(-8px) rotate(5deg) scale(1.15); opacity: 0.9; }
}

@keyframes customPixelExplode {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.2);
    opacity: 0;
  }
}


/* ─── EFECTO KI / AURA GOKU ────────────────────── */
.vale.efecto-ki {
  overflow: visible !important;
}

/* Partículas de ki que orbitan */
.ki-particula {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  font-size: 1.2rem;
  animation: kiOrbita linear infinite;
  opacity: 0;
}

@keyframes kiOrbita {
  0%   { opacity: 0; transform: translate(var(--kx), var(--ky)) scale(0.5); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--kx2), var(--ky2)) scale(1.3); }
}

/* Anillo de aura exterior pulsante */

@keyframes kiAura {
  0%, 100% { opacity: 0.4; transform: scale(1);    filter: blur(4px); }
  50%       { opacity: 1;   transform: scale(1.04); filter: blur(6px); }
}

/* Destello central */
.vale.efecto-ki .vale-emoji {
  animation: kiCentro 2s ease-in-out infinite;
}
@keyframes kiCentro {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(100,200,255,0.6)); }
  50%       { filter: drop-shadow(0 0 16px rgba(100,200,255,1)) drop-shadow(0 0 30px rgba(150,230,255,0.5)); }
}

/* Rayo exterior que da vueltas */
.ki-rayo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
  animation: kiRayoGiro linear infinite;
  transform-origin: 0 0;
}
.ki-rayo::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(100,200,255,0.9), transparent);
  border-radius: 3px;
  top: -110%;
  left: -1.5px;
  filter: blur(1px);
}
@keyframes kiAura {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.03); }
}
@keyframes kiPulso {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.3); }
}
@keyframes kiRayoGiro {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

body.gamer-mode .grilla {
  contain: layout;
}




/* ─── MODAL BUU ─────────────────────────────── */
.overlay-buu {
  position: fixed;
  inset: 0;
  background: rgba(10,0,20,0.92);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(8px);
}
.overlay-buu.visible { opacity: 1; pointer-events: all; }

article.buu-card {
  position: relative;
  width: 340px;
  cursor: pointer;
  transition: all 0.3s ease;
}
article.buu-card .buu-fondo {
  box-shadow: 0 60px 60px -30px rgba(255, 100, 200, 0.5);
  border-radius: 16px;
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 420px;
}
article.buu-card .buu-personaje {
  position: absolute;
  width: 200px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(25%);
  transition: 0.3s ease;
  opacity: 0;
}
article.buu-card:hover {
  transform: perspective(250px) rotateX(10deg) translateY(-5%) translateZ(0);
}
article.buu-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  border-radius: 16px;
  background-image: linear-gradient(
    to bottom,
    transparent 10%,
    rgba(180, 0, 100, 0.6) 50%,
    rgba(100, 0, 60, 0.95) 95%
  );
  opacity: 0;
  transition: all 0.3s ease;
}
article.buu-card:hover::before { opacity: 1; }
article.buu-card:hover .buu-personaje {
  opacity: 1;
  transform: translateY(10%);
}
.buu-mensaje {
  position: absolute;
  bottom: 0.75rem;
  left: 0; right: 0;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 0.5rem 1rem;
  background: rgba(100,0,60,0.7);
  border-radius: 0 0 16px 16px;
}
article.buu-card:hover .buu-mensaje { opacity: 1; }
.buu-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: #ffb3d9;
  margin-bottom: 0.4rem;
  text-shadow: 0 0 10px rgba(255,100,200,0.8);
}
.buu-texto {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.5;
}
.buu-cerrar {
  background: none;
  border: 1.5px solid rgba(255,100,200,0.5);
  color: rgba(255,150,220,0.8);
  border-radius: 30px;
  padding: 0.6rem 1.8rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.buu-cerrar:hover {
  background: rgba(255,100,200,0.15);
  color: #fff;
}


.chat-burbuja img {
  max-width: 140px;
  border-radius: 10px;
  display: block;
  margin: 4px 0;
}