/* =========================================================
   AUTO ESCOLA RENOVA
   ESTILO PRINCIPAL
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {

    --preto: #08090D;
    --chumbo: #10131A;
    --chumbo-claro: #171B24;

    --vermelho: #8B111E;
    --vermelho-brilho: #B51224;

    --ouro: #D4AF37;
    --ouro-claro: #F2C94C;

    --azul-marinho: #071A33;
    --azul: #0B2545;

    --branco: #FFFFFF;
    --cinza: #D7D9DE;
    --cinza-texto: #A7ABB5;

    --borda: rgba(212, 175, 55, 0.25);

    --azul-neon: #2E9BFF;

    --azul-neon-claro: #9ED4FF;

    --transicao: 0.3s ease;

}


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

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: "Inter", Arial, Helvetica, sans-serif;

    background: var(--preto);

    color: var(--branco);

    line-height: 1.6;

}

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

button {
    font-family: inherit;
}

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

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
}

::selection {
    background: var(--ouro);
    color: var(--preto);
}

:focus-visible {
    outline: 2px solid var(--ouro-claro);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: -100px;
    z-index: 2000;
    transform: translateX(-50%);
    padding: 12px 22px;
    background: var(--ouro);
    color: var(--preto);
    font-size: 13px;
    font-weight: 700;
    border-radius: 0 0 8px 8px;
    transition: top var(--transicao);
}

.skip-link:focus {
    top: 0;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: min(1200px, 92%);

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(8, 9, 13, 0.94);

    backdrop-filter: blur(14px);

    border-bottom: 3px solid transparent;

    border-image: linear-gradient(
        90deg,
        var(--vermelho),
        var(--ouro),
        var(--vermelho-brilho)
    ) 1;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);

}

.header-container {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

}


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

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}

.logo-icon {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--vermelho),
            var(--vermelho-brilho)
        );

    color: var(--ouro-claro);

    font-size: 21px;

    box-shadow:
        0 0 20px rgba(181, 18, 36, 0.25);

}

.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1.05;

}

.logo-text span {

    font-size: 10px;

    letter-spacing: 2px;

    color: var(--cinza);

}

.logo-text strong {

    font-size: 22px;

    letter-spacing: 1px;

    color: var(--ouro-claro);

}


/* =========================================================
   NAVEGAÇÃO
========================================================= */

.nav {

    display: flex;

    align-items: center;

    gap: 4px;

}

.nav-link {

    position: relative;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 30px 11px;

    background: transparent;

    border: none;

    color: var(--cinza);

    font-size: 13px;

    cursor: pointer;

    transition: var(--transicao);

}

.nav-link:hover,
.nav-link.active {

    color: var(--ouro-claro);

}

.dropdown-button {

    color: var(--cinza);

}


/* =========================================================
   DROPDOWN
========================================================= */

.nav-dropdown {

    position: relative;

}

.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 235px;

    padding: 10px;

    background: var(--chumbo);

    border:
        1px solid var(--borda);

    border-radius: 10px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.45);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: var(--transicao);

}

.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.dropdown-menu a {

    display: block;

    padding: 11px 13px;

    color: var(--cinza);

    border-radius: 6px;

    font-size: 13px;

    transition: var(--transicao);

}

.dropdown-menu a:hover {

    background: var(--vermelho);

    color: var(--branco);

}

.dropdown-menu a.current,

.dropdown-menu a[aria-current="page"] {

    background: rgba(212, 175, 55, 0.12);

    color: var(--ouro-claro);

    font-weight: 600;

    box-shadow: inset 2px 0 0 var(--ouro);

}

.dropdown-menu a.current:hover,

.dropdown-menu a[aria-current="page"]:hover {

    background: var(--vermelho);

    color: var(--branco);

}


/* =========================================================
   BOTÃO MATRÍCULA
========================================================= */

.btn-matricula {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 17px;

    background:
        linear-gradient(
            135deg,
            var(--ouro),
            var(--ouro-claro)
        );

    color: #151515;

    font-weight: bold;

    font-size: 12px;

    border-radius: 7px;

    transition: var(--transicao);

    white-space: nowrap;

}

.btn-matricula:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.25);

}


/* =========================================================
   MENU MOBILE
========================================================= */

.menu-toggle {

    display: none;

    width: 44px;

    height: 44px;

    background: transparent;

    color: var(--ouro-claro);

    border:
        1px solid var(--borda);

    border-radius: 7px;

    font-size: 20px;

    cursor: pointer;

}


/* =========================================================
   HERO TEMPORÁRIO
========================================================= */

.hero-placeholder {

    min-height: 620px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(139, 17, 30, 0.28),
            transparent 35%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(7, 26, 51, 0.6),
            transparent 40%
        ),

        var(--preto);

}

.hero-placeholder::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -180px;

    top: -180px;

    border-radius: 50%;

    border:
        1px solid rgba(212, 175, 55, 0.12);

}

.section-label {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--ouro-claro);

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

}

.hero-placeholder h1 {

    max-width: 700px;

    font-size: clamp(42px, 6vw, 76px);

    line-height: 1.05;

    margin-bottom: 25px;

}

.hero-placeholder h1 span {

    display: block;

    color: var(--ouro-claro);

}

.hero-placeholder p {

    max-width: 600px;

    color: var(--cinza-texto);

    font-size: 18px;

    margin-bottom: 35px;

}

.hero-buttons {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

}

.btn-primary,
.btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 24px;

    border-radius: 7px;

    font-size: 13px;

    font-weight: bold;

    transition: var(--transicao);

}

.btn-primary {

    background: var(--vermelho-brilho);

    color: var(--branco);

}

.btn-primary:hover {

    background: var(--vermelho);

    transform: translateY(-2px);

}

.btn-secondary {

    border:
        1px solid var(--ouro);

    color: var(--ouro-claro);

}

.btn-secondary:hover {

    background: var(--ouro);

    color: #111;

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background: var(--chumbo);

    border-top:
        1px solid rgba(212, 175, 55, 0.15);

}

.footer-container {

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap: 40px;

    padding: 60px 0;

}

.footer-brand p {

    margin-top: 15px;

    color: var(--cinza-texto);

    font-size: 14px;

}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.footer-column h3 {

    color: var(--ouro-claro);

    font-size: 14px;

    margin-bottom: 8px;

}

.footer-column a {

    color: var(--cinza-texto);

    font-size: 13px;

    transition: var(--transicao);

}

.footer-column a:hover {

    color: var(--ouro-claro);

}

.social-links {

    display: flex;

    gap: 10px;

}

.social-links a {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(212, 175, 55, 0.25);

    border-radius: 7px;

    color: var(--ouro-claro);

}

.social-links a:hover {

    background: var(--vermelho);

    color: var(--branco);

}

.footer-bottom {

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    padding: 20px 0;

}

.footer-bottom p {

    text-align: center;

    color: #777;

    font-size: 12px;

}


/* =========================================================
   HOME — AUTO ESCOLA RENOVA
========================================================= */


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: 720px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        linear-gradient(
            90deg,
            rgba(8, 9, 13, 0.98) 0%,
            rgba(8, 9, 13, 0.88) 45%,
            rgba(8, 9, 13, 0.60) 100%
        ),

        radial-gradient(
            circle at 80% 50%,
            rgba(181, 18, 36, 0.35),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            var(--azul-marinho),
            var(--preto)
        );

}


.hero::after {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -250px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    border:
        1px solid rgba(212, 175, 55, 0.15);

    box-shadow:
        0 0 100px rgba(181, 18, 36, 0.12);

}


.hero-container {

    position: relative;

    z-index: 2;

}


.hero-content {

    max-width: 720px;

    padding: 80px 0;

}


.hero h1 {

    font-size: clamp(46px, 6vw, 78px);

    line-height: 1.02;

    letter-spacing: -2px;

    margin-bottom: 28px;

}


.hero h1 span {

    display: block;

    color: var(--ouro-claro);

}


.hero p {

    max-width: 620px;

    color: var(--cinza);

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 35px;

}


.hero-trust {

    display: flex;

    gap: 28px;

    margin-top: 42px;

}


.hero-trust div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--cinza-texto);

    font-size: 12px;

}


.hero-trust i {

    color: var(--ouro);

}


/* =========================================================
   SEÇÕES
========================================================= */

.section {

    padding: 100px 0;

}


.section-heading {

    max-width: 700px;

    margin-bottom: 55px;

}


.section-heading.centered {

    margin-left: auto;
    margin-right: auto;

    text-align: center;

}


.section-heading h2,
.differences-content h2,
.structure-content h2 {

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.12;

    margin-bottom: 18px;

}


.section-heading h2 span,
.differences-content h2 span,
.structure-content h2 span {

    color: var(--ouro-claro);

}


.section-heading p,
.differences-content p,
.structure-content p {

    color: var(--cinza-texto);

    line-height: 1.8;

}


/* =========================================================
   TRUST BAR
========================================================= */

