/* MM Adult Red Module V1 */
:root {
  --adult-red: #ff365f;
  --adult-red2: #b3002d;
  --adult-red3: #ff7a90;
  --adult-wine: #26000b;
  --adult-ink: #fff1f4;
  --adult-muted: rgba(255,241,244,.72);
  --adult-card: rgba(35, 0, 12, .76);
  --adult-line: rgba(255, 74, 112, .34);
}

html[data-theme="light"] {
  --adult-red: #c5163d;
  --adult-red2: #8f0026;
  --adult-red3: #e85d78;
  --adult-wine: #fff1f4;
  --adult-ink: #340716;
  --adult-muted: rgba(52,7,22,.70);
  --adult-card: rgba(255,255,255,.82);
  --adult-line: rgba(197,22,61,.28);
}

.mm-section[data-kind="adult"],
#contenido-adulto {
  --accent: var(--adult-red);
  --accent2: var(--adult-red3);
  border: 2px solid transparent !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 84%, rgba(65,0,20,.36)), color-mix(in srgb, var(--panel) 90%, rgba(25,0,10,.45))) padding-box,
    linear-gradient(135deg, var(--adult-red), var(--adult-red3), var(--adult-red2)) border-box !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.34),
    0 0 42px color-mix(in srgb, var(--adult-red) 18%, transparent),
    0 0 0 1px rgba(255,255,255,.05) inset;
  overflow: hidden;
  position: relative;
}

html[data-theme="light"] .mm-section[data-kind="adult"],
html[data-theme="light"] #contenido-adulto {
  background:
    linear-gradient(180deg, rgba(255,247,249,.92), rgba(255,237,242,.90)) padding-box,
    linear-gradient(135deg, var(--adult-red), var(--adult-red3), var(--adult-red2)) border-box !important;
  box-shadow:
    0 26px 68px rgba(118,25,48,.18),
    0 0 0 1px rgba(255,255,255,.70) inset;
}

.mm-section[data-kind="adult"]::before,
#contenido-adulto::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  opacity: .32;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--adult-red) 52%, transparent), transparent 24%),
    radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--adult-red3) 42%, transparent), transparent 22%),
    radial-gradient(circle at 76% 82%, color-mix(in srgb, var(--adult-red2) 50%, transparent), transparent 26%);
  animation-play-state: paused;
}

.mm-section[data-kind="adult"]::after,
#contenido-adulto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .20;
  background-image:
    radial-gradient(circle, var(--adult-red3) 0 1.5px, transparent 2.8px),
    linear-gradient(135deg, transparent 0 46%, color-mix(in srgb, var(--adult-red) 28%, transparent) 48% 52%, transparent 54%);
  background-size: 76px 76px, 28px 28px;
  background-position: 0 0, 0 0;
  animation-play-state: paused;
}

.mm-effects-ready .mm-section[data-kind="adult"].is-visible::before,
.mm-effects-ready #contenido-adulto.is-visible::before {
  animation: mmAdultAuraV1 7s ease-in-out infinite alternate;
  animation-play-state: running;
}

.mm-effects-ready .mm-section[data-kind="adult"].is-visible::after,
.mm-effects-ready #contenido-adulto.is-visible::after {
  animation: mmAdultParticlesV1 14s linear infinite;
  animation-play-state: running;
}

@keyframes mmAdultAuraV1 {
  from { transform: translate3d(-1%,0,0) rotate(0deg) scale(1); }
  to { transform: translate3d(1%,1%,0) rotate(5deg) scale(1.03); }
}

@keyframes mmAdultParticlesV1 {
  to { background-position: 180px 220px, 28px 28px; }
}

.mm-section[data-kind="adult"] .mm-section-head,
#contenido-adulto .mm-section-head {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--adult-red) 30%, transparent);
  padding-bottom: 1rem;
}

.mm-section[data-kind="adult"] .mm-kicker,
#contenido-adulto .mm-kicker {
  color: var(--adult-red3) !important;
  text-shadow: 0 0 20px color-mix(in srgb, var(--adult-red) 28%, transparent);
}

.mm-section[data-kind="adult"] h2,
#contenido-adulto h2 {
  color: var(--adult-ink);
  letter-spacing: -.04em;
}

