/* ==========================================================================
   digitalVCard 2026 — MICROSITE "Mi mundo" · RENDER PÚBLICO (migration 050)
   Portado de _microsite-lab/css/microsite.css y ADAPTADO a la página pública:
     · Autónomo: los tokens del core (blanco/negro) se sustituyen por
       valores literales (la pública NO carga digitalVCard_2026.css).
     · Día/noche por [data-theme="night"] sobre .dvc-classic (NO la clase .dark).
     · El disparador imita el glass de .dvc-actions__save (escala con --u).
   Se enlaza SOLO si microsite_enabled=1 ({{#if}} en template.html).
   Prefijo de clases: dvc-ms-
   ========================================================================== */

:root {
    --ms-spring: cubic-bezier(.22, 1, .36, 1);
    --ms-radius-sheet: 28px;
    --ms-radius-card:  20px;
    --ms-radius-tile:  20px;
    --ms-max: 520px;

    --ms-sheet-bg-dia:   rgba(248, 248, 246, 0.86);
    --ms-sheet-bg-noche: rgba(24, 24, 26, 0.86);
}


/* ==========================================================================
   02. BOTÓN DISPARADOR — en la tarjeta, entre RRSS y acciones.
   Mismo lenguaje glass que .dvc-actions__save; escala con la unidad --u.
   ========================================================================== */
.dvc-classic .dvc-ms-trigger {
    width: 100%;
    margin-top: calc(0.04 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(0.022 * var(--u));
    background: var(--btn-fondo-day, rgba(0, 0, 0, 0.32));
    color: var(--_btn-icono, #fff);
    border: none;
    border-radius: calc(0.078 * var(--u));
    padding: calc(0.039 * var(--u)) calc(0.05 * var(--u));
    font-family: inherit;
    font-size: calc(0.042 * var(--u));
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 200ms ease, transform 200ms ease, filter 200ms ease;
}
.dvc-classic .dvc-ms-trigger:hover {
    background: rgba(0, 0, 0, 0.45);
    transform: translateY(calc(-0.003 * var(--u)));
}
.dvc-classic .dvc-ms-trigger:active { transform: scale(.985); }
.dvc-classic .dvc-ms-trigger i { font-size: calc(0.044 * var(--u)); }

.dvc-classic[data-theme="night"] .dvc-ms-trigger,
[data-theme="night"] .dvc-classic .dvc-ms-trigger { background: var(--btn-fondo-night, rgba(255, 255, 255, 0.15)); }
.dvc-classic[data-theme="night"] .dvc-ms-trigger:hover,
[data-theme="night"] .dvc-classic .dvc-ms-trigger:hover { background: rgba(255, 255, 255, 0.22); }

/* ── El botón disparador ADOPTA "Estilo de los botones" (paso 4). La clase
   --st-{estilo} la fija el render con el botones_estilo de la tarjeta y usa las
   MISMAS variables que el resto de botones (--btn-fondo-*, --_btn-icono). El
   Tema premium sigue mandando vía theme-metal.css (más especificidad). Doble
   clase (.dvc-ms-trigger.dvc-ms-trigger--st-…) para ganar a las reglas de noche.
   ──────────────────────────────────────────────────────────────────────────── */
/* Sólido = look base; solo afinamos el hover cuando hay color de fondo propio
   (igual que el resto de botones: en vez de oscurecer, mantiene color y aclara). */
.dvc-classic[data-btn-custom] .dvc-ms-trigger.dvc-ms-trigger--st-fill:hover {
    background: var(--btn-fondo-day, rgba(0, 0, 0, 0.32));
    filter: brightness(1.12);
}
[data-theme="night"] .dvc-classic[data-btn-custom] .dvc-ms-trigger.dvc-ms-trigger--st-fill:hover,
.dvc-classic[data-btn-custom][data-theme="night"] .dvc-ms-trigger.dvc-ms-trigger--st-fill:hover {
    background: var(--btn-fondo-night, rgba(255, 255, 255, 0.15));
    filter: brightness(1.12);
}

/* Contorno → aro con el color de fondo, interior transparente, icono/texto propio. */
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-outline {
    background: transparent;
    color: var(--_btn-icono, #fff);
    border: max(1px, calc(0.006 * var(--u))) solid var(--btn-fondo-day, currentColor);
}
.dvc-classic[data-theme="night"] .dvc-ms-trigger.dvc-ms-trigger--st-outline,
[data-theme="night"] .dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-outline {
    background: transparent;
    /* Noche independiente del día (igual que el resto de botones). */
    border-color: var(--btn-fondo-night, currentColor);
}
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Solo icono → sin caja, icono/texto propio. */
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-ghost {
    background: transparent;
    color: var(--_btn-icono, #fff);
    border: none;
}
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-ghost:hover {
    background: transparent;
    transform: translateY(calc(-0.003 * var(--u))) scale(1.04);
}

/* Cristal → mismo liquid glass que el resto de botones (tinte configurable). */
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-glass {
    background: var(--btn-fondo-day, rgba(255, 255, 255, 0.14));
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: var(--_btn-icono, #fff);
}
.dvc-classic[data-theme="night"] .dvc-ms-trigger.dvc-ms-trigger--st-glass,
[data-theme="night"] .dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-glass {
    background: var(--btn-fondo-night, rgba(255, 255, 255, 0.10));
    border-color: rgba(255, 255, 255, 0.16);
}
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-glass:hover { background: rgba(255, 255, 255, 0.22); }
[data-theme="night"] .dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-glass:hover { background: rgba(255, 255, 255, 0.18); }

/* ── Variante REDONDA: en la fila de acciones, tras el QR. Mismas dimensiones
   que .dvc-actions__share / .dvc-actions__qr. Doble clase para pisar el
   width:100% / margin-top del pill base. ── */
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--round {
    width: calc(0.144 * var(--u));
    height: calc(0.144 * var(--u));
    margin-top: 0;
    border-radius: 50%;
    padding: 0;
    gap: 0;
    flex-shrink: 0;
}
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--round i { font-size: calc(0.05 * var(--u)); }

/* ── Animación "llamada de atención" del botón REDONDO ──────────────────────
   Se ejecuta UNA sola vez al cargar la tarjeta (microsite.js añade .dvc-ms-anim-run
   tras ~1.5 s). data-ms-anim elige cuál. No se repite (para no ser pesada). */
@keyframes dvcMsPulso  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes dvcMsRebote { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-22%); } 50% { transform: translateY(0); } 70% { transform: translateY(-10%); } 85% { transform: translateY(0); } }
@keyframes dvcMsVaiven { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes dvcMsBrillo { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 35% { box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 0 18px 5px var(--btn-fondo-day, rgba(255,255,255,.5)); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@keyframes dvcMsLatido { 0%,100% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 56% { transform: scale(1); } }
/* ── Animaciones suaves (poco invasivas) ── */
@keyframes dvcMsFlotar   { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-14%); } 50% { transform: translateY(0); } 75% { transform: translateY(-7%); } }
@keyframes dvcMsBalanceo { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes dvcMsRespira  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes dvcMsGuino    { 0%,100% { transform: scale(1); } 40% { transform: scale(0.9); } 70% { transform: scale(1.05); } }
.dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run[data-ms-anim="pulso"]  { animation: dvcMsPulso  0.7s ease 1; }
.dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run[data-ms-anim="rebote"] { animation: dvcMsRebote 0.85s ease 1; }
.dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run[data-ms-anim="vaiven"] { animation: dvcMsVaiven 0.7s ease 1; }
.dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run[data-ms-anim="brillo"] { animation: dvcMsBrillo 1.1s ease 1; }
.dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run[data-ms-anim="latido"] { animation: dvcMsLatido 1.0s ease 1; }
.dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run[data-ms-anim="flotar"]   { animation: dvcMsFlotar   1.4s ease-in-out 1; }
.dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run[data-ms-anim="balanceo"] { animation: dvcMsBalanceo 0.9s ease-in-out 1; }
.dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run[data-ms-anim="respira"]  { animation: dvcMsRespira  1.6s ease-in-out 1; }
.dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run[data-ms-anim="guino"]    { animation: dvcMsGuino    0.7s ease 1; }
@media (prefers-reduced-motion: reduce) {
    .dvc-classic .dvc-ms-trigger--round.dvc-ms-anim-run { animation: none !important; }
}


/* ==========================================================================
   03. SHEET QUE SE DESLIZA (overlay + panel inferior tipo iOS)
   Fijos al viewport: no escalan con --u. Estado abierto = .is-open (JS).
   ========================================================================== */
.dvc-ms-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.50);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}
.dvc-ms-overlay.is-open { opacity: 1; pointer-events: auto; }

.dvc-ms-sheet {
    position: relative;
    display: flex;
    flex-direction: column;        /* cabecera fija + cuerpo scrolleable */
    width: 100%;
    max-width: var(--ms-max);
    max-height: 75vh;              /* 3/4 de la pantalla; el resto = scroll interno */
    overflow: hidden;             /* el scroll vive en .dvc-ms-body, no aquí */
    padding: 10px 18px 0;         /* sin padding-bottom: lo pone el cuerpo */
    /* Solo se redondean las esquinas de ARRIBA. En móvil real la hoja sale
       desde abajo y su parte inferior queda fuera de pantalla (sin radios
       abajo). En el preview de escritorio, la pantalla del marco
       (.dvc-page__screen) recorta con overflow:hidden + radio 42px y redondea
       ella el borde inferior. NO poner radio inferior en la base: rompe el móvil
       (la hoja se ve flotando con la parte de abajo redondeada). */
    border-radius: var(--ms-radius-sheet) var(--ms-radius-sheet) 0 0;
    background: var(--ms-sheet-bg-dia);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, 1);
    transform: translateY(102%);
    transition: transform .5s var(--ms-spring);
}
.dvc-ms-overlay.is-open .dvc-ms-sheet { transform: translateY(0); }

/* Cuerpo scrolleable. La cabecera (grabber + título + cerrar) es hermana de
   esta zona, fuera del overflow → se queda fija arriba al desplazar. */
.dvc-ms-body {
    flex: 1 1 auto;
    min-height: 0;                /* clave: permite que el flex-item scrollee */
    overflow-y: auto;
    overflow-x: hidden;           /* iOS: el scroll vertical no debe "irse" de lado
                                     (el carrusel de destacados scrollea dentro de sí) */
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;       /* las dos secciones se ordenan con `order` */
}
.dvc-ms-body::-webkit-scrollbar { display: none; }
.dvc-ms-group { flex: 0 0 auto; }   /* no encoger: mantienen su alto natural */
/* Orden de secciones decidido en el editor (flag destacados_primero):
   por defecto Accesos arriba; si el cliente lo invierte, Destacados primero. */
.dvc-ms-body--dst-first .dvc-ms-group--destacados { order: -1; }

.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-sheet {
    background: var(--ms-sheet-bg-noche);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.75);
}

/* ════════════════════════════════════════════════════════════════════════
   VISTA "COLUMNA" del preview del editor (URL con ?view=col, la añade el
   editor de microsite). Muestra el contenido del microsite como una columna
   centrada (ancho LinkBIO Pro = 480px), SIN tarjeta ni iPhone, con los mismos
   estilos de bloque .dvc-ms-* (box-sizing ya resuelto → sin desbordes del
   Carrusel). microsite.js añade la clase .dvc-ms-colview al <html>.
   ════════════════════════════════════════════════════════════════════════ */
html.dvc-ms-colview, html.dvc-ms-colview body {
    height: auto !important; min-height: 100% !important; overflow: auto !important;
}
/* El fondo de la tarjeta (gradiente/color día-noche del body, y su ::before
   animado) se conserva tal cual → la columna se ve sobre el MISMO fondo que en
   la vista iPhone. */
/* Ocultar la tarjeta y todo el cromo de página/iPhone. */
html.dvc-ms-colview .dvc-page__branding,
html.dvc-ms-colview .dvc-page__arrow,
html.dvc-ms-colview .dvc-page__frame,
html.dvc-ms-colview .dvc-classic { display: none !important; }
/* Página / mockup / screen → flujo normal, sin posicionamiento de iPhone. */
html.dvc-ms-colview .dvc-page,
html.dvc-ms-colview .dvc-page__mockup,
html.dvc-ms-colview .dvc-page__screen {
    position: static !important; display: block !important;
    width: 100% !important; max-width: none !important; height: auto !important;
    min-height: 0 !important; overflow: visible !important;
    margin: 0 !important; padding: 0 !important; transform: none !important;
    filter: none !important; border-radius: 0 !important;
}
/* Overlay → contenedor de columna centrado (deja de ser modal fijo). */
html.dvc-ms-colview .dvc-ms-overlay {
    position: static !important; opacity: 1 !important; pointer-events: auto !important;
    background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    display: flex !important; justify-content: center !important; align-items: flex-start !important;
    padding: 22px 16px 64px !important;
}
/* Sheet → columna 480px (ancho LinkBIO Pro), estático y completo (sin recorte).
   box-sizing:border-box porque el sheet vive FUERA del reset de .dvc-classic (si
   no, el padding sumaría al ancho → 516px en vez de 480; mismo motivo que el fix
   del Carrusel). */
html.dvc-ms-colview .dvc-ms-sheet {
    box-sizing: border-box !important;
    position: static !important; transform: none !important; margin: 0 auto !important;
    width: 100% !important; max-width: 480px !important; max-height: none !important;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.22) !important;
    /* Columna = tarjeta independiente: las 4 esquinas redondeadas por igual
       (la base solo redondea arriba; el override de escritorio ponía 48px abajo). */
    border-radius: var(--ms-radius-sheet) !important;
    /* Sin grabber en columna → más aire sobre el título "Mini-web". */
    padding-top: 22px !important;
}
html.dvc-ms-colview .dvc-ms-body { overflow: visible !important; }   /* la columna crece, scrollea la página */
html.dvc-ms-colview .dvc-ms-close,
html.dvc-ms-colview .dvc-ms-grabber { display: none !important; }