.trust-bar {

    background: var(--chumbo);

    border-top:
        1px solid rgba(212, 175, 55, 0.15);

    border-bottom:
        1px solid rgba(212, 175, 55, 0.15);

}


.trust-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

}


.trust-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 25px 20px;

    border-right:
        1px solid rgba(255,255,255,0.06);

}


.trust-item:last-child {
    border-right: none;
}


.trust-item > i {

    font-size: 24px;

    color: var(--ouro);

}


.trust-item div {

    display: flex;

    flex-direction: column;

}


.trust-item strong {

    font-size: 14px;

}


.trust-item span {

    color: var(--cinza-texto);

    font-size: 11px;

}


/* =========================================================
   CATEGORIAS
========================================================= */

.categories-section {

    background: var(--preto);

}


.categories-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.category-card {

    position: relative;

    padding: 35px;

    min-height: 350px;

    display: flex;

    flex-direction: column;

    background: var(--chumbo);

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 14px;

    overflow: hidden;

    transition: var(--transicao);

}


.category-card::before {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -60px;
    top: -60px;

    border-radius: 50%;

    background:
        rgba(139,17,30,0.18);

}


.category-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(212,175,55,0.4);

}


.category-card.featured {

    border-color:
        rgba(212,175,55,0.45);

    background:
        linear-gradient(
            145deg,
            #171923,
            #10131A
        );

}


.category-icon {

    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 12px;

    background:
        rgba(181,18,36,0.16);

    border:
        1px solid rgba(181,18,36,0.4);

    color: var(--ouro-claro);

    font-size: 26px;

    margin-bottom: 28px;

}


.category-card h3 {

    font-size: 25px;

    margin: 8px 0 12px;

}


.category-card p {

    color: var(--cinza-texto);

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 25px;

}


.category-card a {

    margin-top: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: var(--ouro-claro);

    font-size: 12px;

    font-weight: bold;

}


/* ---------- CARDS DE CATEGORIA COM FOTO ---------- */

.category-card.has-media {

    padding: 0;

    min-height: 0;

}

.category-card.has-media::before {

    content: none;

}

.category-media {

    position: relative;

    aspect-ratio: 3 / 2;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--chumbo-claro),
            var(--preto)
        );

    border-bottom:
        1px solid rgba(255,255,255,0.07);

}

.category-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.55s ease;

}

.category-card.has-media:hover .category-media img {

    transform: scale(1.06);

}

.category-media::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8,9,13,0.55) 0%,
            rgba(8,9,13,0) 35%,
            rgba(8,9,13,0.35) 100%
        );

    pointer-events: none;

}

.category-badge {

    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 2;

    padding: 7px 13px;

    border-radius: 999px;

    background: rgba(8,9,13,0.78);

    border:
        1px solid rgba(212,175,55,0.4);

    backdrop-filter: blur(4px);

    color: var(--ouro-claro);

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}

.category-body {

    padding: 26px 28px 28px;

    display: flex;

    flex-direction: column;

    flex: 1;

}

.category-body h3 {

    font-size: 23px;

    margin: 0 0 10px;

}

.category-body p {

    margin-bottom: 22px;

}


/* =========================================================
   DIFERENCIAIS
========================================================= */

.differences-section {

    background:
        linear-gradient(
            135deg,
            var(--azul-marinho),
            var(--preto)
        );

}


.differences-container {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 70px;

    align-items: center;

}


.differences-content p {

    margin-bottom: 30px;

}


.differences-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

}


.difference-card {

    padding: 28px;

    position: relative;

    background:
        rgba(16,19,26,0.85);

    border:
        1px solid rgba(46,155,255,0.55);

    border-radius: 12px;

    box-shadow:
        0 0 10px rgba(46,155,255,0.18),
        inset 0 0 12px rgba(158,212,255,0.06);

    transition: var(--transicao);

}


.difference-card::after {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: 12px;

    padding: 1px;

    background:
        linear-gradient(
            145deg,
            rgba(158,212,255,0.75),
            rgba(46,155,255,0.15) 45%,
            rgba(158,212,255,0.45)
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    pointer-events: none;

}


.difference-card:hover {

    border-color:
        rgba(46,155,255,0.95);

    box-shadow:
        0 0 18px rgba(46,155,255,0.35),
        0 0 34px rgba(158,212,255,0.14),
        inset 0 0 16px rgba(158,212,255,0.1);

    transform: translateY(-4px);

}


.difference-card i {

    color: var(--ouro);

    font-size: 25px;

    margin-bottom: 20px;

}


.difference-card h3 {

    font-size: 17px;

    margin-bottom: 8px;

}


.difference-card p {

    color: var(--cinza-texto);

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   PROCESSO
========================================================= */

.process-section {

    background: var(--preto);

}


.process-grid {

    display: grid;

    grid-template-columns:
        1fr 35px 1fr 35px 1fr 35px 1fr;

    align-items: start;

}


.process-item {

    text-align: center;

}


.process-number {

    width: 48px;
    height: 48px;

    display: flex;

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

    margin: 0 auto 20px;

    border-radius: 50%;

    background: var(--vermelho);

    border:
        1px solid var(--ouro);

    color: var(--ouro-claro);

    font-size: 12px;

    font-weight: bold;

}


.process-item > i {

    color: var(--ouro);

    font-size: 25px;

    margin-bottom: 15px;

}


.process-item h3 {

    margin-bottom: 8px;

}


.process-item p {

    color: var(--cinza-texto);

    font-size: 12px;

    line-height: 1.6;

}


.process-line {

    height: 1px;

    margin-top: 24px;

    background:
        linear-gradient(
            90deg,
            var(--vermelho),
            var(--ouro)
        );

}


/* =========================================================
   SERVIÇOS
========================================================= */

.services-section {

    background: var(--chumbo);

}


.services-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

}


.service-card {

    display: grid;

    grid-template-columns: 55px 1fr 25px;

    gap: 18px;

    align-items: center;

    padding: 25px;

    background: var(--preto);

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 10px;

    transition: var(--transicao);

}


.service-card:hover {

    border-color:
        rgba(212,175,55,0.4);

    transform: translateY(-3px);

}


.service-card > i:first-child {

    width: 55px;
    height: 55px;

    display: flex;

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

    background:
        rgba(139,17,30,0.2);

    border-radius: 10px;

    color: var(--ouro);

    font-size: 21px;

}


.service-card h3 {

    font-size: 16px;

    margin-bottom: 5px;

}


.service-card p {

    color: var(--cinza-texto);

    font-size: 12px;

}


.service-card .arrow {

    color: var(--ouro);

}


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

.structure-section {

    background:

        radial-gradient(
            circle at 85% 50%,
            rgba(139,17,30,0.22),
            transparent 35%
        ),

        var(--preto);

}


.structure-container {

    display: grid;

    grid-template-columns:
        1.2fr 0.8fr;

    gap: 70px;

    align-items: center;

}


.structure-content p {

    max-width: 600px;

    margin-bottom: 30px;

}


.structure-highlight {

    min-height: 280px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px;

    background:
        linear-gradient(
            145deg,
            var(--chumbo),
            var(--azul-marinho)
        );

    border:
        1px solid rgba(212,175,55,0.3);

    border-radius: 15px;

}


.structure-icon {

    width: 80px;
    height: 80px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 50%;

    background: var(--vermelho);

    color: var(--ouro-claro);

    font-size: 30px;

}


.structure-highlight strong {

    font-size: 18px;

    margin-bottom: 8px;

}


.structure-highlight span {

    color: var(--cinza-texto);

    font-size: 13px;

}


/* =========================================================
   DEPOIMENTOS
========================================================= */

.testimonials-section {

    background: var(--chumbo);

}


.testimonials-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}


.testimonial-card {

    padding: 30px;

    background: var(--preto);

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 12px;

}


.stars {

    color: var(--ouro-claro);

    letter-spacing: 3px;

    margin-bottom: 20px;

}


.testimonial-card p {

    color: var(--cinza);

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 25px;

}


.testimonial-card strong {

    display: block;

    font-size: 14px;

}


.testimonial-card span {

    color: var(--cinza-texto);

    font-size: 11px;

}


/* =========================================================
   CTA FINAL
========================================================= */

.final-cta {

    padding: 80px 0;

    background:

        linear-gradient(
            120deg,
            var(--vermelho),
            #4b0a12
        );

}


.final-cta-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


.final-cta h2 {

    max-width: 650px;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.1;

    margin: 10px 0 15px;

}


.final-cta p {

    color: rgba(255,255,255,0.75);

}


.final-cta .section-label {

    color: var(--ouro-claro);

}


.final-cta-buttons {

    display: flex;

    gap: 12px;

    flex-shrink: 0;

}


.final-cta .btn-primary {

    background: var(--ouro);

    color: #111;

}


