/* ===== RESET COM ANIMAÇÕES GLOBAIS ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

:root {
    --preto: #101010;
    --preto-suave: #1A1A1A;
    --cinza-escuro: #2A2A2A;
    --cinza: #4A4A4A;
    --cinza-claro: #8A8A8A;
    --branco: #FAFAFA;
    --branco-sujo: #F0F0F0;

    /* Animações Smooth */
    --smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --smooth-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --smooth-slow: cubic-bezier(0.16, 1, 0.3, 1);

    /* Admin palette */
    --admin-bg:      #EEEEEE;
    --admin-surface: #F8F8F8;
    --admin-white:   #FFFFFF;
    --admin-border:  rgba(0,0,0,0.07);
    --admin-gold:    #B8975A;
    --admin-gold-lt: rgba(184,151,90,0.12);
    --admin-ink:     #111111;
    --admin-muted:   #8A8A8A;
    --admin-danger:  #C0392B;
    --admin-ok:      #27AE60;

    /* Barbeiros */
    --ouro: #c8aa6e;
    --ouro-escuro: #a0844c;
    --grafite: #161616;
    --grafite-medio: #1f1f1f;
    --grafite-claro: #2c2c2c;
}

html, body {
    scroll-behavior: smooth !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #EBEBEB;
    color: var(--preto);
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ===== BACKGROUND ===== */
.bg-dinamico {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0,0,0,0.02) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,0.02) 0%, transparent 30%);
    pointer-events: none;
    z-index: -1;
    animation: bgFloat 20s var(--smooth-slow) infinite alternate;
    will-change: auto;
}

@keyframes bgFloat {
    0% { transform: scale(1) rotate(0deg); opacity: 0.5; }
    100% { transform: scale(1.1) rotate(1deg); opacity: 0.8; }
}

/* ===== ANIMAÇÕES ===== */
@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(40px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeLeft {
    0% { opacity: 0; transform: translateX(40px) scale(0.98); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes fadeRight {
    0% { opacity: 0; transform: translateX(-40px) scale(0.98); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes scaleIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.animate-fade-up { opacity: 0; animation: fadeUp 1s var(--smooth) forwards; }
.animate-fade-left { opacity: 0; animation: fadeLeft 1s var(--smooth) forwards; }
.animate-fade-right { opacity: 0; animation: fadeRight 1s var(--smooth) forwards; }
.animate-scale { opacity: 0; animation: scaleIn 1.2s var(--smooth-bounce) forwards; }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ===== SCROLL ANIMADO ===== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--smooth-slow), transform 0.8s var(--smooth-slow);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ===== SELETOR DE IDIOMA ===== */
.language-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0.7rem;
    padding: 0.2rem;
    background: rgba(16, 16, 16, 0.04);
    border: 1px solid rgba(16, 16, 16, 0.07);
    border-radius: 999px;
}

.lang-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cinza);
    padding: 0.36rem 0.72rem;
    cursor: pointer;
    transition: background 0.35s var(--smooth), color 0.35s var(--smooth), border-color 0.35s var(--smooth), opacity 0.35s var(--smooth) !important;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 0.72rem;
    text-transform: uppercase;
    border-radius: 20px !important;
    opacity: 0.7;
}

.lang-btn:hover { opacity: 1; transform: translateY(-1px); }
.lang-btn.active {
    background: linear-gradient(145deg, #111, #232323);
    color: var(--branco);
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

/* ===== NAVEGAÇÃO ===== */
nav {
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 100;
    background:
        linear-gradient(180deg, rgba(242, 242, 242, 0.94), rgba(236, 236, 236, 0.9));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.4s var(--smooth);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
}

nav.scroll-down {
    padding: 0.7rem 5%;
    background:
        linear-gradient(180deg, rgba(236, 236, 236, 0.95), rgba(232, 232, 232, 0.92));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

 .logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.logo-img {
    height: 58px;
    width: auto;
    transition: transform 0.5s var(--smooth-bounce);
    filter: brightness(1);
}
.logo .logo-img:first-child {
    margin-right: auto;  /* Garante que fique à esquerda */
}


.logo-img:hover { transform: scale(1.05) rotate(-1deg); }

.logo-text {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--preto);
    position: relative;
    padding-left: 1rem;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-links {
    display: flex;
    gap: 1.4rem;
    align-items: center;
}

.nav-item { position: relative; }

.nav-links a {
    color: var(--preto);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    padding: 0.5rem 0.15rem;
    transition: color 0.3s ease;
    text-transform: uppercase;
    opacity: 0.78;
}

.nav-links a:hover { opacity: 1; color: var(--preto); }

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #111, #4a4a4a);
    transition: width 0.4s var(--smooth-bounce);
    border-radius: 999px;
}

.nav-links a:hover::after { width: 100%; }

.nav-actions {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-left: 0.75rem;
}

.btn-login, .btn-admin {
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(16, 16, 16, 0.14);
    color: var(--preto);
    padding: 0.55rem 1.2rem !important;
    cursor: pointer;
    transition: background 0.35s var(--smooth), color 0.35s var(--smooth), border-color 0.35s var(--smooth), transform 0.3s var(--smooth-bounce), box-shadow 0.35s var(--smooth) !important;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.74rem;
    text-transform: uppercase;
    border-radius: 999px !important;
    opacity: 0.9;
}

.btn-login:hover, .btn-admin:hover {
    background: var(--preto);
    color: var(--branco);
    transform: translateY(-2px);
    opacity: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.btn-admin {
    border-color: rgba(184, 151, 90, 0.45);
    color: #6f5730;
    background: linear-gradient(135deg, rgba(184,151,90,0.16), rgba(255,255,255,0.75));
}

.btn-admin:hover { background: #6f5730; border-color: #6f5730; color: var(--branco); }

.user-info {
    display: none;
    align-items: center;
    gap: 0.95rem;
    background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(244,244,244,0.92));
    padding: 0.45rem 0.5rem 0.45rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(16,16,16,0.08);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07);
}

#userInfo.user-info {
    gap: 1.35rem;
    padding: 0.5rem 0.58rem 0.5rem 1.08rem;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(104,108,114,0.88), rgba(74,79,86,0.96)),
        radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 58%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

#userInfo.user-info .user-name {
    color: rgba(248,250,252,0.92);
}

#userInfo.user-info .btn-logout {
    padding: 0.38rem 0.92rem;
}

.user-name {
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    color: rgba(16,16,16,0.82);
}

.btn-logout {
    background: linear-gradient(145deg, #151515, #2a2a2a);
    border: 1px solid rgba(16,16,16,0.08);
    color: var(--branco);
    padding: 0.34rem 0.88rem;
    cursor: pointer;
    font-size: 0.66rem;
    letter-spacing: 1px;
    transition: background 0.35s var(--smooth), color 0.35s var(--smooth), transform 0.25s var(--smooth-bounce), box-shadow 0.25s var(--smooth) !important;
    opacity: 0.92;
    border-radius: 999px !important;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.btn-logout:hover {
    opacity: 1;
    background: #0f0f0f;
    color: var(--branco);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

/* Menu Mobile */
.menu-mobile-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.45rem;
    z-index: 101;
    border-radius: 10px;
    border: 1px solid rgba(16,16,16,0.1);
    background: rgba(255,255,255,0.62);
}

.menu-mobile-btn span {
    width: 23px;
    height: 1.8px;
    background: var(--preto);
    transition: all 0.3s var(--smooth);
}

.menu-mobile-btn.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
.menu-mobile-btn.active span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.menu-mobile-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); }

/* Overlay nav */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 199;
}
.nav-overlay.active { display: block; }

/* ===== HERO SECTION ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 5%;
    position: relative;
    background: #EBEBEB;
    overflow: hidden;
}

.hero-content { flex: 1; z-index: 2; }

.hero-content h1 {
    line-height: 1;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: var(--preto);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-logo {
    max-width: 500px;
    height: auto;
    display: block;
    animation: fadeRight 1s var(--smooth) forwards;
}


.hero-content .highlight {
    color: var(--cinza);
    display: block;
    font-size: 5rem;
    font-weight: 400;
    animation: fadeLeft 1s var(--smooth) 0.2s forwards;
    opacity: 0;
}

.hero-content p {
    font-size: 1.1rem;
    color: var(--cinza);
    margin-bottom: 2.5rem;
    max-width: 500px;
    font-weight: 300;
    line-height: 1.8;
    animation: fadeUp 1s var(--smooth) 0.4s forwards;
    opacity: 0;
}

.btn-agendar {
    background: var(--preto);
    color: var(--branco);
    border: 2px solid var(--preto);
    padding: 1.2rem 3rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.35s var(--smooth), color 0.35s var(--smooth), transform 0.3s var(--smooth-bounce), box-shadow 0.35s var(--smooth) !important;
    animation: scaleIn 1.2s var(--smooth-bounce) 0.6s forwards;
    opacity: 0;
    border-radius: 40px !important;
}

.btn-agendar:hover {
    background: transparent;
    color: var(--preto);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}





/* ===== BOTÃO SLIDESHOW LATERAL ===== */
.slide-toggle-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--preto);
    color: var(--branco);
    border: none;
    width: 44px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 28px;
    z-index: 99;
    transition: all 0.5s var(--smooth-bounce);
    box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    border-radius: 10px 0 0 10px;
}

.slide-toggle-btn:hover { background: var(--cinza); width: 60px; }
.slide-toggle-btn.active { right: 50%; }

/* ===== SLIDESHOW LATERAL ===== */
.slideshow-panel {
    position: fixed;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100vh;
    background: var(--branco);
    z-index: 1000;
    transition: right 0.8s var(--smooth-bounce);
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    overflow-y: auto;
    padding: 2rem;
    border-left: 1px solid rgba(0,0,0,0.05);
}

.slideshow-panel.active { right: 0; }

body > *:not(.slideshow-panel):not(.slide-toggle-btn) { transition: transform 0.8s var(--smooth-bounce); }
body.slide-active > *:not(.slideshow-panel):not(.slide-toggle-btn) { transform: translateX(12vw); }

.slideshow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--preto);
}

.slideshow-header h3 { font-size: 1.5rem; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; }

.slideshow-close {
    background: var(--preto);
    color: var(--branco);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.4s var(--smooth-bounce);
}

.slideshow-close:hover { transform: rotate(90deg); background: var(--cinza); }

.slideshow-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--branco-sujo);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
    min-height: 400px;
}

.slideshow-main img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.5s var(--smooth); }
.slideshow-main img:hover { transform: scale(1.05); }

