/* ============================================================
   Visage Beard AI — Barbershop Premium Theme
   Estética: escuro + couro + cromo + âmbar + burgundy
   Tipografia: Playfair Display (headlines) + Bebas Neue (marca) + Inter (body)
   ============================================================ */

/* Esconde admin bar nas rotas custom do plugin */
body.admin-bar-visage { margin-top: 0 !important; }
#wpadminbar { display: none !important; }

/* ============================================================
   SISTEMA DE DESIGN RESPONSIVO `vs-*`
   Mobile-first. Tipografia fluida via clamp(). Kiosk com escala própria.
   ============================================================ */

:root {
    --vs-pad-x:        clamp(1rem, 4vw, 2.5rem);
    --vs-pad-y:        clamp(1.25rem, 4vh, 2.5rem);
    --vs-pad-top:      clamp(4.5rem, 8vh, 6rem);
    --vs-gap-xs:       clamp(0.5rem, 1vw, 0.75rem);
    --vs-gap-sm:       clamp(0.75rem, 1.5vw, 1rem);
    --vs-gap-md:       clamp(1rem, 2vw, 1.5rem);
    --vs-gap-lg:       clamp(1.5rem, 3vw, 2.5rem);
    --vs-gap-xl:       clamp(2rem, 4vw, 4rem);
    --vs-radius-sm:    clamp(0.625rem, 1vw, 0.875rem);
    --vs-radius-md:    clamp(0.875rem, 1.5vw, 1.25rem);
    --vs-radius-lg:    clamp(1.25rem, 2.5vw, 2rem);
    --vs-tap-min:      52px;
    --vs-text-soft:    rgba(229, 229, 229, 0.72);
    --vs-text-mute:    rgba(229, 229, 229, 0.55);
    --vs-text-faint:   rgba(229, 229, 229, 0.35);
    --vs-surface-1:    rgba(23, 23, 23, 0.85);
    --vs-surface-2:    rgba(38, 38, 38, 0.78);
    --vs-border:       rgba(255, 255, 255, 0.08);
    --vs-border-soft:  rgba(255, 255, 255, 0.04);
}

/* Use 100dvh quando suportado (corrige problema do iOS Safari URL bar) */
@supports (height: 100dvh) {
    :root { --vs-vh: 100dvh; }
}
@supports not (height: 100dvh) {
    :root { --vs-vh: 100vh; }
}

/* ===== Container de step ===== */
.vs-screen {
    min-height: var(--vs-vh);
    display: flex;
    flex-direction: column;
    padding: var(--vs-pad-top) var(--vs-pad-x) var(--vs-pad-y);
    box-sizing: border-box;
}
.vs-screen--center {
    align-items: center;
    justify-content: center;
}
.vs-content {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
}
.vs-content--narrow { max-width: 460px; }
.vs-content--wide   { max-width: 960px; }
.vs-content--xwide  { max-width: 1200px; }

/* ===== Stack vertical com gap consistente ===== */
.vs-stack { display: flex; flex-direction: column; gap: var(--vs-gap-md); }
.vs-stack-sm > * + * { margin-top: var(--vs-gap-sm); }
.vs-stack-md > * + * { margin-top: var(--vs-gap-md); }
.vs-stack-lg > * + * { margin-top: var(--vs-gap-lg); }
.vs-stack-xl > * + * { margin-top: var(--vs-gap-xl); }

/* ===== Tipografia fluida ===== */
.vs-display {
    font-family: 'Bebas Neue', 'Impact', 'Arial Narrow Bold', sans-serif;
    font-size: clamp(2.5rem, 7vw + 1.25rem, 7rem);
    line-height: 0.92;
    letter-spacing: 0.03em;
    font-weight: 400;
}
.vs-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.75rem, 4vw + 0.75rem, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 800;
}
.vs-h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.375rem, 2.5vw + 0.5rem, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.vs-h3 {
    font-size: clamp(1.0625rem, 1vw + 0.5rem, 1.375rem);
    line-height: 1.3;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}
