/* ==========================================================================
   TEMA PRÓPRIO — identidade visual da marca
   Carregado DEPOIS do CSS base para sobrescrever a paleta e a tipografia.
   Para mudar a marca inteira, altere apenas o bloco :root abaixo.
   ========================================================================== */

:root {
    /* --- Paleta: vinho + bronze sobre marfim quente --- */
    --brand-green: #6E1A34;
    /* cor institucional (seções escuras e títulos) */
    --brand-green-deep: #45101F;
    /* rodapé / base */
    --brand-orange: #9A6A12;
    /* acento bronze */
    --brand-orange-hover: #7C540C;
    --brand-cream: #FBF4EC;

    --brand-cta: #C22D4E;
    /* botões de ação */
    --brand-cta-hover: #9C1F3C;
    --brand-sand: #F5E7DA;
    /* faixas de destaque */
    --brand-blush: #F7E4E9;

    /* --- Tokens base --- */
    --background: #FAF6F1;
    --foreground: #241B1E;
    --card: #FFFDFB;
    --card-foreground: #241B1E;
    --popover: #FFFDFB;
    --popover-foreground: #241B1E;
    --primary: #6E1A34;
    --primary-foreground: #FFFDFB;
    --secondary: #FBF4EC;
    --secondary-foreground: #241B1E;
    --muted: #F4EDE7;
    --muted-foreground: #5E5155;
    --accent: #FBF4EC;
    --accent-foreground: #241B1E;
    --destructive: #A8231F;
    --border: #E8DCD4;
    --input: #E8DCD4;
    --ring: #6E1A34;

    --radius: .5rem;
}

/* --------------------------------------------------------------------------
   Tipografia — serifada editorial nos títulos, sans humanista no corpo
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    letter-spacing: -0.005em;
}

h1,
h2,
h3,
h4 {
    font-family: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
    letter-spacing: -0.018em;
    font-optical-sizing: auto;
}

h1 {
    font-weight: 800;
}

/* Assinatura da marca: filete bronze sob os títulos de seção */
h2.text-\[var\(--brand-green\)\]::after,
h2.text-stone-800::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin: .65rem auto 0;
    background: var(--brand-orange);
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Geometria — cantos mais secos que o padrão arredondado genérico
   -------------------------------------------------------------------------- */
.rounded-3xl {
    border-radius: 1rem;
}

.rounded-2xl {
    border-radius: .75rem;
}

.rounded-xl {
    border-radius: .5rem;
}

.shadow-2xl {
    box-shadow: 0 18px 44px -18px rgba(69, 16, 31, .38);
}

.shadow-lg {
    box-shadow: 0 10px 26px -12px rgba(69, 16, 31, .30);
}

.shadow-md {
    box-shadow: 0 6px 16px -8px rgba(69, 16, 31, .26);
}

/* --------------------------------------------------------------------------
   Botões de ação
   -------------------------------------------------------------------------- */
.bg-\[\#16A34A\] {
    background-color: var(--brand-cta);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

.hover\:bg-\[\#15803D\]:hover {
    background-color: var(--brand-cta-hover);
}

.text-\[\#16A34A\] {
    color: var(--brand-cta);
}

button.uppercase {
    letter-spacing: .045em;
}

/* CTA do rodapé (era azul-marinho) */
.bg-\[\#314677\] {
    background-color: var(--brand-green);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}

.hover\:bg-\[\#26375e\]:hover {
    background-color: var(--brand-green-deep);
}

/* --------------------------------------------------------------------------
   Gradiente do título principal: bronze → vinho
   -------------------------------------------------------------------------- */
.from-\[\#EA580C\] {
    --tw-gradient-from: #C98B2A;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}

.to-\[\#16A34A\] {
    --tw-gradient-to: #7A1F3D;
}

/* --------------------------------------------------------------------------
   Faixas e blocos coloridos
   -------------------------------------------------------------------------- */
.bg-\[\#D9E8DC\] {
    background-color: var(--brand-sand);
}

.bg-green-100 {
    background-color: var(--brand-blush);
}

.bg-orange-100 {
    background-color: #F3DFC6;
}

.bg-red-600 {
    background-color: var(--brand-orange);
}

.text-red-600 {
    color: var(--brand-cta);
}

.from-orange-50 {
    --tw-gradient-from: #FBF1E4;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}

.to-amber-100 {
    --tw-gradient-to: #F0DCC0;
}

/* --------------------------------------------------------------------------
   Neutros: cinza frio (stone) → taupe quente
   -------------------------------------------------------------------------- */
.text-stone-800 {
    color: #2C2225;
}

.text-stone-700 {
    color: #4A3F42;
}

.text-stone-600 {
    color: #5E5155;
}

.text-stone-400 {
    color: #AFA3A6;
}

.bg-stone-50 {
    background-color: #FBF7F3;
}

.bg-stone-100 {
    background-color: #F4EDE7;
}

.border-stone-200,
.border-stone-200\/80 {
    border-color: #E8DCD4;
}

.border-stone-100 {
    border-color: #F0E6DE;
}

.divide-stone-100> :not([hidden])~ :not([hidden]) {
    border-color: #F0E6DE;
}

/* --------------------------------------------------------------------------
   Cartões: filete superior bronze nos blocos de bônus e planos
   -------------------------------------------------------------------------- */
.bg-white.rounded-2xl.border,
.bg-white.rounded-3xl.border {
    border-top: 3px solid rgba(154, 106, 18, .55);
}

/* Pulsação do CTA — mais discreta que a original */
@keyframes pulse-cta {

    0%,
    100% {
        transform: scale(1);
        box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
    }

    50% {
        transform: scale(1.022);
        box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 8px rgba(194, 45, 78, .12);
    }
}

/* --------------------------------------------------------------------------
   Ajustes de tipografia serifada (a serifada ocupa mais largura que a sans
   original, então títulos grandes precisam de respiro extra)
   -------------------------------------------------------------------------- */
h1 {
    line-height: 1.08;
}

h2,
h3 {
    line-height: 1.18;
    padding-bottom: .06em;
}

h2.uppercase,
h3.uppercase {
    letter-spacing: -0.005em;
    line-height: 1.22;
}

@media (min-width:768px) {

    /* o hero em 73px de serifada estoura em telas médias */
    h1.md\:text-\[73px\] {
        font-size: 62px;
    }
}