.slideshow-controls { display: flex; justify-content: center; gap: 1rem; margin: 1rem 0; }

.slideshow-btn {
    background: var(--preto);
    color: var(--branco);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.4s var(--smooth-bounce);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow-btn:hover { background: var(--cinza); transform: scale(1.1); }

.slideshow-thumbnails {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    scrollbar-width: thin;
}

.slideshow-thumbnails::-webkit-scrollbar { height: 4px; }
.slideshow-thumbnails::-webkit-scrollbar-thumb { background: var(--cinza-claro); border-radius: 4px; }

.thumbnail {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.4s var(--smooth-bounce);
    border: 2px solid transparent;
}

.thumbnail:hover { opacity: 0.8; transform: translateY(-3px); }
.thumbnail.active { opacity: 1; border-color: var(--preto); transform: scale(1.05); }
.thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* ===== SEÇÃO LOCALIZAÇÃO ===== */
.location-container { max-width: 1200px; margin: 0 auto; }

.location-info {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,0.05);
}

.location-map { transition: all 0.5s var(--smooth-bounce); }
.location-map:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,0.15) !important; }

/* ===== HISTÓRICO ===== */
.status-cancelado { border-left-color: #dc3545 !important; }
.status-concluido { border-left-color: #28a745 !important; }

.historico-filters { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }

.historico-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.historico-stat-card {
    background: var(--branco);
    padding: 1.2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* ===== AGENDA ADMIN (GRID SEMANAL) ===== */
.agenda-grid {
    display: grid;
    grid-template-columns: 100px repeat(7, 1fr);
    gap: 1px;
    background: var(--cinza-claro);
    border: 1px solid var(--cinza-claro);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.agenda-cabecalho {
    background: var(--preto);
    color: var(--branco);
    padding: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
    border-bottom: 2px solid var(--cinza);
}

.agenda-recurso {
    background: var(--branco-sujo);
    padding: 1rem;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    border-right: 1px solid var(--cinza-claro);
}

.agenda-celula {
    background: var(--branco);
    min-height: 80px;
    padding: 0.5rem;
    border-right: 1px solid rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition: background 0.2s;
    cursor: pointer;
    position: relative;
}

.agenda-celula:hover { background: rgba(0,0,0,0.02); }
.agenda-celula.hoje { background: rgba(0,123,255,0.08); border-left: 3px solid #007bff; }

.agenda-card {
    background: var(--preto);
    color: var(--branco);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s;
    cursor: pointer;
    border-left: 3px solid var(--branco);
}

.agenda-card:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.15); background: var(--cinza); }
.agenda-card small { display: block; font-size: 0.7rem; opacity: 0.8; }

.agenda-controles {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.agenda-controles button {
    background: var(--preto);
    color: var(--branco);
    border: none;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    border-radius: 40px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.agenda-controles button:hover { background: var(--cinza); transform: translateY(-2px); }

.agenda-controles select {
    padding: 0.8rem 1.5rem;
    border: 1px solid var(--cinza-claro);
    border-radius: 40px;
    background: var(--branco);
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* ===== SEÇÃO AGENDAMENTO ===== */
.agendamento {
    padding: 8rem 5%;
    background: #EBEBEB;
    position: relative;
    overflow: hidden;
}

.agendamento::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(0,0,0,0.015) 0%, transparent 70%);
    pointer-events: none;
    transform: rotate(15deg);
}

.section-title {
    text-align: center;
    margin-bottom: 5rem !important;
    position: relative;
}

.section-title h2 {
    font-size: 3rem;
    font-weight: 400;
    color: var(--preto);
    letter-spacing: 8px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--preto) 0%, var(--cinza) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title h2::before {
    content: '⎯';
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0.3;
    -webkit-text-fill-color: var(--cinza-claro);
}

.section-title h2::after {
    content: '⎯';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0.3;
    -webkit-text-fill-color: var(--cinza-claro);
}

.agendamento-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Serviços */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.service-card {
    background: rgba(255,255,255,0.8);
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.35s var(--smooth-bounce), box-shadow 0.35s var(--smooth), background 0.35s var(--smooth) !important;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    backdrop-filter: blur(10px);
}

.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.95);
}

.service-card.selected {
    background: var(--preto);
    color: var(--branco);
    border-color: var(--preto);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.service-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.service-name { font-weight: 500; font-size: 0.9rem; letter-spacing: 1px; }
.service-price { font-size: 1.2rem; font-weight: 300; margin-top: 0.5rem; color: var(--cinza); }
.service-card.selected .service-price { color: rgba(255,255,255,0.8); }

/* Calendário */
.calendario-container {
    background: rgba(255,255,255,0.8);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 2px 20px rgba(0,0,0,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.04);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.calendario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.calendario-header span { font-size: 1rem; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; }

.calendario-header button {
    background: var(--preto);
    color: var(--branco);
    border: none;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s var(--smooth), color 0.3s var(--smooth) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
}

.calendario-header button:hover { background: var(--cinza); }

.calendario-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 0.5rem;
}

.calendario-semana > div {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cinza-claro);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.3rem;
}

.calendario-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.calendario-dia {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 300;
    border-radius: 50%;
    transition: all 0.3s var(--smooth-bounce);
    position: relative;
    flex-direction: column;
    gap: 2px;
}

.calendario-dia:hover:not(.disabled):not(.empty) {
    background: var(--preto);
    color: var(--branco);
    transform: scale(1.15);
}

.calendario-dia.selected { background: var(--preto); color: var(--branco); font-weight: 500; transform: scale(1.1); }
.calendario-dia.disabled { opacity: 0.2; cursor: not-allowed; }
.calendario-dia.passado { opacity: 0.15; cursor: not-allowed; text-decoration: line-through; }
.calendario-dia.empty { cursor: default; }
.calendario-dia.out-of-window { opacity: 0.15; cursor: not-allowed; }

.calendario-dia .disponiveis {
    font-size: 0.55rem;
    color: var(--cinza-claro);
    position: absolute;
    bottom: 2px;
    display: block;
}

.calendario-dia.selected .disponiveis { color: rgba(255,255,255,0.6); }

/* Barbeiros */
.barbeiros-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    margin: 2.5rem 0 !important;
    justify-content: unset !important;
}
@media (max-width: 600px) {
    .barbeiros-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
    }
    .barbeiro-card {
        padding: 1rem 0.5rem !important;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
    .service-card {
        padding: 0.8rem 0.5rem !important;
    }
}

.barbeiro-card {
    text-align: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: transform 0.4s var(--smooth-bounce), box-shadow 0.4s var(--smooth), border-color 0.35s var(--smooth) !important;
    position: relative !important;
    background: #fafafa !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 180px !important;
}

.barbeiro-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.4s var(--smooth) !important;
}

.barbeiro-card:hover::before { 
    opacity: 1 !important; 
}

.barbeiro-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06) !important;
}

.barbeiro-card.active {
    border-color: rgba(0,0,0,0.25) !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.12), 0 12px 32px rgba(0,0,0,0.08) !important;
    background: #fff !important;
}

.barbeiro-card.active::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.3), transparent) !important;
}

.barbeiro-avatar {
    width: 130px !important;
    height: 130px !important;
    max-width: 100% !important;
    background: linear-gradient(135deg, #e8e8e8 0%, #d4d4d4 100%) !important;
    border: 2px solid rgba(0,0,0,0.06) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    font-weight: 300 !important;
    color: #555 !important;
    margin: 0 auto 1.2rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transition: box-shadow 0.4s var(--smooth), transform 0.4s var(--smooth-bounce) !important;
    position: relative !important;
    overflow: hidden !important;
}

.barbeiro-card:hover .barbeiro-avatar {
    box-shadow: 0 8px 20px rgba(0,0,0,0.14) !important;
    transform: scale(1.05) !important;
}

.barbeiro-avatar::after {
    content: '' !important;
    position: absolute !important;
    inset: -5px !important;
    border: 2px solid rgba(0,0,0,0.15) !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: opacity 0.4s var(--smooth) !important;
    animation: none !important;
}

.barbeiro-card.active .barbeiro-avatar::after {
    opacity: 1 !important;
    animation: pulseClean 2.5s ease-in-out infinite !important;
}

/* Mobile - FORÇAR centralização da logo2 */
@media (max-width: 768px) {
    /* Hero section inteira centralizada */
    .hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 6rem 5% 4rem !important;
        width: 100% !important;
    }
    
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    .hero-content h1 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto 1.5rem !important;
        text-align: center !important;
    }
    
    /* LOGO2 - FORÇAR CENTRALIZAÇÃO */
    .hero-logo {
        max-width: 85vw !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 1rem auto !important;  /* Centralização horizontal */
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Garantir que o container da logo não tenha alinhamento esquerdo */
    .hero-content h1 img.hero-logo,
    .hero-content h1 .hero-logo {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    .hero-content .highlight {
        font-size: 3rem !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }
    
    .hero-content p {
        text-align: center !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .btn-agendar {
        margin: 0 auto !important;
        display: block !important;
        width: fit-content !important;
    }
    
    /* Esconder a galeria no mobile se existir */

}}

/* Para telas muito pequenas */
@media (max-width: 480px) {
    .hero-logo {
        max-width: 80vw;
    }
    
    .hero-content .highlight {
        font-size: 2.5rem;
    }
}

/* Desktop - hero com layout original */
@media (min-width: 769px) {
    .hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
    
    .hero-content {
        text-align: left;
        align-items: flex-start;
    }
    
    .hero-content h1 {
        align-items: flex-start;
        text-align: left;
    }
    
    .hero-logo {
        margin: 0;  /* Alinhada à esquerda */
        display: inline-block;
    }
    
    .hero-content p {
        text-align: left;
        margin-left: 0;
    }
    
    .btn-agendar {
        margin: 0;
    }
}
@keyframes pulseClean {
    0%   { transform: scale(1);    opacity: 0.5; }
    50%  { transform: scale(1.09); opacity: 0.15; }
    100% { transform: scale(1);    opacity: 0.5; }
}

.barbeiro-card span {
    font-size: 0.72rem !important;
    letter-spacing: 3px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    color: #999 !important;
    transition: color 0.3s var(--smooth) !important;
}
.barbeiro-card.active span { 
    color: var(--preto) !important; 
}

.barbeiro-card:hover span { 
    color: #555 !important; 
}

@media (max-width: 760px) {
    .barbeiros-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 1.5rem 0 !important;
    }
    
    .barbeiro-card {
        padding: 1.4rem 0.5rem !important;
        min-height: 160px !important;
    }
    
    .barbeiro-card span {
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
        display: block !important;
    }
    
    .barbeiro-avatar {
        width: 95px !important;
        height: 95px !important;
        font-size: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }
}

