/* ============================================================
   TuCelebración · tc-design-system.css  (v3.0 — propuesta)
   ------------------------------------------------------------
   QUÉ ES ESTE ARCHIVO
   Es una capa de OPTIMIZACIÓN + MODERNIZACIÓN que consolida y
   reemplaza varios bloques repetidos del archivo de referencia
   original (tc-event-modules.css, tc-modern-invitations.css y
   el bloque legado "TEMPLATE SWITCH (EDITOR)").

   No inventa una arquitectura nueva: sigue exactamente el mismo
   lenguaje visual (glass cards, chips, .tc-msg, .tc-preview-*,
   stickers por pseudo-elemento) que ya usa el sitio. Lo que hace
   es sacar los valores repetidos (color de ícono, tinte de fondo,
   bordes) a variables compartidas, así en vez de escribir la
   misma regla 12 veces (una por template) se define UNA vez por
   "tema" (claro/oscuro) y cada template solo declara su paleta.

   BUG DE CONTRASTE ENCONTRADO Y CORREGIDO
   El archivo original agrupa el color de los íconos así:
     · Fondo oscuro → ícono claro
     · Fondo claro  → ícono oscuro
   Pero 3 templates estaban mal clasificados y quedaban con muy
   bajo contraste:
     - marfil_nocturno  → tiene fondo CLARO (marfil/crema) pero
       estaba recibiendo íconos claros (blancos sobre crema).
     - clasico          → usa foto + overlay OSCURO (texto blanco)
       pero estaba recibiendo íconos oscuros (invisibles).
     - elegante         → mismo caso que clasico (foto + overlay
       oscuro, texto blanco) recibiendo íconos oscuros.
   Quedaron corregidos más abajo, en el bloque "PASO 1".

   CÓMO INTEGRAR (sin romper nada)
   1) Cargar este archivo DESPUÉS de tc-event-modules.css y
      tc-modern-invitations.css (para que sus variables ganen).
   2) No hace falta tocar el PHP: se engancha a las mismas clases
      body.tc-template-* / #tc_preview.tc-template-* que ya existen.
   3) Una vez validado, se pueden borrar de los archivos viejos:
        - tc-event-modules.css   líneas ~1539-1561 y ~1733-1742
          (la lista de --tc-module-icon-color por template)
        - el bloque "TEMPLATE SWITCH (EDITOR)" legado
      porque este archivo ya cubre esa función de forma corregida.
   ============================================================ */


/* ============================================================
   0. TOKENS BASE — escala compartida por todo el producto
   ============================================================ */
:root{
  /* Íconos: un solo lugar para decidir claro/oscuro */
  --tc-icon-color-dark: rgba(255,255,255,.92);
  --tc-icon-color-light: rgba(23,31,43,.78);

  /* Tintes de superficie (fondos de .tc-msg, chips, itinerario) */
  --tc-tint-dark: rgba(255,255,255,.05);
  --tc-tint-dark-strong: rgba(255,255,255,.10);
  --tc-tint-light: rgba(255,255,255,.60);
  --tc-tint-light-strong: rgba(255,255,255,.74);

  --tc-border-dark: rgba(255,255,255,.14);
  --tc-border-light: rgba(23,31,43,.13);

  /* Escala de radios */
  --tc-r-xs: 10px;
  --tc-r-sm: 14px;
  --tc-r-md: 18px;
  --tc-r-lg: 24px;
  --tc-r-xl: 32px;

  /* Escala de espaciado (ritmo 4/8px) */
  --tc-sp-1: 4px;  --tc-sp-2: 8px;  --tc-sp-3: 12px;
  --tc-sp-4: 16px; --tc-sp-5: 20px; --tc-sp-6: 28px;

  /* Sombra + easing modernos */
  --tc-shadow-soft: 0 10px 28px rgba(0,0,0,.14);
  --tc-shadow-strong: 0 26px 64px rgba(0,0,0,.30);
  --tc-ease-out: cubic-bezier(.16,1,.3,1);
  --tc-ease-spring: cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-color-scheme: dark){
  :root{ --tc-shadow-soft: 0 10px 28px rgba(0,0,0,.34); }
}