.vs-lead {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 0.8vw + 0.7rem, 1.2rem);
    line-height: 1.55;
    color: var(--vs-text-soft);
    font-weight: 500;
}
.vs-body {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.9rem, 0.4vw + 0.75rem, 1.05rem);
    line-height: 1.6;
    font-weight: 500;
}
.vs-caption {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.75rem, 0.2vw + 0.7rem, 0.875rem);
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--vs-text-mute);
    font-weight: 600;
}

/* ===== Botões ===== */
.vs-btn {
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--vs-tap-min);
    padding: clamp(0.75rem, 1.5vw, 1.125rem) clamp(1.25rem, 3vw, 2.25rem);
    border-radius: var(--vs-radius-md);
    font-size: clamp(0.9rem, 0.5vw + 0.7rem, 1.125rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform .15s, box-shadow .25s, background .25s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: none;
    box-sizing: border-box;
}
.vs-btn:active:not(:disabled) { transform: scale(0.97); }
.vs-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vs-btn-block { width: 100%; }
.vs-btn-primary {
    background: linear-gradient(180deg, #fde68a 0%, #fbbf24 38%, #f59e0b 100%);
    color: #1a0f00;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -2px 0 rgba(0,0,0,0.18),
        0 6px 20px rgba(251,191,36,0.32);
    border: 1px solid #b45309;
}
.vs-btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #fef3c7 0%, #fcd34d 38%, #fbbf24 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -2px 0 rgba(0,0,0,0.18),
        0 10px 28px rgba(251,191,36,0.4);
}
.vs-btn-secondary {
    background: rgba(255,255,255,0.04);
    color: #f5f5f5;
    border: 1px solid rgba(255,255,255,0.12);
}
.vs-btn-secondary:hover:not(:disabled) {
    background: rgba(255,255,255,0.08);
    border-color: rgba(251,191,36,0.4);
    color: #fbbf24;
}
.vs-btn-ghost {
    background: transparent;
    color: var(--vs-text-mute);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: clamp(0.7rem, 0.2vw + 0.65rem, 0.8rem);
    padding: 0.5rem 0.75rem;
    min-height: 0;
    font-weight: 600;
}
.vs-btn-ghost:hover:not(:disabled) { color: #fbbf24; }
.vs-btn-lg {
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 4vw, 3rem);
    font-size: clamp(1rem, 0.6vw + 0.85rem, 1.25rem);
    border-radius: var(--vs-radius-lg);
}

/* ===== Inputs ===== */
.vs-input {
    width: 100%;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.875rem, 2vw, 1.25rem);
    background: rgba(38, 38, 38, 0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--vs-radius-sm);
    color: #f5f5f5;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
    font-weight: 500;
    transition: border-color .2s, background .2s;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.vs-input:focus {
    outline: none;
    border-color: #fbbf24;
    background: rgba(38, 38, 38, 0.85);
}
.vs-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.8rem, 0.2vw + 0.75rem, 0.9rem);
    font-weight: 600;
    color: #d4d4d4;
}

/* ===== Cards ===== */
.vs-card {
    background: var(--vs-surface-1);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-md);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.vs-card-emphasis {
    border-color: rgba(251,191,36,0.3);
    box-shadow: 0 0 60px rgba(251,191,36,0.08);
}

/* ===== Gateway radio cards ===== */
.vs-gateway-card:hover { border-color: rgba(251,191,36,0.4) !important; }
.vs-gateway-on {
    background: rgba(251,191,36,0.08);
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 2px rgba(251,191,36,0.3);
}
.vs-gateway-radio {
    width: 20px; height: 20px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.25);
    flex-shrink: 0;
    transition: all .2s;
}
.vs-gateway-radio.on {
    background: #fbbf24;
    border-color: #fbbf24;
    box-shadow: inset 0 0 0 4px rgba(0,0,0,0.85);
}

/* ===== Header ===== */
.vs-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding: clamp(0.625rem, 1.5vh, 1rem) var(--vs-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vs-gap-sm);
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 70%, transparent 100%);
    pointer-events: none;
}
.vs-header > * { pointer-events: auto; }
.vs-header-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* ===== Counter pill ===== */
.vs-counter {
    display: inline-flex;
    align-items: center;
    padding: clamp(0.4rem, 1vw, 0.65rem) clamp(0.875rem, 2vw, 1.25rem);
    background: rgba(251,191,36,0.15);
    border: 1.5px solid #fbbf24;
    border-radius: 999px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
    letter-spacing: 0.04em;
    color: #fcd34d;
}

