/* =========================================================   MyLovita — custom overrides del sitio público.   Se carga DESPUÉS de style.css para poder sobrescribir.   ========================================================= *//* Evita scroll horizontal causado por elementos con -left-full   (como el background del NewsFilterBar que se extiende al infinito).   La plantilla yt1 asume body overflow-x: hidden. */html, body {    overflow-x: hidden;}/* ---------------------------------------------------------   Botones de navegación del slider de playlists.   Visibilidad fuerte: círculos grandes, borde grueso, sombra.   --------------------------------------------------------- */.mlv-playlist-nav {    display: inline-flex;    align-items: center;    justify-content: center;    width: 80px;    height: 80px;    border: 4px solid #2E174F;    background: #ffffff;    color: #2E174F;    border-radius: 9999px;    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);    cursor: pointer;    transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;    flex-shrink: 0;}.mlv-playlist-nav:hover {    background: #7E58C2;    border-color: #7E58C2;    color: #ffffff;    transform: translateY(-2px);    box-shadow: 0 14px 30px rgba(126, 88, 194, 0.35);}.mlv-playlist-nav:active {    transform: translateY(0);    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);}.mlv-playlist-nav:focus-visible {    outline: 3px solid #7E58C2;    outline-offset: 3px;}.mlv-playlist-nav svg {    width: 26px;    height: 26px;    fill: currentColor;}.mlv-playlist-nav-group {    display: inline-flex;    gap: 16px;}/* Dark mode: invertimos base para que contrasten con fondo oscuro. */html.dark .mlv-playlist-nav {    background: #ffffff;    border-color: #ffffff;    color: #2E174F;}html.dark .mlv-playlist-nav:hover {    background: #7E58C2;    border-color: #7E58C2;    color: #ffffff;}/* ---------------------------------------------------------   Link "Ver todas las playlists" con icono circular a la izquierda.   Las clases h-[22px]/w-[9px] de Tailwind JIT NO están compiladas,   por eso el icono colapsaba. Aquí lo armamos con CSS propio.   --------------------------------------------------------- */.mlv-browse-all {    display: inline-flex;    align-items: center;    gap: 12px;    font-size: 13px;    font-weight: 700;    letter-spacing: 0.04em;    text-transform: uppercase;    color: #2E174F;    text-decoration: none;    transition: color .2s ease;}.mlv-browse-all:hover {    color: #7E58C2;}.mlv-browse-all:hover .mlv-browse-all-icon {    background: #7E58C2;    border-color: #7E58C2;    color: #ffffff;}.mlv-browse-all-icon {    display: inline-flex;    align-items: center;    justify-content: center;    width: 36px;    height: 36px;    border: 2px solid #2E174F;    border-radius: 9999px;    color: #2E174F;    background: transparent;    flex-shrink: 0;    transition: background-color .2s ease, border-color .2s ease, color .2s ease;}.mlv-browse-all-icon svg {    width: 12px;    height: 12px;    fill: currentColor;}@media (min-width: 768px) {    .mlv-browse-all {        font-size: 14px;    }}html.dark .mlv-browse-all {    color: #ffffff;}html.dark .mlv-browse-all-icon {    border-color: #ffffff;    color: #ffffff;}html.dark .mlv-browse-all:hover,html.dark .mlv-browse-all:hover .mlv-browse-all-icon {    color: #ffffff;}/* ---------------------------------------------------------   Sección "Subscribers Live Count" con mapa de fondo.   Forzamos dark theme siempre (como en el demo) sin depender   de la clase .dark de Tailwind, que el CSS precompilado no   activa por clase de ancestro.   --------------------------------------------------------- */.mlv-subs-section {    background-color: #211832;          /* gray-900 */    color: #ffffff;    overflow: hidden;    position: relative;    isolation: isolate;}.mlv-subs-container {    padding-top: 56px;    padding-bottom: 56px;    padding-left: 16px;    padding-right: 16px;    margin-left: auto;    margin-right: auto;    max-width: 1280px;}.mlv-subs-stage {    position: relative;    width: 100%;    max-width: 1100px;    margin-left: auto;    margin-right: auto;    aspect-ratio: 1000 / 560;    display: flex;    flex-direction: column;    align-items: center;    justify-content: space-between;}.mlv-subs-map {    position: absolute;    top: 4%;    left: 0;    right: 0;    width: 100%;    aspect-ratio: 1000 / 532;    z-index: -10;    pointer-events: none;    user-select: none;}.mlv-subs-heading {    display: flex;    flex-direction: column-reverse;    align-items: center;    gap: 8px;    text-align: center;    color: #ffffff;}.mlv-subs-title {    font-size: clamp(1.5rem, 4.5vw, 4rem);    font-weight: 700;    line-height: 1;    letter-spacing: -0.02em;    color: #ffffff;    margin: 0;}.mlv-subs-title .accent {    color: #7E58C2;}.mlv-subs-eyebrow {    font-size: 0.875rem;    text-transform: uppercase;    letter-spacing: 0.08em;    color: #ffffff;    opacity: 0.85;}.mlv-subs-count {    font-weight: 700;    line-height: 1;    letter-spacing: -0.04em;    color: #ffffff;    font-size: clamp(3rem, 12vw, 130px);}.mlv-subs-info {    display: flex;    align-items: center;    gap: 16px;    color: #ffffff;}.mlv-subs-info img {    width: 44px;    height: 44px;    border-radius: 9999px;    flex-shrink: 0;    object-fit: cover;}.mlv-subs-handle {    font-weight: 700;    line-height: 1.1;    font-size: 1.05rem;    color: #ffffff;}.mlv-subs-handle .at {    color: #7E58C2;}.mlv-subs-on {    font-size: 0.85rem;    color: #ffffff;    opacity: 0.8;    line-height: 1;    margin-top: 2px;}@media (min-width: 768px) {    .mlv-subs-container { padding-top: 96px; padding-bottom: 96px; }    .mlv-subs-eyebrow { font-size: 1rem; }    .mlv-subs-handle { font-size: 1.2rem; }    .mlv-subs-info img { width: 52px; height: 52px; }}@media (min-width: 1024px) {    .mlv-subs-container { padding-top: 128px; padding-bottom: 128px; }}/* ---------------------------------------------------------   Footer — bloque de Subs Live Count con mapa de fondo.   Réplica del demo yt1 con mapa de dots como background.   --------------------------------------------------------- */.mlv-footer-subs {    position: relative;    width: 100%;    min-height: 160px;    display: flex;    align-items: center;    justify-content: center;    overflow: hidden;}.mlv-footer-subs__map {    position: absolute;    inset: 0;    width: 100%;    height: 100%;    object-fit: contain;    opacity: 0.55;    pointer-events: none;    z-index: 0;}.mlv-footer-subs__content {    position: relative;    z-index: 1;    text-align: center;}.mlv-footer-subs__count {    font-family: inherit;    font-weight: 700;    font-size: clamp(28px, 3vw, 36px);    line-height: 1;    letter-spacing: -0.03em;    color: #ffffff;    margin-bottom: 10px;}.mlv-footer-subs__handle {    font-size: 15px;    font-weight: 700;    color: #ffffff;    letter-spacing: 0.01em;}.mlv-footer-subs__at {    color: #7E58C2;}}
.mlv-newsdetail-shell {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .mlv-newsdetail-shell {
    grid-column: 3 / 11;
  }
}

.mlv-newsdetail-body.vv-prose {
  max-width: none;
  color: #111111;
}

.mlv-newsdetail-body.vv-prose :is(p, li, blockquote, figcaption, td, th, span) {
  color: #111111;
}

.mlv-newsdetail-body.vv-prose :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #000000;
}