.mm-section[data-kind="adult"] p,
#contenido-adulto p {
  color: var(--adult-muted) !important;
}

.mm-adult-red-panel {
  min-height: clamp(280px, 46vw, 440px);
  border-radius: 26px;
  border: 1px solid var(--adult-line);
  background:
    linear-gradient(90deg, rgba(8,0,4,.82), rgba(70,0,23,.46), rgba(8,0,4,.80)),
    radial-gradient(circle at 26% 12%, rgba(255,54,95,.38), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255,122,144,.22), transparent 30%),
    linear-gradient(135deg, rgba(55,0,18,.92), rgba(18,0,8,.92));
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr);
  gap: clamp(16px, 3vw, 38px);
  align-items: end;
  padding: clamp(18px, 4vw, 42px);
  color: white;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

html[data-theme="light"] .mm-adult-red-panel {
  color: #fff;
}

.mm-adult-red-panel::before {
  content: "18+";
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(18px, 4vw, 44px);
  font-size: clamp(3.2rem, 12vw, 8.5rem);
  line-height: .8;
  font-weight: 1000;
  letter-spacing: -.1em;
  color: rgba(255,255,255,.13);
  text-shadow: 0 0 30px rgba(255,54,95,.30);
  pointer-events: none;
}

.mm-adult-red-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 20%, rgba(255,255,255,.18), transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}

.mm-effects-ready .mm-section[data-kind="adult"].is-visible .mm-adult-red-panel::after,
.mm-effects-ready #contenido-adulto.is-visible .mm-adult-red-panel::after {
  animation: mmAdultSweepV1 5.2s ease-in-out infinite;
}

@keyframes mmAdultSweepV1 {
  45%, 100% { transform: translateX(140%); }
}

.mm-adult-red-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.mm-adult-red-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 34px;
  padding: .38rem .72rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  font-weight: 950;
  margin-bottom: .9rem;
  backdrop-filter: blur(10px);
}

.mm-adult-red-panel h3 {
  margin: 0;
  font-size: clamp(2rem, 5.8vw, 4.7rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.mm-adult-red-panel p {
  margin: 1rem 0 0;
  max-width: 660px;
  color: rgba(255,255,255,.76) !important;
  font-size: clamp(.98rem, 1.8vw, 1.15rem);
}

.mm-adult-red-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 1.2rem;
  padding: .78rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff365f, #ff8aa0);
  color: #210008;
  font-weight: 1000;
  box-shadow: 0 14px 34px rgba(255,54,95,.24);
}

.mm-adult-red-art {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: 230px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.16), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  overflow: hidden;
}

.mm-adult-red-art img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  display: block;
  filter: saturate(1.1) contrast(1.03);
}

.mm-adult-red-art:not(:has(img))::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(180deg, rgba(255,54,95,.68), rgba(90,0,25,.72));
  box-shadow:
    0 0 0 18px rgba(255,255,255,.04),
    0 28px 70px rgba(0,0,0,.30);
}

.mm-effects-ready .mm-section[data-kind="adult"].is-visible .mm-adult-red-art,
.mm-effects-ready #contenido-adulto.is-visible .mm-adult-red-art {
  animation: mmAdultArtFloatV1 6.5s ease-in-out infinite alternate;
}

@keyframes mmAdultArtFloatV1 {
  from { transform: translate3d(0,0,0) rotate(-.4deg); }
  to { transform: translate3d(0,-8px,0) rotate(.5deg); }
}

@media (max-width: 820px) {
  .mm-adult-red-panel {
    grid-template-columns: 1fr;
    min-height: 420px;
  }
  .mm-adult-red-art {
    min-height: 190px;
    max-height: 260px;
  }
  .mm-adult-red-art img {
    min-height: 190px;
  }
}

@media (max-width: 460px) {
  .mm-adult-red-panel {
    padding: 18px;
    border-radius: 22px;
    min-height: 380px;
  }
  .mm-adult-red-panel h3 {
    font-size: clamp(2rem, 14vw, 3.3rem);
  }
  .mm-adult-red-art {
    min-height: 160px;
  }
  .mm-adult-red-art img {
    min-height: 160px;
  }
}