/* ==========================================================================
   04. CABECERA DEL SHEET
   ========================================================================== */
.dvc-ms-grabber {
    width: 42px;
    height: 5px;
    margin: 4px auto 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-grabber { background: rgba(255, 255, 255, 0.25); }

.dvc-ms-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;   /* separa el corte del scroll del botón cerrar */
}
.dvc-ms-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.4px;
}
.dvc-ms-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .25s var(--ms-spring), background-color .2s ease;
}
.dvc-ms-close:hover  { background: rgba(0, 0, 0, 0.25); }
.dvc-ms-close:active { transform: scale(.9); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-close { background: rgba(255, 255, 255, 0.15); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-close:hover { background: rgba(255, 255, 255, 0.25); }


/* ==========================================================================
   05. TÍTULOS DE BLOQUE
   ========================================================================== */
.dvc-ms-section-title {
    margin: 22px 2px 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.75);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-section-title { color: rgba(255, 255, 255, 0.75); }

/* Separador que el cliente intercala en Accesos para agrupar por secciones.
   Mismo estilo que el título de sección; ocupa toda la fila del grid. */
.dvc-ms-sep { grid-column: 1 / -1; margin: 0.6rem 2px 0.1rem; }
/* Separador en PRIMERA posición (justo bajo "Accesos principales"): línea
   divisoria para que no parezcan dos títulos pegados. */
.dvc-ms-sep:first-child {
    margin-top: 0.3rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-sep:first-child { border-top-color: rgba(255, 255, 255, 0.14); }

/* ── Separador visual que el cliente intercala entre bloques para dar aire.
   5 estilos × 3 niveles de aire. Color tenue automático (día/noche); un
   --ms-divider-color inline (color elegido) lo sobreescribe. Ocupa toda la
   fila del grid de .dvc-ms-links, igual que el título de sección. ── */
.dvc-ms-divider {
    grid-column: 1 / -1;
    border: 0;
    --ms-div-auto:        rgba(0, 0, 0, 0.12);
    --ms-div-auto-strong: rgba(0, 0, 0, 0.32);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-divider {
    --ms-div-auto:        rgba(255, 255, 255, 0.14);
    --ms-div-auto-strong: rgba(255, 255, 255, 0.36);
}
.dvc-ms-divider--aire-compacto { margin: 6px 0; }
.dvc-ms-divider--aire-normal   { margin: 15px 0; }
.dvc-ms-divider--aire-amplio   { margin: 30px 0; }

.dvc-ms-divider--line   { border-top: 1px solid var(--ms-divider-color, var(--ms-div-auto)); }
.dvc-ms-divider--dashed { border-top: 1px dashed var(--ms-divider-color, var(--ms-div-auto)); }

.dvc-ms-divider--short {
    height: 3px;
    width: 44px;
    border-radius: 2px;
    margin-left: auto;
    margin-right: auto;
    background: var(--ms-divider-color, var(--ms-div-auto-strong));
}

/* "Solo aire": sin línea; la separación la da el margen --aire-*. */
.dvc-ms-divider--space { min-height: 1px; }

.dvc-ms-divider--ornament {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dvc-ms-divider--ornament::before,
.dvc-ms-divider--ornament::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--ms-divider-color, var(--ms-div-auto));
}
.dvc-ms-divider__orn {
    display: inline-flex;
    font-size: 0.72rem;
    color: var(--ms-divider-color, var(--ms-div-auto-strong));
}

/* Acceso-vídeo: si la URL es YouTube/Vimeo, el acceso se embebe a todo el ancho
   (mismo radio que las tarjetas) con alto automático según su proporción 16:9. */
.dvc-ms-embed {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--ms-radius-card);
    overflow: hidden;
    background: #000;
}
.dvc-ms-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Acceso-imagen: a todo el ancho, proporción natural (NO recorta nunca).
   Solo imagen → la foto redondeada; con título/desc → tarjeta con pie de texto. */
.dvc-ms-imgcard {
    grid-column: 1 / -1;
    display: block; width: 100%;
    box-sizing: border-box;   /* el sheet vive fuera de .dvc-classic (sin el reset global): sin esto, el padding del destacado desborda el grid */
    border-radius: var(--ms-radius-card);
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .2s var(--ms-spring);
}
.dvc-ms-imgcard:hover { transform: translateY(-2px); }
.dvc-ms-imgcard__img { display: block; width: 100%; height: auto; }
.dvc-ms-imgcard--card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.15);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.dvc-ms-imgcard__body { padding: 12px 14px; }
.dvc-ms-imgcard__body h3 { margin: 0 0 2px; font-size: 1rem; font-weight: 700; line-height: 1.15; }
.dvc-ms-imgcard__body p  { margin: 0; font-size: .82rem; line-height: 1.3; color: rgba(0, 0, 0, 0.75); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-imgcard--card { background: rgba(0, 0, 0, 0.50); border-color: rgba(255, 255, 255, 0.15); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-imgcard__body p { color: rgba(255, 255, 255, 0.75); }

/* Imagen DESTACADA (highlight): marco de color alrededor de la foto + pie en
   el color de contraste. Las variables --ms-feat-* llegan inline (feat_style). */
.dvc-ms-imgcard--feat { background: var(--ms-feat-bg); padding: 8px; border-radius: var(--ms-radius-card); }
.dvc-ms-imgcard--feat .dvc-ms-imgcard__img { border-radius: 14px; }
.dvc-ms-imgcard--feat .dvc-ms-imgcard__body,
.dvc-ms-imgcard--feat .dvc-ms-imgcard__body h3,
.dvc-ms-imgcard--feat .dvc-ms-imgcard__body p { color: var(--ms-feat-fg); }

/* Imagen Pro: la imagen NO se toca (sus esquinas las trae el PNG); el pie de
   Título/descripción lleva los 20px SOLO en las esquinas inferiores y une recto
   con la imagen. El "destacar" colorea SOLO el pie, nunca un marco. */
.dvc-ms-imgcard--pro { border-radius: 0; overflow: visible; background: none; }
.dvc-ms-imgcard--pro .dvc-ms-imgcard__img { border-radius: 0; }
.dvc-ms-imgcard__body--pro {
    border-radius: 0 0 20px 20px;
    background: rgba(16, 20, 34, 0.82);
    padding: 14px 16px 16px;
}
.dvc-ms-imgcard__body--pro h3 { color: #fff; }
.dvc-ms-imgcard__body--pro p  { color: rgba(255, 255, 255, 0.78); }
.dvc-ms-imgcard__body--feat   { background: var(--ms-feat-bg); }
.dvc-ms-imgcard__body--feat h3,
.dvc-ms-imgcard__body--feat p { color: var(--ms-feat-fg); }


/* ==========================================================================
   06. BLOQUE: ACCESOS PRINCIPALES (tarjetas-enlace)
   ========================================================================== */
/* OJO al minmax(0,1fr): sin él, la columna auto del grid crece hasta el
   max-content de sus hijos — y el carrusel (fila de tiles con overflow-x)
   es anchísimo → ensanchaba el sheet entero y el scroller, al no quedar
   nunca más estrecho que su contenido, no scrolleaba (bug tarjeta #47). */
.dvc-ms-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dvc-ms-links > .dvc-ms-group { min-width: 0; }

.dvc-ms-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--ms-radius-card);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: inherit;
    text-decoration: none;
    transition: transform .2s var(--ms-spring), border-color .2s ease;
}
.dvc-ms-link:hover { transform: translateY(-2px); border-color: rgba(0, 0, 0, 0.4); }

.dvc-ms-link__ic {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 1);
}
.dvc-ms-link__txt { min-width: 0; }
.dvc-ms-link__txt h3 { margin: 0 0 2px; font-size: 1rem; font-weight: 700; line-height: 1.15; }
.dvc-ms-link__txt p  { margin: 0; font-size: .82rem; line-height: 1.3; color: rgba(0, 0, 0, 0.75); }
.dvc-ms-link__go { margin-left: auto; opacity: .5; font-size: 1.1rem; }

.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-link {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-link__ic {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 1);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-link__txt p { color: rgba(255, 255, 255, 0.75); }

/* Acceso DESTACADO (highlight): relleno sólido para que resalte como botón
   principal. Color configurable en una variable. Default = contraste premium
   (oscuro en día, claro en noche) → resalta en ambos temas sin chocar con el
   color de fondo que elija el cliente. Para un color de marca fijo, basta con
   poner --ms-feat-bg/--ms-feat-fg iguales en día y noche. */
.dvc-ms-link--feat {
    --ms-feat-bg: #1c1c1e;
    --ms-feat-fg: #ffffff;
    background: var(--ms-feat-bg);
    border: none;          /* sin canto gris: relleno limpio */
    color: var(--ms-feat-fg);
}
.dvc-ms-link--feat .dvc-ms-link__ic {
    background: var(--ms-feat-icbg, rgba(255, 255, 255, 0.14));
    border: none;
    color: var(--ms-feat-fg);
}
.dvc-ms-link--feat .dvc-ms-link__txt h3,
.dvc-ms-link--feat .dvc-ms-link__go { color: var(--ms-feat-fg); }
.dvc-ms-link--feat .dvc-ms-link__txt p { color: var(--ms-feat-fg); opacity: 0.78; }
.dvc-ms-link--feat .dvc-ms-link__go { opacity: 0.85; }
/* En noche hay que re-declarar background/color (no solo las variables): la
   regla [data-theme] .dvc-ms-link pesa más que .dvc-ms-link--feat a secas y
   dejaba el destacado negro sobre negro. */
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-link--feat {
    --ms-feat-bg: #f4f4f5;
    --ms-feat-fg: #111114;
    background: var(--ms-feat-bg);
    color: var(--ms-feat-fg);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-link--feat .dvc-ms-link__ic {
    background: var(--ms-feat-icbg, rgba(0, 0, 0, 0.10));
    border: none;
}

/* NFC: icono SVG a medida (diseño de Paco) — no existe en FontAwesome Free.
   Se pinta vía CSS mask + currentColor, así un <i class="dvc-icon-nfc"> hereda
   el color (día/noche) y el tamaño como cualquier glyph de fuente. */
.dvc-icon-nfc {
    --nfc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51.09 52.88'%3E%3Cpath fill='%23000' d='M34.92,3.57c-.73-.29-1.56-.27-2.28.06-.71.33-1.25.91-1.51,1.65-.39,1.11-1.09,2.04-1.98,2.73l-.79-1.73c.59-.67.96-1.53.96-2.49,0-2.09-1.69-3.79-3.78-3.79s-3.78,1.69-3.78,3.79,1.69,3.79,3.78,3.79c0,0,.01,0,.02,0l.74,1.63c-.25.03-.5.06-.76.06-2.52,0-4.77-1.6-5.59-3.98-.26-.74-.79-1.32-1.5-1.65-.72-.33-1.55-.35-2.28-.06C6.97,7.21.64,15.92.05,25.77c-.44,7.24,2.27,14.36,7.42,19.54,4.82,4.85,11.36,7.56,18.12,7.56.46,0,.92-.01,1.38-.04,13.53-.74,24.13-11.94,24.13-25.51,0-10.56-6.35-19.89-16.16-23.76ZM26.79,49.76c-6.37.33-12.61-2.06-17.14-6.62s-6.91-10.82-6.52-17.18c.52-8.59,6-16.2,13.98-19.44,1.32,3.5,4.68,5.83,8.43,5.83.71,0,1.4-.11,2.07-.27l1.02,2.25c-1,.28-2.04.43-3.09.43-2.68,0-5.3-.95-7.36-2.68-1.65-1.39-4.04-1.37-5.68.04-4.1,3.53-6.64,8.63-6.97,13.99-.33,5.55,1.6,10.85,5.44,14.93,3.8,4.03,9.11,6.34,14.58,6.34h0c.37,0,.74,0,1.11-.03,10.61-.58,18.93-9.37,18.93-20.01,0-5.91-2.56-11.47-7.02-15.26-1.64-1.39-4.02-1.4-5.66-.02-.46.38-.94.72-1.45,1.03l-1.01-2.22c1.57-1.02,2.83-2.52,3.52-4.35,8.53,3.45,14.02,11.6,14.02,20.82,0,11.92-9.31,21.77-21.21,22.42ZM25.33,41.32h.21c3.8,0,7.38-1.48,10.06-4.17.6-.6.6-1.58,0-2.18-.6-.6-1.58-.6-2.18,0-2.11,2.1-4.9,3.26-7.88,3.26h-.17c-6.01-.09-10.93-5.05-10.98-11.05-.01-1.77.38-3.49,1.15-5.04,3.13,1.43,6.48,2.15,10,2.15,2.44,0,4.83-.38,7.12-1.08l1.52,3.36c-.53.63-.86,1.42-.86,2.31,0,1.99,1.61,3.6,3.6,3.6s3.6-1.61,3.6-3.6-1.58-3.56-3.54-3.59l-4.25-9.35c.76-.43,1.48-.93,2.15-1.5.47-.4,1.19-.4,1.67,0,3.77,3.2,5.93,7.91,5.93,12.9,0,9-7.03,16.44-16.01,16.93-5,.29-9.83-1.7-13.27-5.35-3.25-3.46-4.89-7.94-4.6-12.63.27-4.53,2.42-8.84,5.9-11.83.25-.22.56-.32.86-.32s.58.1.82.3c2.62,2.2,5.93,3.41,9.34,3.41,1.5,0,2.97-.25,4.38-.69l1.46,3.22c-1.88.54-3.84.82-5.84.82-3.51,0-6.83-.82-9.88-2.44-.7-.38-1.57-.15-2.01.51-1.55,2.34-2.36,5.09-2.34,7.94.06,7.67,6.35,14.01,14.02,14.12Z'/%3E%3C/svg%3E");
    display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--nfc-mask) no-repeat center / contain;
    mask: var(--nfc-mask) no-repeat center / contain;
}


/* ==========================================================================
   07. BLOQUE: DESTACADOS (carrusel imagen / vídeo)
   ========================================================================== */
.dvc-ms-scroller {
    display: flex;
    align-items: flex-start;   /* cada tile conserva su alto natural (imágenes sin recortar) */
    gap: 13px;
    overflow-x: auto;
    padding: 2px 2px 12px;
    margin-inline: -2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.dvc-ms-scroller::-webkit-scrollbar { display: none; }

.dvc-ms-tile {
    scroll-snap-align: start;
    flex: 0 0 168px;
    width: 168px;
    text-align: left;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--ms-radius-tile);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    color: inherit;
    font-family: inherit;
    transition: transform .2s var(--ms-spring);
}
.dvc-ms-tile:hover { transform: translateY(-3px); }
/* Destacado-imagen SIN enlace: no es clicable → sin cursor de mano ni hover. */
.dvc-ms-tile--nolink { cursor: default; }
.dvc-ms-tile--nolink:hover { transform: none; }

.dvc-ms-tile__thumb {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: rgba(0, 0, 0, 0.15);
    background-size: cover;
    background-position: center;
}
/* Destacado tipo IMAGEN: <img> real a su proporción (sin recortar). El radio
   superior lo da el overflow:hidden del tile (mismo radio que el resto). */
.dvc-ms-tile__img {
    display: block;
    width: 100%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.10);
}
.dvc-ms-tile__badge {
    position: absolute;
    top: 9px;
    left: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 0.50);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.dvc-ms-tile__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.50);
    transition: transform .25s var(--ms-spring);
}
.dvc-ms-tile:hover .dvc-ms-tile__play { transform: scale(1.08); }