@media (max-width: 400px) {
    .barbeiros-grid {
        gap: 8px !important;
    }
    
    .barbeiro-card {
        padding: 1.2rem 0.3rem 1rem !important;
        min-height: 130px !important;
    }
    
    .barbeiro-avatar {
        width: 80px !important;
        height: 80px !important;
        font-size: 1rem !important;
        margin-bottom: 0.6rem !important;
    }
    
    .barbeiro-card span {
        font-size: 0.65rem !important;
        letter-spacing: 0.5px !important;
    }
}

 @media (max-width: 400px) {
        .barbeiros-grid {
            gap: 12px !important;
        }
        
        .barbeiro-card {
            padding: 1.2rem 0.3rem 1rem !important;
            min-height: 130px !important;
        }
        
        .barbeiro-avatar {
            width: 90px !important;
            height: 90px !important;
            font-size: 1.5rem !important;
            margin-bottom: 0.7rem !important;
        }
        
        .barbeiro-card span {
            font-size: 0.7rem !important;
            letter-spacing: 1px !important;
        }
    }

.barbeiro-card.active span { color: var(--preto) !important; }
.barbeiro-card:hover span { color: #555 !important; }

/* Horários */
.horarios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin: 2rem 0;
    min-height: 200px;
}

.horario-btn {
    padding: 0.8rem 0.5rem;
    background: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.35s var(--smooth-bounce);
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 1px;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
}

.horario-btn:hover:not(.disabled) {
    background: var(--preto);
    color: var(--branco);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--preto);
}

.horario-btn.selected {
    background: var(--preto);
    color: var(--branco);
    border-color: var(--preto);
    font-weight: 400;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.horario-btn.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    background: #eaeaea;
    text-decoration: line-through;
}

.horario-btn.passado {
    opacity: 0.1;
    cursor: not-allowed;
    background: #ffebee;
    color: #c62828;
    border-color: #ef9a9a;
    text-decoration: line-through;
    position: relative;
}

/* Botão Confirmar */
.btn-agendar-moderno {
    background: linear-gradient(135deg, var(--preto) 0%, var(--cinza) 100%);
    color: var(--branco);
    border: none;
    padding: 1.2rem 2rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 4px;
    cursor: pointer;
    transition: transform 0.35s var(--smooth-bounce), box-shadow 0.35s var(--smooth), opacity 0.35s var(--smooth) !important;
    width: 100%;
    margin-top: 2rem;
    border-radius: 40px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.btn-agendar-moderno::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-agendar-moderno:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, var(--cinza) 0%, var(--preto) 100%);
}

.btn-agendar-moderno:hover::before { width: 300px; height: 300px; }

/* Meus Agendamentos */
.meus-agendamentos {
    background: #fff;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    border: 1px solid rgba(0,0,0,0.04);
}

.meus-agendamentos h3 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.agendamento-item {
    background: var(--branco);
    padding: 1.2rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s var(--smooth-bounce);
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.03);
}

.agendamento-item:hover { transform: translateX(8px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.05); }
.agendamento-info h4 { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.2rem; }
.agendamento-info p { color: var(--cinza-claro); font-size: 0.85rem; }

.btn-cancelar {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    color: var(--cinza);
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: all 0.5s var(--smooth-bounce);
    font-size: 0.7rem;
    letter-spacing: 1px;
    border-radius: 30px;
}

.btn-cancelar:hover { background: var(--preto); color: var(--branco); border-color: var(--preto); transform: scale(1.05); }
.btn-cancelar.disabled { background: var(--cinza-claro); color: var(--cinza); border-color: var(--cinza-claro); cursor: not-allowed; opacity: 0.6; }
.btn-cancelar.disabled:hover { background: var(--cinza-claro); color: var(--cinza); border-color: var(--cinza-claro); transform: none; }

/* ===== PAINEL ADMIN ===== */
.admin-panel {
    position: fixed;
    top: 0; right: -100%;
    width: 96%;
    max-width: 1380px;
    height: 100vh;
    background: var(--admin-bg);
    z-index: 1000;
    padding: 0;
    overflow: hidden;
    transition: right 0.65s var(--smooth-slow);
    box-shadow: -6px 0 60px rgba(0,0,0,0.16);
    display: flex;
    flex-direction: column;
}

.admin-panel.active { right: 0; }

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 62px;
    background: var(--admin-white);
    border-bottom: 1px solid var(--admin-border);
    flex-shrink: 0;
    position: relative;
    z-index: 20;
}

.admin-topbar-left { display: flex; align-items: center; gap: 1rem; }

.admin-brand { font-size: 0.72rem; font-weight: 700; letter-spacing: 4px; color: var(--admin-ink); text-transform: uppercase; }

.admin-brand-sep { width: 1px; height: 18px; background: var(--admin-border); }

.admin-topbar-user { font-size: 0.72rem; letter-spacing: 1px; color: var(--admin-muted); font-weight: 400; }

.admin-topbar-right { display: flex; align-items: center; gap: 0.75rem; }

.btn-fechar {
    background: #f0f0f0;
    color: var(--admin-ink);
    border: none;
    width: 34px; height: 34px;
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: 50%;
    transition: background 0.25s var(--smooth), transform 0.35s var(--smooth-bounce);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.btn-fechar:hover { background: var(--admin-ink); color: #fff; transform: rotate(90deg); }

.btn-limpar-topbar {
    background: transparent;
    color: var(--admin-danger);
    border: 1px solid rgba(192,57,43,0.3);
    padding: 0.35rem 0.9rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    border-radius: 30px;
    text-transform: uppercase;
    font-family: inherit;
}

.btn-limpar-topbar:hover { background: var(--admin-danger); color: #fff; border-color: var(--admin-danger); }

.admin-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.admin-sidebar {
    width: 260px;
    min-width: 260px;
    flex-shrink: 0;
    position: relative;
    background: #2A2A2A;
    border-right: none;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    gap: 0.2rem;
    overflow-y: auto;
}

.admin-nav-label {
    font-size: 0.6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    padding: 0.6rem 1.5rem 0.3rem;
    font-weight: 600;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.55);
    font-weight: 400;
    transition: color 0.25s, background 0.25s;
    position: relative;
    font-family: inherit;
    border-radius: 0;
}

.admin-nav-item .nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.admin-nav-item:hover { color: #fff; background: rgba(255,255,255,0.06); }

.admin-nav-item.active { color: #fff; font-weight: 600; background: rgba(184,151,90,0.18); }

.admin-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--admin-gold);
    border-radius: 0 3px 3px 0;
}

.admin-sidebar-spacer { flex: 1; }

.admin-main {
    flex: 1;
    position: relative;
    overflow-y: auto;
    padding: 30px;
    background: #F2F3F5;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}

.admin-main::-webkit-scrollbar { width: 5px; }
.admin-main::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--admin-white);
    padding: 1.4rem 1.4rem 1.2rem;
    text-align: left;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.09);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.3s var(--smooth-bounce), box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.stat-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--admin-gold), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.07); }
.stat-card:hover::after { opacity: 1; }

.stat-number { font-size: 2rem; font-weight: 300; color: var(--admin-ink); margin-bottom: 0.3rem; line-height: 1; }
.stat-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 2px; color: var(--admin-muted); font-weight: 600; }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeUp 0.35s var(--smooth) forwards; }

.admin-appointments {
    background: var(--admin-white);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.appointment-filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }

.filter-btn {
    padding: 0.4rem 1.1rem;
    background: transparent;
    border: 1px solid var(--admin-border);
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: inherit;
}

.filter-btn:hover, .filter-btn.active { background: var(--admin-ink); color: #fff; border-color: var(--admin-ink); }

.btn-admin-create {
    padding: 0.45rem 1.2rem;
    background: var(--admin-ink);
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: inherit;
    transition: background 0.25s, transform 0.25s var(--smooth-bounce);
}

.btn-admin-create:hover { background: var(--cinza-escuro); transform: translateY(-2px); }

/* Admin header (compat) */
.admin-header { display: none; }
.admin-body   { display: none; }
.admin-tabs   { display: none; }

/* Admin Tooltip */
.admin-tooltip {
    position: fixed;
    background: var(--admin-white);
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    padding: 1.2rem 1.4rem;
    width: 280px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    z-index: 9999;
}

.admin-tooltip-close {
    position: absolute;
    top: 0.7rem; right: 0.7rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--admin-muted);
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.admin-tooltip-close:hover { background: rgba(0,0,0,0.06); }
.admin-tooltip-name { font-size: 0.9rem; font-weight: 700; color: var(--admin-ink); margin-bottom: 0.6rem; }

.admin-tooltip-row {
    font-size: 0.78rem;
    color: var(--admin-muted);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-tooltip-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }

.admin-tooltip-btn {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: inherit;
    transition: background 0.25s, transform 0.25s;
}

.admin-tooltip-btn.cancel { background: rgba(192,57,43,0.1); color: var(--admin-danger); }
.admin-tooltip-btn.cancel:hover { background: var(--admin-danger); color: #fff; }
.admin-tooltip-btn.confirm { background: rgba(23,103,58,0.12); color: #17673a; }
.admin-tooltip-btn.confirm:hover { background: #17673a; color: #fff; }
.admin-tooltip-btn.confirm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.admin-tooltip-btn.close-btn { background: rgba(0,0,0,0.06); color: var(--admin-ink); }
.admin-tooltip-btn.close-btn:hover { background: var(--admin-ink); color: #fff; }
.admin-tooltip-btn.move { background: rgba(99,102,241,0.12); color: #4338ca; width: 100%; flex: none; }
.admin-tooltip-btn.move:hover { background: #4338ca; color: #fff; }

/* Badge sem preferência — inline nos cards da agenda */
.admin-no-pref-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.4);
    color: #4338ca;
    vertical-align: middle;
}

/* Badge maior no tooltip */
.admin-no-pref-badge-lg {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.35);
    color: #4338ca;
}

/* Destaque subtil no card sem preferência */
.agenda-card.sem-preferencia,
.agenda-day-slot.sem-preferencia {
    border-left: 3px solid #818cf8;
}

/* Modal mover barbeiro */
.modal-mover-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
}
.modal-mover-box {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--admin-white);
    border: 1px solid var(--admin-border);
    border-radius: 18px;
    padding: 1.5rem 1.6rem;
    width: min(340px, 92vw);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    z-index: 10001;
}
.mover-barbeiros-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mover-barbeiro-opcao {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    border: 1.5px solid rgba(99,102,241,0.3);
    background: rgba(99,102,241,0.07);
    color: #4338ca;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    text-align: left;
}
.mover-barbeiro-opcao:hover {
    background: #4338ca;
    color: #fff;
    transform: translateX(3px);
}

/* Admin menu toggle: hidden on desktop */
.admin-menu-toggle { display: none; }
.admin-sidebar-overlay { display: none; }

/* ===== FOOTER ===== */
footer {
    position: relative;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(184,151,90,0.22) 0%, rgba(184,151,90,0) 48%),
        linear-gradient(180deg, #0b0c0e 0%, #111316 100%);
    color: var(--branco);
    padding: 4.4rem 5% 2.4rem;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,170,80,0.62), transparent);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.footer-section {
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 1.4rem 1.35rem;
    box-shadow: 0 14px 34px rgba(0,0,0,0.22);
    transition: transform 0.28s var(--smooth-bounce), border-color 0.28s, box-shadow 0.28s;
}

.footer-section:hover {
    transform: translateY(-4px);
    border-color: rgba(184,151,90,0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.footer-section h4 {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.92);
    text-transform: uppercase;
}

.footer-section p {
    color: rgba(233,237,243,0.72);
    line-height: 1.8;
    font-size: 0.88rem;
}

.footer-section .instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--branco);
    text-decoration: none;
    margin-top: 1rem;
    padding: 0.56rem 1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.7px;
    transition: all 0.4s var(--smooth-bounce);
}