/* ============================================================
   PASO 1 — TEMA (claro / oscuro): un único punto de verdad
   Reemplaza la lista repetida de --tc-module-icon-color.
   ============================================================ */

/* Oscuros → ícono/tinte claro. Incluye la corrección de
   "clasico" y "elegante" (fotos con overlay oscuro). */
.tc-theme-dark,
.tc-template-noche_dorada,   body.tc-template-noche_dorada,
.tc-template-oro_ceremonial, body.tc-template-oro_ceremonial,
.tc-template-velvet_romance, body.tc-template-velvet_romance,
.tc-template-bosque_imperial,body.tc-template-bosque_imperial,
.tc-template-moderno,        body.tc-template-moderno,
.tc-template-clasico,        body.tc-template-clasico,
.tc-template-elegante,       body.tc-template-elegante{
  --tc-icon-color: var(--tc-icon-color-dark);
  --tc-tint: var(--tc-tint-dark);
  --tc-tint-strong: var(--tc-tint-dark-strong);
  --tc-border-soft: var(--tc-border-dark);
}

/* Claros → ícono/tinte oscuro. Incluye la corrección de
   "marfil_nocturno" (fondo marfil, no debe llevar ícono blanco). */
.tc-theme-light,
.tc-template-marfil_nocturno, body.tc-template-marfil_nocturno,
.tc-template-perla_rose,      body.tc-template-perla_rose,
.tc-template-jardin_luz,      body.tc-template-jardin_luz,
.tc-template-aurora_pastel,   body.tc-template-aurora_pastel,
.tc-template-cielo_de_nacar,  body.tc-template-cielo_de_nacar{
  --tc-icon-color: var(--tc-icon-color-light);
  --tc-tint: var(--tc-tint-light);
  --tc-tint-strong: var(--tc-tint-light-strong);
  --tc-border-soft: var(--tc-border-light);
}

/* Todo lo que antes leía --tc-module-icon-color pasa a leer
   la variable unificada --tc-icon-color (mismo valor, un solo
   lugar donde corregirlo a futuro). */
.tc-event-module{ --tc-module-icon-color: var(--tc-icon-color); }


/* ============================================================
   PASO 2 — PALETA POR TEMPLATE (12)
   Cada bloque declara SOLO lo que lo hace único: color primario,
   secundario, glow y fondo. El contraste de íconos ya viene
   resuelto por el PASO 1.
   ============================================================ */

