/* Tarjeta de invitación exportable — estilo mármol elegante */
.tarjeta-invitacion-export-wrap {
    position: fixed;
    left: -9999px;
    top: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}

.tarjeta-invitacion {
    width: 1080px;
    height: 1620px;
    position: relative;
    overflow: hidden;
    --tarjeta-acento: #d4af37;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 246, 244, 0.98) 40%, rgba(240, 238, 235, 0.95) 100%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(180, 175, 170, 0.03) 2px,
            rgba(180, 175, 170, 0.03) 4px
        ),
        #faf9f7;
    font-family: 'Montserrat', sans-serif;
    color: #1a1a1a;
    box-sizing: border-box;
}

/* Temas de fondo */
.tema-marmol { background-color: #faf9f7; }

.tema-romantico {
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 182, 193, 0.35) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(255, 110, 180, 0.25) 0%, transparent 50%),
        linear-gradient(180deg, #fff8fb 0%, #fff0f5 100%);
}

.tema-dorado {
    background:
        radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.2) 0%, transparent 55%),
        linear-gradient(180deg, #fffef8 0%, #f9f4e8 100%);
}

.tema-minimal {
    background: #ffffff;
}

.tema-nocturno {
    background:
        radial-gradient(circle at 30% 20%, rgba(217, 70, 239, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(30, 208, 213, 0.12) 0%, transparent 45%),
        linear-gradient(180deg, #1a0a2e 0%, #0f172a 100%);
    color: #f5f5f5;
}

.tema-nocturno .tarjeta-invitado,
.tema-nocturno .tarjeta-novios,
.tema-nocturno .tarjeta-footer { color: #fff; }

.tema-nocturno .tarjeta-frase,
.tema-nocturno .tarjeta-celebrar,
.tema-nocturno .tarjeta-invitado-acompanante,
.tema-nocturno .tarjeta-lugar,
.tema-nocturno .tarjeta-direccion,
.tema-nocturno .tarjeta-hora { color: #e8e8e8; }

.tema-nocturno .tarjeta-fecha-linea { background: var(--tarjeta-acento); }

/* Bordes ornamentales */
.tarjeta-borde-ornamental {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    border: 2px solid var(--tarjeta-acento);
}

.tarjeta-borde-ext {
    inset: 24px;
    opacity: 0.55;
}

.tarjeta-borde-int {
    inset: 38px;
    opacity: 0.35;
    border-style: dashed;
}

/* Brillo dorado esquinas */
.tarjeta-gold-tl,
.tarjeta-gold-br,
.tarjeta-gold-tr,
.tarjeta-gold-bl {
    position: absolute;
    width: 260px;
    height: 260px;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--tarjeta-acento) 35%, transparent) 0%, transparent 70%);
}

.tarjeta-gold-tl { top: -50px; right: -50px; }
.tarjeta-gold-br { bottom: -50px; left: -50px; }
.tarjeta-gold-tr { top: -40px; left: -40px; opacity: 0.7; }
.tarjeta-gold-bl { bottom: -40px; right: -40px; opacity: 0.65; }

/* Corazones decorativos */
.tarjeta-capas-corazones {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.tarjeta-corazon {
    position: absolute;
    font-size: 22px;
    color: var(--tarjeta-acento);
    transform: translate(-50%, -50%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Perlas */
.tarjeta-capas-perlas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.tarjeta-perla {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, var(--tarjeta-acento));
    opacity: 0.65;
    transform: translateX(-50%);
}

/* Divisores */
.tarjeta-divisor-superior {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 6;
    color: var(--tarjeta-acento);
    font-size: 18px;
}

.tarjeta-divisor-superior span {
    width: 80px;
    height: 1px;
    background: var(--tarjeta-acento);
    opacity: 0.6;
}

.tarjeta-divisor-inferior {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 16px;
    color: var(--tarjeta-acento);
    font-size: 14px;
    opacity: 0.75;
}

.tarjeta-flor-tr {
    top: 30px;
    right: 20px;
    left: auto;
    transform: rotate(10deg) scaleX(-1);
}

.tarjeta-invitacion * {
    box-sizing: border-box;
}

/* Brillo dorado esquinas — legacy removed duplicate block below */

/* Flores decorativas (CSS) */
.tarjeta-flor {
    position: absolute;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.85;
}

.tarjeta-flor-tl { top: 30px; left: 20px; transform: rotate(-15deg); }
.tarjeta-flor-br { bottom: 80px; right: 20px; transform: rotate(20deg) scaleX(-1); }

.tarjeta-flor::before,
.tarjeta-flor::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.tarjeta-flor::before {
    width: 28px;
    height: 28px;
    top: 46px;
    left: 46px;
    background: #2d2d2d;
    z-index: 3;
}

.tarjeta-petalo {
    position: absolute;
    width: 22px;
    height: 36px;
    background: #fff;
    border-radius: 50% 50% 45% 45%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tarjeta-petalo-1 { top: 20px; left: 49px; transform: rotate(0deg); }
.tarjeta-petalo-2 { top: 35px; left: 68px; transform: rotate(72deg); }
.tarjeta-petalo-3 { top: 55px; left: 62px; transform: rotate(144deg); }
.tarjeta-petalo-4 { top: 55px; left: 36px; transform: rotate(216deg); }
.tarjeta-petalo-5 { top: 35px; left: 30px; transform: rotate(288deg); }

.tarjeta-hoja {
    position: absolute;
    width: 40px;
    height: 18px;
    background: #5a8f5a;
    border-radius: 0 80% 0 80%;
    opacity: 0.75;
}

.tarjeta-hoja-1 { top: 78px; left: 28px; transform: rotate(-30deg); }
.tarjeta-hoja-2 { top: 82px; left: 58px; transform: rotate(25deg) scaleX(-1); }

/* Contenido */
.tarjeta-contenido {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 70px 60px 80px;
    text-align: center;
}

.tarjeta-invitado {
    font-family: 'Great Vibes', 'Cormorant Garamond', cursive;
    font-size: 52px;
    line-height: 1.2;
    margin: 0 0 8px;
    color: #1a1a1a;
    max-width: 900px;
}

.tarjeta-invitado-acompanante {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 30px;
    color: #444;
    margin: 0 0 12px;
    max-width: 860px;
}

.tarjeta-frase {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 28px;
    color: #444;
    margin: 0 0 24px;
}

.tarjeta-novios {
    font-family: 'Great Vibes', 'Cormorant Garamond', cursive;
    font-size: 72px;
    line-height: 1.15;
    margin: 0 0 32px;
    color: #1a1a1a;
}

.tarjeta-foto-wrap {
    position: relative;
    width: 420px;
    height: 420px;
    margin: 0 auto 36px;
    flex-shrink: 0;
}

.tarjeta-foto-marco {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid color-mix(in srgb, var(--tarjeta-acento) 55%, transparent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    background: #eee;
}

.tarjeta-foto-marco.marco-doble {
    border: 5px solid var(--tarjeta-acento);
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.9),
        0 0 0 12px color-mix(in srgb, var(--tarjeta-acento) 40%, transparent),
        0 16px 48px rgba(0, 0, 0, 0.15);
}

.forma-oval .tarjeta-foto-marco { border-radius: 50% / 42%; }
.forma-redondeado .tarjeta-foto-marco { border-radius: 24px; }
.forma-oval .tarjeta-foto-wrap { width: 380px; height: 460px; }
.forma-redondeado .tarjeta-foto-wrap { width: 440px; height: 440px; }

.tarjeta-foto-marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tarjeta-flores-base {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.tarjeta-flor-mini {
    width: 36px;
    height: 36px;
    position: relative;
}

.tarjeta-flor-mini::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #2d2d2d;
    border-radius: 50%;
    top: 13px;
    left: 13px;
    z-index: 2;
}

.tarjeta-mini-petalo {
    position: absolute;
    width: 12px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tarjeta-celebrar {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 26px;
    color: #555;
    margin: 0 0 28px;
}

.tarjeta-fecha-bloque {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    width: 100%;
    max-width: 700px;
}

.tarjeta-fecha-linea {
    flex: 1;
    height: 1px;
    background: var(--tarjeta-acento);
    opacity: 0.7;
    max-width: 120px;
}

.tarjeta-fecha-centro {
    padding: 0 28px;
    text-align: center;
}

.tarjeta-fecha-texto {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.3;
}

.tarjeta-hora {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #333;
    margin: 0 0 20px;
}

.tarjeta-lugar {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    color: #333;
    max-width: 780px;
    margin: 0 0 8px;
}

.tarjeta-direccion {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #555;
    max-width: 780px;
    margin: 0 0 32px;
}

.tarjeta-footer {
    font-family: 'Great Vibes', 'Cormorant Garamond', cursive;
    font-size: 38px;
    color: #1a1a1a;
    margin-top: auto;
}

/* Vista previa en página */
.tarjeta-preview-mini {
    max-width: 220px;
    margin: 1rem auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.tarjeta-linea-extra {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: #555;
    margin: 0 0 20px;
    max-width: 760px;
}

.tarjeta-icono {
    font-style: normal;
    margin-right: 6px;
}

/* Admin — vista previa escalada */
.admin-tarjeta-preview-wrap {
    overflow: hidden;
    border-radius: 12px;
    background: #eee;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    height: 520px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.admin-tarjeta-preview-inner {
    transform: scale(0.32);
    transform-origin: top center;
    width: 1080px;
    height: 1620px;
    pointer-events: none;
}

.admin-tarjeta-preview-inner #admin-tarjeta-preview {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    width: 1080px;
    height: 1620px;
}

.btn-descargar-invitacion {
    background: linear-gradient(135deg, #1ed0d5, #11b5b0);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.85rem 1.75rem;
    border-radius: 50px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-descargar-invitacion:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 208, 213, 0.35);
    color: #fff;
}

.btn-descargar-invitacion:disabled {
    opacity: 0.7;
    transform: none;
}

/* ===== TEMAS ADICIONALES ===== */
.tema-acuarela {
    background:
        radial-gradient(circle at 15% 20%, rgba(173, 216, 230, 0.45) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(255, 182, 193, 0.4) 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(221, 160, 221, 0.3) 0%, transparent 50%),
        linear-gradient(180deg, #fefefe 0%, #f8f4ff 100%);
}

.tema-boho {
    background:
        radial-gradient(circle at 10% 90%, rgba(139, 90, 43, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(210, 180, 140, 0.25) 0%, transparent 45%),
        linear-gradient(180deg, #faf6f0 0%, #f5ebe0 100%);
}

.tema-clasico {
    background:
        linear-gradient(180deg, #fffef9 0%, #f5f0e6 100%);
    border: none;
}

.tema-turquesa {
    background:
        radial-gradient(circle at 30% 20%, rgba(30, 208, 213, 0.22) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(17, 181, 176, 0.18) 0%, transparent 45%),
        linear-gradient(180deg, #f0fffe 0%, #e8fafa 100%);
}

.tema-lavanda {
    background:
        radial-gradient(circle at 25% 25%, rgba(200, 162, 255, 0.3) 0%, transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(230, 190, 255, 0.25) 0%, transparent 50%),
        linear-gradient(180deg, #faf8ff 0%, #f3eeff 100%);
}

.fondo-custom {
    background: var(--tarjeta-fondo-custom) !important;
}

/* Patrones de fondo */
.tarjeta-patron-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
}

.patron-puntos {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--tarjeta-acento) 40%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
}

.patron-lineas {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 12px,
        color-mix(in srgb, var(--tarjeta-acento) 12%, transparent) 12px,
        color-mix(in srgb, var(--tarjeta-acento) 12%, transparent) 13px
    );
}

.patron-floral {
    background-image:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--tarjeta-acento) 8%, transparent) 0%, transparent 8%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--tarjeta-acento) 6%, transparent) 0%, transparent 10%),
        radial-gradient(circle at 60% 20%, color-mix(in srgb, var(--tarjeta-acento) 5%, transparent) 0%, transparent 6%);
}

.patron-damasco {
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--tarjeta-acento) 6%, transparent) 20px, color-mix(in srgb, var(--tarjeta-acento) 6%, transparent) 21px),
        repeating-linear-gradient(-45deg, transparent, transparent 20px, color-mix(in srgb, var(--tarjeta-acento) 4%, transparent) 20px, color-mix(in srgb, var(--tarjeta-acento) 4%, transparent) 21px);
}

