/* ==================================================
   01. VARIÁVEIS GLOBAIS
   Todas as cores, medidas e efeitos editáveis ficam aqui.
   ================================================== */

:root {
    /* ---------- Cores ---------- */
    --color-background: #FFFFFF;
    --color-modal-overlay: rgba(12, 24, 43, 0.58);

    /* ---------- Layout ---------- */
    --content-max-width: 430px;
    --page-padding-x: clamp(18px, 6vw, 28px);

    /* ---------- Efeitos ---------- */
    --shadow-button: 0 6px 14px rgba(16, 28, 46, 0.20);
    --shadow-modal: 0 18px 48px rgba(0, 0, 0, 0.28);
}


/* ==================================================
   02. RESET E CONFIGURAÇÕES GERAIS
   ================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    background: var(--color-background);
}

body {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    overflow-x: hidden;

    font-family: Arial, Helvetica, sans-serif;
    background: var(--color-background);
}

body.modal-open {
    overflow: hidden;
}

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

a,
button {
    -webkit-tap-highlight-color: transparent;
}


/* ==================================================
   03. CONTAINER PADRÃO DAS PÁGINAS
   ================================================== */

.app-shell {
    position: relative;
    width: 100%;
    max-width: var(--content-max-width);
    min-height: 100dvh;
    overflow: hidden;
    background: var(--color-background);
}


/* ==================================================
   04. COMPORTAMENTO PADRÃO DOS BOTÕES
   ================================================== */

.ui-button,
.material-button,
.back-button,
.modal-whatsapp {
    transition:
        filter 120ms ease,
        transform 120ms ease;
}

.ui-button {
    filter: drop-shadow(var(--shadow-button));
}

.ui-button:active,
.ui-button.is-pressed,
.material-button:active,
.material-button.is-pressed,
.back-button:active,
.back-button.is-pressed,
.modal-whatsapp:active,
.modal-whatsapp.is-pressed {
    filter: brightness(0.92);
    transform: scale(0.985);
}