/* ===== Style grid (catálogo de 60) — auto-fit escala suavemente ===== */
.vs-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(95px, 14vw, 150px), 1fr));
    gap: clamp(0.5rem, 1.2vw, 1rem);
}
body[data-kiosk="1"] .vs-style-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 14vw, 200px), 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.vs-style-card {
    position: relative;
    background: rgba(23,23,23,0.85);
    border-radius: var(--vs-radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.vs-style-card.on {
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px #fbbf24, 0 0 24px rgba(251,191,36,0.4);
    transform: translateY(-2px);
}
.vs-style-card:hover:not(.on) {
    border-color: rgba(251,191,36,0.4);
    transform: translateY(-2px);
}
.vs-style-thumb {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
}
.vs-style-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.vs-style-empty {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #262626;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vs-text-faint);
    font-size: 0.75rem;
}
.vs-style-check {
    position: absolute;
    top: 6px; right: 6px;
    width: clamp(22px, 3vw, 30px); height: clamp(22px, 3vw, 30px);
    border-radius: 999px;
    background: #fbbf24;
    color: #1a0f00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: clamp(0.7rem, 0.8vw + 0.4rem, 0.95rem);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.vs-style-meta {
    padding: clamp(0.4rem, 0.8vw, 0.6rem);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.vs-style-name {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.7rem, 0.5vw + 0.55rem, 0.85rem);
    font-weight: 600;
    text-align: center;
    color: #e5e5e5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.vs-style-btn {
    width: 100%;
    padding: clamp(0.35rem, 0.8vw, 0.5rem) 0.5rem;
    background: rgba(255,255,255,0.05);
    color: #d4d4d4;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    font-size: clamp(0.65rem, 0.4vw + 0.5rem, 0.78rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.vs-style-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.vs-style-btn.on {
    background: #fbbf24;
    color: #1a0f00;
    border-color: #fbbf24;
}
.vs-style-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ===== Sticky footer (selection, etc) ===== */
.vs-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: rgba(15, 15, 15, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(251,191,36,0.25);
    padding: clamp(0.625rem, 1.5vw, 1rem) var(--vs-pad-x);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.4);
    /* Safe area iOS */
    padding-bottom: max(clamp(0.625rem, 1.5vw, 1rem), env(safe-area-inset-bottom));
}

/* ===== Helpers ===== */
.vs-muted { color: var(--vs-text-mute); }
.vs-soft { color: var(--vs-text-soft); }
.vs-center { text-align: center; }
.vs-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(251,191,36,0.5) 50%, transparent 100%);
    width: clamp(60px, 10vw, 120px);
    margin-inline: auto;
    border-radius: 2px;
}

/* ============================================================
   KIOSK MODE — Tela grande (1080x1920 portrait ou 1920x1080 landscape)
   Escala tudo MAIOR. Sem hover (touch only). Buttons enormes.
   ============================================================ */
body[data-kiosk="1"] {
    --vs-pad-x:    clamp(2rem, 4vw, 4rem);
    --vs-pad-y:    clamp(2rem, 4vh, 4rem);
    --vs-pad-top:  clamp(6rem, 10vh, 9rem);
    --vs-tap-min:  72px;
}
body[data-kiosk="1"] .vs-display { font-size: clamp(4rem, 9vw, 11rem); }
body[data-kiosk="1"] .vs-h1      { font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem); }
body[data-kiosk="1"] .vs-h2      { font-size: clamp(2rem, 3vw + 0.75rem, 3.5rem); }
body[data-kiosk="1"] .vs-h3      { font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); }
body[data-kiosk="1"] .vs-lead    { font-size: clamp(1.125rem, 1vw + 0.85rem, 1.5rem); }
body[data-kiosk="1"] .vs-body    { font-size: clamp(1rem, 0.6vw + 0.85rem, 1.25rem); }
body[data-kiosk="1"] .vs-btn     { padding: clamp(1rem, 2vw, 1.625rem) clamp(2rem, 4vw, 3.5rem); font-size: clamp(1.05rem, 0.7vw + 0.85rem, 1.375rem); }
body[data-kiosk="1"] .vs-btn-lg  { padding: clamp(1.25rem, 2.5vw, 2rem) clamp(2.5rem, 5vw, 4rem); font-size: clamp(1.25rem, 0.8vw + 1rem, 1.625rem); }
body[data-kiosk="1"] .vs-input   { font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.375rem); padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1rem, 2.2vw, 1.5rem); }
body[data-kiosk="1"] .vs-card    { padding: clamp(1.5rem, 3vw, 2.5rem); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .vs-btn { transition: none; }
}