.footer-section .instagram-link:hover {
    background: rgba(184,151,90,0.2);
    border-color: rgba(184,151,90,0.48);
    transform: translateY(-2px);
}

.footer-avalia-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #f6e7b2;
    text-decoration: none;
    margin-top: 0.6rem;
    padding: 0.56rem 1rem;
    background: rgba(200,170,110,0.12);
    border: 1px solid rgba(200,170,110,0.35);
    border-radius: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.7px;
    transition: all 0.3s;
}

.footer-avalia-btn:hover {
    background: rgba(200,170,110,0.25);
    border-color: rgba(200,170,110,0.7);
    transform: translateY(-2px);
}

.footer-section .contact-info { list-style: none; }

.footer-section .contact-info li {
    margin-bottom: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(233,237,243,0.74);
    font-size: 0.86rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 2.2rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    color: var(--cinza-claro);
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
}

.footer-signature {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.15rem;
    padding: 0.7rem 1.4rem 0.7rem 1rem;
    text-decoration: none;
    color: var(--branco);
    border: 1px solid rgba(240,145,58,0.28);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(240,145,58,0.10) 0%, rgba(255,255,255,0.04) 60%, rgba(240,145,58,0.06) 100%),
        radial-gradient(circle at top left, rgba(240,145,58,0.14), transparent 50%);
    box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 0 0 0 rgba(240,145,58,0);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--smooth-bounce), box-shadow 0.35s var(--smooth), border-color 0.35s var(--smooth);
}

.footer-signature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform 0.55s var(--smooth);
}

.footer-signature:hover::before {
    transform: translateX(100%);
}

.footer-signature:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(240,145,58,0.62);
    box-shadow: 0 16px 40px rgba(0,0,0,0.32), 0 0 22px rgba(240,145,58,0.18);
}

.footer-signature-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(240,145,58,0.55);
    flex-shrink: 0;
}

.footer-signature-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.46);
    font-weight: 500;
}

.footer-signature-brand {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 3.2px;
    display: inline-flex;
    align-items: center;
    gap: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(240,145,58,0.45);
    transition: text-shadow 0.35s var(--smooth), color 0.35s var(--smooth);
}

.footer-signature-brand-back {
    color: #ffffff;
}

.footer-signature-brand-ora {
    color: #ff4500;
}

.footer-signature:hover .footer-signature-brand {
    text-shadow: 0 0 26px rgba(240,145,58,0.65);
}

.footer-signature:hover .footer-signature-brand-ora {
    color: #f5a85c;
}

/* ===== MODAL ===== */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    padding: 2rem;
    background:
        radial-gradient(circle at top left, rgba(200,170,110,0.16), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255,255,255,0.12), transparent 22%),
        rgba(8, 10, 12, 0.68);
    backdrop-filter: blur(16px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal.active { display: flex; }

#loginModal {
    padding: 0.75rem;
    overflow: auto;
    align-items: flex-start;
}

.modal-content {
    position: relative;
    background: linear-gradient(145deg, rgba(250,250,250,0.98), rgba(238,238,238,0.96));
    padding: 3rem;
    max-width: 450px;
    width: 90%;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 30px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.modal-content h2 { font-size: 2rem; font-weight: 500; margin-bottom: 2rem; text-align: center; }

.auth-view { display: none; }
.auth-view.active { display: block; animation: authViewFade 0.45s var(--smooth) both; }

@keyframes authViewFade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-modal-content {
    max-width: 980px;
    width: min(980px, 96vw);
    padding: 0;
    height: min(760px, calc(100dvh - 1rem));
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
    margin: auto;
}

.auth-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0 30px 0 14px;
    background: rgba(17,17,17,0.85);
    color: #f5f5f5;
    cursor: pointer;
    z-index: 3;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.35s var(--smooth-bounce), background 0.35s var(--smooth);
}

.auth-modal-close:hover {
    transform: scale(1.05);
    background: rgba(200,170,110,0.92);
}

.auth-modal-shell {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.auth-modal-shell.register-mode .auth-modal-aside {
    background:
        linear-gradient(160deg, rgba(15,15,15,0.92), rgba(26,26,26,0.86)),
        radial-gradient(circle at top, rgba(200,170,110,0.22), transparent 36%);
}

.auth-modal-aside {
    position: relative;
    padding: 3.5rem 3rem;
    color: var(--branco);
    min-width: 0;
    overflow: auto;
    background:
        linear-gradient(160deg, rgba(12,12,12,0.96), rgba(28,28,28,0.88)),
        radial-gradient(circle at top left, rgba(200,170,110,0.24), transparent 34%),
        radial-gradient(circle at bottom right, rgba(255,255,255,0.08), transparent 28%);
}

.auth-modal-aside::after {
    content: '';
    position: absolute;
    inset: auto 2rem 2rem auto;
    width: 140px;
    height: 140px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(200,170,110,0.1));
    transform: rotate(14deg);
}

.auth-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.78);
    font-size: 0.72rem;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin-bottom: 1.3rem;
}

.auth-modal-title {
    font-size: clamp(2.35rem, 4vw, 3.45rem);
    line-height: 0.96;
    text-align: left !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.05em;
    max-width: 10ch;
}

.auth-modal-description {
    color: rgba(255,255,255,0.72);
    font-size: 0.98rem;
    line-height: 1.75;
    max-width: 40ch;
    margin-bottom: 2rem;
}

.auth-modal-highlights {
    display: grid;
    gap: 0.95rem;
    margin-bottom: 2rem;
}

.auth-highlight-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem 1.05rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
}

.auth-highlight-item p {
    color: rgba(255,255,255,0.82);
    font-size: 0.92rem;
    line-height: 1.55;
}

.auth-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(200,170,110,0.92), rgba(160,132,76,0.92));
    color: #161616;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.auth-modal-badge {
    position: relative;
    z-index: 1;
    max-width: 28ch;
    padding: 1rem 1.15rem;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.08);
    color: #f6e7b2;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

.auth-modal-panel {
    position: relative;
    padding: 2.5rem 3rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    overflow: auto;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.88), rgba(244,244,244,0.98)),
        radial-gradient(circle at top, rgba(200,170,110,0.14), transparent 24%);
}

@media (min-width: 1500px) and (min-height: 900px) {
    #loginModal {
        padding: 1.5rem;
        align-items: center;
    }

    .auth-modal-content {
        width: min(1080px, 94vw);
        height: min(840px, calc(100dvh - 3rem));
        max-height: calc(100dvh - 3rem);
        border-radius: 32px;
    }

    .auth-modal-close {
        border-radius: 0 32px 0 14px;
    }

    .auth-modal-shell {
        grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    }

    .auth-modal-aside {
        padding: 4rem 3.2rem;
    }

    .auth-modal-title {
        max-width: 9ch;
        font-size: clamp(2.8rem, 4.2vw, 3.9rem);
    }

    .auth-modal-description {
        font-size: 1rem;
        max-width: 42ch;
        margin-bottom: 2.2rem;
    }

    .auth-modal-highlights {
        gap: 1rem;
        margin-bottom: 2.1rem;
    }

    .auth-highlight-item {
        padding: 1.05rem 1.1rem;
    }

    .auth-modal-panel {
        padding: 2.5rem 3rem 2.2rem 2.35rem;
        justify-content: center;
    }

    .auth-switcher {
        width: min(100%, 380px);
        margin-bottom: 2.1rem;
    }

    .auth-panel-eyebrow {
        margin-bottom: 1rem;
    }

    .auth-subtitle {
        margin-bottom: 1.6rem;
        font-size: 0.95rem;
    }

    .auth-field {
        margin-bottom: 1rem;
    }

    .modal-content input {
        padding: 1.1rem 1.12rem;
    }

    .auth-actions {
        margin-top: 1.3rem;
    }
}