/* Tipografías */
.fuente-titulo-greatvibes .tarjeta-invitado,
.fuente-titulo-greatvibes .tarjeta-footer { font-family: 'Great Vibes', cursive; }

.fuente-titulo-playfair .tarjeta-invitado,
.fuente-titulo-playfair .tarjeta-footer { font-family: 'Playfair Display', serif; }

.fuente-titulo-cormorant .tarjeta-invitado,
.fuente-titulo-cormorant .tarjeta-footer { font-family: 'Cormorant Garamond', serif; }

.fuente-titulo-dancing .tarjeta-invitado,
.fuente-titulo-dancing .tarjeta-footer { font-family: 'Dancing Script', cursive; }

.fuente-titulo-montserrat .tarjeta-invitado,
.fuente-titulo-montserrat .tarjeta-footer { font-family: 'Montserrat', sans-serif; font-weight: 600; }

.fuente-novios-greatvibes .tarjeta-novios { font-family: 'Great Vibes', cursive; }
.fuente-novios-playfair .tarjeta-novios { font-family: 'Playfair Display', serif; }
.fuente-novios-cormorant .tarjeta-novios { font-family: 'Cormorant Garamond', serif; }
.fuente-novios-dancing .tarjeta-novios { font-family: 'Dancing Script', cursive; }
.fuente-novios-montserrat .tarjeta-novios { font-family: 'Montserrat', sans-serif; font-weight: 700; }