.dvc-ms-tile__body { display: block; padding: 11px 12px 13px; }
.dvc-ms-tile__body h3 { margin: 0 0 3px; font-size: .9rem; font-weight: 700; line-height: 1.18; }
.dvc-ms-tile__body p  { margin: 0; font-size: .76rem; line-height: 1.25; color: rgba(0, 0, 0, 0.75); }

.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-tile {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-tile__body p { color: rgba(255, 255, 255, 0.75); }

/* Tile "VER MÁS" — texto + enlace al final del carrusel (p.ej. al perfil de
   Instagram). Mismo ancho que los demás; el alto se estira al del tile más
   alto de la fila (align-self) con mínimo cuadrado por si va solo. */
.dvc-ms-tile--vermas {
    align-self: stretch;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
.dvc-ms-tile__vermas-ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 1);
}
.dvc-ms-tile__vermas-txt { font-size: .9rem; font-weight: 700; line-height: 1.2; padding: 0 10px; }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-tile__vermas-ic {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 1);
}


/* ==========================================================================
   08. LIGHTBOX DE VÍDEO (carga el iframe solo al tocar)
   ========================================================================== */
.dvc-ms-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.dvc-ms-lightbox.is-open { opacity: 1; pointer-events: auto; }

.dvc-ms-lb-frame {
    position: relative;
    width: 100%;
    max-width: 420px;
    transform: scale(.94);
    transition: transform .4s var(--ms-spring);
}
.dvc-ms-lightbox.is-open .dvc-ms-lb-frame { transform: none; }

