/**
 * NTCard — CSS Fase 2A — Flip Card Design
 * Sistema adaptativo claro/oscuro via clases ntc-mode-dark / ntc-mode-light
 * CERO colores hardcodeados — todo via CSS custom properties
 * @package NTCard | @author KROMATIX
 */

/* ── Reset total — la tarjeta toma el viewport completo ── */
html,body{margin:0;padding:0;width:100%;min-height:100%;overscroll-behavior:none;}
*,*::before,*::after{box-sizing:border-box;}

/* ── Android/iOS: quitar el resaltado azul al tocar la tarjeta ──
   La tarjeta es interactiva (tap = flip), por lo que el navegador móvil
   intenta seleccionar texto/elementos y los pinta de azul. Se desactiva la
   selección y el highlight de tap en toda la tarjeta. El texto que el usuario
   email/web del dorso son enlaces de acción (mailto/link), no texto a copiar. */
.ntc-body,
.ntc-scene,
.ntc-scene *{
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

/* ── Variables base ── */
:root{
    --ntc-btn:         #6366f1;
    --ntc-bg-front:    #1e1b4b;
    --ntc-bg-back:     #1e1b4b;
    --ntc-bg-img-front:none;
    --ntc-bg-img-back: none;
    --ntc-btn-radius:  14px;
    --ntc-qr-bg:       #f5f0e8;
    --ntc-qr-fg:       #1e1040;
    --ntc-flip-speed:  0.38s;
    --ntc-font:        -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ── Página ── */
.ntc-body{
    font-family:var(--ntc-font);
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0;
    position:relative;
    overflow:hidden;
    /* Fondo de página — toma el color primario de la plantilla */
    background:color-mix(in srgb, var(--ntc-bg-front) 60%, #000 40%);
}

/* Halos de fondo para que la página no sea plana */
.ntc-page-bg{position:fixed;inset:0;pointer-events:none;z-index:0;}
.ntc-page-glow{position:absolute;border-radius:50%;}
.ntc-page-glow-1{
    width:60vw;height:60vw;
    top:-15vw;right:-15vw;
    background:color-mix(in srgb, var(--ntc-btn) 18%, transparent);
    filter:blur(60px);
}
.ntc-page-glow-2{
    width:50vw;height:50vw;
    bottom:-10vw;left:-10vw;
    background:color-mix(in srgb, var(--ntc-bg-front) 25%, transparent);
    filter:blur(50px);
}

/* ── Escena 3D ── */
.ntc-scene{
    width:340px;
    height:740px;
    perspective:1400px;
    cursor:pointer;
    position:relative;
    z-index:1;
}

.ntc-card-inner{
    width:100%;height:100%;
    position:relative;
    transform-style:preserve-3d;
    transition:transform var(--ntc-flip-speed) cubic-bezier(0.4,0.2,0.2,1);
}

.ntc-scene.ntc-flipped .ntc-card-inner{
    transform:rotateY(180deg);
}

/* ── Caras ── */
.ntc-face{
    position:absolute;inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,0.50),0 4px 16px rgba(0,0,0,0.20);
    /* Contener todo el contenido dentro de la tarjeta */
    contain:layout;
}
.ntc-face-back{transform:rotateY(180deg);}

/* Fondo de cada cara */
.ntc-face-bg{
    width:100%;height:100%;
    display:flex;flex-direction:column;align-items:center;
    position:relative;
}
.ntc-front-bg{
    background:var(--ntc-bg-front);
    background-image:var(--ntc-bg-img-front);
    background-size:cover;background-position:center;
}
.ntc-back-bg{
    background:var(--ntc-bg-back);
    background-image:var(--ntc-bg-img-back);
    background-size:cover;background-position:center;
}

/* Overlay sutil para legibilidad sobre imágenes de fondo */
.ntc-face-bg::after{
    content:'';
    position:absolute;inset:0;
    border-radius:26px;
    pointer-events:none;
}
.ntc-mode-dark .ntc-face-bg::after{background:rgba(0,0,0,0.15);}
.ntc-mode-light .ntc-face-bg::after{background:rgba(255,255,255,0.10);}

/* Decos geométricas */
.ntc-deco{position:absolute;border-radius:50%;pointer-events:none;}
.ntc-deco-1{width:240px;height:240px;top:-60px;right:-60px;background:rgba(255,255,255,0.055);}
.ntc-deco-2{width:280px;height:280px;bottom:-80px;left:-60px;background:rgba(255,255,255,0.035);}
.ntc-back-deco-1{width:200px;height:200px;top:-50px;left:-50px;background:rgba(255,255,255,0.045);}
.ntc-back-deco-2{width:180px;height:180px;bottom:-40px;right:-40px;background:rgba(255,255,255,0.030);}
/* En modo claro las decos se invierten */
.ntc-mode-light .ntc-deco-1,.ntc-mode-light .ntc-deco-2,
.ntc-mode-light .ntc-back-deco-1,.ntc-mode-light .ntc-back-deco-2{
    background:rgba(0,0,0,0.04);
}

/* ══════════════════════════════════
   CARA FRONTAL
══════════════════════════════════ */

/* Logo / nombre corporativo */
.ntc-corp-bar{
    width:100%;padding:20px 24px 0;
    display:flex;justify-content:center;
    position:relative;z-index:1;
}
.ntc-corp-logo{height:30px;width:auto;object-fit:contain;max-width:160px;}
.ntc-corp-name{font-size:12px;font-weight:800;letter-spacing:0.16em;}

/* Texto oscuro/claro en frente */
.ntc-face-front.ntc-mode-dark .ntc-corp-name{color:rgba(255,255,255,0.65);}
.ntc-face-front.ntc-mode-light .ntc-corp-name{color:rgba(30,27,75,0.65);}

/* Avatar */
.ntc-avatar-zone{margin-top:22px;position:relative;z-index:1;}
.ntc-avatar-ring{
    width:220px;height:220px;border-radius:50%;
    border:5px solid rgba(255,255,255,0.88);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    box-shadow:0 0 0 10px rgba(99,102,241,0.20),0 16px 40px rgba(0,0,0,0.30);
}
.ntc-mode-light .ntc-avatar-ring{
    border-color:rgba(30,27,75,0.35);
    box-shadow:0 0 0 8px rgba(99,102,241,0.10),0 8px 24px rgba(0,0,0,0.12);
}
.ntc-avatar-img{width:100%;height:100%;object-fit:cover;display:block;}
.ntc-avatar-initials{font-size:72px;font-weight:700;}
.ntc-mode-dark .ntc-avatar-initials{color:#fff;}
.ntc-mode-light .ntc-avatar-initials{color:#1e1b4b;}

.ntc-online-dot{
    position:absolute;bottom:6px;right:6px;
    width:18px;height:18px;
    background:#10b981;border-radius:50%;
    border:3px solid var(--ntc-bg-front);
}

/* Identidad */
.ntc-identity{
    margin-top:16px;text-align:center;
    padding:0 24px;position:relative;z-index:1;width:100%;
}
.ntc-name{font-size:21px;font-weight:700;line-height:1.2;margin:0;}
.ntc-job{font-size:13px;font-weight:600;margin:7px 0 0;text-transform:uppercase;letter-spacing:0.07em;}
.ntc-job2{font-size:12px;font-weight:500;margin:3px 0 0;font-style:italic;}
.ntc-company{font-size:14px;font-weight:700;margin:7px 0 0;letter-spacing:0.04em;color:var(--ntc-btn);}

.ntc-mode-dark .ntc-name{color:var(--ntc-text-color,#fff);}
.ntc-mode-dark .ntc-job{color:var(--ntc-text-color,rgba(255,255,255,0.70));}
.ntc-mode-dark .ntc-job2{color:var(--ntc-text-color,rgba(255,255,255,0.55));}
.ntc-mode-light .ntc-name{color:var(--ntc-text-color,#1e1b4b);}
.ntc-mode-light .ntc-job{color:var(--ntc-text-color,rgba(30,27,75,0.70));}
.ntc-mode-light .ntc-job2{color:var(--ntc-text-color,rgba(30,27,75,0.55));}

/* ── 4 Botones principales ── */
.ntc-front-btns{
    /* Descenso responsivo seguro: baja bastante en pantallas amplias (hasta ~110px),
       pero cede en móviles bajos (mín. 56px) para no cortar chips/footer cuando
       Portal+Catálogo están activos. */
    width:100%;padding:clamp(72px, 18vh, 160px) 18px 0;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:relative;z-index:1;
}
.ntc-fbtn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 10px;border-radius:var(--ntc-btn-radius);
    border:2px solid transparent;
    cursor:pointer;font-size:13px;font-weight:600;
    font-family:var(--ntc-font);
    text-decoration:none;
    transition:transform 0.15s,box-shadow 0.15s,opacity 0.15s;
    -webkit-tap-highlight-color:transparent;
}
.ntc-fbtn:active{transform:scale(0.97);}
.ntc-fbtn svg{width:18px;height:18px;flex-shrink:0;fill:currentColor;}

/* Primarios — siempre sólidos con su color, nunca se pierden */
.ntc-fbtn-call{background:var(--ntc-btn);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--ntc-btn) 50%,transparent);}
.ntc-fbtn-wapp{background:#10b981;color:#fff;box-shadow:0 4px 12px rgba(16,185,129,0.40);}
.ntc-fbtn-call:hover,.ntc-fbtn-wapp:hover{opacity:0.88;transform:translateY(-2px);}

/* ── Botones secundarios: SÓLIDOS en ambos modos ──────────────────────────────
   Solución definitiva: fondo blanco semiopaco con texto del color del botón.
   Visible sobre fondos oscuros (contraste blanco vs oscuro = OK)
   Visible sobre fondos claros (border visible + fondo blanco = OK)
   Sin depender de transparencias que se "comen" con el fondo de la tarjeta. */

.ntc-fbtn-save,
.ntc-fbtn-share{
    background:rgba(255,255,255,0.92);
    color:#1e1b4b;
    border-color:rgba(255,255,255,0.60);
    box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
.ntc-fbtn-save:hover,
.ntc-fbtn-share:hover{
    background:#ffffff;
    border-color:rgba(255,255,255,0.90);
    box-shadow:0 4px 14px rgba(0,0,0,0.22);
}
/* Ícono en el color del template para identidad visual */
.ntc-fbtn-save svg,
.ntc-fbtn-share svg{
    fill:var(--ntc-btn);
}

/* ── Chips Portal / Catálogo ── */
.ntc-front-chips{
    width:100%;padding:12px 18px 0;
    display:flex;gap:8px;
    position:relative;z-index:1;
}
.ntc-chip{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:9px;border-radius:12px;
    font-size:11px;font-weight:700;
    text-decoration:none;cursor:pointer;
    border:1.5px solid transparent;
    transition:background 0.2s,border-color 0.2s;
    -webkit-tap-highlight-color:transparent;
}
.ntc-chip svg{width:14px;height:14px;fill:currentColor;flex-shrink:0;}
/* Chips — fondo blanco sólido, siempre visible */
.ntc-chip{
    background:rgba(255,255,255,0.90);
    color:#1e1b4b;
    border-color:rgba(255,255,255,0.60);
    box-shadow:0 2px 6px rgba(0,0,0,0.14);
}
.ntc-chip svg{fill:var(--ntc-btn);}
.ntc-chip:hover{background:#ffffff;box-shadow:0 3px 10px rgba(0,0,0,0.18);}

/* ── Indicador flip ── */
.ntc-flip-hint{
    display:inline-flex;align-items:center;gap:5px;
    border-radius:20px;padding:6px 14px;
    white-space:nowrap;cursor:pointer;
    background:rgba(0,0,0,0.52);
    border:1px solid rgba(255,255,255,0.22);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    color:#fff;
    font-size:10px;font-weight:700;letter-spacing:0.04em;
    font-family:var(--ntc-font);
    transition:opacity 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color:transparent;
    /* Efecto glow pulsante */
    animation:ntc-hint-glow 2.4s ease-in-out infinite;
}
.ntc-flip-hint:hover{
    opacity:0.88;
    box-shadow:0 0 16px rgba(255,255,255,0.35), 0 0 32px rgba(255,255,255,0.15);
    animation:none;
}
.ntc-flip-hint svg{width:13px;height:13px;fill:#fff;flex-shrink:0;}
.ntc-flip-hint span{color:#fff;}

/* Glow pulsante — visible sobre cualquier color de fondo */
@keyframes ntc-hint-glow{
    0%,100%{box-shadow:0 0 6px rgba(255,255,255,0.10), 0 0 0px rgba(255,255,255,0);}
    50%     {box-shadow:0 0 14px rgba(255,255,255,0.40), 0 0 28px rgba(255,255,255,0.18);}
}



/* ══════════════════════════════════
   CARA POSTERIOR
══════════════════════════════════ */

/* Texto scan label */
.ntc-scan-label{
    margin-top:28px;text-align:center;
    position:relative;z-index:1;
    font-size:12px;font-weight:800;
    letter-spacing:0.12em;text-transform:uppercase;
    padding:0 20px;
    /* Color configurable via custom property -- fallback por modo */
    color:var(--ntc-text-color, inherit);
}
.ntc-mode-dark .ntc-scan-label{color:var(--ntc-text-color, rgba(255,255,255,0.75));}
.ntc-mode-light .ntc-scan-label{color:var(--ntc-text-color, rgba(30,27,75,0.70));}

/* QR centrado */
.ntc-qr-zone{
    margin-top:12px;display:flex;flex-direction:column;
    align-items:center;position:relative;z-index:1;
}
.ntc-qr-box{
    width:280px;height:280px;
    border-radius:24px;
    background:var(--ntc-qr-bg);
    display:flex;align-items:center;justify-content:center;
    padding:14px;
    box-shadow:0 10px 40px rgba(0,0,0,0.35);
}
.ntc-qr-img{
    width:252px;height:252px;
    display:block;
    filter:var(--ntc-qr-filter,none);
}
.ntc-qr-dl{
    display:block;margin-top:8px;
    font-size:10px;font-weight:700;
    letter-spacing:0.06em;text-transform:uppercase;
    text-decoration:none;cursor:pointer;
    transition:opacity 0.2s;
}
.ntc-qr-dl:hover{opacity:0.70;}
.ntc-mode-dark .ntc-qr-dl{color:rgba(255,255,255,0.65);font-weight:800;}
.ntc-mode-light .ntc-qr-dl{color:rgba(30,27,75,0.65);font-weight:800;}

/* Links pill */
.ntc-back-links{
    margin-top:14px;width:100%;padding:0 20px;
    display:flex;flex-direction:column;gap:8px;
    align-items:center;position:relative;z-index:1;
}
.ntc-blink{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 20px;border-radius:30px;
    border:1.5px solid transparent;background:transparent;
    font-size:13px;font-weight:600;
    font-family:var(--ntc-font);
    cursor:pointer;text-decoration:none;
    width:100%;justify-content:center;
    transition:background 0.2s,border-color 0.2s,opacity 0.15s;
    -webkit-tap-highlight-color:transparent;
}
.ntc-blink svg{width:17px;height:17px;fill:#fff;flex-shrink:0;}
.ntc-blink:hover{opacity:0.88;transform:translateY(-1px);}

/* Links del dorso — sólidos, siempre visibles sobre cualquier fondo */
.ntc-blink-mail{
    background:#6366f1;
    color:#fff;
    border-color:transparent;
    box-shadow:0 3px 10px rgba(99,102,241,0.40);
}
.ntc-blink-mail:hover{background:#4f46e5;}

.ntc-blink-web{
    background:#059669;
    color:#fff;
    border-color:transparent;
    box-shadow:0 3px 10px rgba(5,150,105,0.40);
}
.ntc-blink-web:hover{background:#047857;}

/* Redes sociales */
.ntc-back-socials{
    margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;
    justify-content:center;position:relative;z-index:1;
    padding:0 12px;
    width:100%;
    max-width:100%;
}
.ntc-soc{
    display:inline-flex;align-items:center;gap:4px;
    padding:5px 10px;border-radius:30px;
    border:1.5px solid transparent;
    font-size:11px;font-weight:600;
    font-family:var(--ntc-font);
    text-decoration:none;cursor:pointer;
    transition:opacity 0.2s,background 0.2s;
    -webkit-tap-highlight-color:transparent;
}
.ntc-soc-icon{
    width:14px;height:14px;display:block;flex-shrink:0;
    background:currentColor;
    -webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;
    mask-size:contain;mask-repeat:no-repeat;mask-position:center;
}
/* Iconos de redes via mask */
.ntc-soc-icon[data-social="facebook"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07c0 6.01 4.39 10.99 10.13 11.86v-8.39H7.08v-3.47h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.47h-2.8v8.39C19.61 23.06 24 18.08 24 12.07z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07c0 6.01 4.39 10.99 10.13 11.86v-8.39H7.08v-3.47h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.47h-2.8v8.39C19.61 23.06 24 18.08 24 12.07z'/%3E%3C/svg%3E");}
.ntc-soc-icon[data-social="linkedin"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z'/%3E%3C/svg%3E");}
.ntc-soc-icon[data-social="instagram"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");}
.ntc-soc-icon[data-social="twitter"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.259 5.63L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.259 5.63L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");}
.ntc-soc-icon[data-social="youtube"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z'/%3E%3C/svg%3E");}
.ntc-soc-icon[data-social="tiktok"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.79 1.54V6.78a4.85 4.85 0 01-1.02-.09z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.79 1.54V6.78a4.85 4.85 0 01-1.02-.09z'/%3E%3C/svg%3E");}

/* Redes sociales — colores de marca propios, sólidos, siempre visibles */
.ntc-soc{color:#fff;border-color:transparent;}
.ntc-soc:hover{opacity:0.88;transform:translateY(-1px);}
.ntc-soc-icon{background:#fff;}

/* Facebook — azul de marca */
.ntc-soc-facebook{
    background:#1877f2;
    box-shadow:0 2px 8px rgba(24,119,242,0.40);
}
.ntc-soc-facebook:hover{background:#0d65d9;}

/* LinkedIn — azul corporativo */
.ntc-soc-linkedin{
    background:#0077b5;
    box-shadow:0 2px 8px rgba(0,119,181,0.40);
}
.ntc-soc-linkedin:hover{background:#005885;}

/* Instagram — gradiente icónico */
.ntc-soc-instagram{
    background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    box-shadow:0 2px 8px rgba(220,39,67,0.40);
}

/* X / Twitter — negro */
.ntc-soc-twitter{
    background:#000000;
    box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
.ntc-soc-twitter:hover{background:#1a1a1a;}

/* YouTube — rojo YouTube */
.ntc-soc-youtube{
    background:#ff0000;
    box-shadow:0 2px 8px rgba(255,0,0,0.35);
}
.ntc-soc-youtube:hover{background:#cc0000;}

/* TikTok — negro con brillo */
.ntc-soc-tiktok{
    background:#010101;
    box-shadow:0 2px 8px rgba(1,1,1,0.40);
}
.ntc-soc-tiktok:hover{background:#2a2a2a;}

/* ── Footer cara frontal — misma altura que el footer del dorso ── */
.ntc-front-footer{
    margin-top:auto;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 20px 18px;
    position:relative;z-index:1;
}

/* ── Flip hint FRENTE — dentro del footer, no absoluto ── */
.ntc-flip-hint-front{
    /* hereda todo de .ntc-flip-hint */
}

/* ── Footer cara posterior ── */
.ntc-back-footer{
    margin-top:auto;width:100%;
    display:flex;flex-direction:column;align-items:center;
    padding:0 20px 18px;gap:5px;
    position:relative;z-index:1;
}
.ntc-back-divider{
    width:40px;height:1px;
    margin:2px 0;
}
.ntc-mode-dark .ntc-back-divider{background:rgba(255,255,255,0.14);}
.ntc-mode-light .ntc-back-divider{background:rgba(30,27,75,0.16);}

.ntc-slogan{
    font-size:12px;font-weight:500;font-style:italic;
    letter-spacing:0.02em;text-align:center;margin:0;
}
.ntc-mode-dark .ntc-slogan{color:var(--ntc-text-color, rgba(255,255,255,0.60));}
.ntc-mode-light .ntc-slogan{color:var(--ntc-text-color, rgba(30,27,75,0.60));}

.ntc-back-name{font-size:13px;font-weight:700;text-align:center;margin:0;}
.ntc-mode-dark .ntc-back-name{color:var(--ntc-text-color, rgba(255,255,255,0.65));}
.ntc-mode-light .ntc-back-name{color:var(--ntc-text-color, rgba(30,27,75,0.70));}

/* Link NTCard by KROMATIX */
.ntc-brand-link{
    font-size:9px;font-weight:600;
    letter-spacing:0.05em;
    text-decoration:none;
    transition:opacity 0.2s;
    margin-top:1px;
}
.ntc-brand-link:hover{opacity:0.65;text-decoration:underline;}
.ntc-mode-dark .ntc-brand-link{color:rgba(255,255,255,0.22);}
.ntc-mode-light .ntc-brand-link{color:rgba(30,27,75,0.30);}

/* ── Toast ── */
.ntc-toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
    background:rgba(15,15,30,0.92);color:#fff;
    padding:10px 20px;border-radius:20px;
    font-size:13px;font-weight:600;
    font-family:var(--ntc-font);
    box-shadow:0 4px 16px rgba(0,0,0,0.30);
    z-index:10000;white-space:nowrap;
    animation:ntc-toast-in 0.2s ease;
}
.ntc-toast[hidden]{display:none;}
@keyframes ntc-toast-in{
    from{opacity:0;transform:translateX(-50%) translateY(8px);}
    to{opacity:1;transform:translateX(-50%) translateY(0);}
}

/* ── Responsive — móvil primero ── */
@media (max-width:380px){
    .ntc-scene{width:310px;height:720px;}
    .ntc-avatar-ring{width:160px;height:160px;}
    .ntc-avatar-initials{font-size:52px;}
    .ntc-qr-box{width:220px;height:220px;}
    .ntc-qr-img{width:196px;height:196px;}
    .ntc-name{font-size:18px;}
}
@media (min-width:480px){
    .ntc-scene{width:360px;height:760px;}
}

/* ── color-mix fallback para navegadores sin soporte ── */
/* Fallback para navegadores sin color-mix — todos los botones ya son sólidos,
   no se necesitan overrides adicionales. Solo el fondo de página: */
@supports not (background:color-mix(in srgb,red,blue)){
    .ntc-body{background:#1e1040;}
}