/* Layouts */
.layout-compacto .tarjeta-contenido { padding: 50px 50px 60px; }
.layout-compacto .tarjeta-novios { font-size: 58px; margin-bottom: 20px; }
.layout-compacto .tarjeta-invitado { font-size: 44px; }
.layout-compacto .tarjeta-foto-wrap { width: 360px; height: 360px; margin-bottom: 24px; }

.layout-moderno .tarjeta-novios { margin-bottom: 20px; }
.layout-moderno .tarjeta-invitado { margin-top: 8px; }

/* Intensidad decoraciones */
.intensidad-suave .tarjeta-capas-corazones,
.intensidad-suave .tarjeta-capas-destellos,
.intensidad-suave .tarjeta-capas-perlas { opacity: 0.45; }

.intensidad-fuerte .tarjeta-capas-corazones,
.intensidad-fuerte .tarjeta-capas-destellos { opacity: 1; }

.intensidad-fuerte .tarjeta-gold-tl,
.intensidad-fuerte .tarjeta-gold-br,
.intensidad-fuerte .tarjeta-gold-tr,
.intensidad-fuerte .tarjeta-gold-bl {
    transform: scale(1.15);
}

/* Destellos */
.tarjeta-capas-destellos {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.tarjeta-destello {
    position: absolute;
    font-size: 20px;
    color: var(--tarjeta-acento);
    transform: translate(-50%, -50%);
    text-shadow: 0 0 8px color-mix(in srgb, var(--tarjeta-acento) 50%, transparent);
}

/* Hojas decorativas */
.tarjeta-capas-hojas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.tarjeta-hoja-deco {
    position: absolute;
    width: 90px;
    height: 90px;
    opacity: 0.55;
    background:
        radial-gradient(ellipse 30px 18px at 30% 40%, #6b9b6b 0%, transparent 70%),
        radial-gradient(ellipse 25px 15px at 60% 55%, #5a8f5a 0%, transparent 70%),
        radial-gradient(ellipse 20px 12px at 45% 70%, #7aad7a 0%, transparent 70%);
}

.tarjeta-hoja-deco-tl { top: 60px; left: 40px; transform: rotate(-25deg); }
.tarjeta-hoja-deco-tr { top: 60px; right: 40px; transform: rotate(25deg) scaleX(-1); }
.tarjeta-hoja-deco-bl { bottom: 100px; left: 40px; transform: rotate(15deg); }
.tarjeta-hoja-deco-br { bottom: 100px; right: 40px; transform: rotate(-15deg) scaleX(-1); }

/* Esquinas ornamentales */
.tarjeta-esquina {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 3;
    pointer-events: none;
    border: 3px solid var(--tarjeta-acento);
    opacity: 0.65;
}

.tarjeta-esquina.tl { top: 48px; left: 48px; border-right: none; border-bottom: none; }
.tarjeta-esquina.tr { top: 48px; right: 48px; border-left: none; border-bottom: none; }
.tarjeta-esquina.bl { bottom: 48px; left: 48px; border-right: none; border-top: none; }
.tarjeta-esquina.br { bottom: 48px; right: 48px; border-left: none; border-top: none; }

/* Viñetas florales en esquinas */
.tarjeta-vineta {
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 3;
    pointer-events: none;
    opacity: 0.5;
}

.tarjeta-vineta::before,
.tarjeta-vineta::after {
    content: '❦';
    position: absolute;
    font-size: 36px;
    color: var(--tarjeta-acento);
}

.tarjeta-vineta.tl { top: 42px; left: 42px; }
.tarjeta-vineta.tr { top: 42px; right: 42px; transform: scaleX(-1); }
.tarjeta-vineta.bl { bottom: 42px; left: 42px; transform: scaleY(-1); }
.tarjeta-vineta.br { bottom: 42px; right: 42px; transform: scale(-1); }

/* Monograma */
.tarjeta-monograma {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    letter-spacing: 0.15em;
    color: var(--tarjeta-acento);
    margin: 0 0 16px;
    opacity: 0.85;
}

/* Cinta superior */
.tarjeta-cinta-superior {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    background: color-mix(in srgb, var(--tarjeta-acento) 85%, #fff);
    color: #fff;
    padding: 10px 48px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Marco foto variantes */
.marco-ornamentado::before,
.marco-ornamentado::after {
    content: '✦';
    position: absolute;
    font-size: 22px;
    color: var(--tarjeta-acento);
    z-index: 2;
}

.marco-ornamentado::before { top: -8px; left: 50%; transform: translateX(-50%); }
.marco-ornamentado::after { bottom: -8px; left: 50%; transform: translateX(-50%); }

.marco-elegante {
    border-width: 6px !important;
    border-color: var(--tarjeta-acento) !important;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--tarjeta-acento) 35%, transparent) !important;
}

.forma-corazon .tarjeta-foto-marco {
    border-radius: 0;
    clip-path: polygon(50% 92%, 6% 38%, 6% 22%, 22% 6%, 50% 28%, 78% 6%, 94% 22%, 94% 38%);
    overflow: hidden;
}

.forma-corazon .tarjeta-foto-wrap {
    width: 420px;
    height: 420px;
}

/* Tema nocturno extras */
.tema-nocturno .tarjeta-monograma,
.tema-nocturno .tarjeta-destello,
.tema-nocturno .tarjeta-esquina { color: var(--tarjeta-acento); border-color: var(--tarjeta-acento); }

.tema-nocturno .tarjeta-vineta::before,
.tema-nocturno .tarjeta-vineta::after { color: var(--tarjeta-acento); }