.final-cta .btn-secondary {

    border-color: rgba(255,255,255,0.5);

    color: white;

}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-float {

    position: fixed;

    right: 22px;

    bottom: 22px;

    z-index: 999;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 13px 18px;

    border-radius: 30px;

    background: #128C7E;

    color: white;

    font-size: 12px;

    font-weight: bold;

    box-shadow:
        0 8px 30px rgba(0,0,0,0.4);

    transition: var(--transicao);

}


.whatsapp-float:hover {

    transform: translateY(-4px);

}


/* =========================================================
   PÁGINA — QUEM SOMOS
========================================================= */


/* =========================================================
   BANNER INTERNO
========================================================= */

.page-banner {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 85% 50%,
            rgba(181, 18, 36, 0.28),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            var(--azul-marinho),
            var(--preto)
        );

    border-bottom:
        1px solid rgba(212,175,55,0.15);

}


.page-banner::after {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -180px;
    top: -180px;

    border-radius: 50%;

    border:
        1px solid rgba(212,175,55,0.12);

}


.page-banner h1 {

    position: relative;

    z-index: 2;

    font-size: clamp(42px, 6vw, 68px);

    line-height: 1.05;

    margin: 10px 0 18px;

}


.page-banner p {

    position: relative;

    z-index: 2;

    max-width: 650px;

    color: var(--cinza-texto);

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   SOBRE
========================================================= */

.about-section {

    background: var(--preto);

}


.about-container {

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 80px;

    align-items: center;

}


.about-content h2 {

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.12;

    margin-bottom: 25px;

}


.about-content h2 span {

    color: var(--ouro-claro);

}


.about-content p {

    color: var(--cinza-texto);

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 18px;

}


.about-content .btn-primary {

    margin-top: 15px;

}


.about-visual {

    min-height: 400px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle,
            rgba(181,18,36,0.18),
            transparent 60%
        );

}

.about-photo {

    position: relative;

    width: 360px;

    height: 360px;

    margin: 0;

    overflow: hidden;

    border-radius: 15%;

    border:
        1px solid rgba(46,155,255,0.6);

    box-shadow:
        0 0 12px rgba(46,155,255,0.25),
        0 0 34px rgba(46,155,255,0.12),
        inset 0 0 20px rgba(158,212,255,0.07);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;

}

.about-photo::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    border-radius: 15%;

    padding: 1px;

    background:

        linear-gradient(
            145deg,
            rgba(158,212,255,0.85),
            rgba(46,155,255,0.2) 45%,
            rgba(158,212,255,0.55)
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    pointer-events: none;

}

.about-photo:hover {

    transform: scale(1.03);

    border-color:
        rgba(46,155,255,0.95);

    box-shadow:
        0 0 20px rgba(46,155,255,0.45),
        0 0 56px rgba(46,155,255,0.22),
        inset 0 0 26px rgba(158,212,255,0.12);

}

.about-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;

}

.about-photo:hover img {

    transform: scale(1.07);

}

.about-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 15%;

    background:

        linear-gradient(
            180deg,
            rgba(8,9,13,0.25) 0%,
            rgba(8,9,13,0) 35%,
            rgba(8,9,13,0.85) 100%
        );

    pointer-events: none;

}

.about-photo figcaption {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 42px;

    z-index: 2;

    text-align: center;

}

.about-photo figcaption strong {

    display: block;

    color: #fff;

    font-size: 15px;

    letter-spacing: 2px;

    text-shadow: 0 2px 10px rgba(0,0,0,0.85);

}

.about-photo figcaption span {

    display: block;

    color: var(--ouro-claro);

    font-size: 13px;

    margin-top: 5px;

    text-shadow: 0 2px 10px rgba(0,0,0,0.85);

}


/* =========================================================
   MISSÃO VISÃO VALORES
========================================================= */

.mvv-section {

    background: var(--chumbo);

}


.mvv-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.mvv-card {

    padding: 35px;

    min-height: 310px;

    background: var(--preto);

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 14px;

    transition: var(--transicao);

}


.mvv-card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(212,175,55,0.4);

}


.mvv-icon {

    width: 60px;
    height: 60px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 10px;

    background:
        rgba(139,17,30,0.18);

    color: var(--ouro);

    font-size: 23px;

}


.mvv-card h3 {

    font-size: 21px;

    margin-bottom: 15px;

}


.mvv-card p {

    color: var(--cinza-texto);

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   DIFERENCIAIS DA PÁGINA
========================================================= */

.about-differences {

    background:

        linear-gradient(
            135deg,
            var(--azul-marinho),
            var(--preto)
        );

}


.about-difference-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

}


.about-difference {

    display: flex;

    gap: 20px;

    padding: 28px;

    background:
        rgba(16,19,26,0.85);

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 12px;

}


.about-difference > i {

    flex-shrink: 0;

    color: var(--ouro);

    font-size: 25px;

}


.about-difference h3 {

    font-size: 17px;

    margin-bottom: 8px;

}


.about-difference p {

    color: var(--cinza-texto);

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   EQUIPE
========================================================= */

.team-section {

    background: var(--preto);

}


.team-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}


.team-card {

    padding: 35px;

    text-align: center;

    background: var(--chumbo);

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 12px;

    transition: var(--transicao);

}


.team-card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(212,175,55,0.35);

}


.team-avatar {

    width: 90px;
    height: 90px;

    display: flex;

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

    margin: 0 auto 22px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--vermelho),
            var(--azul-marinho)
        );

    border:
        1px solid rgba(212,175,55,0.35);

    color: var(--ouro-claro);

    font-size: 30px;

}


.team-card h3 {

    font-size: 18px;

    margin-bottom: 6px;

}


.team-card span {

    color: var(--cinza-texto);

    font-size: 12px;

}


/* ============================================================
   FASE 04 — NOSSA ESTRUTURA
============================================================ */

.inner-page-banner {
    position: relative;
    padding: 150px 0 80px;
    background:
        linear-gradient(
            135deg,
            rgba(10, 12, 18, .98),
            rgba(45, 8, 14, .95)
        );
    overflow: hidden;
}

.inner-page-banner::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: rgba(139, 20, 35, .15);
    border-radius: 50%;
    filter: blur(80px);
    right: -120px;
    top: -120px;
}

.inner-page-banner .renova-container {
    position: relative;
    z-index: 2;
}

.inner-page-banner h1 {
    margin: 20px 0 15px;
    font-family: "Playfair Display", serif;
    font-size: clamp(42px, 6vw, 72px);
    color: #fff;
}

.inner-page-banner h1 span {
    color: var(--ouro);
}

.inner-page-banner p {
    max-width: 700px;
    color: var(--cinza-texto);
    font-size: 18px;
    line-height: 1.8;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    font-size: 14px;
}

.breadcrumb a {
    color: var(--ouro);
}

.breadcrumb span {
    color: var(--cinza-texto);
}

.breadcrumb i {
    color: var(--vermelho);
}


/* ============================================================
   INTRODUÇÃO
============================================================ */

.structure-intro {
    padding: 100px 0;
    background: var(--preto);
}

.structure-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

.structure-intro-content h2 {
    margin: 20px 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.2;
    color: #fff;
}

.structure-intro-content h2 span {
    color: var(--ouro);
}

.structure-intro-content p {
    color: var(--cinza-texto);
    line-height: 1.8;
    margin-bottom: 18px;
}

.structure-highlight {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.highlight-card {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
    transition: var(--transicao);
}

.highlight-card:hover {
    transform: translateY(-6px);
    border-color: rgba(197, 157, 72, .55);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .35);
}

.highlight-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    color: var(--ouro);
    background: rgba(197, 157, 72, .10);
    border: 1px solid rgba(197, 157, 72, .25);
}

.highlight-card h3 {
    color: #fff;
    margin-bottom: 8px;
}

.highlight-card p {
    color: var(--cinza-texto);
    line-height: 1.6;
    font-size: 14px;
}


/* ============================================================
   ESTRUTURA — BLOCOS
============================================================ */

.structure-section {
    padding: 100px 0;
    background: #11141b;
}

.structure-section-dark {
    background: #0b0d12;
}

.structure-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    padding: 55px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );
    overflow: hidden;
}

.structure-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(139, 20, 35, .14);
    border-radius: 50%;
    filter: blur(70px);
    left: -60px;
    top: -60px;
}

.structure-card-reverse {
    grid-template-columns: 1fr 1fr;
}

.structure-card-reverse .structure-card-visual {
    order: -1;
}

.structure-card-icon {
    position: absolute;
    top: 30px;
    right: 35px;
    color: rgba(197, 157, 72, .18);
    font-size: 48px;
}

.structure-card-content {
    position: relative;
    z-index: 2;
}

.structure-card-content > span {
    color: var(--ouro);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.structure-card-content h2 {
    margin: 15px 0 18px;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 4vw, 46px);
}

.structure-card-content p {
    color: var(--cinza-texto);
    line-height: 1.8;
}

.structure-card-content ul {
    display: grid;
    gap: 12px;
    margin-top: 25px;
}

.structure-card-content li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ddd;
    font-size: 14px;
}

