/* =========================
   Dulce Match - Styles
   ========================= */

body { font-family: 'Inter', sans-serif; }

/* contenedor de imagen para sello */
.dm-imgwrap{
  position: relative;
}

/* ✅ SELLO DM: agua animada + brillo (arriba-izquierda) */
.dm-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;

  width: 56px;
  height: 56px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;

  /* base moderna */
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.40), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, #ff4fd8 0%, #7c3aed 55%, #3b82f6 105%);
  border: 1px solid rgba(255,255,255,.28);

  /* 3D prolijo */
  box-shadow:
    0 14px 22px rgba(0,0,0,.28),
    0 2px 0 rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.55);

  overflow: hidden;
  isolation: isolate; /* para separar capas */
  transform: translateZ(0);
}

/* ✅ “agua” capa 1 (visible) */
.dm-badge::before{
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  left: -20%;
  top: 35%;
  border-radius: 45%;

  background: rgba(255,255,255,.28);
  filter: blur(.2px);

  animation: dmWater 2.4s ease-in-out infinite;
  z-index: 0;
}

/* ✅ “agua” capa 2 (profundidad/sombra) */
.dm-badge::after{
  content: "";
  position: absolute;
  width: 160%;
  height: 160%;
  left: -30%;
  top: 45%;
  border-radius: 43%;

  background: rgba(0,0,0,.12);

  animation: dmWater2 3.3s ease-in-out infinite;
  z-index: 0;
}

/* ✅ texto arriba de las olas */
.dm-badge .dm-text{
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}

/* ✅ brillo que se mueve (glass sweep) */
.dm-badge .dm-gloss{
  position: absolute;
  inset: -35% -35% auto auto;
  width: 120%;
  height: 120%;
  border-radius: 999px;

  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
  transform: rotate(18deg);
  opacity: .55;

  z-index: 1;
  animation: dmGloss 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* ✅ animaciones */
@keyframes dmWater{
  0%   { transform: translateX(-6%) translateY(0) rotate(0deg); }
  50%  { transform: translateX(10%) translateY(-6%) rotate(18deg); }
  100% { transform: translateX(-6%) translateY(0) rotate(0deg); }
}

@keyframes dmWater2{
  0%   { transform: translateX(10%) translateY(0) rotate(0deg); opacity:.10; }
  50%  { transform: translateX(-10%) translateY(-5%) rotate(-16deg); opacity:.18; }
  100% { transform: translateX(10%) translateY(0) rotate(0deg); opacity:.10; }
}

@keyframes dmGloss{
  0%   { transform: translateX(0) translateY(0) rotate(18deg); opacity:.42; }
  50%  { transform: translateX(-18%) translateY(18%) rotate(18deg); opacity:.62; }
  100% { transform: translateX(0) translateY(0) rotate(18deg); opacity:.42; }
}

/* ✅ Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .dm-badge::before,
  .dm-badge::after,
  .dm-badge .dm-gloss{
    animation: none !important;
  }
}