.mlv-newsdetail-body.vv-prose a {
  color: #2e174f;
}

.mlv-newsdetail-body.vv-prose blockquote {
  color: #111111;
  border-left-color: rgba(46, 23, 79, 0.22);
}

html.dark .mlv-newsdetail-body.vv-prose,
html.dark .mlv-newsdetail-body.vv-prose :is(p, li, blockquote, figcaption, td, th, span) {
  color: #ffffff;
}

html.dark .mlv-newsdetail-body.vv-prose :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #ffffff;
}

html.dark .mlv-newsdetail-body.vv-prose a {
  color: #cdb8ff;
}

html.dark .mlv-newsdetail-body.vv-prose blockquote {
  border-left-color: rgba(255, 255, 255, 0.18);
}

.prose-about {
  color: #111111;
}

.prose-about :is(p, li, blockquote, figcaption, td, th, span) {
  color: #111111;
}

.prose-about :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #000000;
}

.prose-about a {
  color: #2e174f;
}

.prose-about blockquote {
  color: #111111;
  border-left-color: rgba(46, 23, 79, 0.22);
}

html.dark .prose-about,
html.dark .prose-about :is(p, li, blockquote, figcaption, td, th, span) {
  color: #ffffff;
}

html.dark .prose-about :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #ffffff;
}

html.dark .prose-about a {
  color: #cdb8ff;
}

html.dark .prose-about blockquote {
  border-left-color: rgba(255, 255, 255, 0.18);
}