.structure-card-content li i {
    color: var(--ouro);
}

.structure-card-visual {
    min-height: 340px;
}

.visual-photo {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 340px;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(197, 157, 72, .25);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.visual-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}

.structure-card:hover .visual-photo img {
    transform: scale(1.05);
}

.visual-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(8, 9, 13, .55) 0%,
            rgba(8, 9, 13, 0) 40%,
            rgba(8, 9, 13, .75) 100%
        );
    pointer-events: none;
}

.visual-photo figcaption {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

/* ============================================================
   TECNOLOGIA
   ============================================================ */

.technology-section {
    padding: 100px 0;
    background: var(--preto);
}

.section-heading.centered {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading h2 {
    margin: 18px 0;
    font-family: "Playfair Display", serif;
    color: #fff;
    font-size: clamp(34px, 4vw, 52px);
}

.section-heading h2 span {
    color: var(--ouro);
}

.section-heading p {
    color: var(--cinza-texto);
    line-height: 1.8;
}

.technology-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.technology-card {
    padding: 35px 25px;
    text-align: center;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
    transition: var(--transicao);
}

.technology-card:hover {
    transform: translateY(-7px);
    border-color: rgba(197,157,72,.45);
}

.technology-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--ouro);
    background: rgba(197,157,72,.08);
    border: 1px solid rgba(197,157,72,.22);
    font-size: 24px;
}

.technology-card h3 {
    color: #fff;
    margin-bottom: 12px;
}

.technology-card p {
    color: var(--cinza-texto);
    font-size: 14px;
    line-height: 1.7;
}


/* ============================================================
   SEGURANÇA
============================================================ */

.security-section {
    padding: 100px 0;
    background:
        linear-gradient(
            135deg,
            #0b0d12,
            #260b11
        );
}

.security-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.security-content h2 {
    margin: 20px 0;
    font-family: "Playfair Display", serif;
    color: #fff;
    font-size: clamp(36px, 4vw, 54px);
}

.security-content h2 span {
    color: var(--ouro);
}

.security-content > div:first-child p {
    color: var(--cinza-texto);
    line-height: 1.8;
    max-width: 600px;
}

.security-items {
    display: grid;
    gap: 18px;
}

.security-item {
    display: flex;
    gap: 20px;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.18);
}

.security-item > i {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--ouro);
    background: rgba(197,157,72,.10);
}

.security-item h3 {
    color: #fff;
    margin-bottom: 6px;
}

.security-item p {
    color: var(--cinza-texto);
    line-height: 1.6;
    font-size: 14px;
}


/* ============================================================
   CTA
============================================================ */

.structure-cta {
    padding: 100px 0;
    background: #11141b;
}

.structure-cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 70px 40px;
    border-radius: 25px;
    border: 1px solid rgba(197,157,72,.25);
    background:
        radial-gradient(
            circle at center,
            rgba(139,20,35,.25),
            rgba(255,255,255,.02) 70%
        );
}

.structure-cta h2 {
    margin: 20px 0 15px;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 5vw, 56px);
}

.structure-cta p {
    max-width: 620px;
    margin: 0 auto 30px;
    color: var(--cinza-texto);
    line-height: 1.8;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 25px;
    border: 1px solid var(--ouro);
    border-radius: 10px;
    color: var(--ouro);
    transition: var(--transicao);
}

.btn-outline:hover {
    background: var(--ouro);
    color: #111;
}


/* ============================================================
   WHATSAPP
============================================================ */

.floating-whatsapp {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #168c4a;
    color: #fff;
    font-size: 27px;
    z-index: 999;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
    transition: var(--transicao);
}

.floating-whatsapp:hover {
    transform: scale(1.08);
}


/* ============================================================
   FASE 05 — INSTRUTORES
============================================================ */

.instructors-intro {
    padding: 90px 0 40px;
    background: var(--preto);
}

.instructors-intro .section-heading {
    max-width: 780px;
}


/* ============================================================
   GRID DE INSTRUTORES
============================================================ */

.instructors-section {
    padding: 60px 0 100px;
    background: var(--preto);
}

.instructors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.instructor-card {
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #11141b;
    transition: var(--transicao);
}

.instructor-card:hover {
    transform: translateY(-8px);
    border-color: rgba(197, 157, 72, .45);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
}


/* ============================================================
   FOTO / ÁREA VISUAL
============================================================ */

.instructor-photo {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(139, 20, 35, .45),
            rgba(10, 12, 18, .98) 70%
        );
}

.instructor-placeholder {
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(197, 157, 72, .65);
}

.instructor-placeholder i {
    font-size: 95px;
}

.instructor-category {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 8px 13px;
    border-radius: 7px;
    color: var(--ouro);
    background: rgba(10, 12, 18, .85);
    border: 1px solid rgba(197, 157, 72, .30);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* ============================================================
   CONTEÚDO DO INSTRUTOR
============================================================ */

.instructor-content {
    padding: 28px;
}

.instructor-role {
    color: var(--ouro);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.instructor-content h3 {
    margin: 10px 0 12px;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 27px;
}

.instructor-content > p {
    color: var(--cinza-texto);
    font-size: 14px;
    line-height: 1.7;
}


/* ============================================================
   HABILIDADES
============================================================ */

.instructor-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.instructor-skills span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 7px;
    background: rgba(255,255,255,.035);
    color: #ddd;
    font-size: 11px;
}

.instructor-skills i {
    color: var(--ouro);
}


/* ============================================================
   METODOLOGIA
============================================================ */

.methodology-section {
    padding: 100px 0;
    background:
        linear-gradient(
            135deg,
            #0b0d12,
            #260b11
        );
}

.methodology-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.methodology-content h2 {
    margin: 20px 0;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(35px, 4vw, 53px);
    line-height: 1.2;
}

.methodology-content h2 span {
    color: var(--ouro);
}

.methodology-content p {
    color: var(--cinza-texto);
    line-height: 1.8;
    margin-bottom: 18px;
}


/* ============================================================
   PASSOS
============================================================ */

.methodology-steps {
    display: grid;
    gap: 16px;
}

.methodology-step {
    display: flex;
    gap: 20px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    transition: var(--transicao);
}

.methodology-step:hover {
    border-color: rgba(197,157,72,.4);
    transform: translateX(5px);
}

.step-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--ouro);
    border: 1px solid rgba(197,157,72,.30);
    background: rgba(197,157,72,.08);
    font-weight: 800;
    font-size: 13px;
}

.methodology-step h3 {
    color: #fff;
    margin-bottom: 7px;
}

.methodology-step p {
    color: var(--cinza-texto);
    font-size: 14px;
    line-height: 1.6;
}


/* ============================================================
   DIFERENCIAIS DOS INSTRUTORES
============================================================ */

.instructor-differentials {
    padding: 100px 0;
    background: #11141b;
}

.instructor-differentials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.instructor-differential-card {
    padding: 35px 25px;
    text-align: center;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
    transition: var(--transicao);
}

.instructor-differential-card:hover {
    transform: translateY(-7px);
    border-color: rgba(197,157,72,.45);
}

.differential-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--ouro);
    background: rgba(197,157,72,.08);
    border: 1px solid rgba(197,157,72,.22);
    font-size: 23px;
}

.instructor-differential-card h3 {
    color: #fff;
    margin-bottom: 12px;
}

.instructor-differential-card p {
    color: var(--cinza-texto);
    font-size: 14px;
    line-height: 1.7;
}


/* ============================================================
   FASE 06 — DIFERENCIAIS
============================================================ */

.differentials-intro {
    padding: 100px 0;
    background: var(--preto);
}

.differentials-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

.differentials-intro-content h2 {
    margin: 20px 0;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 4.5vw, 58px);
    line-height: 1.15;
}

.differentials-intro-content h2 span {
    color: var(--ouro);
}

.differentials-intro-content p {
    max-width: 650px;
    margin-bottom: 18px;
    color: var(--cinza-texto);
    line-height: 1.8;
}

.differentials-intro-number {
    display: flex;
    justify-content: center;
}

.number-card {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(197,157,72,.35);
    background:
        radial-gradient(
            circle,
            rgba(139,20,35,.45),
            rgba(12,14,20,.95) 68%
        );
    box-shadow:
        0 0 80px rgba(139,20,35,.18);
}

.number-card span {
    color: var(--ouro);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.number-card strong {
    margin: 5px 0;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 90px;
    line-height: 1;
}

.number-card p {
    max-width: 140px;
    margin: 0;
    color: var(--cinza-texto);
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
}


/* ============================================================
   DIFERENCIAIS PRINCIPAIS
============================================================ */

.main-differentials {
    padding: 100px 0;
    background: #11141b;
}

.main-differentials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 55px;
}

.main-differential-card {
    position: relative;
    padding: 38px 30px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
    transition: var(--transicao);
}

.main-differential-card:hover {
    transform: translateY(-8px);
    border-color: rgba(197,157,72,.45);
    box-shadow: 0 20px 45px rgba(0,0,0,.28);
}