.tc-template-noche_dorada, body.tc-template-noche_dorada{
  --tc-primary:#d4af37; --tc-secondary:#ffffff;
  --tc-modern-glow: rgba(212,175,55,.22);
  --tc-border-accent: rgba(212,175,55,.28);
  background:
    radial-gradient(circle at 18% 8%, rgba(212,175,55,.20), transparent 30%),
    linear-gradient(160deg, #0b0e15 0%, #191d29 52%, #080a10 100%);
}

.tc-template-oro_ceremonial, body.tc-template-oro_ceremonial{
  --tc-primary:#f1c75b; --tc-secondary:#fffaf0;
  --tc-modern-glow: rgba(241,199,91,.22);
  --tc-border-accent: rgba(212,175,55,.28);
  background:
    radial-gradient(circle at 80% 12%, rgba(241,199,91,.18), transparent 34%),
    linear-gradient(160deg, #111827 0%, #1f2937 56%, #06080d 100%);
}

.tc-template-velvet_romance, body.tc-template-velvet_romance{
  --tc-primary:#f2c5d2; --tc-secondary:#fff7fb;
  --tc-modern-glow: rgba(242,197,210,.20);
  --tc-border-accent: rgba(242,197,210,.28);
  background:
    radial-gradient(circle at 82% 12%, rgba(242,197,210,.18), transparent 34%),
    linear-gradient(160deg, #36091a 0%, #5b1730 54%, #220611 100%);
}

.tc-template-bosque_imperial, body.tc-template-bosque_imperial{
  --tc-primary:#c7a45b; --tc-secondary:#f6fff9;
  --tc-modern-glow: rgba(93,160,122,.20);
  --tc-border-accent: rgba(168,140,74,.28);
  background:
    radial-gradient(circle at 18% 10%, rgba(199,164,91,.18), transparent 34%),
    linear-gradient(160deg, #081612 0%, #17372d 54%, #06110e 100%);
}

.tc-template-marfil_nocturno, body.tc-template-marfil_nocturno{
  --tc-primary:#9f7c46; --tc-secondary:#372f26;
  --tc-modern-glow: rgba(159,124,70,.16);
  --tc-border-accent: rgba(73,63,53,.18);
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.70), transparent 34%),
    linear-gradient(180deg, #faf6ef 0%, #e8dccb 100%);
}

.tc-template-perla_rose, body.tc-template-perla_rose{
  --tc-primary:#b76f86; --tc-secondary:#422935;
  --tc-modern-glow: rgba(183,111,134,.18);
  --tc-border-accent: rgba(216,183,195,.32);
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.70), transparent 34%),
    linear-gradient(180deg, #fff8fb 0%, #f3e3ea 100%);
}

.tc-template-jardin_luz, body.tc-template-jardin_luz{
  --tc-primary:#a27b37; --tc-secondary:#40382f;
  --tc-modern-glow: rgba(162,123,55,.16);
  --tc-border-accent: rgba(199,164,106,.28);
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(180deg, #fbf7ef 0%, #eee4d3 100%);
}

.tc-template-aurora_pastel, body.tc-template-aurora_pastel{
  --tc-primary:#a875d6; --tc-secondary:#3f3452;
  --tc-modern-glow: rgba(168,117,214,.18);
  --tc-border-accent: rgba(168,117,214,.26);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.78), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(180,215,255,.55), transparent 36%),
    linear-gradient(180deg, #fff6fb 0%, #eef7ff 100%);
}

.tc-template-cielo_de_nacar, body.tc-template-cielo_de_nacar{
  --tc-primary:#7f96ad; --tc-secondary:#2f3b48;
  --tc-modern-glow: rgba(127,150,173,.18);
  --tc-border-accent: rgba(127,150,173,.26);
  background:
    radial-gradient(circle at 80% 8%, rgba(255,255,255,.82), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #e8eff7 100%);
}

/* Las 3 plantillas "sobre foto" (clasico / moderno / elegante) no
   fuerzan background propio: usan la foto que sube el usuario +
   un overlay oscuro para legibilidad. Solo definimos su paleta
   de acento y el tono del overlay. */
.tc-template-clasico, body.tc-template-clasico{
  --tc-primary:#d9b45c; --tc-secondary:#ffffff;
  --tc-modern-glow: rgba(217,180,92,.18);
  --tc-border-accent: rgba(255,255,255,.16);
  --tc-photo-overlay: linear-gradient(180deg, rgba(6,8,12,.15) 0%, rgba(6,8,12,.55) 100%);
}
.tc-template-moderno, body.tc-template-moderno{
  --tc-primary:#e0a86a; --tc-secondary:#ffffff;
  --tc-modern-glow: rgba(194,123,31,.24);
  --tc-border-accent: rgba(255,255,255,.18);
  --tc-photo-overlay:
    radial-gradient(circle at 20% 20%, rgba(194,123,31,.35), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.10), transparent 45%),
    linear-gradient(180deg, rgba(6,8,12,.20) 0%, rgba(6,8,12,.58) 100%);
}
.tc-template-elegante, body.tc-template-elegante{
  --tc-primary:#efe4c8; --tc-secondary:#ffffff;
  --tc-modern-glow: rgba(255,255,255,.14);
  --tc-border-accent: rgba(255,255,255,.22);
  --tc-photo-overlay: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.52) 100%);
}