@media (max-width: 980px) {
    .modal {
        padding: 1rem;
    }

    .auth-modal-content {
        width: min(100%, 780px);
        height: min(720px, calc(100dvh - 1rem));
        max-height: calc(100dvh - 1rem);
    }

    .auth-modal-shell {
        grid-template-columns: 1fr;
        height: 100%;
        min-height: 0;
        max-height: none;
    }

    .auth-modal-aside {
        padding: 1.8rem 1.8rem 1.35rem;
    }

    .auth-modal-title {
        max-width: 14ch;
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    .auth-modal-description {
        max-width: 52ch;
        margin-bottom: 1.25rem;
    }

    .auth-modal-highlights {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .auth-modal-badge {
        max-width: none;
    }

    .auth-modal-panel {
        padding: 1.5rem 1.6rem 1.7rem;
    }
}

@media (max-width: 720px), (max-height: 820px) {
    .modal {
        padding: 0.75rem;
        align-items: center;
    }

    .auth-modal-content {
        width: min(440px, 100%);
        height: auto;
        max-height: calc(100dvh - 1.5rem);
        border-radius: 28px;
        overflow: auto;
    }

    .auth-modal-shell {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }

    /* Hide the aside panel completely on mobile — form stands alone */
    .auth-modal-aside {
        display: none;
    }

    .auth-modal-close {
        width: 38px;
        height: 38px;
        border-radius: 0 28px 0 12px;
    }

    /* Make the panel fill the modal nicely */
    .auth-modal-panel {
        padding: 2.5rem 2rem 2rem;
        background:
            linear-gradient(180deg, #fff 0%, #f9f9f9 100%),
            radial-gradient(circle at top right, rgba(200,170,110,0.12), transparent 50%);
        border-radius: 28px;
        min-height: 0;
        justify-content: center;
    }

    /* Logo / eyebrow centred */
    .auth-panel-eyebrow {
        text-align: center;
        margin-bottom: 0.3rem;
    }

    /* Title centred and elegant */
    .auth-view h2 {
        text-align: center;
        font-size: 2rem;
        letter-spacing: 0.08em;
        margin-bottom: 0.4rem;
    }

    .auth-subtitle {
        text-align: center;
        margin: 0 auto 1.5rem;
        max-width: 32ch;
        font-size: 0.88rem;
        line-height: 1.6;
        color: #666;
    }

    /* Decorative gold line under title */
    .auth-view h2::after {
        content: '';
        display: block;
        width: 2.5rem;
        height: 2px;
        background: linear-gradient(90deg, rgba(200,170,110,0.9), rgba(200,170,110,0.2));
        border-radius: 2px;
        margin: 0.6rem auto 0;
    }

    .auth-field {
        margin-bottom: 0.85rem;
    }

    .auth-field span {
        font-size: 0.7rem;
        letter-spacing: 1.2px;
        margin-bottom: 0.4rem;
    }

    .modal-content input {
        padding: 0.95rem 1rem;
        border-radius: 14px;
        font-size: 0.95rem;
        border: 1.5px solid rgba(0,0,0,0.1);
        transition: border-color 0.2s;
    }

    .modal-content input:focus {
        border-color: rgba(200,170,110,0.7);
        outline: none;
    }

    .auth-actions {
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 1.2rem;
    }

    .btn-modal {
        width: 100%;
        padding: 0.9rem 1rem;
        border-radius: 14px;
        font-size: 0.72rem;
        letter-spacing: 1.5px;
    }

    .btn-modal.primary {
        background: #111;
        color: #fff;
    }

    .btn-modal.secondary {
        background: transparent;
        border: 1.5px solid rgba(0,0,0,0.15);
        color: #333;
    }

    .auth-footer-note {
        margin-top: 1rem;
        text-align: center;
        font-size: 0.82rem;
    }

    .auth-switcher {
        display: none;
    }
}

@media (max-height: 760px) {
    .auth-modal-aside {
        padding: 1.2rem 1.2rem 1rem;
    }

    .auth-modal-highlights {
        gap: 0.6rem;
        margin-bottom: 0.85rem;
    }

    .auth-highlight-item {
        padding: 0.66rem 0.72rem;
    }

    .auth-highlight-item p {
        font-size: 0.81rem;
        line-height: 1.35;
    }

    .auth-modal-badge {
        padding: 0.72rem 0.82rem;
        font-size: 0.74rem;
    }

    .auth-modal-panel {
        padding: 1rem;
    }

    .auth-subtitle {
        margin-bottom: 0.8rem;
    }

    .auth-actions {
        margin-top: 0.85rem;
    }
}

@media (max-height: 680px) {
    #loginModal {
        padding: 0.5rem;
    }

    .auth-modal-content {
        height: auto;
        max-height: calc(100dvh - 0.75rem);
        border-radius: 20px;
    }

    .auth-modal-close {
        border-radius: 0 20px 0 10px;
    }

    .auth-modal-shell {
        grid-template-columns: 1fr;
        height: auto;
    }

    .auth-modal-aside {
        display: none;
    }

    .auth-modal-panel {
        padding: 0.95rem 0.95rem 1rem;
    }

    .auth-switcher {
        margin-bottom: 0.85rem;
    }

    .auth-panel-eyebrow {
        margin-bottom: 0.5rem;
    }

    .auth-subtitle {
        margin-bottom: 0.75rem;
        font-size: 0.82rem;
    }

    .auth-field {
        margin-bottom: 0.6rem;
    }

    .modal-content input {
        padding: 0.88rem 0.92rem;
        border-radius: 12px;
    }

    .btn-modal {
        padding: 0.82rem 0.9rem;
    }

    .auth-footer-note {
        margin-top: 0.7rem;
        font-size: 0.78rem;
    }
}

@media (max-height: 600px) {
    .auth-modal-close {
        width: 34px;
        height: 34px;
        border-radius: 0 20px 0 10px;
    }

    .auth-switch-btn {
        padding: 0.68rem 0.72rem;
        font-size: 0.7rem;
    }
}

.auth-switcher {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.4rem;
    margin-bottom: 2rem;
    width: min(100%, 380px);
    border-radius: 999px;
    background: rgba(16,16,16,0.06);
    border: 1px solid rgba(16,16,16,0.08);
}

.auth-switch-btn {
    border: none;
    background: transparent;
    color: var(--cinza);
    padding: 0.85rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    transition: all 0.35s var(--smooth);
}

.auth-switch-btn.active {
    background: linear-gradient(145deg, #111, #2b2b2b);
    color: var(--branco);
    box-shadow: 0 12px 24px rgba(0,0,0,0.14);
}

.auth-panel-eyebrow {
    color: rgba(16,16,16,0.46);
    font-size: 0.76rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin-bottom: 0.95rem;
    font-weight: 700;
}

.auth-subtitle {
    margin: -0.4rem 0 1.7rem;
    text-align: left;
    color: #5b5b5b;
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: 34ch;
}

.auth-field {
    display: block;
    margin-bottom: 0.95rem;
}

.auth-field span {
    display: block;
    margin-bottom: 0.48rem;
    color: #2e2e2e;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.modal-content input {
    width: 100%;
    padding: 1.08rem 1.1rem;
    margin-bottom: 0;
    border: 1px solid rgba(16,16,16,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(242,242,242,0.94));
    font-size: 1rem;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    transition: border-color 0.35s var(--smooth), box-shadow 0.35s var(--smooth), transform 0.35s var(--smooth);
}

#adminCreateModal .modal-content select {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(0,0,0,0.1);
    background: var(--branco-sujo);
    font-size: 1rem;
}

.modal-content input:focus {
    outline: none;
    border-color: rgba(184,151,90,0.75);
    box-shadow: 0 0 0 5px rgba(184,151,90,0.12);
    transform: translateY(-1px);
}

.modal-buttons { display: flex; gap: 1rem; margin-top: 1rem; }

.auth-actions {
    margin-top: 1.35rem;
}

.btn-modal {
    flex: 1;
    padding: 1rem 1.15rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.4s var(--smooth-bounce), background 0.35s var(--smooth), color 0.35s var(--smooth), border-color 0.35s var(--smooth), box-shadow 0.35s var(--smooth);
    font-weight: 700;
    border-radius: 18px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 0.78rem;
}

.btn-modal.primary {
    background: linear-gradient(145deg, #0f0f0f, #2b2b2b);
    color: var(--branco);
    box-shadow: 0 18px 30px rgba(0,0,0,0.16);
}

.btn-modal.primary:hover {
    background: linear-gradient(145deg, #191919, #363636);
    transform: translateY(-2px);
}

.btn-modal.secondary {
    background: rgba(255,255,255,0.82);
    color: var(--preto);
    border-color: rgba(16,16,16,0.12);
}

.btn-modal.secondary:hover {
    background: rgba(16,16,16,0.92);
    color: var(--branco);
    transform: translateY(-2px);
}

.auth-footer-note {
    margin-top: 1.2rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    color: #666;
    font-size: 0.9rem;
}

.auth-footer-link {
    border: none;
    background: transparent;
    padding: 0;
    color: #7f6337;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
}

.auth-footer-link:hover {
    color: #5f4925;
}

@media (max-width: 1499px) and (min-width: 721px), (min-width: 721px) and (max-height: 899px) {
    #loginModal {
        padding: 1rem;
        align-items: center;
    }

    .auth-modal-content {
        width: min(560px, 94vw);
        height: auto;
        max-height: calc(100dvh - 2rem);
        border-radius: 28px;
    }

    .auth-modal-shell {
        grid-template-columns: 1fr;
        height: auto;
    }

    .auth-modal-aside {
        display: none;
    }

    .auth-modal-panel {
        padding: 2.5rem 2.8rem 1.6rem 1.6rem;
    }

    .auth-switcher {
        width: 100%;
        margin-bottom: 1rem;
    }

    .auth-panel-eyebrow {
        margin-bottom: 0.7rem;
    }

    .modal-content h2 {
        font-size: 1.9rem;
    }

    .auth-subtitle {
        max-width: none;
        margin-bottom: 1rem;
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .auth-field {
        margin-bottom: 0.78rem;
    }

    .modal-content input {
        padding: 1rem;
        border-radius: 15px;
    }

    .auth-actions {
        margin-top: 1rem;
        gap: 0.75rem;
    }

    .auth-footer-note {
        margin-top: 0.9rem;
    }
}

/* ===== TOAST ===== */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--preto);
    color: var(--branco);
    padding: 1rem 2rem;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.6s var(--smooth-bounce);
    z-index: 3000;
    border-left: 4px solid var(--branco);
}

.toast.show { transform: translateY(0); opacity: 1; }

/* ===== NOTIFICAÇÕES ===== */
.notificacoes-panel {
    position: fixed;
    top: 82px; right: 28px;
    width: 390px;
    max-height: 560px;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(184,151,90,0.12) 0%, rgba(184,151,90,0) 52%),
        linear-gradient(165deg, rgba(255,255,255,0.98) 0%, rgba(248,249,251,0.97) 100%);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.16);
    border: 1px solid rgba(15,23,42,0.08);
    z-index: 2000;
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s var(--smooth-bounce);
    overflow: hidden;
}

