/* =========================================================
   CONFIGURAÇÕES GERAIS
========================================================= */

/* Remove margens e espaçamentos padrão do navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Variáveis de cores */
:root {

    /* Cor principal do fundo */
    --preto: #070707;

    /* Preto dos cartões */
    --preto-card: #111111;

    /* Dourado */
    --dourado: #dca52c;

    /* Dourado mais claro */
    --dourado-claro: #f4c65d;

    /* Branco */
    --branco: #ffffff;

    /* Cinza */
    --cinza: #a0a0a0;

    /* Borda */
    --borda: #292929;
}


/* =========================================================
   BODY
========================================================= */

body {

    /* Define a fonte */
    font-family: "Montserrat", sans-serif;

    /* Fundo escuro */
    background:
        radial-gradient(
            circle at top,
            #241d0d 0%,
            #080808 40%,
            #050505 100%
        );

    /* Cor padrão dos textos */
    color: var(--branco);

    /* Ocupa no mínimo toda a altura */
    min-height: 100vh;
}


/* =========================================================
   PÁGINA PRINCIPAL
========================================================= */

.pagina {

    /* Largura máxima */
    max-width: 1100px;

    /* Centraliza */
    margin: auto;

    /* Espaçamento interno */
    padding: 40px 25px;
}


/* =========================================================
   TOPO
========================================================= */

.topo {

    /* Centraliza os textos */
    text-align: center;

    /* Espaçamento inferior */
    margin-bottom: 30px;
}


/* =========================================================
   LOGO
========================================================= */

.logo {

    /* Coloca os elementos lado a lado */
    display: flex;

    /* Centraliza horizontalmente */
    justify-content: center;

    /* Centraliza verticalmente */
    align-items: center;

    /* Espaçamento */
    gap: 15px;
}


/* Ícone da logo */
.icone-logo {

    /* Largura */
    width: 60px;

    /* Altura */
    height: 60px;

    /* Centraliza o ícone */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Borda dourada */
    border: 2px solid var(--dourado);

    /* Deixa redondo */
    border-radius: 50%;

    /* Cor */
    color: var(--dourado);

    /* Tamanho */
    font-size: 26px;

    /* Sombra */
    box-shadow:
        0 0 25px rgba(220, 165, 44, 0.12);
}


/* Nome principal */
.nome-logo h1 {

    /* Tamanho */
    font-size: 32px;

    /* Peso */
    font-weight: 800;

    /* Espaçamento entre letras */
    letter-spacing: 3px;
}


/* Nome secundário */
.nome-logo span {

    /* Exibe como bloco */
    display: block;

    /* Cor */
    color: var(--dourado);

    /* Tamanho */
    font-size: 13px;

    /* Peso */
    font-weight: 700;

    /* Espaçamento */
    letter-spacing: 7px;

    /* Margem */
    margin-top: 4px;
}


/* =========================================================
   LINHA DECORATIVA
========================================================= */

.linha-decorativa {

    /* Largura */
    width: 180px;

    /* Altura */
    height: 1px;

    /* Centraliza */
    margin: 18px auto 12px;

    /* Gradiente dourado */
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dourado),
            transparent
        );
}


/* =========================================================
   SUBTÍTULO
========================================================= */

.subtitulo {

    /* Cor */
    color: var(--cinza);

    /* Tamanho */
    font-size: 13px;

    /* Espaçamento */
    letter-spacing: 1px;
}


/* =========================================================
   BOTÕES
========================================================= */

.acoes {

    /* Coloca os botões lado a lado */
    display: grid;

    /* Duas colunas */
    grid-template-columns: 1fr 1fr;

    /* Espaçamento */
    gap: 18px;

    /* Largura máxima */
    max-width: 700px;

    /* Centraliza */
    margin: 0 auto 35px;
}


.botao-link {

    /* Remove decoração */
    text-decoration: none;
}


/* Botão */
.botao {

    /* Largura */
    width: 100%;

    /* Altura */
    min-height: 65px;

    /* Remove borda padrão */
    border: 0;

    /* Cantos arredondados */
    border-radius: 14px;

    /* Fonte */
    font-family: inherit;

    /* Tamanho */
    font-size: 15px;

    /* Peso */
    font-weight: 800;

    /* Cursor */
    cursor: pointer;

    /* Transição */
    transition: 0.25s;

    /* Espaçamento */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}


/* Botão Agendar */
.agendar {

    /* Fundo dourado */
    background:
        linear-gradient(
            135deg,
            var(--dourado-claro),
            var(--dourado)
        );

    /* Texto preto */
    color: #111;

    /* Sombra */
    box-shadow:
        0 12px 30px rgba(220, 165, 44, 0.16);
}


/* Botão Administrador */
.administrador {

    /* Fundo escuro */
    background: #111111;

    /* Texto */
    color: white;

    /* Borda */
    border: 1px solid var(--dourado);
}


/* Efeito ao passar o mouse */
.botao:hover {

    /* Sobe levemente */
    transform: translateY(-3px);
}