.main-differential-number {
    position: absolute;
    right: 22px;
    top: 18px;
    color: rgba(197,157,72,.13);
    font-size: 44px;
    font-weight: 800;
}

.main-differential-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 16px;
    color: var(--ouro);
    background: rgba(197,157,72,.08);
    border: 1px solid rgba(197,157,72,.22);
    font-size: 24px;
}

.main-differential-card h3 {
    margin-bottom: 12px;
    color: #fff;
    font-size: 20px;
}

.main-differential-card p {
    color: var(--cinza-texto);
    font-size: 14px;
    line-height: 1.75;
}

.differential-line {
    display: block;
    width: 35px;
    height: 2px;
    margin-top: 25px;
    background: var(--ouro);
}


/* ============================================================
   JORNADA
============================================================ */

.differential-journey {
    padding: 100px 0;
    background: var(--preto);
}

.journey-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 70px;
}

.journey-line::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(197,157,72,.30);
    z-index: 0;
}

.journey-item {
    position: relative;
    z-index: 1;
    text-align: center;
}

.journey-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    color: var(--ouro);
    background: #11141b;
    border: 1px solid rgba(197,157,72,.35);
    font-size: 25px;
}

.journey-item > span {
    color: var(--ouro);
    font-size: 11px;
    font-weight: 800;
}

.journey-item h3 {
    margin: 8px 0;
    color: #fff;
}

.journey-item p {
    max-width: 180px;
    margin: 0 auto;
    color: var(--cinza-texto);
    font-size: 13px;
    line-height: 1.6;
}


/* ============================================================
   COMPROMISSO
============================================================ */

.commitment-section {
    padding: 100px 0;
    background:
        linear-gradient(
            135deg,
            #0b0d12,
            #260b11
        );
}

.commitment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.commitment-content h2 {
    margin: 20px 0;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.2;
}

.commitment-content h2 span {
    color: var(--ouro);
}

.commitment-content p {
    margin-bottom: 18px;
    color: var(--cinza-texto);
    line-height: 1.8;
}

.commitment-list {
    display: grid;
    gap: 15px;
}

.commitment-item {
    display: flex;
    gap: 18px;
    padding: 23px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
    transition: var(--transicao);
}

.commitment-item:hover {
    border-color: rgba(197,157,72,.40);
    transform: translateX(5px);
}

.commitment-item > i {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--ouro);
    background: rgba(197,157,72,.10);
}

.commitment-item h3 {
    margin-bottom: 5px;
    color: #fff;
}

.commitment-item p {
    margin: 0;
    color: var(--cinza-texto);
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   COMPONENTES COMPARTILHADOS — FASES 04+
========================================================= */


/* =========================================================
   CONTAINER RENOVA
========================================================= */

.renova-container {

    width: min(1240px, 92%);

    margin: 0 auto;

}


/* =========================================================
   SECTION TAG
========================================================= */

.section-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border:
        1px solid rgba(197, 157, 72, 0.25);

    border-radius: 30px;

    background:
        rgba(197, 157, 72, 0.08);

    color: var(--ouro);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* =========================================================
   HEADER — RENOVA (FASES 04-06)
========================================================= */

.renova-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(9, 11, 16, 0.94);

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid rgba(197, 157, 72, 0.15);

}


.renova-header .header-content {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

}


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

.renova-logo {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


.renova-logo .logo-icon {

    width: 46px;

    height: 46px;

}


.renova-logo > span:last-child {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}


.renova-logo strong {

    color: var(--branco);

    font-size: 13px;

    letter-spacing: 2px;

}


.renova-logo b {

    color: var(--ouro-claro);

    font-family: "Playfair Display", serif;

    font-size: 20px;

    letter-spacing: 1px;

}


/* =========================================================
   NAVEGAÇÃO RENOVA
========================================================= */

.renova-nav {

    display: flex;

    align-items: center;

    gap: 4px;

    margin-left: auto;

}


.renova-nav > a,
.renova-nav .nav-dropdown > button {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 30px 11px;

    background: transparent;

    border: none;

    color: var(--cinza);

    font-size: 13px;

    cursor: pointer;

    transition: var(--transicao);

    white-space: nowrap;

}


.renova-nav > a:hover,
.renova-nav > a.active,
.renova-nav .nav-dropdown > button:hover {

    color: var(--ouro-claro);

}


/* =========================================================
   BOTÃO HEADER RENOVA
========================================================= */

.btn-header {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 18px;

    background:
        linear-gradient(
            135deg,
            var(--vermelho),
            var(--vermelho-brilho)
        );

    color: var(--branco);

    font-size: 12px;

    font-weight: 700;

    border-radius: 8px;

    transition: var(--transicao);

    white-space: nowrap;

}


.btn-header:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(181, 18, 36, 0.30);

}


/* =========================================================
   MENU MOBILE RENOVA
========================================================= */

.mobile-menu-button {

    display: none;

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    background: transparent;

    color: var(--ouro-claro);

    border:
        1px solid var(--borda);

    border-radius: 7px;

    font-size: 20px;

    cursor: pointer;

}


/* =========================================================
   FOOTER — RENOVA (FASES 04-06)
========================================================= */

.renova-footer {

    background: var(--chumbo);

    border-top:
        1px solid rgba(197, 157, 72, 0.12);

    padding-top: 60px;

}


.renova-footer .footer-grid {

    display: grid;

    grid-template-columns:
        1.6fr 1fr 1fr 1.1fr;

    gap: 40px;

    padding-bottom: 45px;

}


.renova-footer .footer-brand p {

    max-width: 260px;

}


.renova-footer .footer-column p {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 4px;

    color: var(--cinza-texto);

    font-size: 13px;

}


.renova-footer .footer-column p i {

    color: var(--ouro);

    font-size: 13px;

}


/* =========================================================
   HEADER — SITE (PRIMEIRA HABILITAÇÃO)
========================================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(11, 13, 22, 0.96);

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid rgba(197, 157, 72, 0.15);

}


.site-header .header-container {

    position: relative;

}


.site-header .logo img,
.site-footer .logo img {

    width: 44px;

    height: 44px;

}


.site-header .logo span,
.site-footer .logo span {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

    color: var(--cinza);

    font-size: 10px;

    letter-spacing: 2px;

}


.site-header .logo strong,
.site-footer .logo strong {

    color: var(--ouro-claro);

    font-size: 20px;

    letter-spacing: 1px;

}


/* =========================================================
   NAVEGAÇÃO SITE
========================================================= */

.main-nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

}


.main-nav > ul {

    display: flex;

    align-items: center;

    gap: 4px;

}


.main-nav li {

    position: relative;

}


.main-nav a {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 30px 11px;

    color: var(--cinza);

    font-size: 13px;

    transition: var(--transicao);

    white-space: nowrap;

}


.main-nav a:hover {

    color: var(--ouro-claro);

}


.main-nav .has-dropdown > a i {

    font-size: 11px;

}


.main-nav .dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 235px;

    padding: 10px;

    background: var(--chumbo);

    border:
        1px solid var(--borda);

    border-radius: 10px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.45);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: var(--transicao);

}


.main-nav .has-dropdown:hover .dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.main-nav .dropdown a {

    display: block;

    padding: 11px 13px;

    color: var(--cinza);

    border-radius: 6px;

    font-size: 13px;

    transition: var(--transicao);

}


.main-nav .dropdown a:hover {

    background: var(--vermelho);

    color: var(--branco);

}


.main-nav .nav-cta {

    margin-left: 12px;

    padding: 12px 17px;

    background:
        linear-gradient(
            135deg,
            var(--ouro),
            var(--ouro-claro)
        );

    color: #151515;

    font-size: 12px;

    font-weight: 700;

    border-radius: 7px;

    white-space: nowrap;

}


.main-nav .nav-cta:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.25);

}


/* =========================================================
   FOOTER — SITE (PRIMEIRA HABILITAÇÃO)
========================================================= */

.site-footer {

    background: var(--chumbo);

    border-top:
        1px solid rgba(197, 157, 72, 0.12);

}


/* =========================================================
   PÁGINA — PRIMEIRA HABILITAÇÃO
========================================================= */

.section-kicker {

    display: inline-block;

    color: var(--ouro-claro);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.inner-page-banner .section-kicker {

    position: relative;

    z-index: 2;

}


/* =========================================================
   FASE 07 — PRIMEIRA HABILITAÇÃO
========================================================= */


/* =========================================================
   INTRODUÇÃO
========================================================= */

.first-license-intro {

    padding: 100px 0;

    background: var(--preto);

}


.first-license-intro-grid {

    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    gap: 70px;

    align-items: center;

}


.first-license-intro-content h2 {

    max-width: 720px;

    margin: 15px 0 25px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    line-height: 1.1;

}


.first-license-intro-content p {

    max-width: 720px;

    margin-bottom: 18px;

    color: var(--cinza-texto);

    line-height: 1.8;

}


.first-license-highlight {

    position: relative;

    padding: 50px 35px;

    text-align: center;

    border:
        1px solid rgba(212, 175, 55, 0.45);

    border-radius: 20px;

    background:

        linear-gradient(
            145deg,
            rgba(115, 17, 28, 0.25),
            rgba(8, 14, 30, 0.95)
        );

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3);

    overflow: hidden;

}