/* ============================================================
   PASO 3 — MODERNIZACIÓN DE COMPONENTES COMPARTIDOS
   Todo lo de acá aplica a los 12 templates por igual, porque
   solo usa variables (--tc-primary, --tc-icon-color, --tc-tint…).
   ============================================================ */

/* --- Card shell: doble sombra + borde de 1px "de vidrio" --- */
.tc-editor-wrap #tc_preview,
body.tc-invitation-single .tc-inv-card,
body.tc-invitation-single .tc-preview-card{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    var(--tc-shadow-strong),
    0 0 70px var(--tc-modern-glow, transparent);
  transition: transform .3s var(--tc-ease-out), box-shadow .3s var(--tc-ease-out);
}
.tc-editor-wrap #tc_preview:hover,
body.tc-invitation-single .tc-inv-card:hover,
body.tc-invitation-single .tc-preview-card:hover{
  transform: translateY(-3px);
}

/* --- Foto de portada: leve zoom al hover, transición suave --- */
.tc-photo-wrap{ overflow:hidden; }
.tc-photo-wrap img{
  transition:object-position .18s ease, transform .18s ease;
}
.tc-editor-wrap #tc_preview:hover .tc-photo-wrap img,
body.tc-invitation-single .tc-inv-card:hover .tc-photo-wrap img{
  transform:scale(var(--tc-img-zoom,1));
}

/* --- Chip: punto de acento + mejor alineación --- */
.tc-chip{
  position:relative;
  gap:6px;
  transition: background-color .25s ease, border-color .25s ease;
}
.tc-chip::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: var(--tc-primary, currentColor);
  box-shadow: 0 0 8px var(--tc-primary, currentColor);
  flex:0 0 auto;
}

/* --- Título: subrayado degradado animado (sutil, moderno) --- */
h2.tc-inv-title, .tc-inv-card h2, .tc-preview-card h2, #tc_preview h2{
  position:relative;
  display:inline-block;
}
h2.tc-inv-title::after, .tc-inv-card h2::after, .tc-preview-card h2::after, #tc_preview h2::after{
  content:"";
  position:absolute;
  left:1px; bottom:-6px;
  width:56px; height:3px;
  border-radius:3px;
  background: linear-gradient(90deg, var(--tc-primary), transparent);
  background-size: 200% 100%;
  animation: tcUnderlineDrift 3.2s ease-in-out infinite;
}
@keyframes tcUnderlineDrift{
  0%,100%{ background-position: 0% 0; }
  50%{ background-position: 100% 0; }
}

/* --- Mensaje / bloques de info: tinte unificado por tema --- */
.tc-msg{
  background: var(--tc-tint) !important;
  border: 1px solid var(--tc-border-soft, rgba(255,255,255,.12)) !important;
  transition: background-color .25s ease;
}

/* --- Countdown: números tabulares + pulso ya existente --- */
.tc-countdown-box strong, .tc-preview-count-box strong{
  font-variant-numeric: tabular-nums;
}

/* --- Mapa: fade superior para legibilidad del botón --- */
.tc-map-shell, .tc-preview-map-shell{
  position:relative;
}
.tc-map-shell::before, .tc-preview-map-shell::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:56px;
  background: linear-gradient(180deg, rgba(0,0,0,.30), transparent);
  pointer-events:none;
  z-index:1;
}