/* Ícone dos botões */
.icone-botao {

    /* Tamanho */
    font-size: 20px;
}


/* =========================================================
   DESTAQUE
========================================================= */

.destaque {

    /* Posição relativa */
    position: relative;

    /* Altura */
    height: 400px;

    /* Esconde o que ultrapassar */
    overflow: hidden;

    /* Cantos */
    border-radius: 22px;

    /* Borda */
    border: 1px solid var(--dourado);

    /* Margem */
    margin-bottom: 45px;

    /* Fundo */
    background: #111;
}


/* Imagem */
.destaque img {

    /* Ocupa toda a área */
    width: 100%;
    height: 100%;

    /* Mantém proporção */
    object-fit: cover;

    /* Transição */
    transition: 0.5s;
}


/* Aumenta imagem ao passar mouse */
.destaque:hover img {

    transform: scale(1.04);
}


/* Camada escura */
.destaque-overlay {

    /* Posição absoluta */
    position: absolute;

    /* Ocupa tudo */
    inset: 0;

    /* Escurece a imagem */
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.9),
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.15)
        );
}


/* Texto do destaque */
.texto-destaque {

    /* Posição */
    position: absolute;

    /* Centraliza verticalmente */
    top: 50%;

    /* Posição horizontal */
    left: 8%;

    /* Corrige posição vertical */
    transform: translateY(-50%);
}


/* Texto pequeno */
.texto-destaque span {

    /* Tamanho */
    font-size: 22px;

    /* Peso */
    font-weight: 700;
}


/* Título */
.texto-destaque h2 {

    /* Cor */
    color: var(--dourado);

    /* Tamanho */
    font-size: 55px;

    /* Peso */
    font-weight: 800;

    /* Margem */
    margin: 3px 0 8px;
}


/* Descrição */
.texto-destaque p {

    /* Cor */
    color: #ddd;

    /* Tamanho */
    font-size: 14px;

    /* Margem */
    margin-bottom: 22px;
}


/* Botão do destaque */
.botao-destaque {

    /* Remove borda */
    border: 0;

    /* Fundo */
    background: var(--dourado);

    /* Texto */
    color: #111;

    /* Espaçamento */
    padding: 13px 23px;

    /* Cantos */
    border-radius: 9px;

    /* Fonte */
    font-family: inherit;

    /* Peso */
    font-weight: 800;

    /* Cursor */
    cursor: pointer;

    /* Transição */
    transition: 0.25s;
}


/* Hover */
.botao-destaque:hover {

    transform: translateY(-2px);

    background: var(--dourado-claro);
}


/* =========================================================
   TÍTULO DA SEÇÃO
========================================================= */

.titulo-secao {

    /* Flex */
    display: flex;

    /* Alinha */
    align-items: center;

    /* Espaçamento */
    gap: 20px;

    /* Margem */
    margin-bottom: 25px;
}


.titulo-secao span {

    /* Ocupa espaço disponível */
    flex: 1;

    /* Altura */
    height: 1px;

    /* Linha */
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dourado)
        );
}


.titulo-secao span:last-child {

    background:
        linear-gradient(
            90deg,
            var(--dourado),
            transparent
        );
}


.titulo-secao h2 {

    /* Tamanho */
    font-size: 18px;

    /* Peso */
    font-weight: 700;

    /* Não quebra */
    white-space: nowrap;
}


/* =========================================================
   CARROSSEL
========================================================= */

.carrossel {

    /* Posição */
    position: relative;

    /* Flex */
    display: flex;

    /* Alinha */
    align-items: center;

    /* Espaçamento */
    gap: 15px;
}


.slides {

    /* Ocupa o espaço */
    flex: 1;

    /* Esconde os slides */
    overflow: hidden;

    /* Cantos */
    border-radius: 16px;
}


.slide {

    /* Não aparece inicialmente */
    display: none;

    /* Posição */
    position: relative;

    /* Altura */
    height: 280px;

    /* Animação */
    animation: aparecer 0.5s ease;
}


/* Slide ativo */
.slide.ativo {

    display: block;
}


/* Imagem */
.slide img {

    /* Tamanho */
    width: 100%;
    height: 100%;

    /* Mantém proporção */
    object-fit: cover;
}


/* Informações */
.slide-info {

    /* Posição */
    position: absolute;

    /* Fundo */
    left: 0;
    right: 0;
    bottom: 0;

    /* Espaçamento */
    padding: 30px;

    /* Gradiente */
    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,0.95)
        );
}


.slide-info h3 {

    /* Tamanho */
    font-size: 23px;

    /* Peso */
    font-weight: 800;
}


.slide-info p {

    /* Cor */
    color: #ccc;

    /* Tamanho */
    font-size: 12px;

    /* Margem */
    margin: 5px 0;
}


.slide-info strong {

    /* Cor */
    color: var(--dourado);

    /* Tamanho */
    font-size: 17px;
}


/* =========================================================
   SETAS
========================================================= */