/* Contact: explicit component styles also work without rebuilding Tailwind. */
.mlv-contact {
  --contact-ink: #2e174f;
  --contact-muted: #655a75;
  --contact-accent: #7e58c2;
  --contact-surface: #ffffff;
  --contact-soft: #f6f2fb;
  --contact-line: #e5ddef;
  --contact-error: #a21d40;
  --contact-error-bg: #fff2f5;
  background: radial-gradient(ellipse at 0 5%, #eee5fa 0, transparent 55%), #fcfaff;
  color: var(--contact-ink);
  padding: clamp(48px, 6vw, 96px) 24px;
}
html.dark .mlv-contact {
  --contact-ink: #f6f0ff;
  --contact-muted: #c0b4d0;
  --contact-accent: #c4a3f5;
  --contact-surface: #281d3b;
  --contact-soft: #21172f;
  --contact-line: #49355f;
  --contact-error: #ffb2c4;
  --contact-error-bg: #421e32;
  background: radial-gradient(ellipse at 0 5%, #332044 0, transparent 55%), #1d142b;
}
.mlv-contact__layout { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.mlv-contact__intro { padding-top: 32px; }
.mlv-contact__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--contact-accent); }
.mlv-contact__eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.mlv-contact h1 { margin: 20px 0 24px; font-size: clamp(44px, 5.8vw, 72px); line-height: 1.1; letter-spacing: -.05em; font-weight: 700; color: var(--contact-ink); }
.mlv-contact h1 span { color: var(--contact-accent); }
.mlv-contact__lead { max-width: 420px; font-size: 17px; line-height: 1.85; color: var(--contact-muted); }
.mlv-contact__email { display: flex; align-items: center; gap: 16px; padding: 24px 0; margin-top: 24px; border-top: 1px solid var(--contact-line); border-bottom: 1px solid var(--contact-line); text-decoration: none; color: var(--contact-ink); transition: color .15s ease; }
.mlv-contact__email:hover { color: var(--contact-accent); }
.mlv-contact__mail-icon { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--contact-line); border-radius: 50%; background: var(--contact-surface); color: var(--contact-accent); }
.mlv-contact__email-label { display: block; margin-bottom: 4px; color: var(--contact-muted); font-size: 12px; }
.mlv-contact__email strong { font-size: clamp(14px, 1.5vw, 18px); font-weight: 600; overflow-wrap: anywhere; }
.mlv-contact__arrow { flex-shrink: 0; margin-left: auto; }
.mlv-contact__aside { color: var(--contact-muted); font-size: 13px; line-height: 1.8; margin-top: 24px; }
.mlv-contact__panel { min-width: 0; padding: clamp(24px, 3.5vw, 40px); background: var(--contact-surface); border: 1px solid var(--contact-line); border-radius: 24px; box-shadow: 0 16px 56px #2e174f08; scroll-margin-top: 24px; }
.mlv-contact h2 { color: var(--contact-ink); font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -.03em; margin: 0 0 8px; }
.mlv-contact__form-intro { color: var(--contact-muted); font-size: 14px; line-height: 1.75; margin-bottom: 28px; }
.mlv-contact__form { display: flex; flex-direction: column; gap: 20px; }
.mlv-contact__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mlv-contact__field { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.mlv-contact__field label { font-weight: 600; font-size: 13px; color: var(--contact-ink); }
.mlv-contact__field :is(input, textarea) { display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0; border: 1px solid var(--contact-line); border-radius: 10px; background: var(--contact-soft); color: var(--contact-ink); padding: 13px 14px; font: inherit; font-size: 14px; line-height: 1.6; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.mlv-contact__field textarea { min-height: 160px; resize: vertical; }
.mlv-contact__field :is(input, textarea)::placeholder { color: var(--contact-muted); opacity: .85; }
.mlv-contact__field :is(input, textarea):focus { outline: none; border-color: var(--contact-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--contact-accent) 20%, transparent); }
.mlv-contact__hint { font-size: 11px; color: var(--contact-muted); }
.mlv-contact__privacy { font-size: 11px; line-height: 1.8; color: var(--contact-muted); margin: 0; }
.mlv-contact__privacy a { color: var(--contact-accent); text-decoration: underline; text-underline-offset: 3px; }
.mlv-contact__submit { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 12px; background: #7e58c2; color: #fff; padding: 14px 24px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .15s ease, box-shadow .15s ease; }
.mlv-contact__submit:hover { background: #6942ac; color: #fff; box-shadow: 0 6px 18px #7e58c22b; }
.mlv-contact__submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.mlv-contact :is(a, button):focus-visible { outline: 3px solid var(--contact-accent); outline-offset: 4px; }
.mlv-contact__alert { border: 1px solid currentColor; border-radius: 10px; padding: 14px 16px; color: var(--contact-error); background: var(--contact-error-bg); font-size: 13px; line-height: 1.75; margin-bottom: 20px; }
.mlv-contact__alert p + p { margin-top: 8px; }
.mlv-contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mlv-contact__success { text-align: center; padding: 40px 0; }
.mlv-contact__success-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 24px; background: var(--contact-soft); color: var(--contact-accent); font-size: 30px; }
.mlv-contact__success p { margin: 16px 0 28px; color: var(--contact-muted); font-size: 14px; line-height: 1.8; }
@media (max-width: 850px) {
  .mlv-contact__layout { grid-template-columns: minmax(0, 1fr); max-width: 600px; gap: 32px; }
  .mlv-contact__intro { padding-top: 0; }
  .mlv-contact__lead { max-width: none; }
}
@media (max-width: 480px) {
  .mlv-contact { padding: 40px 16px; }
  .mlv-contact__panel { padding: 24px 16px; border-radius: 18px; }
  .mlv-contact__row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mlv-contact__email { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mlv-contact * { transition: none !important; }
}