/* --- Botones (CTA / RSVP): estados hover, active, disabled, loading, success --- */
.tc-rsvp-btn, .tc-rsvp-submit, .tc-preview-cta-btn, .tc-preview-submit-btn, .tc-module-action{
  position:relative;
  overflow:hidden;
  transition: transform .18s var(--tc-ease-spring), box-shadow .25s ease, opacity .2s ease;
}
.tc-rsvp-btn:hover, .tc-rsvp-submit:hover, .tc-preview-cta-btn:hover, .tc-preview-submit-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
}
.tc-rsvp-btn:active, .tc-rsvp-submit:active, .tc-preview-cta-btn:active, .tc-preview-submit-btn:active{
  transform: translateY(0) scale(.99);
}
.tc-rsvp-btn:disabled, .tc-rsvp-submit:disabled{
  opacity:.55; cursor:not-allowed; transform:none !important;
}
.tc-rsvp-btn.is-loading, .tc-rsvp-submit.is-loading{
  color: transparent !important;
}
.tc-rsvp-btn.is-loading::after, .tc-rsvp-submit.is-loading::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation: tcSpin .7s linear infinite;
}
.tc-rsvp-btn.is-success, .tc-rsvp-submit.is-success{
  background: linear-gradient(135deg,#34d399,#059669) !important;
  color:#fff !important;
}
@keyframes tcSpin{ to{ transform: rotate(360deg); } }

/* --- Inputs de RSVP: foco visible + radios modernos --- */
.tc-rsvp-extra input, .tc-rsvp-extra textarea, .tc-rsvp-extra select{
  border-radius: var(--tc-r-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tc-rsvp-extra input:focus-visible,
.tc-rsvp-extra textarea:focus-visible,
.tc-rsvp-extra select:focus-visible{
  outline: none;
  border-color: var(--tc-primary, #d4af37);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-primary, #d4af37) 30%, transparent);
}

/* --- Botón "copiar" del bloque de regalos: feedback más claro --- */
.tc-copy-btn{ transition: transform .15s ease, background-color .2s ease; }
.tc-copy-btn:active{ transform: scale(.94); }
.tc-copy-btn.is-copied{ animation: tcCopiedPop .35s var(--tc-ease-spring); }
@keyframes tcCopiedPop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.12);} 100%{ transform:scale(1);} }

@media (prefers-reduced-motion: reduce){
  h2.tc-inv-title::after, .tc-inv-card h2::after, .tc-preview-card h2::after, #tc_preview h2::after{
    animation:none;
  }
  .tc-photo-wrap img{ transition:none; }
}


/* ============================================================
   PASO 4 — EFECTOS NUEVOS (opt-in, se activan agregando una
   clase; ninguno rompe el layout si no se usa)
   ============================================================ */

/* --- 4.1 Reveal al hacer scroll ---
   Uso: agregar clase .tc-reveal a cualquier sección y, con un
   IntersectionObserver chiquito, sumar .is-visible cuando entra
   en pantalla (2 líneas de JS, documentadas en la guía). */
.tc-reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .6s var(--tc-ease-out), transform .6s var(--tc-ease-out);
}
.tc-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* --- 4.2 Glow pulsante detrás del CTA principal ---
   Uso: envolver el botón en <div class="tc-fx-glow-cta"> */
.tc-fx-glow-cta{ position:relative; display:inline-block; width:100%; }
.tc-fx-glow-cta::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius: inherit;
  background: var(--tc-primary, #d4af37);
  filter: blur(16px);
  opacity:.35;
  z-index:-1;
  animation: tcGlowPulse 2.6s ease-in-out infinite;
}
@keyframes tcGlowPulse{
  0%,100%{ opacity:.25; transform:scale(.98); }
  50%{ opacity:.5; transform:scale(1.04); }
}

/* --- 4.3 Campo de sparkles ambiente detrás del hero ---
   Uso: <div class="tc-fx-sparkles" aria-hidden="true">
          <i></i><i></i><i></i><i></i><i></i><i></i>
        </div>  dentro de .tc-photo-wrap o del header */
