* {
box-sizing: border-box;
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
img, svg, video {
max-width: 100%;
height: auto;
}
/* Tema claro (padrão) — trocado para escuro via [data-theme="dark"] no */
:root,
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f4f4f5;
--bg-card: #ffffff;
--bg-card-hover: #f0f0f1;
--accent: #e63900;
--accent-hover: #c92f00;
--text-main: #111111;
--text-muted: #666666;
--text-desc: #333333;
--border-color: #e2e2e2;
--header-bg: rgba(255, 255, 255, 0.92);
--featured-bg: #fff3ef;
--featured-bg-hover: #ffe6dd;
--shadow-color: rgba(17, 17, 17, 0.12);
--erro-bg: #fdecec;
--erro-border: #f3b4b4;
--erro-text: #8a1f1f;
--sucesso-bg: #eaf7ee;
--sucesso-border: #a9dab8;
--sucesso-text: #1f6b34;
--badge-pago-bg: #eaf7ee;
--badge-pago-text: #1f6b34;
--badge-aguardando-bg: #fdf3e0;
--badge-aguardando-text: #8a5a00;
--badge-cancelado-bg: #fdecec;
--badge-cancelado-text: #8a1f1f;
--transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
[data-theme="dark"] {
--bg-primary: #0b0b0b;
--bg-secondary: #121212;
--bg-card: #161616;
--bg-card-hover: #1c1c1c;
--accent: #e63900;
--accent-hover: #ff4a14;
--text-main: #ffffff;
--text-muted: #aaaaaa;
--text-desc: #cccccc;
--border-color: #222222;
--header-bg: rgba(11, 11, 11, 0.95);
--featured-bg: #1a1412;
--featured-bg-hover: #241a17;
--shadow-color: rgba(0, 0, 0, 0.5);
--erro-bg: #3a1d1d;
--erro-border: #7a2b2b;
--erro-text: #ffb4b4;
--sucesso-bg: #1d3a24;
--sucesso-border: #2b7a3f;
--sucesso-text: #b4ffc2;
--badge-pago-bg: #1d3a24;
--badge-pago-text: #b4ffc2;
--badge-aguardando-bg: #3a331d;
--badge-aguardando-text: #ffe1b4;
--badge-cancelado-bg: #3a1d1d;
--badge-cancelado-text: #ffb4b4;
}
body {
font-family: 'Montserrat', system-ui, sans-serif;
background-color: var(--bg-primary);
color: var(--text-main);
line-height: 1.6;
margin: 0;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Botão de alternância de tema */
.btn-tema {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--border-color);
background-color: var(--bg-card);
color: var(--text-main);
cursor: pointer;
flex-shrink: 0;
}
.btn-tema:hover {
border-color: var(--accent);
color: var(--accent);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
}
h1, h2, h3 {
color: var(--text-main);
}
/* ==========================================================================
LAYOUT SIMPLES (login, cadastro, reservar, minhas-reservas, admin/*)
========================================================================== */
header.topo {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 0.65rem 2rem;
background-color: var(--header-bg);
border-bottom: 1px solid var(--border-color);
}
header.topo nav {
display: flex;
align-items: center;
gap: 4px;
}
header.topo h1 {
font-size: 1.4rem;
letter-spacing: 1px;
}
header.topo nav a {
color: var(--text-main);
margin-left: 1rem;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: var(--transition-smooth);
}
header.topo nav a:hover {
color: var(--accent);
}
.main-simples {
max-width: 720px;
width: 100%;
margin: 2rem auto;
padding: 0 1rem;
}
/* Espaço extra pro header fixo (.site-header) não cobrir o conteúdo */
.main-com-header-fixo {
padding-top: 64px;
}
/* Blocos de horário por período (reservar.php) */
.periodo-horarios {
margin-bottom: 1.5rem;
}
.periodo-horarios h3 {
font-size: 0.95rem;
color: var(--text-muted);
margin-bottom: 0.6rem;
display: flex;
align-items: center;
gap: 8px;
}
.periodo-horarios h3 i {
color: var(--accent);
}
.grade-horarios {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: 8px;
}
.horario-chip input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.horario-chip label {
display: block;
text-align: center;
padding: 10px 6px;
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--bg-card);
color: var(--text-main);
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
transition: var(--transition-smooth);
}
.horario-chip label:hover {
border-color: var(--accent);
background-color: var(--bg-card-hover);
}
.horario-chip input:checked + label {
background-color: var(--accent);
border-color: var(--accent);
color: #ffffff;
}
.horario-chip input:focus-visible + label {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.resumo-reserva {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px;
margin-top: 0.5rem;
}
.resumo-linha {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: var(--text-muted);
}
.resumo-total {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-color);
font-size: 1.1rem;
font-weight: 700;
color: var(--text-main);
}
.resumo-total span:last-child {
color: var(--accent);
}
#select-musicas:disabled,
#botao-reservar:disabled {
opacity: 0.6;
cursor: not-allowed;
}
form {
display: grid;
gap: 0.75rem;
margin-top: 1rem;
}
label {
display: grid;
gap: 0.25rem;
font-size: 0.9rem;
color: var(--text-desc);
}
input, select, textarea, button {
padding: 0.7rem;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--bg-secondary);
color: var(--text-main);
font-family: inherit;
font-size: 1rem;
}
textarea {
resize: vertical;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(230, 57, 0, 0.15);
}
button {
background-color: var(--accent);
color: #ffffff;
border: none;
cursor: pointer;
font-weight: 700;
transition: var(--transition-smooth);
}
button:hover {
background-color: var(--accent-hover);
}
.erro {
background-color: var(--erro-bg);
border: 1px solid var(--erro-border);
color: var(--erro-text);
padding: 0.75rem 1rem;
border-radius: 8px;
}
.sucesso {
background-color: var(--sucesso-bg);
border: 1px solid var(--sucesso-border);
color: var(--sucesso-text);
padding: 0.75rem 1rem;
border-radius: 8px;
}
.tabela-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 1rem;
}
table {
width: 100%;
border-collapse: collapse;
}
.tabela-scroll table {
margin-top: 0;
min-width: 600px;
}
th, td {
text-align: left;
padding: 0.6rem;
border-bottom: 1px solid var(--border-color);
white-space: nowrap;
}
.badge {
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
white-space: nowrap;
}
.badge-pago { background-color: var(--badge-pago-bg); color: var(--badge-pago-text); }
.badge-aguardando_pagamento { background-color: var(--badge-aguardando-bg); color: var(--badge-aguardando-text); }
.badge-cancelado, .badge-expirado { background-color: var(--badge-cancelado-bg); color: var(--badge-cancelado-text); }
.btn-whatsapp {
display: inline-block;
background-color: #25d366;
color: #05210f;
padding: 0.4rem 0.8rem;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
font-size: 0.85rem;
}
/* ==========================================================================
HOME (public/index.php) — cabeçalho fixo
========================================================================== */
header.site-header {
background-color: var(--header-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
border-bottom: 1px solid var(--border-color);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.logo {
margin: 0;
line-height: 0;
}
.logo a {
display: inline-flex;
align-items: center;
text-decoration: none;
}
/* Logo oficial (public/img/logo.png) — a versão branca some no tema claro
e aparece no escuro; a colorida faz o inverso. */
.logo-swap {
display: inline-flex;
align-items: center;
}
.logo-tema-escura {
display: none;
}
[data-theme="dark"] .logo-tema-escura {
display: inline-block;
}
[data-theme="dark"] .logo-tema-clara {
display: none;
}
.logo .logo-img {
height: 34px;
width: auto;
}
.nav-principal {
display: flex;
align-items: center;
gap: 26px;
}
.btn-menu {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--border-color);
background-color: var(--bg-card);
color: var(--text-main);
cursor: pointer;
font-size: 16px;
flex-shrink: 0;
}
.btn-menu:hover {
border-color: var(--accent);
color: var(--accent);
}
.nav-links, .nav-auth {
display: flex;
list-style: none;
align-items: center;
gap: 16px;
padding: 0;
margin: 0;
}
.nav-link-item {
color: var(--text-main);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: var(--transition-smooth);
}
.nav-link-item:hover {
color: var(--accent);
}
.btn-login {
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: var(--transition-smooth);
}
.btn-login:hover {
color: var(--text-main);
}
.btn-nav {
background-color: var(--accent);
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
padding: 9px 20px;
border-radius: 4px;
transition: var(--transition-smooth);
}
.btn-nav:hover {
background-color: var(--accent-hover);
transform: translateY(-2px);
}
/* ==========================================================================
HERO
========================================================================== */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(11, 11, 11, 1)),
url('https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=1920') no-repeat center center/cover;
min-height: 100vh;
display: flex;
align-items: center;
text-align: center;
padding-top: 56px;
}
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
}
.hero-subtitle {
font-size: 13px;
font-weight: 800;
color: var(--accent);
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 15px;
}
/* O hero sempre tem foto de fundo escurecida, então o texto fica sempre
claro, independente do tema ativo do site. */
.hero-content h1 {
font-size: 56px;
font-weight: 800;
letter-spacing: 6px;
margin-bottom: 20px;
line-height: 1.2;
color: #ffffff;
}
.hero-content p {
font-size: 18px;
color: #e0e0e0;
max-width: 650px;
margin-bottom: 40px;
font-weight: 300;
}
.hero-actions {
display: flex;
gap: 20px;
}
.btn-primary {
display: inline-block;
background-color: var(--accent);
color: #ffffff;
text-decoration: none;
padding: 14px 36px;
font-weight: 600;
border-radius: 4px;
transition: var(--transition-smooth);
}
.btn-primary:hover {
background-color: var(--accent-hover);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(230, 57, 0, 0.2);
}
.btn-secondary {
display: inline-block;
background-color: transparent;
border: 2px solid #ffffff;
color: #ffffff;
text-decoration: none;
padding: 12px 34px;
font-weight: 600;
border-radius: 4px;
transition: var(--transition-smooth);
}
.btn-secondary:hover {
background-color: #ffffff;
color: #111111;
transform: translateY(-3px);
}
/* ==========================================================================
CABEÇALHOS DE SEÇÃO
========================================================================== */
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-title {
font-size: 36px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 10px;
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background-color: var(--accent);
margin: 15px auto 0 auto;
border-radius: 2px;
}
.section-subtitle {
color: var(--text-muted);
font-size: 16px;
font-weight: 300;
}
/* ==========================================================================
SERVIÇOS (preço por música)
========================================================================== */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.service-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
padding: 50px 35px;
border-radius: 12px;
text-align: center;
transition: var(--transition-smooth);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.service-card:hover {
transform: translateY(-8px);
border-color: var(--accent);
box-shadow: 0 15px 30px var(--shadow-color);
background-color: var(--bg-card-hover);
}
.service-icon {
font-size: 40px;
color: var(--accent);
margin-bottom: 25px;
}
.service-card h3 {
font-size: 22px;
margin-bottom: 12px;
font-weight: 700;
}
.service-desc {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 25px;
font-weight: 300;
}
.price {
font-size: 42px;
font-weight: 800;
margin-bottom: 30px;
color: var(--text-main);
}
.price span {
font-size: 15px;
font-weight: 300;
color: var(--text-muted);
}
.btn-select {
display: block;
width: 100%;
background-color: transparent;
border: 2px solid var(--accent);
color: var(--text-main);
padding: 12px 0;
font-weight: 600;
font-size: 15px;
border-radius: 6px;
text-decoration: none;
text-align: center;
transition: var(--transition-smooth);
}
.btn-select:hover {
background-color: var(--accent);
color: #ffffff;
transform: scale(1.02);
}
.service-card.featured {
border: 2px solid var(--accent);
background-color: var(--featured-bg);
}
.service-card.featured:hover {
background-color: var(--featured-bg-hover);
}
.ribbon {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background-color: var(--accent);
color: #ffffff;
padding: 6px 16px;
font-size: 11px;
font-weight: 800;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 10px rgba(230, 57, 0, 0.4);
}
/* ==========================================================================
COMO FUNCIONA
========================================================================== */
.como-funciona {
background-color: var(--bg-secondary);
}
.passos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
text-align: center;
}
.passo-numero {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--accent);
color: #ffffff;
font-weight: 800;
margin-bottom: 20px;
}
.passo h3 {
font-size: 18px;
margin-bottom: 10px;
}
.passo p {
color: var(--text-muted);
font-size: 14px;
font-weight: 300;
}
/* ==========================================================================
DIAS DISPONÍVEIS
========================================================================== */
.dias-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 25px;
}
.dia-card {
display: block;
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 30px;
text-align: center;
text-decoration: none;
color: var(--text-main);
transition: var(--transition-smooth);
}
.dia-card:hover {
transform: translateY(-6px);
border-color: var(--accent);
background-color: var(--bg-card-hover);
}
.dia-card .dia-data {
font-size: 22px;
font-weight: 800;
margin-bottom: 8px;
}
.dia-card .dia-slots {
color: var(--accent);
font-weight: 600;
font-size: 14px;
}
.sem-dias {
text-align: center;
color: var(--text-muted);
}
/* ==========================================================================
PORTFÓLIO (placeholder)
========================================================================== */
.portfolio {
background-color: var(--bg-primary);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
}
.portfolio-placeholder {
background-color: var(--bg-card);
border: 1px dashed var(--border-color);
border-radius: 12px;
padding: 40px 25px;
text-align: center;
color: var(--text-muted);
}
.portfolio-placeholder i {
font-size: 32px;
color: var(--accent);
margin-bottom: 15px;
display: block;
}
/* ==========================================================================
FAQ
========================================================================== */
.faq {
background-color: var(--bg-secondary);
}
.faq-wrapper {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 15px;
}
.faq-item {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
transition: var(--transition-smooth);
}
.faq-question {
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 20px 25px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-main);
font-family: inherit;
font-size: 16px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: var(--transition-smooth);
}
.faq-question i {
color: var(--accent);
transition: var(--transition-smooth);
}
.faq-question:hover {
background-color: var(--bg-card-hover);
}
.faq-item.active {
border-color: var(--accent);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
background-color: rgba(0, 0, 0, 0.1);
}
.faq-answer p {
padding: 0 25px 20px 25px;
color: var(--text-desc);
font-size: 15px;
font-weight: 300;
line-height: 1.6;
}
/* ==========================================================================
RODAPÉ
========================================================================== */
.main-footer {
background-color: var(--bg-primary);
border-top: 1px solid var(--border-color);
padding: 40px 0;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
padding: 0;
}
.main-footer p {
font-size: 14px;
color: var(--text-muted);
}
.footer-links {
display: flex;
gap: 20px;
align-items: center;
}
.footer-links a {
color: var(--text-muted);
font-size: 14px;
text-decoration: none;
transition: var(--transition-smooth);
}
.footer-links a:hover {
color: var(--accent);
}
.footer-socials {
display: flex;
gap: 20px;
}
.footer-socials a {
color: var(--text-muted);
font-size: 20px;
transition: var(--transition-smooth);
}
.footer-socials a:hover {
color: var(--accent);
transform: translateY(-3px);
}
/* ==========================================================================
PORTAL (sidebar) — admin/* e public/minhas-reservas.php, enviar-musica.php
========================================================================== */
.portal {
display: flex;
min-height: 100vh;
align-items: stretch;
}
.sidebar {
width: 260px;
flex-shrink: 0;
background-color: var(--bg-secondary);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
padding: 24px 0;
position: sticky;
top: 0;
height: 100vh;
}
.sidebar-logo {
padding: 0 24px 20px;
font-weight: 800;
font-size: 18px;
letter-spacing: 1px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 16px;
}
.sidebar-logo .logo-img {
height: 26px;
width: auto;
}
.sidebar-logo-legenda {
margin-top: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
}
.sidebar-voltar {
display: flex;
align-items: center;
gap: 8px;
margin: 0 12px 16px;
padding: 9px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: var(--transition-smooth);
}
.sidebar-voltar:hover {
color: var(--accent);
border-color: var(--accent);
background-color: var(--bg-card-hover);
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
padding: 0 12px;
}
.sidebar-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
color: var(--text-desc);
text-decoration: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
transition: var(--transition-smooth);
}
.sidebar-nav a i {
width: 18px;
text-align: center;
color: var(--text-muted);
}
.sidebar-nav a:hover {
background-color: var(--bg-card-hover);
color: var(--text-main);
}
.sidebar-nav a.ativo {
background-color: var(--accent);
color: #ffffff;
}
.sidebar-nav a.ativo i {
color: #ffffff;
}
.sidebar-rodape {
padding: 16px 24px 0;
border-top: 1px solid var(--border-color);
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sidebar-usuario {
font-size: 13px;
color: var(--text-muted);
}
.sidebar-sair {
color: var(--text-desc);
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: var(--transition-smooth);
}
.sidebar-sair:hover {
color: var(--accent);
}
.portal-main {
flex: 1;
width: 100%;
max-width: 1400px;
margin: 0;
padding: 40px;
}
.portal-main h2 {
margin-bottom: 4px;
}
.portal-main .section-subtitle {
text-align: left;
margin-bottom: 24px;
}
/* Pausas dinâmicas no formulário de liberar dia */
.linha-pausa {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 10px;
align-items: end;
}
.btn-remover-pausa {
background-color: transparent;
border: 1px solid var(--erro-border);
color: var(--erro-text);
width: auto;
padding: 0.6rem 0.9rem;
}
.form-excluir-dia {
display: inline-block;
margin: 0;
}
.form-status-reserva {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
margin: 0;
white-space: nowrap;
}
.form-status-reserva select {
padding: 0.4rem;
font-size: 0.85rem;
}
.form-status-reserva button {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
width: auto;
}
.btn-remover-pausa:hover {
background-color: var(--erro-bg);
}
.btn-adicionar-pausa {
background-color: transparent;
border: 1px dashed var(--accent);
color: var(--accent);
font-weight: 600;
}
.btn-adicionar-pausa:hover {
background-color: rgba(230, 57, 0, 0.1);
}
.badge-pausa {
display: inline-block;
background-color: var(--badge-aguardando-bg);
color: var(--badge-aguardando-text);
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
margin: 0 4px 4px 0;
}
/* Lista de arquivos de música enviados */
.lista-arquivos {
list-style: none;
padding: 0;
display: grid;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.arquivo-item {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 0.75rem 1rem;
}
.arquivo-item .arquivo-nome {
font-weight: 600;
}
.arquivo-item .arquivo-meta {
color: var(--text-muted);
font-size: 0.8rem;
}
.lista-imagens .arquivo-item {
justify-content: flex-start;
gap: 12px;
}
.imagem-preview {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--border-color);
flex-shrink: 0;
}
/* Cronograma do dia */
.cronograma-linha.livre { color: var(--text-muted); }
.cronograma-linha.reservado td:first-child { color: var(--accent); font-weight: 700; }
/* ==========================================================================
ANIMAÇÃO AO ROLAR A PÁGINA (home)
========================================================================== */
.reveal {
opacity: 0;
transform: translateY(28px);
/* Inclui background/border/box-shadow pra não sobrescrever a transição
de hover dos cards (.service-card, .dia-card, .faq-item) que também
usam .reveal — a propriedade "transition" não soma entre regras. */
transition: opacity 0.6s ease, transform 0.6s ease,
background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.reveal.visivel {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ==========================================================================
TELAS DE LOGIN / CADASTRO (login unificado cliente + operador)
========================================================================== */
.auth-shell {
min-height: 100vh;
display: flex;
/* Tom mais suave só nas telas de login/cadastro (botão, links, foco) —
não mexe na cor da marca usada no resto do site. */
--accent: #b8583f;
--accent-hover: #9c4632;
}
.auth-brand {
flex: 1;
display: none;
flex-direction: column;
justify-content: center;
padding: 60px;
background: linear-gradient(160deg, #a8543f, #d99a7e);
position: relative;
overflow: hidden;
}
.auth-brand h2 {
color: #ffffff;
font-size: 32px;
font-weight: 800;
letter-spacing: 2px;
margin: 12px 0 16px;
}
.auth-brand .logo-marca-img {
height: 42px;
width: auto;
max-width: 220px;
margin: 12px 0 16px;
position: relative;
align-self: flex-start;
object-fit: contain;
}
.auth-brand p {
color: rgba(255, 255, 255, 0.9);
max-width: 380px;
font-weight: 300;
font-size: 15px;
position: relative;
}
.logo-flutuante {
position: absolute;
right: -5%;
bottom: -15%;
font-size: 32vw;
font-weight: 800;
color: rgba(255, 255, 255, 0.08);
line-height: 1;
pointer-events: none;
}
.auth-panel {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
background-color: var(--bg-primary);
}
.auth-topo-tema {
position: absolute;
top: 20px;
right: 20px;
}
.auth-voltar {
position: absolute;
top: 24px;
left: 20px;
display: flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: var(--transition-smooth);
}
.auth-voltar:hover {
color: var(--accent);
}
.auth-card {
width: 100%;
max-width: 400px;
}
.logo-mobile {
display: block;
text-align: center;
margin-bottom: 28px;
}
.logo-mobile .logo-img {
height: 32px;
width: auto;
}
.auth-card h2 {
margin-bottom: 4px;
}
.auth-subtitulo {
color: var(--text-muted);
margin: 0 0 24px;
font-size: 14px;
}
.auth-card form {
margin-top: 0;
}
.auth-links {
margin-top: 20px;
text-align: center;
font-size: 14px;
color: var(--text-muted);
}
.auth-links a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
.auth-links a:hover {
text-decoration: underline;
}
@media (min-width: 900px) {
.auth-brand {
display: flex;
}
.logo-mobile {
display: none;
}
}
/* ==========================================================================
RESPONSIVIDADE
========================================================================== */
@media (max-width: 992px) {
.btn-menu {
display: inline-flex;
}
.nav-principal {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 15px;
background-color: var(--header-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
padding: 20px 5%;
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.nav-principal.nav-aberta {
max-height: 80vh;
overflow-y: auto;
opacity: 1;
pointer-events: auto;
}
.nav-links, .nav-auth {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.nav-auth {
border-top: 1px solid var(--border-color);
padding-top: 12px;
}
.hero-content h1 {
font-size: 42px;
}
.header-container {
padding: 4px 0;
}
.btn-menu, .btn-tema {
width: 30px;
height: 30px;
}
.btn-nav {
padding: 6px 14px;
}
.hero {
padding-top: 44px;
}
.main-com-header-fixo {
padding-top: 52px;
}
}
@media (max-width: 768px) {
.container {
padding: 40px 0;
}
.hero-content h1 {
font-size: 32px;
}
.hero-actions {
flex-direction: column;
width: 100%;
max-width: 300px;
}
.footer-container {
flex-direction: column;
text-align: center;
}
.portal {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
position: static;
flex-direction: row;
align-items: center;
padding: 12px 16px;
gap: 16px;
overflow-x: auto;
}
.sidebar-logo, .sidebar-rodape {
border: none;
padding: 0;
margin: 0;
}
.sidebar-voltar {
margin: 0;
flex-shrink: 0;
}
.sidebar-nav {
flex-direction: row;
padding: 0;
}
.sidebar-rodape {
flex-direction: row;
align-items: center;
gap: 12px;
margin-left: auto;
}
.portal-main {
padding: 24px 16px;
}
.linha-pausa {
grid-template-columns: 1fr;
}
}