.notificacoes-panel.active { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.notificacoes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.05rem 1.15rem 0.95rem 1.2rem;
    background: linear-gradient(145deg, #111827, #1f2937);
    color: var(--branco);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.notificacoes-header h3 {
    margin: 0;
    font-size: 0.98rem;
    letter-spacing: 1.2px;
    font-weight: 700;
    text-transform: uppercase;
}

.notificacoes-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.notificacoes-header-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--branco);
    cursor: pointer;
    font-size: 0.72rem;
    padding: 0.45rem 0.75rem;
    border-radius: 12px;
    transition: background 0.3s ease, transform 0.25s var(--smooth-bounce), border-color 0.3s ease;
    font-family: inherit;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 600;
}

.notificacoes-header-btn.close {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.notificacoes-header-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
}

.notificacoes-lista {
    max-height: 470px;
    overflow-y: auto;
    padding: 0.55rem;
    display: grid;
    gap: 0.55rem;
}

.notificacoes-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--cinza);
    padding: 1.5rem;
}

.notificacoes-empty-icon {
    font-size: 2.2rem;
    opacity: 0.45;
    margin-bottom: 0.6rem;
}

.notificacao-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.88rem 0.9rem;
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 10px 18px rgba(15,23,42,0.05);
    transition: background 0.3s ease, transform 0.25s var(--smooth-bounce), box-shadow 0.25s ease, border-color 0.25s ease;
}

.notificacao-item:hover {
    background: rgba(255,255,255,0.92);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(15,23,42,0.08);
}

.notificacao-item.nao-lida {
    background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(247,249,252,0.94));
    border-color: rgba(184,151,90,0.28);
}

.notificacao-indicador {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    background: rgba(15,23,42,0.08);
    color: #334155;
}

.notificacao-indicador.success {
    background: rgba(34,197,94,0.14);
    color: #15803d;
}

.notificacao-indicador.warning {
    background: rgba(245,158,11,0.16);
    color: #b45309;
}

.notificacao-indicador.error {
    background: rgba(239,68,68,0.14);
    color: #b91c1c;
}

.notificacao-conteudo {
    min-width: 0;
}

.notificacao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.38rem;
}

.notificacao-tipo-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.4rem;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    background: rgba(15,23,42,0.07);
    color: #334155;
}

.notificacao-tipo-chip.success {
    background: rgba(34,197,94,0.14);
    color: #15803d;
}

.notificacao-tipo-chip.warning {
    background: rgba(245,158,11,0.16);
    color: #b45309;
}

.notificacao-tipo-chip.error {
    background: rgba(239,68,68,0.14);
    color: #b91c1c;
}

.notificacao-mensagem {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.notificacao-mensagem strong {
    font-size: 0.9rem;
    line-height: 1.35;
    color: #0f172a;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.notificacao-mensagem span {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #475569;
}

.notificacao-conteudo small {
    color: #64748b;
    font-size: 0.72rem;
    white-space: nowrap;
}

.btn-marcar-lida {
    background: linear-gradient(145deg, #111827, #1f2937);
    color: var(--branco);
    border: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.3s ease;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(15,23,42,0.14);
}

.btn-marcar-lida:hover { background: #0f172a; transform: translateY(-1px); }

.notificacao-lida-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #64748b;
    background: rgba(15,23,42,0.05);
    border: 1px solid rgba(15,23,42,0.08);
}

.btn-notificacoes {
    background: rgba(255,255,255,0.56);
    border: 1px solid rgba(16,16,16,0.12);
    color: var(--preto);
    padding: 0.58rem 0.95rem;
    cursor: pointer;
    transition: all 0.3s var(--smooth-bounce);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.75rem;
    text-transform: uppercase;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}

.btn-notificacoes:hover { background: var(--preto); color: var(--branco); transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.14); }

.badge {
    background: linear-gradient(145deg, #dc3545, #ef4444);
    color: white;
    border-radius: 50%;
    padding: 0.14rem 0.42rem;
    font-size: 0.66rem;
    font-weight: 700;
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 6px 12px rgba(220,53,69,0.28);
}

/* ===== MENSAGENS ===== */
.mensagem-info {
    text-align: center;
    padding: 2rem;
    color: var(--cinza);
    font-style: italic;
    background: var(--branco-sujo);
    border-radius: 16px;
    grid-column: span 4;
}

/* ===== SEÇÃO MAPA ===== */
.mapa-secao { padding: 8rem 5%; background: #EBEBEB; }

.mapa-wrapper {
    width: 100%;
    height: 480px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    margin: 0 auto 1.5rem;
    max-width: 1400px;
}

.mapa-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--cinza);
    letter-spacing: 1px;
}

.mapa-link {
    color: var(--preto);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--preto);
    padding-bottom: 2px;
    transition: opacity 0.3s ease;
}

.mapa-link:hover { opacity: 0.6; }

/* ===== GALERIA DE CORTES ===== */
.galeria-secao { padding: 8rem 5%; background: #EBEBEB; }

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.galeria-card {
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    background: #d5d5d5;
    aspect-ratio: 1;
    transition: transform 0.4s var(--smooth-bounce), box-shadow 0.4s var(--smooth);
}

.galeria-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.galeria-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.galeria-card .placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #d8d8d8 0%, #cacaca 100%);
    display: flex; align-items: center; justify-content: center;
    color: #a0a0a0; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
}

.galeria-card.em-alta::before {
    content: 'EM ALTA';
    position: absolute;
    top: 10px; left: 10px;
    background: var(--preto); color: var(--branco);
    font-size: 0.6rem; letter-spacing: 2px;
    padding: 4px 8px; z-index: 2; border-radius: 2px;
}

.galeria-card.em-alta { box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* Galeria 7 mosaico */
.galeria-7 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 240px 200px;
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto;
}

.galeria-7 .galeria-card { border-radius: 10px; }
.galeria-7 .g7-wide:nth-child(5) { grid-column: 1 / 3; }
.galeria-7 .g7-wide:nth-child(6) { grid-column: 3 / 4; }
.galeria-7 .g7-wide:nth-child(7) { grid-column: 4 / 5; }

/* ===== GALERIA SIDEBAR ===== */
.galeria-open-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 2.5rem auto 0;
    background: transparent;
    border: 1px solid var(--preto);
    color: var(--preto);
    padding: 0.9rem 2.2rem;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.35s var(--smooth), color 0.35s var(--smooth), transform 0.35s var(--smooth-bounce);
}

.galeria-open-btn:hover { background: var(--preto); color: var(--branco); transform: translateY(-2px); }
.galeria-open-btn svg { transition: transform 0.35s var(--smooth-bounce); }
.galeria-open-btn:hover svg { transform: translateX(4px); }

.galeria-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    z-index: 500;
    pointer-events: none;
    transition: background 0.45s var(--smooth);
}

.galeria-overlay.active { background: rgba(0,0,0,0.55); pointer-events: all; }

.galeria-sidebar {
    position: fixed;
    top: 0; right: 0;
    width: min(680px, 95vw);
    height: 100vh;
    background: #f5f5f5;
    z-index: 501;
    transform: translateX(100%);
    transition: transform 0.55s var(--smooth-slow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -10px 0 40px rgba(0,0,0,0.12);
}

.galeria-sidebar.active { transform: translateX(0); }

.galeria-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
    background: #fff;
}

.galeria-sidebar-header h3 { color: var(--preto); font-size: 0.8rem; letter-spacing: 4px; font-weight: 500; text-transform: uppercase; }

.galeria-sidebar-close {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.12);
    color: var(--cinza);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s var(--smooth);
}

.galeria-sidebar-close:hover { background: var(--preto); border-color: var(--preto); color: #fff; }

/* 4×4 grid inside sidebar */
.galeria-sidebar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 1.5rem 2rem 2rem;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}

.galeria-sidebar-grid::-webkit-scrollbar { width: 4px; }
.galeria-sidebar-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

.sidebar-card {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #e0e0e0;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.35s var(--smooth-bounce), box-shadow 0.35s var(--smooth);
}

.sidebar-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s var(--smooth); }

.sidebar-card .sb-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #e0e0e0 0%, #d4d4d4 100%);
    display: flex; align-items: center; justify-content: center;
    color: #aaa; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase;
}

.sidebar-card::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.35s var(--smooth);
    border-radius: 8px;
}

.sidebar-card:hover img { transform: scale(1.08); }
.sidebar-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.14); }
.sidebar-card:hover::after { background: rgba(0,0,0,0.04); }

.sidebar-card.em-alta-sb::before {
    content: '↑';
    position: absolute;
    top: 7px; left: 7px;
    background: var(--preto); color: #fff;
    font-size: 0.6rem; font-weight: 700;
    padding: 3px 7px; border-radius: 4px; z-index: 2; letter-spacing: 1px;
}

/* ===== MODAL DE DETALHE DO CORTE ===== */
.corte-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: none;
    transition: background 0.4s var(--smooth);
}

.corte-modal-overlay.active { background: rgba(0,0,0,0.65); pointer-events: all; }

.corte-modal {
    background: #fff;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 40px 80px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.45s var(--smooth-slow), transform 0.45s var(--smooth-slow);
    position: relative;
    overflow: hidden;
}

.corte-modal-overlay.active .corte-modal { opacity: 1; transform: translateY(0) scale(1); }

.corte-modal-img { position: relative; background: #e8e8e8; min-height: 320px; }
.corte-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.corte-modal-img .modal-placeholder {
    width: 100%; height: 100%; min-height: 320px;
    background: linear-gradient(135deg, #d8d8d8 0%, #c8c8c8 100%);
    display: flex; align-items: center; justify-content: center;
    color: #aaa; font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase;
}

.corte-modal-info {
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
}

.corte-modal-tag {
    display: inline-block;
    background: var(--preto); color: #fff;
    font-size: 0.6rem; letter-spacing: 3px;
    text-transform: uppercase;
    padding: 4px 12px; border-radius: 20px; width: fit-content;
}

.corte-modal-nome { font-size: 1.8rem; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: var(--preto); line-height: 1.2; }

.corte-modal-desc { font-size: 0.9rem; color: var(--cinza); line-height: 1.8; font-weight: 300; }

.corte-modal-perfil { border-top: 1px solid rgba(0,0,0,0.06); padding-top: 1rem; }

.corte-modal-perfil h4 { font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cinza-claro); margin-bottom: 0.5rem; font-weight: 500; }

.corte-modal-perfil p { font-size: 0.85rem; color: var(--cinza); line-height: 1.7; }

.corte-modal-fechar {
    position: absolute; top: 1rem; right: 1rem;
    background: rgba(0,0,0,0.06);
    border: none; width: 36px; height: 36px;
    border-radius: 50%; cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s var(--smooth); z-index: 10;
}

.corte-modal-fechar:hover { background: rgba(0,0,0,0.14); }

/* ===== FAB (MOBILE ONLY) ===== */
.fab-agendar { display: none; }

/* ===== VISUALIZADOR ===== */
.visualizador {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s var(--smooth);
}

.visualizador.active { opacity: 1; }
.visualizador-conteudo { position: relative; max-width: 90vw; max-height: 90vh; }
.visualizador-conteudo img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; }