.tc-fx-sparkles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.tc-fx-sparkles i{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px 1px #fff;
  opacity:0;
  animation: tcSparkleTwinkle 2.8s ease-in-out infinite;
}
.tc-fx-sparkles i:nth-child(1){ top:18%; left:12%; animation-delay:.1s; }
.tc-fx-sparkles i:nth-child(2){ top:30%; left:78%; animation-delay:.6s; }
.tc-fx-sparkles i:nth-child(3){ top:62%; left:22%; animation-delay:1.1s; }
.tc-fx-sparkles i:nth-child(4){ top:74%; left:66%; animation-delay:1.6s; }
.tc-fx-sparkles i:nth-child(5){ top:45%; left:48%; animation-delay:2.0s; }
.tc-fx-sparkles i:nth-child(6){ top:20%; left:55%; animation-delay:.35s; }
@keyframes tcSparkleTwinkle{
  0%,100%{ opacity:0; transform:scale(.4); }
  50%{ opacity:1; transform:scale(1.2); }
}

/* --- 4.4 Confeti al confirmar asistencia ---
   Uso: agregar temporalmente la clase .is-confetti-active al
   contenedor de la tarjeta (JS la quita a los ~1.6s). Necesita
   10-14 <i class="tc-confetti-piece"> dentro de un
   <div class="tc-confetti-layer">. */