.first-license-highlight::before {

    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid rgba(255, 255, 255, 0.04);

    border-radius: inherit;

    pointer-events: none;

}


.license-highlight-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(212, 175, 55, 0.12);

    color: var(--ouro);

    font-size: 2rem;

}


.first-license-highlight span {

    display: block;

    margin-bottom: 10px;

    color: var(--ouro);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 2px;

}


.first-license-highlight strong {

    display: block;

    margin-bottom: 15px;

    color: #fff;

    font-size: 3rem;

    letter-spacing: 8px;

}


.first-license-highlight p {

    margin: 0;

    color: var(--cinza-texto);

    line-height: 1.6;

}


/* =========================================================
   CATEGORIAS
========================================================= */

.license-categories {

    padding: 100px 0;

    background: var(--chumbo);

}


.license-categories .section-heading,
.license-steps .section-heading,
.license-renova .section-heading,
.license-faq .section-heading {

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;

}


.license-categories .section-heading h2,
.license-steps .section-heading h2,
.license-renova .section-heading h2,
.license-faq .section-heading h2 {

    margin: 12px 0 18px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1.15;

}


.license-categories .section-heading p,
.license-steps .section-heading p,
.license-renova .section-heading p,
.license-faq .section-heading p {

    color: var(--cinza-texto);

    line-height: 1.7;

}


.license-category-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

}


.license-category-card {

    position: relative;

    padding: 40px 30px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);

    transition: var(--transicao);

    overflow: hidden;

}


.license-category-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(212, 175, 55, 0.55);

}


.license-category-card.featured {

    border-color:
        rgba(212, 175, 55, 0.55);

    background:

        linear-gradient(
            145deg,
            rgba(115, 17, 28, 0.18),
            rgba(255, 255, 255, 0.025)
        );

}


.license-category-icon {

    width: 65px;

    height: 65px;

    margin-bottom: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        rgba(115, 17, 28, 0.28);

    color: var(--ouro);

    font-size: 1.5rem;

}


.license-letter {

    display: block;

    margin-bottom: 8px;

    color: var(--ouro);

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 2px;

}


.license-category-card h3 {

    margin-bottom: 15px;

    color: #fff;

    font-size: 1.45rem;

}


.license-category-card p {

    margin-bottom: 25px;

    color: var(--cinza-texto);

    line-height: 1.7;

}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--ouro);

    font-weight: 700;

    text-decoration: none;

}


.text-link:hover {

    gap: 13px;

}


/* =========================================================
   ETAPAS
========================================================= */

.license-steps {

    padding: 100px 0;

    background: var(--preto);

}


.license-steps-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.license-step {

    position: relative;

    min-height: 280px;

    padding: 32px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);

    transition: var(--transicao);

}


.license-step:hover {

    border-color:
        rgba(212, 175, 55, 0.4);

    transform: translateY(-5px);

}


.license-step .step-number {

    position: absolute;

    top: 20px;

    right: 25px;

    color:
        rgba(212, 175, 55, 0.25);

    font-size: 2rem;

    font-weight: 800;

}


.step-icon {

    width: 60px;

    height: 60px;

    margin-bottom: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        rgba(115, 17, 28, 0.25);

    color: var(--ouro);

    font-size: 1.35rem;

}


.license-step h3 {

    margin-bottom: 12px;

    color: #fff;

    font-size: 1.25rem;

}


.license-step p {

    color: var(--cinza-texto);

    line-height: 1.7;

}


/* =========================================================
   TEORIA E PRÁTICA
========================================================= */

.license-learning {

    padding: 100px 0;

    background: var(--chumbo);

}


.license-learning-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;

}


.learning-card {

    padding: 45px;

    border:
        1px solid rgba(212, 175, 55, 0.25);

    border-radius: 20px;

    background:

        linear-gradient(
            145deg,
            rgba(115, 17, 28, 0.16),
            rgba(255, 255, 255, 0.025)
        );

}


.learning-card-dark {

    background:

        linear-gradient(
            145deg,
            rgba(9, 21, 43, 0.65),
            rgba(255, 255, 255, 0.025)
        );

}


.learning-icon {

    width: 65px;

    height: 65px;

    margin-bottom: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        rgba(212, 175, 55, 0.1);

    color: var(--ouro);

    font-size: 1.5rem;

}


.learning-card > span {

    color: var(--ouro);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 2px;

}


.learning-card h2 {

    margin: 12px 0 18px;

    font-family: "Playfair Display", serif;

    font-size: 2rem;

    line-height: 1.2;

    color: var(--branco);

}


.learning-card p {

    margin-bottom: 25px;

    color: var(--cinza-texto);

    line-height: 1.7;

}


.learning-card ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.learning-card li {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 13px;

    color: #fff;

}


.learning-card li i {

    color: var(--ouro);

}


/* =========================================================
   DIFERENCIAIS RENOVA
========================================================= */

.license-renova {

    padding: 100px 0;

    background: var(--preto);

}


.license-renova-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}


.renova-feature {

    padding: 35px 25px;

    text-align: center;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);

}


.renova-feature i {

    margin-bottom: 20px;

    color: var(--ouro);

    font-size: 2rem;

}


.renova-feature h3 {

    margin-bottom: 12px;

    color: #fff;

}


.renova-feature p {

    color: var(--cinza-texto);

    line-height: 1.6;

}


/* =========================================================
   FAQ
========================================================= */

.license-faq {

    padding: 100px 0;

    background: var(--chumbo);

}


.faq-list {

    max-width: 900px;

    margin: 0 auto;

}


.faq-item {

    margin-bottom: 14px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.025);

    overflow: hidden;

}


.faq-item summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 22px 25px;

    cursor: pointer;

    color: #fff;

    font-weight: 700;

    list-style: none;

}


.faq-item summary::-webkit-details-marker {

    display: none;

}


.faq-item summary i {

    color: var(--ouro);

    transition: transform 0.3s ease;

}


.faq-item[open] summary i {

    transform: rotate(45deg);

}


.faq-answer {

    padding: 0 25px 25px;

}


.faq-answer p {

    margin: 0;

    color: var(--cinza-texto);

    line-height: 1.7;

}


/* =========================================================
   CTA FINAL
========================================================= */

.license-final-cta {

    padding: 110px 0;

    background:

        linear-gradient(
            135deg,
            rgba(115, 17, 28, 0.65),
            rgba(8, 14, 30, 0.95)
        );

}


.license-final-content {

    max-width: 800px;

    margin: auto;

    text-align: center;

}


.license-final-content h2 {

    margin: 15px 0 20px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2.2rem, 5vw, 4rem);

    line-height: 1.1;

    color: var(--branco);

}


.license-final-content p {

    max-width: 650px;

    margin: 0 auto 30px;

    color: #ddd;

    line-height: 1.7;

}


.license-final-content .btn-primary {

    background: var(--ouro);

    color: #111;

}


/* =========================================================
   FASE 08 — CATEGORIAS A, B E AB
========================================================= */


/* =========================================================
   BANNER
========================================================= */

.categories-banner {

    background:

        radial-gradient(
            circle at 82% 30%,
            rgba(181, 18, 36, 0.30),
            transparent 42%
        ),

        linear-gradient(
            135deg,
            rgba(10, 12, 18, 0.98),
            rgba(45, 8, 14, 0.95)
        );

}


/* =========================================================
   INTRODUÇÃO
========================================================= */

.categories-intro {

    padding: 100px 0;

    background: var(--preto);

}


.categories-intro-grid {

    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    gap: 70px;

    align-items: center;

}


.categories-intro-content h2 {

    margin: 15px 0 25px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    line-height: 1.1;

}


.categories-intro-content p {

    margin-bottom: 18px;

    color: var(--cinza-texto);

    line-height: 1.8;

}


.categories-intro-content .btn-primary {

    margin-top: 12px;

    gap: 10px;

}


.category-choice-card {

    position: relative;

    padding: 55px 40px;

    text-align: center;

    border:
        1px solid rgba(212, 175, 55, 0.45);

    border-radius: 20px;

    background:

        linear-gradient(
            145deg,
            rgba(115, 17, 28, 0.25),
            rgba(8, 14, 30, 0.95)
        );

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.30);

    overflow: hidden;

}


.category-choice-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid rgba(255, 255, 255, 0.04);

    border-radius: inherit;

    pointer-events: none;

}


.category-choice-icon {

    width: 85px;

    height: 85px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(212, 175, 55, 0.12);

    color: var(--ouro);

    font-size: 2rem;

}