/* ========== TIPOGRAFIA ========== */
.visage-display {
    font-family: 'Bebas Neue', 'Impact', 'Arial Narrow Bold', sans-serif;
    letter-spacing: 0.05em;
    font-weight: 400;
}
.visage-serif {
    font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    letter-spacing: -0.01em;
}

/* ========== PROGRESS RING (tela de processamento) ========== */
@keyframes visage-ring-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(251,191,36,0.4)); }
    50%      { transform: scale(1.015); filter: drop-shadow(0 0 24px rgba(251,191,36,0.7)); }
}
.visage-ring-pulse {
    animation: visage-ring-pulse 2.4s ease-in-out infinite;
    transform-origin: center;
}

@keyframes visage-photo-pulse {
    0%, 100% { box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 0 0 0 rgba(251,191,36,0.4); }
    50%      { box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 0 0 12px rgba(251,191,36,0); }
}
.visage-photo-pulse {
    animation: visage-photo-pulse 2.4s ease-out infinite;
}

@keyframes visage-scan-line {
    0%   { transform: translateY(-100%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}
.visage-scan-line {
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 45%,
        rgba(251,191,36,0.45) 50%,
        transparent 55%,
        transparent 100%
    );
    animation: visage-scan-line 3.6s linear infinite;
}

@keyframes visage-rotate-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.visage-rotate-slow     { animation: visage-rotate-slow 8s linear infinite; }
.visage-rotate-slow-rev { animation: visage-rotate-slow 11s linear infinite reverse; }

@keyframes visage-ring-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.visage-ring-bump {
    animation: visage-ring-bump 600ms cubic-bezier(0.34,1.56,0.64,1);
}

/* Texto da análise — Inter 500 em fundo escuro pra máxima legibilidade. */
.visage-analysis-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.003em;
    color: #ffffff;
    max-width: 62ch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
@media (max-width: 640px) {
    .visage-analysis-text {
        font-size: 1.0625rem;
        line-height: 1.65;
    }
}

/* ========== BARBER POLE ========== */
/* Stripe pattern clássico (vermelho-branco-azul do mundo real substituído por
   vermelho-dourado-escuro pra combinar com marca) */
@keyframes visage-pole-slide {
    from { background-position: 0 0; }
    to   { background-position: 0 40px; }
}
.visage-barber-pole {
    background-image: linear-gradient(
        45deg,
        var(--visage-primary, #fbbf24) 25%,
        #1a1a1a 25%,
        #1a1a1a 50%,
        var(--visage-primary, #fbbf24) 50%,
        var(--visage-primary, #fbbf24) 75%,
        #1a1a1a 75%
    );
    background-size: 40px 40px;
    animation: visage-pole-slide 2s linear infinite;
}
/* Versão vertical (loader) */
.visage-pole-vertical {
    background-image: linear-gradient(
        135deg,
        #b91c1c 10%, #fff 10%,
        #fff 20%, #1e3a8a 20%,
        #1e3a8a 30%, #b91c1c 30%,
        #b91c1c 40%, #fff 40%,
        #fff 50%, #1e3a8a 50%,
        #1e3a8a 60%, #b91c1c 60%,
        #b91c1c 70%, #fff 70%,
        #fff 80%, #1e3a8a 80%,
        #1e3a8a 90%, #b91c1c 90%
    );
    background-size: 100% 80px;
    animation: visage-pole-slide 1.2s linear infinite;
}
/* Barra fina decorativa (usado como divider) */
.visage-stripe-divider {
    height: 4px;
    background: repeating-linear-gradient(
        45deg,
        var(--visage-primary, #fbbf24) 0px,
        var(--visage-primary, #fbbf24) 8px,
        #0a0a0a 8px,
        #0a0a0a 16px
    );
    background-size: 22px 22px;
    animation: visage-pole-slide 1.5s linear infinite;
}

/* ========== TEXTURA NOISE ========== */
/* Overlay sutil de ruído — dá sensação de couro/papel vintage */
.visage-noise::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
}

/* ========== MARQUEE VERTICAL (carrossel lateral welcome) ========== */
@keyframes visage-marquee-down {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}
@keyframes visage-marquee-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
.visage-marquee-col {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.visage-marquee-track {
    display: flex;
    flex-direction: column;
    gap: 14px;
    will-change: transform;
}
.visage-marquee-track.up   { animation: visage-marquee-up 60s linear infinite; }
.visage-marquee-track.down { animation: visage-marquee-down 60s linear infinite; }

/* ========== PAYMENT RADAR PULSE ========== */
/* Anéis concêntricos expandindo — sensação de "detectando pagamento" */
@keyframes visage-radar-pulse {
    0%   { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}
.visage-radar {
    position: relative;
    width: 120px;
    height: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.visage-radar::before,
.visage-radar::after,
.visage-radar > .ring {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--visage-primary, #fbbf24);
    animation: visage-radar-pulse 2.4s ease-out infinite;
}
.visage-radar::after  { animation-delay: 0.8s; }
.visage-radar > .ring { animation-delay: 1.6s; }
.visage-radar > .core {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, #fde68a 0%, #fbbf24 60%, #b45309 100%);
    box-shadow: 0 0 24px rgba(251,191,36,0.8);
    animation: visage-glow 1.6s ease-in-out infinite;
}

/* ========== SCISSORS SNIP ANIMATION ========== */
/* Tesoura inteira pulsa e oscila levemente — confiável em qualquer tamanho */
@keyframes visage-snip {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.1) rotate(-10deg); }
    50%      { transform: scale(1) rotate(0deg); }
    75%      { transform: scale(1.1) rotate(10deg); }
}
.visage-snip {
    animation: visage-snip 1.2s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

/* ========== RAZOR SHINE SWEEP (hover em cards) ========== */
@keyframes visage-razor-sweep {
    0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
    30%  { opacity: 0.5; }
    100% { transform: translateX(220%) skewX(-20deg); opacity: 0; }
}
.visage-shine {
    position: relative;
    overflow: hidden;
}
.visage-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(251,191,36,0.3) 45%,
        rgba(255,255,255,0.4) 50%,
        rgba(251,191,36,0.3) 55%,
        transparent 70%
    );
    transform: translateX(-120%) skewX(-20deg);
    pointer-events: none;
}
.visage-shine:hover::after,
.visage-shine:focus-visible::after {
    animation: visage-razor-sweep 0.9s ease-out;
}

/* ========== GLOW PREMIUM ========== */
@keyframes visage-glow {
    0%, 100% { box-shadow: 0 0 24px rgba(251,191,36,0.35), 0 0 60px rgba(251,191,36,0.15), inset 0 1px 0 rgba(255,255,255,0.2); }
    50%      { box-shadow: 0 0 40px rgba(251,191,36,0.65), 0 0 100px rgba(251,191,36,0.3), inset 0 1px 0 rgba(255,255,255,0.3); }
}
.visage-glow { animation: visage-glow 2.4s ease-in-out infinite; }

.visage-glow-red {
    box-shadow: 0 0 24px rgba(159,18,27,0.4), 0 0 60px rgba(159,18,27,0.2);
}

/* ========== TRANSIÇÕES (fade/up) ========== */
@keyframes visage-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.visage-fade-in { animation: visage-fade-in .45s cubic-bezier(.23,1,.32,1) both; }

@keyframes visage-fade-up {
    from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.visage-fade-up { animation: visage-fade-up .6s cubic-bezier(.23,1,.32,1) both; }

@keyframes visage-bounce-in {
    0%   { opacity: 0; transform: scale(.3) rotate(-15deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
    100% { transform: scale(1) rotate(0); }
}
.visage-bounce-in { animation: visage-bounce-in .7s cubic-bezier(.68,-.55,.27,1.55) both; }

/* ========== SCAN LINE (análise facial) ========== */
@keyframes visage-scan {
    0%, 100% { top: 0%; opacity: 0; }
    10%      { opacity: 1; }
    90%      { opacity: 1; }
    100%     { top: 100%; opacity: 0; }
}
.visage-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--visage-primary, #fbbf24) 20%,
        #fff 50%,
        var(--visage-primary, #fbbf24) 80%,
        transparent 100%);
    box-shadow: 0 0 30px 5px rgba(251,191,36,0.7);
    animation: visage-scan 2.8s cubic-bezier(.45,.05,.55,.95) infinite;
    pointer-events: none;
    z-index: 10;
}
.visage-scan-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 49.5%, rgba(251,191,36,0.08) 50%, transparent 50.5%),
        linear-gradient(90deg, transparent 49.5%, rgba(251,191,36,0.08) 50%, transparent 50.5%);
    background-size: 100% 24px, 24px 100%;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* ========== GRADIENT BG ANIMADO ========== */
@keyframes visage-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.visage-gradient-bg {
    background: linear-gradient(120deg,
        var(--visage-bg, #0a0a0a) 0%,
        var(--visage-bg-accent, #1a0f00) 25%,
        var(--visage-bg, #0a0a0a) 50%,
        #1f0202 75%,
        var(--visage-bg, #0a0a0a) 100%);
    background-size: 400% 400%;
    animation: visage-gradient-shift 20s ease infinite;
}

/* ========== SHIMMER (progress bar, skeleton) ========== */
@keyframes visage-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.visage-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%);
}
.visage-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,0.25), transparent);
    animation: visage-shimmer 2s infinite;
}
.visage-progress-bar {
    position: relative;
    overflow: hidden;
}
.visage-progress-bar > div::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: visage-shimmer 2s infinite;
}

/* ========== TAP TARGETS TOUCH ========== */
.visage-btn-touch {
    min-height: 56px;
    min-width: 56px;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s cubic-bezier(.4,0,.2,1);
}
.visage-btn-touch:active { transform: scale(.96); }

body[data-kiosk="1"] {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
body[data-kiosk="1"] button,
body[data-kiosk="1"] input,
body[data-kiosk="1"] label {
    -webkit-tap-highlight-color: rgba(251,191,36,0.3);
}

/* ========== CARDS ELEGANTES ========== */
.visage-card {
    transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s, border-color .35s;
    will-change: transform;
}
.visage-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 24px 48px -24px rgba(251,191,36,0.5), 0 0 0 1px rgba(251,191,36,0.3);
}

/* Cards selecionados "entalhados" */
.visage-card-selected {
    box-shadow: 0 0 0 3px var(--visage-primary, #fbbf24), 0 0 32px rgba(251,191,36,0.5);
    transform: translateY(-2px);
}

/* ========== BUTTONS PREMIUM ========== */
.visage-btn-gold {
    background: linear-gradient(180deg,
        #fde68a 0%,
        #fbbf24 35%,
        #f59e0b 100%);
    color: #1a0f00;
    font-weight: 900;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -2px 0 rgba(0,0,0,0.2),
        0 4px 14px rgba(251,191,36,0.35);
    border: 1px solid #b45309;
}
.visage-btn-gold:hover {
    background: linear-gradient(180deg, #fef3c7 0%, #fcd34d 35%, #fbbf24 100%);
}

/* ========== FOCUS ACESSÍVEL ========== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--visage-primary, #fbbf24);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ========== ICONS DECORATIVOS ========== */
.visage-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,0.25) 0%, rgba(251,191,36,0) 70%);
}

/* ========== UTIL: respeita reduced-motion ========== */
@media (prefers-reduced-motion: reduce) {
    .visage-gradient-bg,
    .visage-barber-pole,
    .visage-pole-vertical,
    .visage-stripe-divider,
    .visage-snip,
    .visage-marquee-track,
    .visage-radar::before,
    .visage-radar::after,
    .visage-radar > .ring,
    .visage-glow,
    .visage-scan-line,
    .visage-progress-bar > div::after,
    .visage-skeleton::after {
        animation: none !important;
    }
}