.tc-confetti-layer{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:30;
}
.tc-confetti-piece{
  position:absolute;
  top:-10%;
  width:7px; height:12px;
  opacity:0;
  border-radius:2px;
}
.is-confetti-active .tc-confetti-piece{
  animation: tcConfettiFall 1.5s ease-in forwards;
}
.tc-confetti-piece:nth-child(4n+1){ background: var(--tc-primary,#d4af37); }
.tc-confetti-piece:nth-child(4n+2){ background:#ffffff; }
.tc-confetti-piece:nth-child(4n+3){ background: var(--tc-modern-glow,#d4af37); }
.tc-confetti-piece:nth-child(4n+4){ background: var(--tc-secondary,#fff); }
.tc-confetti-piece:nth-child(1){ left:6%;  animation-delay:.00s; }
.tc-confetti-piece:nth-child(2){ left:16%; animation-delay:.06s; }
.tc-confetti-piece:nth-child(3){ left:26%; animation-delay:.02s; }
.tc-confetti-piece:nth-child(4){ left:36%; animation-delay:.10s; }
.tc-confetti-piece:nth-child(5){ left:46%; animation-delay:.04s; }
.tc-confetti-piece:nth-child(6){ left:56%; animation-delay:.14s; }
.tc-confetti-piece:nth-child(7){ left:66%; animation-delay:.02s; }
.tc-confetti-piece:nth-child(8){ left:76%; animation-delay:.08s; }
.tc-confetti-piece:nth-child(9){ left:86%; animation-delay:.05s; }
.tc-confetti-piece:nth-child(10){ left:94%; animation-delay:.12s; }
@keyframes tcConfettiFall{
  0%{ opacity:1; transform: translateY(0) rotate(0deg); }
  100%{ opacity:0; transform: translateY(340px) rotate(340deg); }
}

/* --- 4.5 Skeleton shimmer (foto/mapa cargando) ---
   Uso: clase .tc-skeleton mientras no haya `src` / el mapa cargue. */
.tc-skeleton{
  position:relative;
  overflow:hidden;
  background: rgba(127,127,127,.15);
}
.tc-skeleton::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: tcSkeletonSweep 1.4s ease-in-out infinite;
}
@keyframes tcSkeletonSweep{ to{ transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce){
  .tc-fx-glow-cta::before,
  .tc-fx-sparkles i,
  .tc-skeleton::after{ animation:none !important; }
  .tc-confetti-piece{ display:none; }
}


/* ============================================================
   PASO 5 — STICKERS: ampliación del set existente
   Mismo mecanismo del archivo original (pseudo-elementos sobre
   .tc-stickers-layer), pero ahora coloreados con var(--tc-icon-
   color) o var(--tc-primary) para que se adapten solos al tema,
   y con un modificador ".is-floating" para sumarles vida.
   ============================================================ */

/* Modificador de movimiento, aplicable a CUALQUIER sticker
   (viejo o nuevo): .tc-stickers-layer.is-floating */
.tc-stickers-layer.is-floating::before{ animation: tcStickerFloat 6s ease-in-out infinite; }
.tc-stickers-layer.is-floating::after{ animation: tcStickerFloat 7.5s ease-in-out infinite reverse; }
@keyframes tcStickerFloat{
  0%,100%{ transform: translateY(0) rotate(var(--tc-rot,0deg)); }
  50%{ transform: translateY(-10px) rotate(var(--tc-rot,0deg)); }
}

/* --- Estrellas (nuevo): titileo suave, sirve para cualquier
   evento nocturno / elegante --- */
.tc-editor-wrap #tc_preview.tc-sticker-estrellas .tc-stickers-layer::before,
.tc-editor-wrap #tc_preview.tc-sticker-estrellas .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-estrellas .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-estrellas .tc-stickers-layer::after{
  content:"✧";
  position:absolute;
  color: var(--tc-icon-color);
  font-size:30px;
  line-height:1;
  text-shadow: 0 0 16px currentColor;
  animation: tcSparkleTwinkle 2.4s ease-in-out infinite;
}
.tc-editor-wrap #tc_preview.tc-sticker-estrellas .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-estrellas .tc-stickers-layer::before{
  top:24px; right:38px; animation-delay:.2s;
}
.tc-editor-wrap #tc_preview.tc-sticker-estrellas .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-estrellas .tc-stickers-layer::after{
  bottom:120px; left:24px; font-size:20px; animation-delay:1.1s;
}

/* --- Confeti (nuevo): para cumpleaños / celebraciones --- */
.tc-editor-wrap #tc_preview.tc-sticker-confeti .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-confeti .tc-stickers-layer::before{
  content:"";
  position:absolute;
  top:-20px; right:-10px;
  width:130px; height:130px;
  opacity:.6;
  background:
    radial-gradient(circle at 10% 20%, var(--tc-primary) 0 5px, transparent 6px),
    radial-gradient(circle at 40% 10%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 70% 25%, var(--tc-modern-glow,var(--tc-primary)) 0 5px, transparent 6px),
    radial-gradient(circle at 25% 55%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 85% 60%, var(--tc-primary) 0 4px, transparent 5px),
    radial-gradient(circle at 55% 75%, #fff 0 5px, transparent 6px);
}
.tc-editor-wrap #tc_preview.tc-sticker-confeti .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-confeti .tc-stickers-layer::after{
  content:"";
  position:absolute;
  bottom:-24px; left:-14px;
  width:110px; height:110px;
  opacity:.45;
  background:
    radial-gradient(circle at 20% 70%, var(--tc-primary) 0 4px, transparent 5px),
    radial-gradient(circle at 55% 85%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 80% 55%, var(--tc-modern-glow,var(--tc-primary)) 0 4px, transparent 5px),
    radial-gradient(circle at 40% 40%, #fff 0 3px, transparent 4px);
}

/* --- Anillos (nuevo): para bodas / aniversarios --- */
.tc-editor-wrap #tc_preview.tc-sticker-anillos .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-anillos .tc-stickers-layer::before{
  content:"";
  position:absolute;
  top:30px; right:26px;
  width:46px; height:30px;
  opacity:.55;
  background:
    radial-gradient(circle 13px at 16px 15px, transparent 96%, var(--tc-icon-color) 97% 100%, transparent),
    radial-gradient(circle 13px at 30px 15px, transparent 96%, var(--tc-icon-color) 97% 100%, transparent);
}
.tc-editor-wrap #tc_preview.tc-sticker-anillos .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-anillos .tc-stickers-layer::after{
  content:"";
  position:absolute;
  bottom:110px; left:22px;
  width:34px; height:22px;
  opacity:.35;
  background:
    radial-gradient(circle 9px at 11px 11px, transparent 95%, var(--tc-icon-color) 96% 100%, transparent),
    radial-gradient(circle 9px at 22px 11px, transparent 95%, var(--tc-icon-color) 96% 100%, transparent);
}

/* --- Globos (nuevo): para cumpleaños --- */
.tc-editor-wrap #tc_preview.tc-sticker-globos .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-globos .tc-stickers-layer::before{
  content:"";
  position:absolute;
  top:20px; left:28px;
  width:26px; height:34px;
  border-radius:50% 50% 46% 46%;
  background: var(--tc-primary);
  opacity:.55;
  box-shadow: 34px 14px 0 -2px var(--tc-modern-glow, var(--tc-primary));
}
.tc-editor-wrap #tc_preview.tc-sticker-globos .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-globos .tc-stickers-layer::after{
  content:"";
  position:absolute;
  bottom:130px; right:34px;
  width:20px; height:26px;
  border-radius:50% 50% 46% 46%;
  background:#fff;
  opacity:.4;
}