.category-choice-card > span {

    display: block;

    margin-bottom: 10px;

    color: var(--ouro);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 2px;

}


.category-choice-card > strong {

    display: block;

    margin-bottom: 15px;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 2.6rem;

    letter-spacing: 8px;

}


.category-choice-card > p {

    margin: 0;

    color: var(--cinza-texto);

    line-height: 1.7;

}


/* =========================================================
   CATEGORIAS — DETALHE
========================================================= */

.category-detail {

    padding: 100px 0;

    background: var(--preto);

}


.category-b {

    background: var(--chumbo);

}

.category-a {

    background: var(--azul-marinho);

}

.category-ab {

    background: linear-gradient(135deg, var(--chumbo) 0%, var(--azul-marinho) 100%);

}


.category-detail-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 50px;

    align-items: center;

}


.category-detail-content h2 {

    margin: 15px 0 20px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2rem, 3.5vw, 3.2rem);

    line-height: 1.15;

}


.category-detail-content > p {

    margin-bottom: 20px;

    color: var(--cinza-texto);

    line-height: 1.8;

}


.category-detail-content h3 {

    margin-bottom: 18px;

    color: #fff;

    font-size: 1.05rem;

}


.category-check-list {

    list-style: none;

    margin: 0 0 30px;

    padding: 0;

    display: grid;

    gap: 14px;

}


.category-check-list li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: #ddd;

    font-size: 0.95rem;

    line-height: 1.6;

}


.category-check-list li i {

    margin-top: 5px;

    color: var(--ouro);

}


/* =========================================================
   VISUAL DA CATEGORIA
========================================================= */

.category-visual {

    position: relative;

    min-height: 440px;

    padding: 50px 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 30px;

    border:
        1px solid rgba(212, 175, 55, 0.30);

    border-radius: 20px;

    background:

        radial-gradient(
            circle at center,
            rgba(139, 17, 30, 0.35),
            rgba(12, 14, 20, 0.97) 70%
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);

    overflow: hidden;

}


.category-visual-blue {

    border-color:
        rgba(11, 37, 69, 0.60);

    background:

        radial-gradient(
            circle at center,
            rgba(11, 37, 69, 0.75),
            rgba(12, 14, 20, 0.97) 70%
        );

}


.category-visual-ab {

    border-color:
        rgba(212, 175, 55, 0.40);

    background:

        radial-gradient(
            circle at 28% 50%,
            rgba(139, 17, 30, 0.42),
            transparent 45%
        ),

        radial-gradient(
            circle at 72% 50%,
            rgba(11, 37, 69, 0.70),
            transparent 45%
        ),

        rgba(12, 14, 20, 0.97);

}


.category-large-icon {

    position: relative;

    z-index: 2;

    width: 110px;

    height: 110px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(139, 17, 30, 0.35);

    border:
        1px solid rgba(212, 175, 55, 0.35);

    color: var(--ouro);

    font-size: 3rem;

}


.category-big-letter {

    position: absolute;

    right: -10px;

    bottom: -45px;

    font-family: "Playfair Display", serif;

    font-size: 13rem;

    line-height: 1;

    color:
        rgba(212, 175, 55, 0.10);

    pointer-events: none;

    user-select: none;

}


.category-visual-label {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    border-radius: 30px;

    border:
        1px solid rgba(212, 175, 55, 0.30);

    background:
        rgba(9, 11, 16, 0.70);

    color: var(--ouro);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 2px;

}


.ab-icons {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 16px;

}


.ab-icons i {

    width: 78px;

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(139, 17, 30, 0.35);

    border:
        1px solid rgba(212, 175, 55, 0.35);

    color: var(--ouro);

    font-size: 2rem;

}


.ab-icons span {

    color: var(--ouro);

    font-size: 1.6rem;

    font-weight: 700;

}


/* =========================================================
   COMPARATIVO
========================================================= */

.category-comparison {

    padding: 100px 0;

    background: var(--chumbo);

}


.category-comparison .section-heading,
.category-choice .section-heading,
.categories-faq .section-heading {

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;

}


.category-comparison .section-heading h2,
.category-choice .section-heading h2,
.categories-faq .section-heading h2 {

    margin: 12px 0 18px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1.15;

}


.category-comparison .section-heading p,
.category-choice .section-heading p,
.categories-faq .section-heading p {

    color: var(--cinza-texto);

    line-height: 1.7;

}


.comparison-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.comparison-card {

    display: flex;

    flex-direction: column;

    padding: 35px 30px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);

    transition: var(--transicao);

}


.comparison-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(212, 175, 55, 0.55);

}


.comparison-card.comparison-featured {

    border-color:
        rgba(212, 175, 55, 0.55);

    background:

        linear-gradient(
            145deg,
            rgba(115, 17, 28, 0.18),
            rgba(255, 255, 255, 0.025)
        );

}


.comparison-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


.comparison-card-top > span {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        rgba(139, 17, 30, 0.30);

    color: var(--ouro);

    font-family: "Playfair Display", serif;

    font-size: 1.4rem;

    font-weight: 700;

}


.comparison-card-top > i {

    color: var(--ouro);

    font-size: 1.8rem;

    opacity: 0.85;

}


.comparison-card-top > div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--ouro);

    font-size: 1.4rem;

}


.comparison-card-top > div i {

    color: var(--ouro);

}


.comparison-card h3 {

    margin-bottom: 12px;

    color: #fff;

    font-size: 1.35rem;

}


.comparison-card p {

    margin-bottom: 25px;

    color: var(--cinza-texto);

    font-size: 0.92rem;

    line-height: 1.7;

}


.comparison-card > a {

    margin-top: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    color: var(--ouro);

    font-size: 0.82rem;

    font-weight: 700;

}


/* =========================================================
   COMO ESCOLHER
========================================================= */

.category-choice {

    padding: 100px 0;

    background: var(--preto);

}


.choice-steps {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.choice-step {

    position: relative;

    display: flex;

    gap: 20px;

    padding: 30px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.025);

    transition: var(--transicao);

    overflow: hidden;

}


.choice-step:hover {

    transform: translateY(-5px);

    border-color:
        rgba(212, 175, 55, 0.40);

}


.choice-step > span {

    flex-shrink: 0;

    font-family: "Playfair Display", serif;

    font-size: 2.2rem;

    font-weight: 700;

    line-height: 1;

    color:
        rgba(212, 175, 55, 0.35);

}


.choice-step > div > i {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    background:
        rgba(115, 17, 28, 0.25);

    color: var(--ouro);

    font-size: 1.3rem;

    font-style: normal;

}


.choice-step h3 {

    margin-bottom: 10px;

    color: #fff;

    font-size: 1.15rem;

}


.choice-step p {

    margin: 0;

    color: var(--cinza-texto);

    font-size: 0.9rem;

    line-height: 1.7;

}


/* =========================================================
   FAQ
========================================================= */

.categories-faq {

    padding: 100px 0;

    background: var(--chumbo);

}


/* =========================================================
   CTA FINAL
========================================================= */

.categories-final-cta {

    padding: 110px 0;

    background:

        linear-gradient(
            135deg,
            rgba(115, 17, 28, 0.65),
            rgba(8, 14, 30, 0.95)
        );

}


.categories-final-content {

    max-width: 800px;

    margin: auto;

    text-align: center;

}


.categories-final-content h2 {

    margin: 15px 0 20px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2.2rem, 5vw, 4rem);

    line-height: 1.1;

    color: var(--branco);

}


.categories-final-content p {

    max-width: 650px;

    margin: 0 auto 30px;

    color: #ddd;

    line-height: 1.7;

}


.categories-final-content .btn-primary {

    background: var(--ouro);

    color: #111;

    gap: 10px;

}


.categories-final-content .btn-primary:hover {

    background: var(--ouro-claro);

    color: #111;

}


/* =========================================================
   FASE 09 — ADIÇÃO DE CATEGORIA
========================================================= */


/* =========================================================
   BANNER
========================================================= */

.addition-banner {

    background:

        radial-gradient(
            circle at 78% 35%,
            rgba(181, 18, 36, 0.28),
            transparent 45%
        ),

        linear-gradient(
            135deg,
            rgba(10, 12, 18, 0.98),
            rgba(45, 8, 14, 0.95)
        );

}


/* =========================================================
   INTRODUÇÃO
========================================================= */

.addition-intro {

    padding: 100px 0;

    background: var(--preto);

}


.addition-intro-grid {

    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    gap: 70px;

    align-items: center;

}


.addition-intro-content h2 {

    margin: 20px 0 25px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    line-height: 1.1;

}


.addition-intro-content p {

    margin-bottom: 18px;

    color: var(--cinza-texto);

    line-height: 1.8;

}


.addition-intro-content .btn-primary {

    margin-top: 12px;

    gap: 10px;

}