.seta {

    /* Largura */
    width: 45px;

    /* Altura */
    height: 45px;

    /* Redondo */
    border-radius: 50%;

    /* Fundo */
    background: #111;

    /* Borda */
    border: 1px solid var(--dourado);

    /* Cor */
    color: var(--dourado);

    /* Tamanho */
    font-size: 30px;

    /* Cursor */
    cursor: pointer;

    /* Flex */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Transição */
    transition: 0.25s;
}


.seta:hover {

    /* Fundo dourado */
    background: var(--dourado);

    /* Texto preto */
    color: #111;
}


/* =========================================================
   INDICADORES
========================================================= */

.indicadores {

    /* Flex */
    display: flex;

    /* Centraliza */
    justify-content: center;

    /* Espaçamento */
    gap: 8px;

    /* Margem */
    margin-top: 18px;
}


.indicador {

    /* Tamanho */
    width: 9px;
    height: 9px;

    /* Redondo */
    border-radius: 50%;

    /* Sem borda */
    border: 0;

    /* Fundo */
    background: #444;

    /* Cursor */
    cursor: pointer;

    /* Transição */
    transition: 0.25s;
}


.indicador.ativo {

    /* Aumenta */
    width: 25px;

    /* Deixa oval */
    border-radius: 10px;

    /* Dourado */
    background: var(--dourado);
}


/* =========================================================
   BENEFÍCIOS
========================================================= */

.beneficios {

    /* Grid */
    display: grid;

    /* Quatro colunas */
    grid-template-columns: repeat(4, 1fr);

    /* Espaçamento */
    gap: 15px;

    /* Margem */
    margin-top: 50px;

    /* Espaçamento interno */
    padding: 30px 0;

    /* Borda */
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}


.beneficio {

    /* Centraliza */
    text-align: center;
}


.icone-beneficio {

    /* Tamanho */
    width: 48px;
    height: 48px;

    /* Centraliza */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Borda */
    border: 1px solid var(--dourado);

    /* Redondo */
    border-radius: 50%;

    /* Centraliza */
    margin: auto;

    /* Cor */
    color: var(--dourado);

    /* Tamanho */
    font-size: 20px;
}


.beneficio h3 {

    /* Tamanho */
    font-size: 11px;

    /* Margem */
    margin-top: 10px;
}


.beneficio p {

    /* Cor */
    color: var(--dourado);

    /* Tamanho */
    font-size: 10px;

    /* Margem */
    margin-top: 3px;
}


/* =========================================================
   RODAPÉ
========================================================= */

footer {

    /* Centraliza */
    text-align: center;

    /* Margem */
    margin-top: 30px;

    /* Cor */
    color: #666;

    /* Tamanho */
    font-size: 10px;
}


footer span {

    /* Exibe abaixo */
    display: block;

    /* Margem */
    margin-top: 5px;

    /* Cor */
    color: var(--dourado);
}


/* =========================================================
   ANIMAÇÃO DO SLIDE
========================================================= */

@keyframes aparecer {

    /* Estado inicial */
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    /* Estado final */
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 700px) {

    /* Reduz o espaço da página */
    .pagina {
        padding: 25px 15px;
    }


    /* Botões ficam empilhados */
    .acoes {
        grid-template-columns: 1fr;
    }


    /* Reduz destaque */
    .destaque {
        height: 350px;
    }


    /* Reduz título */
    .texto-destaque h2 {
        font-size: 42px;
    }


    /* Benefícios em duas colunas */
    .beneficios {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }


    /* Reduz setas */
    .seta {
        width: 38px;
        height: 38px;
        font-size: 25px;
    }

}


@media (max-width: 500px) {

    /* Reduz logo */
    .nome-logo h1 {
        font-size: 24px;
    }


    /* Reduz espaço entre letras */
    .nome-logo span {
        font-size: 10px;
        letter-spacing: 5px;
    }


    /* Ícone */
    .icone-logo {
        width: 50px;
        height: 50px;
    }


    /* Destaque */
    .destaque {
        height: 320px;
    }


    /* Texto */
    .texto-destaque {
        left: 7%;
    }


    .texto-destaque span {
        font-size: 16px;
    }


    .texto-destaque h2 {
        font-size: 35px;
    }


    /* Esconde setas no celular */
    .seta {
        display: none;
    }


    /* Slide */
    .slide {
        height: 260px;
    }


    /* Título */
    .titulo-secao h2 {
        font-size: 13px;
    }

}

/* =========================================================
   BOTÃO CRIAR MINHA BARBEARIA - SAAS
========================================================= */

.botao-cadastro-saas {

    width: 100%;

    min-height: 48px;

    margin-top: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 1px solid #dca52c;

    border-radius: 10px;

    background: transparent;

    color: #dca52c;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.5px;

    transition: all 0.2s ease;

}


.botao-cadastro-saas:hover {

    background: #dca52c;

    color: #111;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(220, 165, 44, 0.20);

}


.botao-cadastro-saas span:first-child {

    font-size: 16px;

}