.dvc-ms-lb-inner {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
}
.dvc-ms-lb-inner.r-169 { aspect-ratio: 16 / 9; }
.dvc-ms-lb-inner.r-916 { aspect-ratio: 9 / 16; }
.dvc-ms-lb-inner iframe { width: 100%; height: 100%; border: 0; display: block; }

.dvc-ms-lb-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 1);
    font-size: 1.15rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}


/* ==========================================================================
   09. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .dvc-ms-sheet,
    .dvc-ms-overlay,
    .dvc-ms-lb-frame,
    .dvc-ms-lightbox,
    .dvc-ms-trigger,
    .dvc-ms-tile,
    .dvc-ms-link { transition: none; }
}

/* ==========================================================================
   09. BLOQUE: DESPLEGABLE (v2) — grupo plegable con links/imágenes dentro.
   Cerrado por defecto; [data-ms-acc-toggle] (microsite.js) alterna .is-open.
   ========================================================================== */
.dvc-ms-acc {
    grid-column: 1 / -1;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--ms-radius-card);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow: hidden;
}
.dvc-ms-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
.dvc-ms-acc__txt { min-width: 0; }
.dvc-ms-acc__title { display: block; font-size: 1rem; font-weight: 700; line-height: 1.15; }
/* Frase opcional bajo el título — mismos tamaños que la de los links (__txt p) */
.dvc-ms-acc__sub { display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; line-height: 1.3; color: rgba(0, 0, 0, 0.75); }
.dvc-ms-acc__chev { flex: 0 0 auto; transition: transform .25s var(--ms-spring); opacity: 0.6; }
.dvc-ms-acc.is-open .dvc-ms-acc__chev { transform: rotate(180deg); }
/* Apertura animada: la fila de grid pasa de 0fr a 1fr (la altura se anima
   sola, sin medir con JS). El hijo necesita min-height:0 + overflow:hidden
   para poder colapsar. OJO: el padding no se puede comprimir por debajo de
   sí mismo (dejaba 14px de cola bajo el título con el bloque cerrado), así
   que el respiro se anima junto con la apertura: 0 cerrado → 2/12px abierto. */
.dvc-ms-acc__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.32, .72, 0, 1);
    padding: 0 12px;
}
.dvc-ms-acc__body > .dvc-ms-links {
    min-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transition: opacity .3s ease .05s, padding .4s cubic-bezier(.32, .72, 0, 1);
}
.dvc-ms-acc.is-open .dvc-ms-acc__body { grid-template-rows: 1fr; }
.dvc-ms-acc.is-open .dvc-ms-acc__body > .dvc-ms-links { opacity: 1; padding: 2px 0 12px; }
/* Dentro del desplegable las tarjetas pierden el blur doble (rendimiento iOS).
   OJO: el fondo translúcido solo para los normales — el destacado (--feat)
   conserva su relleno sólido (si no, quedaba texto blanco sobre blanco). */