.addition-highlight {

    position: relative;

    padding: 55px 40px;

    text-align: center;

    border:
        1px solid rgba(212, 175, 55, 0.45);

    border-radius: 20px;

    background:

        linear-gradient(
            145deg,
            rgba(115, 17, 28, 0.25),
            rgba(8, 14, 30, 0.95)
        );

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.30);

    overflow: hidden;

}


.addition-highlight::before {

    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid rgba(255, 255, 255, 0.04);

    border-radius: inherit;

    pointer-events: none;

}


.addition-highlight-icon {

    width: 85px;

    height: 85px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(212, 175, 55, 0.12);

    color: var(--ouro);

    font-size: 2rem;

}


.addition-highlight > span {

    display: block;

    margin-bottom: 10px;

    color: var(--ouro);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 2px;

}


.addition-highlight > strong {

    display: block;

    margin-bottom: 15px;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 2.6rem;

    letter-spacing: 6px;

}


.addition-highlight > p {

    margin: 0;

    color: var(--cinza-texto);

    line-height: 1.7;

}


.addition-about .section-heading,
.addition-options .section-heading,
.addition-steps .section-heading,
.addition-difference .section-heading,
.addition-renova .section-heading,
.addition-faq .section-heading {

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;

}


.addition-about .section-heading h2,
.addition-options .section-heading h2,
.addition-steps .section-heading h2,
.addition-difference .section-heading h2,
.addition-renova .section-heading h2,
.addition-faq .section-heading h2 {

    margin: 12px 0 18px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1.15;

}


.addition-about .section-heading p,
.addition-options .section-heading p,
.addition-steps .section-heading p,
.addition-difference .section-heading p,
.addition-renova .section-heading p,
.addition-faq .section-heading p {

    color: var(--cinza-texto);

    line-height: 1.7;

}


/* =========================================================
   O QUE É
========================================================= */

.addition-about {

    padding: 100px 0;

    background: var(--chumbo);

}


.addition-about-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.addition-info-card {

    padding: 35px 30px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);

    transition: var(--transicao);

}


.addition-info-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(212, 175, 55, 0.45);

}


.addition-info-icon {

    width: 62px;

    height: 62px;

    margin-bottom: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        rgba(139, 17, 30, 0.28);

    color: var(--ouro);

    font-size: 1.45rem;

}


.addition-info-card h3 {

    margin-bottom: 14px;

    color: #fff;

    font-size: 1.25rem;

}


.addition-info-card p {

    margin: 0;

    color: var(--cinza-texto);

    font-size: 0.95rem;

    line-height: 1.7;

}


/* =========================================================
   POSSIBILIDADES
========================================================= */

.addition-options {

    padding: 100px 0;

    background: var(--preto);

}


.addition-options-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.addition-option-card {

    display: flex;

    flex-direction: column;

    padding: 35px 30px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);

    transition: var(--transicao);

}


.addition-option-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(212, 175, 55, 0.55);

}


.addition-option-card.featured {

    border-color:
        rgba(212, 175, 55, 0.55);

    background:

        linear-gradient(
            145deg,
            rgba(115, 17, 28, 0.18),
            rgba(255, 255, 255, 0.025)
        );

}


.addition-option-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


.addition-option-top > span {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        rgba(139, 17, 30, 0.30);

    color: var(--ouro);

    font-family: "Playfair Display", serif;

    font-size: 1.3rem;

    font-weight: 700;

}


.addition-option-top > i {

    color: var(--ouro);

    font-size: 1.8rem;

    opacity: 0.85;

}


.addition-option-card h3 {

    margin-bottom: 14px;

    color: #fff;

    font-size: 1.35rem;

}


.addition-option-card > p {

    margin-bottom: 22px;

    color: var(--cinza-texto);

    font-size: 0.92rem;

    line-height: 1.7;

}


.addition-option-card ul {

    list-style: none;

    margin: 0 0 25px;

    padding: 0;

    display: grid;

    gap: 12px;

}


.addition-option-card li {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #ddd;

    font-size: 0.9rem;

}


.addition-option-card li i {

    color: var(--ouro);

}


.addition-option-card > a {

    margin-top: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    color: var(--ouro);

    font-size: 0.82rem;

    font-weight: 700;

}


/* =========================================================
   ETAPAS
========================================================= */

.addition-steps {

    padding: 100px 0;

    background: var(--chumbo);

}


.addition-steps-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.addition-step {

    position: relative;

    display: flex;

    gap: 20px;

    padding: 30px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.025);

    transition: var(--transicao);

    overflow: hidden;

}


.addition-step:hover {

    transform: translateY(-6px);

    border-color:
        rgba(212, 175, 55, 0.45);

}


.addition-step > span {

    flex-shrink: 0;

    font-family: "Playfair Display", serif;

    font-size: 2.1rem;

    font-weight: 700;

    line-height: 1;

    color:
        rgba(212, 175, 55, 0.35);

}


.addition-step > div > i {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    background:
        rgba(115, 17, 28, 0.25);

    color: var(--ouro);

    font-size: 1.3rem;

    font-style: normal;

}


.addition-step h3 {

    margin-bottom: 10px;

    color: #fff;

    font-size: 1.15rem;

}


.addition-step p {

    margin: 0;

    color: var(--cinza-texto);

    font-size: 0.9rem;

    line-height: 1.7;

}


/* =========================================================
   DIFERENÇA
========================================================= */

.addition-difference {

    padding: 100px 0;

    background: var(--preto);

}


.difference-grid {

    display: grid;

    grid-template-columns:
        1fr 70px 1fr;

    gap: 25px;

    align-items: center;

}


.difference-card {

    padding: 38px 32px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    transition: var(--transicao);

}


.difference-card:hover {

    transform: translateY(-6px);

}


.addition-card {

    background:

        linear-gradient(
            145deg,
            rgba(115, 17, 28, 0.18),
            rgba(255, 255, 255, 0.025)
        );

}


.addition-card:hover {

    border-color:
        rgba(212, 175, 55, 0.55);

}


.change-card {

    background:

        linear-gradient(
            145deg,
            rgba(11, 37, 69, 0.55),
            rgba(255, 255, 255, 0.025)
        );

}


.change-card:hover {

    border-color:
        rgba(11, 37, 69, 0.80);

}


.difference-icon {

    width: 60px;

    height: 60px;

    margin-bottom: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: var(--ouro);

    font-size: 1.4rem;

}


.addition-card .difference-icon {

    background:
        rgba(139, 17, 30, 0.30);

}


.change-card .difference-icon {

    background:
        rgba(11, 37, 69, 0.50);

}


.difference-card > span {

    display: block;

    margin-bottom: 8px;

    color: var(--ouro);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 2px;

}


.difference-card h3 {

    margin-bottom: 14px;

    color: #fff;

    font-size: 1.35rem;

}


.difference-card p {

    margin-bottom: 20px;

    color: var(--cinza-texto);

    font-size: 0.95rem;

    line-height: 1.7;

}


.difference-example {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 15px 18px;

    border:
        1px solid rgba(212, 175, 55, 0.25);

    border-radius: 12px;

    background:
        rgba(9, 11, 16, 0.60);

}


.difference-example strong {

    color: var(--cinza);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.difference-example span {

    color: var(--ouro-claro);

    font-family: "Playfair Display", serif;

    font-size: 1.35rem;

    font-weight: 700;

    letter-spacing: 4px;

}


.difference-divider {

    display: flex;

    align-items: center;

    justify-content: center;

}


.difference-divider span {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        linear-gradient(
            135deg,
            var(--vermelho),
            var(--vermelho-brilho)
        );

    border:
        1px solid rgba(212, 175, 55, 0.45);

    color: var(--ouro-claro);

    font-size: 1.15rem;

    font-weight: 800;

}


/* =========================================================
   ACOMPANHAMENTO RENOVA
========================================================= */

.addition-renova {

    padding: 100px 0;

    background:

        linear-gradient(
            135deg,
            #0b0d12,
            #260b11
        );

}


.addition-renova-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}


.addition-renova-grid .renova-feature {

    background:
        rgba(255, 255, 255, 0.03);

}


/* =========================================================
   FAQ
========================================================= */

.addition-faq {

    padding: 100px 0;

    background: var(--chumbo);

}


/* =========================================================
   CTA FINAL
========================================================= */

.addition-final-cta {

    padding: 110px 0;

    background:

        linear-gradient(
            135deg,
            rgba(115, 17, 28, 0.65),
            rgba(8, 14, 30, 0.95)
        );

}


.addition-final-content {

    max-width: 800px;

    margin: auto;

    text-align: center;

}


.addition-final-content h2 {

    margin: 15px 0 20px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2.2rem, 5vw, 4rem);

    line-height: 1.1;

    color: var(--branco);

}


.addition-final-content p {

    max-width: 650px;

    margin: 0 auto 30px;

    color: #ddd;

    line-height: 1.7;

}


.addition-final-content .btn-primary {

    background: var(--ouro);

    color: #111;

    gap: 10px;

}


.addition-final-content .btn-primary:hover {

    background: var(--ouro-claro);

    color: #111;

}