/* --- Laurel (nuevo): para graduaciones --- */
.tc-editor-wrap #tc_preview.tc-sticker-laurel .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-laurel .tc-stickers-layer::before{
  content:"";
  position:absolute;
  bottom:24px; left:-10px;
  width:120px; height:60px;
  opacity:.4;
  background:
    radial-gradient(circle at 10% 82%, var(--tc-icon-color) 0 5px, transparent 6px),
    radial-gradient(circle at 26% 58%, var(--tc-icon-color) 0 5px, transparent 6px),
    radial-gradient(circle at 44% 38%, var(--tc-icon-color) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 24%, var(--tc-icon-color) 0 5px, transparent 6px),
    radial-gradient(circle at 80% 16%, var(--tc-icon-color) 0 5px, transparent 6px);
}
.tc-editor-wrap #tc_preview.tc-sticker-laurel .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-laurel .tc-stickers-layer::after{
  content:"";
  position:absolute;
  bottom:24px; right:-10px;
  width:120px; height:60px;
  opacity:.4;
  background:
    radial-gradient(circle at 90% 82%, var(--tc-icon-color) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 58%, var(--tc-icon-color) 0 5px, transparent 6px),
    radial-gradient(circle at 56% 38%, var(--tc-icon-color) 0 5px, transparent 6px),
    radial-gradient(circle at 38% 24%, var(--tc-icon-color) 0 5px, transparent 6px),
    radial-gradient(circle at 20% 16%, var(--tc-icon-color) 0 5px, transparent 6px);
}

/* --- Mariposas (nuevo): para baby shower / primavera --- */
.tc-editor-wrap #tc_preview.tc-sticker-mariposas .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-mariposas .tc-stickers-layer::before{
  content:"";
  position:absolute;
  top:60px; right:44px;
  width:14px; height:20px;
  background: var(--tc-icon-color);
  opacity:.5;
  border-radius:100% 0 100% 100%;
  transform: rotate(-12deg);
  box-shadow: -15px 0 0 0 var(--tc-icon-color);
  animation: tcButterflyFlutter 2.4s ease-in-out infinite;
}
.tc-editor-wrap #tc_preview.tc-sticker-mariposas .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-mariposas .tc-stickers-layer::after{
  content:"";
  position:absolute;
  bottom:150px; left:30px;
  width:10px; height:14px;
  background: var(--tc-icon-color);
  opacity:.35;
  border-radius:100% 0 100% 100%;
  transform: rotate(-12deg);
  box-shadow: -11px 0 0 0 var(--tc-icon-color);
  animation: tcButterflyFlutter 2.8s ease-in-out infinite 1s;
}
@keyframes tcButterflyFlutter{
  0%,100%{ transform: rotate(-12deg) scaleX(1); }
  50%{ transform: rotate(-12deg) scaleX(.55); }
}

@media (prefers-reduced-motion: reduce){
  .tc-stickers-layer.is-floating::before,
  .tc-stickers-layer.is-floating::after,
  .tc-sticker-estrellas .tc-stickers-layer::before,
  .tc-sticker-estrellas .tc-stickers-layer::after,
  .tc-sticker-mariposas .tc-stickers-layer::before,
  .tc-sticker-mariposas .tc-stickers-layer::after{
    animation:none !important;
  }
}