.ui-button img,
.material-button img,
.back-button img,
.modal-whatsapp img {
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.no-shadow {
    filter: none;
}


/* ==================================================
   05. PÁGINA INICIAL
   ================================================== */

.home-decoration {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.home-decoration--header {
    top: 0;
    left: 0;
    width: 100%;
}

.home-decoration--left {
    top: 39%;
    left: 0;
    width: clamp(14px, 4vw, 22px);
}

.home-decoration--right {
    top: 35%;
    right: 0;
    width: clamp(20px, 6vw, 32px);
}

.home-decoration--footer {
    left: 0;
    bottom: 0;
    width: 100%;
}

.home-content {
    position: relative;
    z-index: 1;

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        clamp(58px, 15vw, 78px)
        var(--page-padding-x)
        clamp(72px, 19vw, 96px);
}

.home-logo {
    width: min(73%, 300px);
    margin-top: clamp(24px, 5vw, 38px);
}

.home-links {
    width: min(78%, 320px);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 4vw, 20px);
    margin-top: clamp(24px, 6vw, 34px);
}

.home-signature {
    width: min(45%, 188px);
    margin-top: auto;
    margin-bottom: clamp(22px, 6vw, 34px);
}


/* ==================================================
   06. PÁGINA CATÁLOGO
   ================================================== */

.catalog-decoration {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.catalog-decoration--header {
    top: 0;
    left: 0;
    width: 100%;
}

.catalog-decoration--footer {
    left: 0;
    bottom: 0;
    width: 100%;
}

.catalog-content {
    position: relative;
    z-index: 1;

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        clamp(88px, 24vw, 118px)
        var(--page-padding-x)
        clamp(82px, 22vw, 108px);
}

.catalog-intro {
    width: min(84%, 350px);
}

.catalog-links {
    width: min(84%, 350px);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 5vw, 26px);
    margin-top: clamp(30px, 8vw, 42px);
}

.catalog-signature {
    width: min(44%, 190px);
    margin-top: auto;
    margin-bottom: clamp(22px, 6vw, 34px);
}


/* ==================================================
   07. BOTÃO DE RETORNO
   ================================================== */

.back-button {
    position: absolute;
    top: clamp(14px, 4vw, 22px);
    left: clamp(12px, 4vw, 20px);
    z-index: 4;

    width: clamp(38px, 10vw, 48px);
    line-height: 0;
}


/* ==================================================
   08. PÁGINA MATERIAIS GRÁFICOS
   ================================================== */

.materials-decoration {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.materials-decoration--header {
    top: 0;
    right: 0;
    width: clamp(62px, 18vw, 82px);
}

.materials-decoration--footer {
    left: 0;
    bottom: 0;
    width: 100%;
}

.materials-content {
    position: relative;
    z-index: 1;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        clamp(18px, 5vw, 28px)
        var(--page-padding-x)
        clamp(26px, 8vw, 42px);
}

.materials-title {
    width: min(62%, 270px);
    margin-top: clamp(8px, 2vw, 14px);
}

.materials-explanation {
    width: min(86%, 365px);
    margin-top: clamp(4px, 1vw, 8px);
}

.materials-links {
    width: min(94%, 392px);
    display: flex;
    flex-direction: column;
    gap: clamp(7px, 1.8vw, 10px);
    margin-top: clamp(12px, 3vw, 18px);
    margin-bottom: clamp(24px, 6vw, 34px);
}

.material-button {
    display: block;
    width: 100%;
    line-height: 0;
}


/* ==================================================
   09. PÁGINA PLANOS DE MARKETING
   ================================================== */

.marketing-decoration {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.marketing-decoration--header {
    top: 0;
    right: 0;
    width: clamp(62px, 18vw, 82px);
}

.marketing-decoration--footer {
    left: 0;
    bottom: 0;
    width: 100%;
}

.marketing-content {
    position: relative;
    z-index: 1;

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        clamp(16px, 4vw, 24px)
        var(--page-padding-x)
        clamp(34px, 9vw, 50px);
}

.marketing-intro {
    width: min(74%, 316px);
    margin-top: clamp(2px, 1vw, 8px);
}

.marketing-links {
    width: min(86%, 360px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vw, 12px);
    margin-top: clamp(14px, 4vw, 22px);
}

.plan-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}


/* ==================================================
   10. MODAIS DOS PLANOS
   ================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: none;
    align-items: center;
    justify-content: center;

    padding: clamp(10px, 3vw, 18px);
}

.modal.is-open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-modal-overlay);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.modal-card {
    position: relative;
    z-index: 1;

    width: min(94vw, 410px);
    max-height: 94dvh;

    overflow-y: auto;
    overflow-x: hidden;

    border-radius: clamp(20px, 5vw, 28px);
    background: #FFFFFF;
    box-shadow: var(--shadow-modal);

    padding:
        clamp(18px, 4.5vw, 24px)
        clamp(14px, 4vw, 20px)
        clamp(18px, 4.5vw, 24px);
}

.modal-content-image {
    width: 100%;
    height: auto;
}

.modal-close {
    position: absolute;
    top: clamp(12px, 3vw, 18px);
    right: clamp(12px, 3vw, 18px);
    z-index: 3;

    width: clamp(36px, 10vw, 46px);
    height: auto;

    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;

    transition:
        filter 120ms ease,
        transform 120ms ease;
}

.modal-close:active,
.modal-close.is-pressed {
    filter: brightness(0.90);
    transform: scale(0.94);
}

.modal-close img {
    width: 100%;
    pointer-events: none;
}

.modal-whatsapp {
    display: block;
    width: min(90%, 340px);
    margin: clamp(12px, 3vw, 18px) auto 0;
    line-height: 0;
}


/* ==================================================
   11. RESPONSIVIDADE
   ================================================== */

@media (max-width: 340px) {
    :root {
        --page-padding-x: 14px;
    }

    .home-links,
    .catalog-links {
        width: 84%;
    }

    .materials-links {
        width: 96%;
    }

    .modal-card {
        width: 96vw;
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (min-width: 431px) {
    .app-shell {
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.08);
    }
}