.dvc-ms-acc__body .dvc-ms-link,
.dvc-ms-acc__body .dvc-ms-imgcard--card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.dvc-ms-acc__body .dvc-ms-link:not(.dvc-ms-link--feat),
.dvc-ms-acc__body .dvc-ms-imgcard--card {
    background: rgba(255, 255, 255, 0.6);
}
/* El desplegable NO tiene versión noche (decisión Paco 10-jun): se queda con
   la versión clara también con la tarjeta en modo noche. Para ello se
   re-declaran los valores de DÍA pisando las reglas [data-theme="night"] de
   todo lo que puede vivir dentro: links, iconos, títulos de sección,
   tarjetas-imagen y el destacado. */
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 1);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-link:not(.dvc-ms-link--feat),
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-imgcard--card {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.15);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-link__ic {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 1);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-link__txt p,
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-imgcard__body p,
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-section-title { color: rgba(0, 0, 0, 0.75); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-sep:first-child { border-top-color: rgba(0, 0, 0, 0.12); }
/* El destacado dentro conserva su versión de día (relleno oscuro, texto claro) */
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-link--feat {
    --ms-feat-bg: #1c1c1e;
    --ms-feat-fg: #ffffff;
    background: var(--ms-feat-bg);
    color: var(--ms-feat-fg);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-link--feat .dvc-ms-link__ic {
    background: var(--ms-feat-icbg, rgba(255, 255, 255, 0.14));
    border: none;
    color: var(--ms-feat-fg);
}

/* ==========================================================================
   9bis. BLOQUE: IMAGEN PRO DESPLEGABLE (listapro)
   Cabecera estilo Imagen Pro (imagen + pie con título/frase) que se pliega/
   despliega y, al abrir, muestra una lista de puntos con viñetas. Reusa el
   toggle del desplegable (data-ms-acc → .is-open, microsite.js sin tocar), el
   pie oscuro de Imagen Pro y la animación de colapso (grid 0fr→1fr).
   ========================================================================== */
.dvc-ms-lp {
    grid-column: 1 / -1;
    box-sizing: border-box;   /* el sheet vive fuera del reset de .dvc-classic */
    border-radius: var(--ms-radius-card);
    overflow: hidden;   /* recorta la imagen superior, el pie y la lista a las esquinas */
    /* SIN border ni background propios: el "marco/línea blanca" lo causaba el
       fondo translúcido del contenedor asomando por los bordes de la imagen y
       del pie (igual que Imagen Pro, que tampoco lleva marco). El fondo claro
       de la zona de puntos vive ahora en .dvc-ms-lp__panel. */
}
/* Esquinas superiores rectas (check "Redondear…" desmarcado en el editor): deja
   la imagen recta arriba / respeta el PNG que ya trae sus esquinas. Abajo sigue
   redondeado. Como el card recorta con overflow:hidden, basta con poner a 0 el
   radio de las dos esquinas de arriba. */
.dvc-ms-lp--toprecto {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.dvc-ms-lp__head {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
.dvc-ms-lp__img { display: block; width: 100%; height: auto; }
/* Pie: por defecto oscuro (como el de Imagen Pro). Si el bloque está destacado,
   --ms-feat-* llegan inline y lo recolorean (clase __cap--feat). */
.dvc-ms-lp__cap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(16, 20, 34, 0.82);
}
.dvc-ms-lp__txt { flex: 1; min-width: 0; }
.dvc-ms-lp__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.15; color: #fff; }
.dvc-ms-lp__sub { display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; line-height: 1.3; color: rgba(255, 255, 255, 0.78); }
.dvc-ms-lp__chev { flex: 0 0 auto; color: rgba(255, 255, 255, 0.85); transition: transform .25s var(--ms-spring); }
.dvc-ms-lp.is-open .dvc-ms-lp__chev { transform: rotate(180deg); }
/* Destacado: el pie se colorea con el color elegido (igual que Imagen Pro). */
.dvc-ms-lp__cap--feat { background: var(--ms-feat-bg); }
.dvc-ms-lp__cap--feat .dvc-ms-lp__title,
.dvc-ms-lp__cap--feat .dvc-ms-lp__chev { color: var(--ms-feat-fg); }
.dvc-ms-lp__cap--feat .dvc-ms-lp__sub { color: var(--ms-feat-fg); opacity: 0.78; }
/* Cuerpo plegable: misma técnica que el desplegable (grid-template-rows 0fr→1fr;
   el hijo necesita min-height:0 + overflow:hidden para colapsar). El que colapsa
   es el __panel, que contiene la lista Y el botón opcional → se pliegan juntos. */
.dvc-ms-lp__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.32, .72, 0, 1);
}
.dvc-ms-lp__panel {
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    /* Fondo claro de la zona desplegada (antes vivía en el contenedor y causaba
       la línea blanca). El recorte a esquina inferior lo da el overflow del card. */
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: opacity .3s ease .05s, padding .4s cubic-bezier(.32, .72, 0, 1);
}
.dvc-ms-lp__list { list-style: none; margin: 0; padding: 0; box-sizing: border-box; }
.dvc-ms-lp.is-open .dvc-ms-lp__body { grid-template-rows: 1fr; }
.dvc-ms-lp.is-open .dvc-ms-lp__panel { opacity: 1; padding: 12px 16px 14px; }
/* Botón al final: un espacio + línea fina y debajo el botón. Sólido; si el bloque
   está destacado adopta su color (--ms-feat-*, que llega inline en el contenedor);
   si no, azul de acento (igual que las viñetas). */
.dvc-ms-lp__cta {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dvc-ms-lp__btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: #0a84ff;
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s var(--ms-spring), filter .2s ease;
}
.dvc-ms-lp__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.dvc-ms-lp--feat .dvc-ms-lp__btn { background: var(--ms-feat-bg); color: var(--ms-feat-fg); }
.dvc-ms-lp__list li {
    box-sizing: border-box;
    position: relative;
    padding: 5px 0 5px 26px;
    font-size: .9rem;
    line-height: 1.35;
    color: rgba(0, 0, 0, 0.82);
}
.dvc-ms-lp__list li strong { font-weight: 700; }
/* Viñeta pintada por ::before según la clase --v-* (sin depender de Font Awesome
   por línea). El glyph se alinea a la primera línea del punto. */
.dvc-ms-lp__list li::before {
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    line-height: 1.35;
    text-align: center;
    color: #0a84ff;
    font-weight: 700;
}
.dvc-ms-lp--v-check    .dvc-ms-lp__list li::before { content: "\2713"; }   /* ✓ */
.dvc-ms-lp--v-punto    .dvc-ms-lp__list li::before { content: "\2022"; }   /* • */
.dvc-ms-lp--v-flecha   .dvc-ms-lp__list li::before { content: "\2192"; }   /* → */
.dvc-ms-lp--v-estrella .dvc-ms-lp__list li::before { content: "\2605"; }   /* ★ */
.dvc-ms-lp--v-guion    .dvc-ms-lp__list li::before { content: "\2013"; color: rgba(0, 0, 0, 0.45); }   /* – */
/* Check en círculo (icono propio de Paco, RightFont): va como máscara SVG para
   que herede el color de acento como las demás viñetas y quede nítido a cualquier
   tamaño. La forma se pinta vía background-color sobre el alpha del SVG. */
.dvc-ms-lp--v-circlecheck .dvc-ms-lp__list li::before {
    content: "";
    top: 6px;
    width: 16px;
    height: 16px;
    background-color: #0a84ff;
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2LjAwMDAwMCAtMC4wMDAwMDAgQzEzLjc5MTY1NiAtMC4wMDAwMDAgMTEuNzEzNTUxIDAuNDE2NjYzIDkuNzY1NjI1IDEuMjUwMDAwIEM3LjgxNzY5OSAyLjA4MzMzNyA2LjExOTc5OSAzLjIyMzk1MSA0LjY3MTg3NSA0LjY3MTg3NSBDMy4yMjM5NTEgNi4xMTk3OTkgMi4wODMzMzcgNy44MTc2OTkgMS4yNTAwMDAgOS43NjU2MjUgQzAuNDE2NjYzIDExLjcxMzU1MSAwLjAwMDAwMCAxMy43OTE2NTYgMC4wMDAwMDAgMTYuMDAwMDAwIEMwLjAwMDAwMCAxOC4yMDgzNDQgMC40MTY2NjMgMjAuMjg2NDQ5IDEuMjUwMDAwIDIyLjIzNDM3NSBDMi4wODMzMzcgMjQuMTgyMzAxIDMuMjIzOTUxIDI1Ljg4MDIwMSA0LjY3MTg3NSAyNy4zMjgxMjUgQzYuMTE5Nzk5IDI4Ljc3NjA0OSA3LjgxNzY5OSAyOS45MTY2NjMgOS43NjU2MjUgMzAuNzUwMDAwIEMxMS43MTM1NTEgMzEuNTgzMzM3IDEzLjc5MTY1NiAzMi4wMDAwMDAgMTYuMDAwMDAwIDMyLjAwMDAwMCBDMTguMjA4MzQ0IDMyLjAwMDAwMCAyMC4yODY0NDkgMzEuNTgzMzM3IDIyLjIzNDM3NSAzMC43NTAwMDAgQzI0LjE4MjMwMSAyOS45MTY2NjMgMjUuODgwMjAxIDI4Ljc3NjA0OSAyNy4zMjgxMjUgMjcuMzI4MTI1IEMyOC43NzYwNDkgMjUuODgwMjAxIDI5LjkxNjY2MyAyNC4xODIzMDEgMzAuNzUwMDAwIDIyLjIzNDM3NSBDMzEuNTgzMzM3IDIwLjI4NjQ0OSAzMi4wMDAwMDAgMTguMjA4MzQ0IDMyLjAwMDAwMCAxNi4wMDAwMDAgQzMyLjAwMDAwMCAxMy43OTE2NTYgMzEuNTgzMzM3IDExLjcxMzU1MSAzMC43NTAwMDAgOS43NjU2MjUgQzI5LjkxNjY2MyA3LjgxNzY5OSAyOC43NzYwNDkgNi4xMTk3OTkgMjcuMzI4MTI1IDQuNjcxODc1IEMyNS44ODAyMDEgMy4yMjM5NTEgMjQuMTgyMzAxIDIuMDgzMzM3IDIyLjIzNDM3NSAxLjI1MDAwMCBDMjAuMjg2NDQ5IDAuNDE2NjYzIDE4LjIwODM0NCAtMC4wMDAwMDAgMTYuMDAwMDAwIC0wLjAwMDAwMCBaIE0xNi4wMDAwMDAgMzAuMDAwMDAwIEMxNC4wNjI0OTAgMzAuMDAwMDAwIDEyLjI0NDgwMCAyOS42MzU0MjAgMTAuNTQ2ODc1IDI4LjkwNjI1MCBDOC44NDg5NTAgMjguMTc3MDgwIDcuMzY0NTkwIDI3LjE3NzA5MCA2LjA5Mzc1MCAyNS45MDYyNTAgQzQuODIyOTEwIDI0LjYzNTQxMCAzLjgyMjkyMCAyMy4xNTEwNTAgMy4wOTM3NTAgMjEuNDUzMTI1IEMyLjM2NDU4MCAxOS43NTUyMDAgMi4wMDAwMDAgMTcuOTM3NTEwIDIuMDAwMDAwIDE2LjAwMDAwMCBDMi4wMDAwMDAgMTQuMDYyNDkwIDIuMzY0NTgwIDEyLjI0NDgwMCAzLjA5Mzc1MCAxMC41NDY4NzUgQzMuODIyOTIwIDguODQ4OTUwIDQuODIyOTEwIDcuMzY0NTkwIDYuMDkzNzUwIDYuMDkzNzUwIEM3LjM2NDU5MCA0LjgyMjkxMCA4Ljg0ODk1MCAzLjgyMjkyMCAxMC41NDY4NzUgMy4wOTM3NTAgQzEyLjI0NDgwMCAyLjM2NDU4MCAxNC4wNjI0OTAgMi4wMDAwMDAgMTYuMDAwMDAwIDIuMDAwMDAwIEMxNy45Mzc1MTAgMi4wMDAwMDAgMTkuNzU1MjAwIDIuMzY0NTgwIDIxLjQ1MzEyNSAzLjA5Mzc1MCBDMjMuMTUxMDUwIDMuODIyOTIwIDI0LjYzNTQxMCA0LjgyMjkxMCAyNS45MDYyNTAgNi4wOTM3NTAgQzI3LjE3NzA5MCA3LjM2NDU5MCAyOC4xNzcwODAgOC44NDg5NTAgMjguOTA2MjUwIDEwLjU0Njg3NSBDMjkuNjM1NDIwIDEyLjI0NDgwMCAzMC4wMDAwMDAgMTQuMDYyNDkwIDMwLjAwMDAwMCAxNi4wMDAwMDAgQzMwLjAwMDAwMCAxNy45Mzc1MTAgMjkuNjM1NDIwIDE5Ljc1NTIwMCAyOC45MDYyNTAgMjEuNDUzMTI1IEMyOC4xNzcwODAgMjMuMTUxMDUwIDI3LjE3NzA5MCAyNC42MzU0MTAgMjUuOTA2MjUwIDI1LjkwNjI1MCBDMjQuNjM1NDEwIDI3LjE3NzA5MCAyMy4xNTEwNTAgMjguMTc3MDgwIDIxLjQ1MzEyNSAyOC45MDYyNTAgQzE5Ljc1NTIwMCAyOS42MzU0MjAgMTcuOTM3NTEwIDMwLjAwMDAwMCAxNi4wMDAwMDAgMzAuMDAwMDAwIFogTTIyLjAzMTI1MCA5LjA2MjUwMCBDMjEuNzgxMjQ5IDguOTM3NDk5IDIxLjUyNjA0MyA4LjkwNjI1MCAyMS4yNjU2MjUgOC45Njg3NTAgQzIxLjAwNTIwNyA5LjAzMTI1MCAyMC44MDIwODQgOS4xODc0OTkgMjAuNjU2MjUwIDkuNDM3NTAwIEwxNC4yNTAwMDAgMjAuNTAwMDAwIEwxMC42ODc1MDAgMTcuMjE4NzUwIEMxMC40OTk5OTkgMTcuMDEwNDE2IDEwLjI2NTYyNiAxNi45MDEwNDIgOS45ODQzNzUgMTYuODkwNjI1IEM5LjcwMzEyNCAxNi44ODAyMDggOS40Njg3NTEgMTYuOTY4NzQ5IDkuMjgxMjUwIDE3LjE1NjI1MCBDOS4wNzI5MTYgMTcuMzQzNzUxIDguOTYzNTQyIDE3LjU3ODEyNCA4Ljk1MzEyNSAxNy44NTkzNzUgQzguOTQyNzA4IDE4LjE0MDYyNiA5LjAzMTI0OSAxOC4zNzQ5OTkgOS4yMTg3NTAgMTguNTYyNTAwIEwxMy44MTI1MDAgMjIuNzgxMjUwIEMxNC4wMDAwMDEgMjIuOTg5NTg0IDE0LjIyOTE2NSAyMy4wOTg5NTggMTQuNTAwMDAwIDIzLjEwOTM3NSBDMTQuNzcwODM1IDIzLjExOTc5MiAxNS4wMTA0MTYgMjMuMDMxMjUxIDE1LjIxODc1MCAyMi44NDM3NTAgQzE1LjIzOTU4MyAyMi44MjI5MTcgMTUuNjI0OTk2IDIyLjE2MTQ2NSAxNi4zNzUwMDAgMjAuODU5Mzc1IEMxNy4xMjUwMDQgMTkuNTU3Mjg1IDE3Ljk0NzkxMiAxOC4xMzU0MjQgMTguODQzNzUwIDE2LjU5Mzc1MCBDMTkuNzM5NTg4IDE1LjA1MjA3NiAyMC41NTcyODggMTMuNjQwNjMxIDIxLjI5Njg3NSAxMi4zNTkzNzUgQzIyLjAzNjQ2MiAxMS4wNzgxMTkgMjIuNDA2MjUwIDEwLjQzNzUwMCAyMi40MDYyNTAgMTAuNDM3NTAwIEMyMi41MzEyNTEgMTAuMTg3NDk5IDIyLjU1NzI5MiA5LjkzMjI5MyAyMi40ODQzNzUgOS42NzE4NzUgQzIyLjQxMTQ1OCA5LjQxMTQ1NyAyMi4yNjA0MTggOS4yMDgzMzQgMjIuMDMxMjUwIDkuMDYyNTAwIFoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=") center / contain no-repeat;
            mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2LjAwMDAwMCAtMC4wMDAwMDAgQzEzLjc5MTY1NiAtMC4wMDAwMDAgMTEuNzEzNTUxIDAuNDE2NjYzIDkuNzY1NjI1IDEuMjUwMDAwIEM3LjgxNzY5OSAyLjA4MzMzNyA2LjExOTc5OSAzLjIyMzk1MSA0LjY3MTg3NSA0LjY3MTg3NSBDMy4yMjM5NTEgNi4xMTk3OTkgMi4wODMzMzcgNy44MTc2OTkgMS4yNTAwMDAgOS43NjU2MjUgQzAuNDE2NjYzIDExLjcxMzU1MSAwLjAwMDAwMCAxMy43OTE2NTYgMC4wMDAwMDAgMTYuMDAwMDAwIEMwLjAwMDAwMCAxOC4yMDgzNDQgMC40MTY2NjMgMjAuMjg2NDQ5IDEuMjUwMDAwIDIyLjIzNDM3NSBDMi4wODMzMzcgMjQuMTgyMzAxIDMuMjIzOTUxIDI1Ljg4MDIwMSA0LjY3MTg3NSAyNy4zMjgxMjUgQzYuMTE5Nzk5IDI4Ljc3NjA0OSA3LjgxNzY5OSAyOS45MTY2NjMgOS43NjU2MjUgMzAuNzUwMDAwIEMxMS43MTM1NTEgMzEuNTgzMzM3IDEzLjc5MTY1NiAzMi4wMDAwMDAgMTYuMDAwMDAwIDMyLjAwMDAwMCBDMTguMjA4MzQ0IDMyLjAwMDAwMCAyMC4yODY0NDkgMzEuNTgzMzM3IDIyLjIzNDM3NSAzMC43NTAwMDAgQzI0LjE4MjMwMSAyOS45MTY2NjMgMjUuODgwMjAxIDI4Ljc3NjA0OSAyNy4zMjgxMjUgMjcuMzI4MTI1IEMyOC43NzYwNDkgMjUuODgwMjAxIDI5LjkxNjY2MyAyNC4xODIzMDEgMzAuNzUwMDAwIDIyLjIzNDM3NSBDMzEuNTgzMzM3IDIwLjI4NjQ0OSAzMi4wMDAwMDAgMTguMjA4MzQ0IDMyLjAwMDAwMCAxNi4wMDAwMDAgQzMyLjAwMDAwMCAxMy43OTE2NTYgMzEuNTgzMzM3IDExLjcxMzU1MSAzMC43NTAwMDAgOS43NjU2MjUgQzI5LjkxNjY2MyA3LjgxNzY5OSAyOC43NzYwNDkgNi4xMTk3OTkgMjcuMzI4MTI1IDQuNjcxODc1IEMyNS44ODAyMDEgMy4yMjM5NTEgMjQuMTgyMzAxIDIuMDgzMzM3IDIyLjIzNDM3NSAxLjI1MDAwMCBDMjAuMjg2NDQ5IDAuNDE2NjYzIDE4LjIwODM0NCAtMC4wMDAwMDAgMTYuMDAwMDAwIC0wLjAwMDAwMCBaIE0xNi4wMDAwMDAgMzAuMDAwMDAwIEMxNC4wNjI0OTAgMzAuMDAwMDAwIDEyLjI0NDgwMCAyOS42MzU0MjAgMTAuNTQ2ODc1IDI4LjkwNjI1MCBDOC44NDg5NTAgMjguMTc3MDgwIDcuMzY0NTkwIDI3LjE3NzA5MCA2LjA5Mzc1MCAyNS45MDYyNTAgQzQuODIyOTEwIDI0LjYzNTQxMCAzLjgyMjkyMCAyMy4xNTEwNTAgMy4wOTM3NTAgMjEuNDUzMTI1IEMyLjM2NDU4MCAxOS43NTUyMDAgMi4wMDAwMDAgMTcuOTM3NTEwIDIuMDAwMDAwIDE2LjAwMDAwMCBDMi4wMDAwMDAgMTQuMDYyNDkwIDIuMzY0NTgwIDEyLjI0NDgwMCAzLjA5Mzc1MCAxMC41NDY4NzUgQzMuODIyOTIwIDguODQ4OTUwIDQuODIyOTEwIDcuMzY0NTkwIDYuMDkzNzUwIDYuMDkzNzUwIEM3LjM2NDU5MCA0LjgyMjkxMCA4Ljg0ODk1MCAzLjgyMjkyMCAxMC41NDY4NzUgMy4wOTM3NTAgQzEyLjI0NDgwMCAyLjM2NDU4MCAxNC4wNjI0OTAgMi4wMDAwMDAgMTYuMDAwMDAwIDIuMDAwMDAwIEMxNy45Mzc1MTAgMi4wMDAwMDAgMTkuNzU1MjAwIDIuMzY0NTgwIDIxLjQ1MzEyNSAzLjA5Mzc1MCBDMjMuMTUxMDUwIDMuODIyOTIwIDI0LjYzNTQxMCA0LjgyMjkxMCAyNS45MDYyNTAgNi4wOTM3NTAgQzI3LjE3NzA5MCA3LjM2NDU5MCAyOC4xNzcwODAgOC44NDg5NTAgMjguOTA2MjUwIDEwLjU0Njg3NSBDMjkuNjM1NDIwIDEyLjI0NDgwMCAzMC4wMDAwMDAgMTQuMDYyNDkwIDMwLjAwMDAwMCAxNi4wMDAwMDAgQzMwLjAwMDAwMCAxNy45Mzc1MTAgMjkuNjM1NDIwIDE5Ljc1NTIwMCAyOC45MDYyNTAgMjEuNDUzMTI1IEMyOC4xNzcwODAgMjMuMTUxMDUwIDI3LjE3NzA5MCAyNC42MzU0MTAgMjUuOTA2MjUwIDI1LjkwNjI1MCBDMjQuNjM1NDEwIDI3LjE3NzA5MCAyMy4xNTEwNTAgMjguMTc3MDgwIDIxLjQ1MzEyNSAyOC45MDYyNTAgQzE5Ljc1NTIwMCAyOS42MzU0MjAgMTcuOTM3NTEwIDMwLjAwMDAwMCAxNi4wMDAwMDAgMzAuMDAwMDAwIFogTTIyLjAzMTI1MCA5LjA2MjUwMCBDMjEuNzgxMjQ5IDguOTM3NDk5IDIxLjUyNjA0MyA4LjkwNjI1MCAyMS4yNjU2MjUgOC45Njg3NTAgQzIxLjAwNTIwNyA5LjAzMTI1MCAyMC44MDIwODQgOS4xODc0OTkgMjAuNjU2MjUwIDkuNDM3NTAwIEwxNC4yNTAwMDAgMjAuNTAwMDAwIEwxMC42ODc1MDAgMTcuMjE4NzUwIEMxMC40OTk5OTkgMTcuMDEwNDE2IDEwLjI2NTYyNiAxNi45MDEwNDIgOS45ODQzNzUgMTYuODkwNjI1IEM5LjcwMzEyNCAxNi44ODAyMDggOS40Njg3NTEgMTYuOTY4NzQ5IDkuMjgxMjUwIDE3LjE1NjI1MCBDOS4wNzI5MTYgMTcuMzQzNzUxIDguOTYzNTQyIDE3LjU3ODEyNCA4Ljk1MzEyNSAxNy44NTkzNzUgQzguOTQyNzA4IDE4LjE0MDYyNiA5LjAzMTI0OSAxOC4zNzQ5OTkgOS4yMTg3NTAgMTguNTYyNTAwIEwxMy44MTI1MDAgMjIuNzgxMjUwIEMxNC4wMDAwMDEgMjIuOTg5NTg0IDE0LjIyOTE2NSAyMy4wOTg5NTggMTQuNTAwMDAwIDIzLjEwOTM3NSBDMTQuNzcwODM1IDIzLjExOTc5MiAxNS4wMTA0MTYgMjMuMDMxMjUxIDE1LjIxODc1MCAyMi44NDM3NTAgQzE1LjIzOTU4MyAyMi44MjI5MTcgMTUuNjI0OTk2IDIyLjE2MTQ2NSAxNi4zNzUwMDAgMjAuODU5Mzc1IEMxNy4xMjUwMDQgMTkuNTU3Mjg1IDE3Ljk0NzkxMiAxOC4xMzU0MjQgMTguODQzNzUwIDE2LjU5Mzc1MCBDMTkuNzM5NTg4IDE1LjA1MjA3NiAyMC41NTcyODggMTMuNjQwNjMxIDIxLjI5Njg3NSAxMi4zNTkzNzUgQzIyLjAzNjQ2MiAxMS4wNzgxMTkgMjIuNDA2MjUwIDEwLjQzNzUwMCAyMi40MDYyNTAgMTAuNDM3NTAwIEMyMi41MzEyNTEgMTAuMTg3NDk5IDIyLjU1NzI5MiA5LjkzMjI5MyAyMi40ODQzNzUgOS42NzE4NzUgQzIyLjQxMTQ1OCA5LjQxMTQ1NyAyMi4yNjA0MTggOS4yMDgzMzQgMjIuMDMxMjUwIDkuMDYyNTAwIFoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=") center / contain no-repeat;
}
.dvc-ms-lp--v-none     .dvc-ms-lp__list li { padding-left: 0; }
.dvc-ms-lp--v-none     .dvc-ms-lp__list li::before { content: none; }
/* Color de la viñeta (selector al lado del de la forma): azul = default (base,
   #0a84ff). negro y "destacado" sobreescriben tanto el glyph (color) como el
   check-en-círculo (background-color de la máscara). Van DESPUÉS de las reglas
   --v-* (incl. guion) para ganar por orden a misma especificidad. */
.dvc-ms-lp--vc-negro .dvc-ms-lp__list li::before { color: #111114; }
.dvc-ms-lp--vc-negro.dvc-ms-lp--v-circlecheck .dvc-ms-lp__list li::before { background-color: #111114; }
.dvc-ms-lp--vc-feat  .dvc-ms-lp__list li::before { color: var(--ms-feat-bg, #0a84ff); }
.dvc-ms-lp--vc-feat.dvc-ms-lp--v-circlecheck  .dvc-ms-lp__list li::before { background-color: var(--ms-feat-bg, #0a84ff); }
/* Igual que el desplegable, NO tiene versión noche: el card se queda claro
   también con la tarjeta en modo noche (el pie oscuro/destacado no cambia). */
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-lp__panel { background: rgba(255, 255, 255, 0.92); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-lp__list li { color: rgba(0, 0, 0, 0.82); }

/* ==========================================================================
   10. BLOQUE: GALERÍA (v2) — rejilla 3×N de fotos cuadradas (máx 9).
   Al tocar una foto, microsite.js abre el visor .dvc-ms-galbox.
   ========================================================================== */
.dvc-ms-gal { grid-column: 1 / -1; }
.dvc-ms-gal__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--ms-radius-card);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.dvc-ms-gal__item {
    display: block;
    padding: 0;
    /* Mismo borde que las tarjetas-link: separa las fotos de fondo blanco
       del fondo blanco de la rejilla (decisión Paco). */
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.06);
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s var(--ms-spring);
}
.dvc-ms-gal__item:active { transform: scale(0.96); }
.dvc-ms-gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-gal__grid {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-gal__item { border-color: rgba(255, 255, 255, 0.15); }

/* ── Visor a pantalla completa (carrusel con scroll-snap nativo) ── */
.dvc-ms-galbox {
    position: fixed;
    inset: 0;
    z-index: 1300;                 /* por encima del sheet (1000) y su lightbox */
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.93);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.dvc-ms-galbox.is-open { opacity: 1; pointer-events: auto; }
.dvc-ms-galbox__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
}
.dvc-ms-galbox__count { color: rgba(255, 255, 255, 0.8); font-size: .85rem; font-variant-numeric: tabular-nums; }
.dvc-ms-galbox__close {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer;
    font-size: .9rem;
}
.dvc-ms-galbox__track {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dvc-ms-galbox__track::-webkit-scrollbar { display: none; }
.dvc-ms-galbox__slide {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
}
.dvc-ms-galbox__slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}
.dvc-ms-galbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer;
    font-size: .9rem;
}
.dvc-ms-galbox__nav--prev { left: 10px; }
.dvc-ms-galbox__nav--next { right: 10px; }
.dvc-ms-galbox__dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
}
.dvc-ms-galbox__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.dvc-ms-galbox__dot.is-on { background: #fff; }

/* ==========================================================================
   12. BLOQUE: HORARIO (v2) — filas agrupadas por días iguales + pastilla
   "Abierto ahora / Cerrado / Con cita previa" (la calcula microsite.js con
   la hora local del visitante; hasta entonces va hidden).
   ========================================================================== */
.dvc-ms-hor { grid-column: 1 / -1; container-type: inline-size; }
/* Etiquetas de día responsivas POR CONTENEDOR (no por viewport: el preview de
   escritorio mete la tarjeta en un marco estrecho con viewport grande). Ancho
   holgado → "Lunes – Viernes"; estrecho → "L – V" para que el horario quepa
   en una línea. Navegadores sin @container se quedan con la versión larga. */
.dvc-ms-hor__dia-corta { display: none; }
@container (max-width: 348px) {
    .dvc-ms-hor__dia-full  { display: none; }
    .dvc-ms-hor__dia-corta { display: inline; }
}
.dvc-ms-hor__card {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--ms-radius-card);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: 14px;
}
.dvc-ms-hor__head {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 1rem;
    margin-bottom: 8px;
}
.dvc-ms-hor__head i { opacity: 0.7; }
.dvc-ms-hor__badge {
    margin-left: auto;
    font-size: .72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
    white-space: nowrap;
}
.dvc-ms-hor__badge--open   { background: rgba(52, 199, 89, 0.18);  color: #1d7a3c; }
.dvc-ms-hor__badge--closed { background: rgba(255, 59, 48, 0.14);  color: #b3362a; }
.dvc-ms-hor__badge--cita   { background: rgba(255, 149, 0, 0.18);  color: #9a5b00; }
.dvc-ms-hor__row {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: .9rem; line-height: 1.4;
    padding: 3px 0;
}
.dvc-ms-hor__row span:first-child { color: rgba(0, 0, 0, 0.75); }
.dvc-ms-hor__row span:last-child  { font-weight: 600; text-align: right; }
.dvc-ms-hor__row--sec span:last-child { font-weight: 400; color: rgba(0, 0, 0, 0.45); }
.dvc-ms-hor__nota {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin-top: 8px; padding-top: 8px;
    font-size: .78rem; color: rgba(0, 0, 0, 0.6);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-hor__card {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-hor__row span:first-child { color: rgba(255, 255, 255, 0.75); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-hor__row--sec span:last-child { color: rgba(255, 255, 255, 0.45); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-hor__nota { border-top-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-hor__badge--open   { background: rgba(52, 199, 89, 0.22);  color: #7ce29a; }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-hor__badge--closed { background: rgba(255, 59, 48, 0.22);  color: #ff8a80; }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-hor__badge--cita   { background: rgba(255, 149, 0, 0.22);  color: #ffc56e; }

/* ==========================================================================
   13. BLOQUE: CARD DE TEXTO (v2) — informativa estilo SumUp: icono opcional
   arriba, título y párrafo. No es clicable (para eso están los links). Los
   saltos de línea del editor se respetan con pre-line.
   ========================================================================== */
.dvc-ms-txtcard {
    padding: 18px 16px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--ms-radius-card);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.dvc-ms-txtcard__ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.25rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 1);
    margin-bottom: 12px;
}
.dvc-ms-txtcard__title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.dvc-ms-txtcard__text  { margin: 0; font-size: .86rem; line-height: 1.45; color: rgba(0, 0, 0, 0.75); white-space: pre-line; }

/* Monoespaciado (```texto``` en el editor, estilo WhatsApp): mono del sistema,
   sin caja — hereda el color del texto. Vale para la card de texto y para los
   puntos del listapro (LinkBIO reutiliza esta hoja). */
.dvc-ms-txtcard__text code,
.dvc-ms-lp__list code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
}

.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-txtcard {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-txtcard__ic {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 1);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-txtcard__text { color: rgba(255, 255, 255, 0.75); }

/* Dentro del desplegable: sin blur doble (rendimiento iOS) y SIEMPRE versión
   clara, igual que el resto de hijos del acordeón (decisión Paco 10-jun). */
.dvc-ms-acc__body .dvc-ms-txtcard {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.6);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-txtcard {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 1);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-txtcard__ic {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 1);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-txtcard__text { color: rgba(0, 0, 0, 0.75); }

/* Card de texto SIN recuadro (checkbox "Mostrar recuadro" del editor →
   card=false): fuera la caja (fondo/borde/blur/padding); texto e icono
   conservan los colores de tema de las reglas de arriba. Portado de LinkBIO,
   donde nació la opción (el microsite guardaba el dato pero lo ignoraba).
   Van TODAS las variantes (noche / dentro del desplegable) para ganar en
   especificidad a sus reglas de caja correspondientes. */
.dvc-ms-txtcard--plain,
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-txtcard--plain,
.dvc-ms-acc__body .dvc-ms-txtcard--plain,
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-txtcard--plain {
    padding: 0;
    border: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.dvc-ms-txtcard--plain .dvc-ms-txtcard__ic,
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-txtcard--plain .dvc-ms-txtcard__ic,
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-acc__body .dvc-ms-txtcard--plain .dvc-ms-txtcard__ic {
    /* inline-grid: sin el ancho fijo del chip, el grid a bloque se estiraba a
       todo el ancho y place-items dejaba el icono CENTRADO; inline se encoge
       al contenido y queda a la izquierda, alineado con el título. */
    display: inline-grid;
    background: none;
    border: none;
    width: auto;
    height: auto;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

/* ───────────────────────────────────────────────────────────────────────────
   ACCIONES RÁPIDAS — fila de botones glass (Llamar / WhatsApp / Email).
   Salen AUTO de los datos de contacto de la tarjeta (o del valor propio del
   bloque). Mismo lenguaje glass que .dvc-ms-link, en columna y repartidos.
   ─────────────────────────────────────────────────────────────────────────── */
.dvc-ms-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.dvc-ms-action {
    flex: 1 1 0; min-width: 90px;
    box-sizing: border-box;   /* sheet fuera del reset global de .dvc-classic */
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--ms-radius-card);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: inherit; text-decoration: none;
    transition: transform .2s var(--ms-spring), border-color .2s ease;
}
.dvc-ms-action:hover { transform: translateY(-2px); border-color: rgba(0, 0, 0, 0.4); }
.dvc-ms-action__ic  { font-size: 1.15rem; }
.dvc-ms-action__lbl { font-size: .8rem; font-weight: 600; }

.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-action {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 1);
}

/* ───────────────────────────────────────────────────────────────────────────
   CÓDIGO PROMO — tarjeta centrada con descuento grande, descripción y el
   código en píldora de borde discontinuo (se copia al tocarla; microsite.js).
   ─────────────────────────────────────────────────────────────────────────── */
.dvc-ms-promo {
    box-sizing: border-box;   /* sheet fuera del reset global de .dvc-classic */
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--ms-radius-card);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: 20px 16px 18px; text-align: center;
}
.dvc-ms-promo__off  { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.dvc-ms-promo__desc { font-size: .85rem; opacity: .72; margin-top: 9px; }
.dvc-ms-promo__code {
    margin-top: 16px; display: inline-flex; align-items: center; gap: 9px;
    border: 1.5px dashed rgba(0, 0, 0, 0.45); background: transparent; color: inherit;
    border-radius: 12px; padding: 11px 20px; cursor: pointer;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: .05em;
    transition: border-color .15s ease, background .15s ease;
}
.dvc-ms-promo__code:hover { background: rgba(0, 0, 0, 0.05); }
.dvc-ms-promo__code.is-copied { border-color: #34a853; background: rgba(52, 168, 83, 0.14); }
.dvc-ms-promo__hint { font-size: .72rem; opacity: .5; margin-top: 9px; }

.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-promo {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 1);
}
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-promo__code { border-color: rgba(255, 255, 255, 0.5); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-promo__code:hover { background: rgba(255, 255, 255, 0.06); }
.dvc-ms-overlay[data-ms-theme="night"] .dvc-ms-promo__code.is-copied { border-color: #5dcaa5; background: rgba(93, 202, 165, 0.16); }