@import url("variables.css");
@import url("header.css");
@import url("hero.css");
@import url("sobre.css");
@import url("servicos.css");
@import url("galeria.css");
@import url("depoimentos.css");
@import url("contato.css");
@import url("footer.css");
@import url("responsive.css");
@import url("studio.css");

/* ========================================
   RESET
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    min-height: 100vh;
    padding-top: 82px;

    background-color: #0d0d0d;

    background-image:
        radial-gradient(
            circle at 15% 10%,
            rgba(236, 0, 140, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 45%,
            rgba(236, 0, 140, 0.05),
            transparent 30%
        );

    color: #f5f5f5;
    font-family: var(--fonte-texto, "Poppins", sans-serif);
    line-height: 1.6;

    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* ========================================
   ESTRUTURA GERAL
======================================== */

section {
    position: relative;
    min-height: 100vh;
    padding: 120px 10%;
}

section:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.012);
}

h1,
h2,
h3,
h4 {
    font-family: var(--fonte-titulo);
    line-height: 1.15;
}

h2 {
    color: var(--cor-branca);
    letter-spacing: 0.04em;
}

p {
    color: var(--cor-texto-secundario);
}

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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 13px 26px;

    border: 1px solid var(--cor-rosa);
    border-radius: 999px;

    background: var(--cor-rosa);

    color: var(--cor-branca);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;

    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(236, 0, 140, 0.18);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.button:hover {
    transform: translateY(-3px);

    background: transparent;
    color: var(--cor-rosa);

    box-shadow:
        0 16px 38px rgba(236, 0, 140, 0.28);
}

.button:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--cor-rosa);
    outline-offset: 4px;
}

/* ========================================
   SELEÇÃO DE TEXTO
======================================== */

::selection {
    background: var(--cor-rosa);
    color: var(--cor-branca);
}

/* ========================================
   BARRA DE ROLAGEM
======================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--cor-fundo);
}

::-webkit-scrollbar-thumb {
    border: 2px solid var(--cor-fundo);
    border-radius: 999px;
    background: var(--cor-rosa);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-rosa-claro);
}