.visualizador-fechar {
    position: absolute; top: -16px; right: -16px;
    background: var(--branco); color: var(--preto);
    border: none; width: 36px; height: 36px;
    border-radius: 50%; cursor: pointer; font-size: 1rem;
    transition: all 0.3s var(--smooth-bounce);
}

.visualizador-fechar:hover { transform: rotate(90deg); }

/* ===== AGENDA DAY VIEW ===== */
.agenda-day-view {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--cinza-claro);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-top: 2rem;
    background: var(--cinza-claro);
}

.agenda-day-header, .agenda-day-body {
    display: grid;
    grid-template-columns: 52px 1fr 1fr 1fr;
    gap: 1px;
}

.agenda-day-header-cell {
    background: var(--preto);
    color: var(--branco);
    padding: 0.75rem 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
}

.agenda-hour-label {
    background: var(--branco-sujo);
    padding: 0.5rem 0.4rem;
    font-size: 0.68rem;
    color: var(--cinza-claro);
    letter-spacing: 0.5px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    height: 56px;
    display: flex; align-items: center; justify-content: center;
}

.agenda-day-cell {
    background: var(--branco);
    height: 56px;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    cursor: pointer;
    transition: background 0.2s;
    padding: 2px;
}

.agenda-day-cell:hover { background: rgba(0,0,0,0.02); }

.agenda-day-slot {
    background: var(--preto);
    color: var(--branco);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    height: 100%;
    display: flex; align-items: center; gap: 0.3rem;
    cursor: pointer; overflow: hidden;
    transition: background 0.2s;
}

.agenda-day-slot:hover { background: var(--cinza); }
.agenda-day-now-line { height: 2px; background: #e74c3c; }
.gold-header { border-bottom: 2px solid var(--admin-gold) !important; }
.agenda-period-label { font-size: 0.8rem; letter-spacing: 1px; color: var(--cinza); font-weight: 400; }
.agenda-grid-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }

/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {
    .admin-panel { width: 100%; }
    .admin-sidebar { width: 200px; min-width: 200px; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .agenda-day-header, .agenda-day-body { grid-template-columns: 52px 1fr 1fr 1fr; }
}

@media (max-width: 760px) {
    .galeria-7 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .galeria-7 .g7-wide:nth-child(5),
    .galeria-7 .g7-wide:nth-child(6),
    .galeria-7 .g7-wide:nth-child(7) { grid-column: span 1; }
}

@media (max-width: 640px) {
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .corte-modal { grid-template-columns: 1fr; }
}

/* ==========================================================
   MOBILE RESPONSIVE — AJUSTES CRÍTICOS (≤ 768px)
   ========================================================== */
@media (max-width: 768px) {

    /* ── FAB: oculto no mobile ── */
    .fab-agendar { display: none !important; }

    /* ── Hambúrguer: visível no mobile. Nav desktop: oculto ── */
    .menu-mobile-btn { display: flex !important; }
    .nav-links       { display: none !important; }

    /* ── Nav: logo à esquerda (comportamento natural) ── */
    nav { padding: 0.8rem 4%; }

    .logo-img { height: 44px; }

    .nav-links a {
        font-size: 1.1rem;
        letter-spacing: 2px;
        padding: 0.8rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        display: block;
    }

    .nav-actions {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        gap: 0.7rem;
    }

    .btn-login, .btn-admin {
        width: 100%;
        text-align: center;
        padding: 0.85rem 1.2rem !important;
        font-size: 0.9rem !important;
        border-radius: 50px !important;
    }

    .language-selector { justify-content: center; }

    /* ── Hero Mobile ── */
     .hero {
        min-height: 100svh;
        flex-direction: column;
        align-items: center;
        padding: 6rem 5% 7rem;
        gap: 0;
        width: 100%;
    }

    .hero-content {
        width: 100%;
        text-align: center;
    }

    .hero-logo { 
        max-width: 260px; 
        display: block; 
        margin: 0 auto; 
    }
    
    .hero-content .highlight { 
        font-size: 3rem; 
    }
    
    .hero-content p { 
        font-size: 0.95rem; 
        max-width: 100%; 
    }

    .btn-agendar {
        width: 100%;
        text-align: center;
        padding: 1rem 2rem !important;
        font-size: 0.9rem;
    }

    /* ── GALERIA HERO: ocultar no mobile ── */
    .hero-galeria-col {
        display: none !important;
    }

    .foto-mosaico {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(4, 140px) !important;
        height: auto !important;
        max-width: 100% !important;
        gap: 0.5rem !important;
    }

    /* Reset grid placements para 2 colunas */
    .mosaico-item:nth-child(1),
    .mosaico-item:nth-child(2),
    .mosaico-item:nth-child(3),
    .mosaico-item:nth-child(4),
    .mosaico-item:nth-child(5),
    .mosaico-item:nth-child(6),
    .mosaico-item:nth-child(7),
    .mosaico-item:nth-child(8) {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .hero-ver-todos { justify-content: center; }

    /* ── Agendamento mobile ── */
    .agendamento {
        /* FIX: padding lateral para não encostar nas bordas */
        padding: 5rem 5% 8rem;
    }

    .agendamento-container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .services-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }

    .service-card { padding: 1rem; }

    .barbeiros-grid {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .barbeiro-avatar { width: 110px !important; height: 110px !important; font-size: 1.5rem !important; max-width: 100% !important; }

    .horarios-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .horario-btn {
        padding: 0.6rem 0.3rem;
        font-size: 0.8rem;
        min-height: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.1rem;
        line-height: 1.3;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* Calendário: células maiores para toque */
    .calendario-dia { min-height: 44px; font-size: 0.95rem; border-radius: 10px; }
    .calendario-semana > div { font-size: 0.7rem; }

    /* ── Modais mobile ── */
    .modal-content {
        padding: 2rem 1.5rem;
        width: 92%;
        border-radius: 20px;
    }

    .modal {
        padding: 1rem;
        align-items: stretch;
    }

    .modal.active {
        align-items: center;
    }

    .auth-modal-content {
        width: min(100%, 680px);
        max-height: calc(100vh - 2rem);
        overflow: auto;
    }

    .auth-modal-close {
        width: 38px;
        height: 38px;
        border-radius: 0 24px 0 12px;
    }

    .auth-modal-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .auth-modal-aside {
        padding: 2.2rem 1.4rem 1.8rem;
    }

    .auth-modal-aside::after {
        width: 96px;
        height: 96px;
        right: 1rem;
        bottom: 1rem;
        border-radius: 22px;
    }

    .auth-modal-title {
        max-width: none;
        font-size: 2.2rem;
    }

    .auth-modal-description {
        font-size: 0.92rem;
        margin-bottom: 1.4rem;
    }

    .auth-modal-highlights {
        gap: 0.7rem;
        margin-bottom: 1.2rem;
    }

    .auth-highlight-item {
        grid-template-columns: 40px 1fr;
        padding: 0.85rem 0.9rem;
        border-radius: 16px;
    }

    .auth-highlight-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 0.78rem;
    }

    .auth-modal-badge {
        max-width: none;
        font-size: 0.82rem;
    }

    .auth-modal-panel {
        padding: 1.35rem;
    }

    .auth-switcher {
        margin-bottom: 1.35rem;
    }

    .modal-content h2 { font-size: 1.6rem; margin-bottom: 1.5rem; }

    .auth-subtitle {
        margin: -0.2rem 0 1.15rem;
        font-size: 0.88rem;
    }

    .auth-field span {
        font-size: 0.72rem;
    }

    .modal-content input,
    #adminCreateModal .modal-content select {
        padding: 1rem 1.2rem;
        font-size: 1rem;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.12);
        margin-bottom: 0.8rem;
    }

    .btn-modal { padding: 1rem; font-size: 0.82rem; border-radius: 16px; }

    .auth-actions {
        flex-direction: column;
    }

    .auth-footer-note {
        font-size: 0.84rem;
    }

    /* ── Mapa mobile ── */
    .mapa-wrapper { height: 280px; }
    .mapa-secao { padding: 4rem 5%; }

    /* ── Footer mobile ── */
    footer { padding: 3rem 5% 5rem; }
    .footer-content { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .footer-section {
        padding: 1.15rem 1rem;
        border-radius: 14px;
    }
    .footer-section .instagram-link {
        width: 100%;
        justify-content: center;
    }
    .footer-signature {
        width: 100%;
        justify-content: center;
        padding: 0.85rem 1rem;
    }

    .notificacoes-panel {
        top: 74px;
        right: 4%;
        left: 4%;
        width: auto;
        max-height: 70vh;
    }

    .notificacao-item {
        grid-template-columns: auto 1fr;
    }

    .notificacao-topo {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-marcar-lida,
    .notificacao-lida-tag {
        grid-column: 2;
        justify-self: flex-start;
        margin-top: 0.2rem;
    }

    /* ── Section titles ── */
    .section-title h2 { font-size: 2rem; letter-spacing: 5px; }
    .section-title h2::before, .section-title h2::after { display: none; }

    /* ── Admin panel mobile ── */
    .admin-panel { width: 100%; max-width: 100%; }
    .admin-topbar { padding: 0 1rem; }

    /* FIX: Sidebar do painel admin — hidden by default, opens as overlay */
    .admin-sidebar {
        position: fixed !important;
        top: 62px;
        left: -260px;
        height: calc(100vh - 62px);
        z-index: 500;
        transition: left 0.4s var(--smooth-bounce);
        box-shadow: 4px 0 24px rgba(0,0,0,0.2);
    }

    .admin-sidebar.mobile-open { left: 0; }

    .admin-sidebar-overlay {
        display: none;
        position: fixed; inset: 0;
        top: 62px;
        background: rgba(0,0,0,0.45);
        z-index: 499;
    }

    .admin-sidebar-overlay.active { display: block; }

    /* Botão hambúrguer para abrir sidebar admin */
    .admin-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.15);
        color: var(--admin-ink);
        width: 34px; height: 34px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1.1rem;
        transition: background 0.25s;
        flex-shrink: 0;
    }

    .admin-menu-toggle:hover { background: rgba(0,0,0,0.06); }

    .admin-main { padding: 16px; }

    .admin-stats { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
    .stat-card { padding: 1rem; }
    .stat-number { font-size: 1.6rem; }

    /* Agenda grid: scroll horizontal */
    .agenda-grid { min-width: 800px; }
    .agenda-grid-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
    .agenda-celula { min-height: 64px; }

    /* ── GALERIA SIDEBAR — FIX CRÍTICO GRID MOBILE ── */
   
    .galeria-sidebar { width: 96vw;
    max-width: 100%; }

   .galeria-sidebar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;  /* AUMENTADO: mais espaço entre as imagens */
        padding: 24px !important;  /* Mais padding nas bordas */
    }

    .sidebar-card {
        aspect-ratio: 1;
        min-height: 0;
        width: 100%;
        border-radius: 16px !important;  /* Cantos mais arredondados */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);  /* Sombra mais destacada */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.05);
        margin-bottom: 0;  /* Remove margem inferior, usamos gap */
    }
     .sidebar-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;  /* Garante que não tenha espaços extras */
    }
     .sidebar-card .sb-placeholder {
        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
        color: #666;
        font-size: 0.8rem;
        font-weight: 400;
        letter-spacing: 2px;
    }
    @media (max-width: 480px) {
        .galeria-sidebar-grid {
            grid-template-columns: repeat(2, 1fr) !important;  /* Mantém 2 colunas */
            gap: 16px !important;
            padding: 16px !important;
        }
    }
}

