/* ==========================================================================
   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: rgba(0, 0, 0, 0.32);
    color: #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;
}
.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: 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); }

/* ── Estilo PROPIO del botón disparador (independiente del "Estilo de los
   botones" del paso 4). Colores --ms-btn-bg / --ms-btn-fg llegan inline desde
   el render. 'glass' (default) NO se redefine: conserva el look base día/noche.
   Selectores con doble clase (.dvc-ms-trigger.dvc-ms-trigger--st-…) para ganar
   en especificidad a las reglas de noche de arriba en ambos temas. ── */
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-fill {
    background: var(--ms-btn-bg, rgba(0, 0, 0, 0.32));
    color: var(--ms-btn-fg, #fff);
    border: none;
}
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-fill:hover { filter: brightness(1.08); }

.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-outline {
    background: transparent;
    color: var(--ms-btn-bg, #fff);
    border: max(1px, calc(0.006 * var(--u))) solid var(--ms-btn-bg, #fff);
}
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-outline:hover {
    background: color-mix(in srgb, var(--ms-btn-bg, #fff) 14%, transparent);
}

.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-ghost {
    background: transparent;
    color: var(--ms-btn-bg, #fff);
    border: none;
}
.dvc-classic .dvc-ms-trigger.dvc-ms-trigger--st-ghost:hover {
    background: color-mix(in srgb, var(--ms-btn-bg, #fff) 10%, transparent);
}

/* ── 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(--ms-btn-bg,#34c759); } 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); } }
.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; }
@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; }

[data-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);
}


/* ==========================================================================
   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);
}
[data-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); }
[data-theme="night"] .dvc-ms-close { background: rgba(255, 255, 255, 0.15); }
[data-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);
}
[data-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);
}
[data-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);
}
[data-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%;
    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); }
[data-theme="night"] .dvc-ms-imgcard--card { background: rgba(0, 0, 0, 0.50); border-color: rgba(255, 255, 255, 0.15); }
[data-theme="night"] .dvc-ms-imgcard__body p { color: rgba(255, 255, 255, 0.75); }


/* ==========================================================================
   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; }

[data-theme="night"] .dvc-ms-link {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
[data-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);
}
[data-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. */
[data-theme="night"] .dvc-ms-link--feat {
    --ms-feat-bg: #f4f4f5;
    --ms-feat-fg: #111114;
    background: var(--ms-feat-bg);
    color: var(--ms-feat-fg);
}
[data-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); }

[data-theme="night"] .dvc-ms-tile {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
[data-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; }
[data-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. */
[data-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);
}
[data-theme="night"] .dvc-ms-acc__body .dvc-ms-link:not(.dvc-ms-link--feat),
[data-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);
}
[data-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);
}
[data-theme="night"] .dvc-ms-acc__body .dvc-ms-link__txt p,
[data-theme="night"] .dvc-ms-acc__body .dvc-ms-imgcard__body p,
[data-theme="night"] .dvc-ms-acc__body .dvc-ms-section-title { color: rgba(0, 0, 0, 0.75); }
[data-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) */
[data-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);
}
[data-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);
}

/* ==========================================================================
   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; }
[data-theme="night"] .dvc-ms-gal__grid {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
[data-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);
}
[data-theme="night"] .dvc-ms-hor__card {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="night"] .dvc-ms-hor__row span:first-child { color: rgba(255, 255, 255, 0.75); }
[data-theme="night"] .dvc-ms-hor__row--sec span:last-child { color: rgba(255, 255, 255, 0.45); }
[data-theme="night"] .dvc-ms-hor__nota { border-top-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); }
[data-theme="night"] .dvc-ms-hor__badge--open   { background: rgba(52, 199, 89, 0.22);  color: #7ce29a; }
[data-theme="night"] .dvc-ms-hor__badge--closed { background: rgba(255, 59, 48, 0.22);  color: #ff8a80; }
[data-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; }

[data-theme="night"] .dvc-ms-txtcard {
    background: rgba(0, 0, 0, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
}
[data-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);
}
[data-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);
}
[data-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);
}
[data-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);
}
[data-theme="night"] .dvc-ms-acc__body .dvc-ms-txtcard__text { color: rgba(0, 0, 0, 0.75); }