@media (max-width: 768px) {
    /* ── Slideshow ── */
    .slideshow-panel { width: 80%; right: -80%; }
    .slideshow-main { min-height: 300px; }
    .thumbnail { width: 60px; height: 60px; }
    .slide-toggle-btn { width: 40px; height: 80px; font-size: 18px; }
    .slide-toggle-btn.active { right: 80%; }

    /* ── Localização ── */
    .location-container { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .location-map { height: 300px !important; }
}

/* ── Extra small ── */
@media (max-width: 400px) {
    .hero { padding-left: 4%; padding-right: 4%; }
    .agendamento { padding-left: 4%; padding-right: 4%; }
    .services-grid { grid-template-columns: 1fr; }
    .horarios-grid { grid-template-columns: repeat(2, 1fr); }
    .barbeiros-grid { gap: 0.8rem; }
    .hero-content .highlight { font-size: 2.4rem; }
}
/* ===== MENU MOBILE — o menu real é .mobile-menu (slide da direita) ===== */
/* O .nav-links é o menu de desktop e deve ficar completamente oculto no mobile */
@media (max-width: 768px) {
    /* Esconder o menu de desktop no mobile */
    .nav-links {
        display: none !important;
    }

    /* Mostrar botão hambúrguer */
    .menu-mobile-btn {
        display: flex !important;
    }

    /* Overlay escuro quando menu aberto */
    .nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 999;
        transition: opacity 0.3s ease;
    }

    .nav-overlay.active {
        display: block;
    }
}

/* ===== MENU MOBILE SIMPLIFICADO ===== */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    position: relative;
    cursor: pointer;
    z-index: 102;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--preto);
    margin: 5px auto;
    transition: all 0.3s var(--smooth);
    border-radius: 4px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Menu Mobile Panel */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 1001;
    transition: right 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); 
    box-shadow: -5px 0 30px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: #f8f8f8;
}

.mobile-logo {
    height: 40px;
    width: auto;
}

.mobile-logo-text {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--preto);
}

.mobile-menu-close {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--smooth);
}

.mobile-menu-close:hover {
    background: var(--preto);
    color: #fff;
    border-color: var(--preto);
}

.mobile-menu-items {
    padding: 1.5rem;
    flex: 1;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    color: var(--preto);
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.3s var(--smooth);
}

.mobile-menu-item:active {
    transform: translateX(5px);
    opacity: 0.7;
}

.mobile-menu-icon {
    font-size: 1.3rem;
    width: 32px;
    text-align: center;
}

.mobile-menu-divider {
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 1.5rem 0;
}

/* User section in mobile menu */
.mobile-menu-user {
    margin-bottom: 1.5rem;
}

.mobile-user-logged {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mobile-user-name {
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--cinza);
    padding: 0 0.25rem;
    text-transform: uppercase;
}

.mobile-logout-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    letter-spacing: 1px;
    color: var(--preto);
    transition: all 0.3s var(--smooth);
    width: 100%;
    text-align: left;
}

.mobile-logout-btn:hover {
    background: var(--preto);
    color: #fff;
    border-color: var(--preto);
}

.mobile-user-guest {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.mobile-login-btn,
.mobile-admin-panel-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s var(--smooth);
    font-size: 0.95rem;
    letter-spacing: 1px;
    color: var(--preto);
}

.mobile-login-btn:hover,
.mobile-admin-panel-btn:hover {
    background: var(--preto);
    color: #fff;
    border-color: var(--preto);
}

.mobile-admin-panel-btn {
    border-color: rgba(184,151,90,0.35);
    background: linear-gradient(135deg, rgba(184,151,90,0.12), rgba(255,255,255,0.96));
}

/* Mobile Language Selector */
.mobile-language {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
}

.mobile-lang-btn {
    flex: 1;
    padding: 0.8rem;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s var(--smooth);
    color: var(--cinza);
}

.mobile-lang-btn.active {
    background: var(--preto);
    color: #fff;
    border-color: var(--preto);
}

/* Mobile Overlay */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--smooth);
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Responsive: Show mobile menu toggle only on mobile */
@media (max-width: 768px) {
    .menu-mobile-btn {
        display: flex !important;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    /* Hide desktop nav on mobile */
    .nav-links {
        display: none !important;
    }
    
    /* Ajustes no header */
    nav {
        padding: 0.8rem 4%;
    }
    
    .logo-img {
        height: 44px;
    }
    
    .nav-actions {
        display: none !important;
    }
}

/* ===== PERFORMANCE MOBILE — desativar blur pesado ===== */
@media (max-width: 768px) {
    /* Modal overlay — fundo sólido em vez de blur */
    .modal {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(8, 10, 12, 0.88) !important;
    }

    /* Navbar — blur leve em vez de pesado */
    nav {
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* Overlay do menu — sem blur */
    .nav-overlay,
    .mobile-overlay,
    .galeria-overlay,
    .corte-modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Cards e elementos com blur desnecessário */
    .auth-modal-content,
    .modal-content,
    .notificacoes-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ===== AVALIA-NOS NAV BUTTON ===== */
.nav-avalia-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: #111;
    border: none;
    color: #fff !important;
    font-size: 0.7rem !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
    white-space: nowrap;
}
.nav-avalia-btn:hover {
    background: #c8aa6e;
    color: #111 !important;
    transform: scale(1.03);
}

.mobile-menu-item--review {
    color: #c8aa6e !important;
    font-weight: 700;
}

/* ===== PRODUTOS SECTION ===== */
.produtos-secao {
    padding: 8rem 5% 6rem;
    background: #f7f5f2;
}

.produtos-intro {
    text-align: center;
    color: var(--cinza);
    font-size: 1rem;
    margin-top: -1.5rem;
    margin-bottom: 3rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.produto-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.07);
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.produto-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}

.produto-img-wrap {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.produto-img-placeholder {
    font-size: 3rem;
    opacity: 0.85;
}

.produto-info {
    padding: 1.1rem 1.2rem 1.3rem;
}

.produto-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
    color: #111;
}

.produto-info p {
    font-size: 0.8rem;
    color: #777;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.produto-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(23,103,58,0.1);
    color: #17673a;
    border: 1px solid rgba(23,103,58,0.2);
}

.produto-badge--gold {
    background: rgba(200,170,110,0.15);
    color: #8a6318;
    border-color: rgba(200,170,110,0.4);
}

.produtos-disclaimer {
    text-align: center;
    font-size: 0.82rem;
    color: #999;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .produtos-secao { padding: 4rem 4% 3rem; }

    .produtos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .produto-card {
        border-radius: 14px;
    }

    .produto-img-wrap {
        height: 90px;
    }

    .produto-img-placeholder {
        font-size: 1.8rem;
    }

    .produto-info {
        padding: 0.7rem 0.8rem 0.8rem;
    }

    .produto-info h4 {
        font-size: 0.82rem;
        margin-bottom: 0.25rem;
    }

    .produto-info p {
        font-size: 0.72rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        /* Limit to 2 lines on mobile */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .produto-badge {
        font-size: 0.58rem;
        padding: 0.15rem 0.45rem;
    }

    .produtos-intro {
        font-size: 0.88rem;
        margin-bottom: 1.5rem;
    }
}

/* ===== PRODUTOS — imagens reais e preços ===== */
.produto-img-wrap { height: 200px; overflow: hidden; }
.produto-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.produto-card:hover .produto-img { transform: scale(1.05); }
.produto-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; }
.produto-preco { font-size: 1.1rem; font-weight: 800; color: #111; letter-spacing: 0.5px; }

.agendamento-container, .services-grid, .barbeiros-grid {
    max-width: 100%;
    overflow: hidden;
}
.service-card, .barbeiro-card {
    min-width: 0;
    word-break: break-word;
}

/* ===== iOS OVERFLOW FIX ===== */
@media (max-width: 768px) {
    .section-title h2 {
        letter-spacing: 4px !important;
        font-size: 2rem !important;
        word-break: break-word !important;
    }
    .section-title h2::before,
    .section-title h2::after {
        display: none !important;
    }
    section, .agendamento, .produtos-secao, .localizacao {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ===== SERVICES GRID — 2 colunas em mobile estreito ===== */
@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .service-card {
        font-size: 0.85rem !important;
    }
    .service-name {
        font-size: 0.85rem !important;
    }
}

/* ===== FIX DEFINITIVO MOBILE OVERFLOW ===== */
@media (max-width: 768px) {
    html {
        overflow-x: hidden;
    }
    body {
        overflow-x: hidden;
        width: 100%;
    }
    .agendamento {
        padding-left: 4% !important;
        padding-right: 4% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .agendamento-container {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .barbeiros-grid {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ===== RESET TOTAL OVERFLOW — todos os ecrãs até 430px ===== */
@media (max-width: 430px) {
    * {
        box-sizing: border-box !important;
    }
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    section {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
    .agendamento {
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
    .agendamento-container {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .barbeiros-grid {
        width: 100% !important;
        overflow: hidden !important;
    }
    .section-title h2 {
        font-size: 1.8rem !important;
        letter-spacing: 3px !important;
    }
}