/* ============================================================
   SYMETRIA — TEMA ESCURO PREMIUM
   Fonte única de cores do site (manual da marca):
   grafite + azul-noite de fundo, tijolo #9E1A16 como destaque.
   Carregar SEMPRE por último, depois dos demais CSS.
   ============================================================ */

:root {
    /* ---- Paleta oficial (GUIA_RAPIDO_MARCA.md) ---- */
    --sy-fundo: #151314;            /* grafite / quase-preto — fundo base */
    --sy-fundo-prof: #0f0d0e;       /* grafite mais profundo — footer */
    --sy-noite: #061B25;            /* azul-noite profundo — seções de ritmo */
    --sy-aco: #34415D;              /* azul aço — apoio */
    --sy-tijolo: #9E1A16;           /* Vermelho Symetria — botões/faixas/fundos de destaque */
    --sy-acento: #E44B26;           /* vermelho vivo — texto de destaque sobre escuro (AA) */
    --sy-bronze: #c08d5f;           /* bronze terroso — numerações e detalhes delicados */
    --sy-areia: #d8c5b0;            /* areia — véus translúcidos e bordas quentes */

    /* ---- Superfícies e texto ---- */
    --sy-painel: #0e2836;           /* painel elevado sobre azul-noite */
    --sy-painel-grafite: #201d1e;   /* painel elevado sobre grafite */
    --sy-texto: #e8edf2;            /* corpo sobre escuro (AA) */
    --sy-texto-2: #b9c1c9;          /* secundário */
    --sy-texto-3: #98a1a9;          /* apoio/legendas */
    --sy-borda: rgba(232, 237, 242, 0.14);
    --sy-borda-suave: rgba(232, 237, 242, 0.08);

    /* ---- Realinha as variáveis herdadas do template ---- */
    --primary-color: #E44B26;
    --secondary-color: #9E1A16;     /* corrige o #9E1916 (typo) do template */
    --custom-btn-bg-color: #9E1A16;
    --custom-btn-bg-hover-color: #9E1A16;
    --link-hover-color: #E44B26;
    --section-bg-color: #061B25;
    --p-color: #b9c1c9;

    color-scheme: dark;             /* scrollbar e controles nativos escuros */
}

/* ---------- Fontes da marca (Orkney) ----------
   Duplicadas de symetria-index.css de propósito: este arquivo
   entra em TODAS as páginas; o navegador deduplica pela URL. */
@font-face {
    font-family: 'Orkney';
    src: url('../fonts/orkney/Orkney-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Orkney';
    src: url('../fonts/orkney/Orkney-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Orkney';
    src: url('../fonts/orkney/Orkney-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Orkney';
    src: url('../fonts/orkney/Orkney-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   BASE GLOBAL (vale para todas as páginas)
   ============================================================ */
body {
    background-color: var(--sy-fundo);
    color: var(--sy-texto);
    font-family: 'Orkney', 'Poppins', sans-serif;
}
::selection {
    background: var(--sy-tijolo);
    color: #fff;
}
a {
    color: var(--sy-acento);
}
a:hover {
    color: var(--sy-texto);
}
.titulo-principal {
    color: var(--sy-texto);
}
.sub-titulo-principal {
    color: var(--sy-texto-2);
}

/* ---------- Navbar ---------- */
.sticky-wrapper.is-sticky .navbar {
    background-color: rgba(15, 13, 14, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sy-borda-suave);
}
.navbar-nav .nav-link:hover {
    color: var(--sy-acento);
}
.navbar-nav .nav-link.active {
    color: var(--sy-acento);
}
@media screen and (max-width: 991px) {
    .navbar {
        background-color: var(--sy-fundo);
    }
}

/* ---------- Footer ---------- */
.footer {
    background-color: var(--sy-fundo-prof);
    border-top: 1px solid var(--sy-borda-suave);
}
.footer .social-icons a {
    border-color: rgba(232, 237, 242, 0.35);
}
.footer .social-icons a:hover {
    background-color: var(--sy-tijolo);
    border-color: var(--sy-tijolo);
    color: #fff;
}
.footer .copyright {
    color: var(--sy-texto-3);
}

/* ============================================================
   INDEX — HERO
   ============================================================ */
.hero-section {
    background-color: var(--sy-fundo); /* enquanto o vídeo carrega */
}
/* funde o fim do vídeo com o fundo grafite da página */
.hero-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(21, 19, 20, 0) 0%, #151314 100%);
    z-index: 2;
    pointer-events: none;
}

/* ============================================================
   INDEX — QUEM É A SYMETRIA
   ============================================================ */
.about-section {
    background-color: var(--sy-fundo);
}
.about-section p {
    color: var(--sy-texto);
}
.about-section .cta-grosso {
    color: #fff;
}
.about-section h6 {
    color: var(--sy-texto-2);
}
.about-section .custom-btn {
    border: 1px solid var(--sy-texto-2);
    color: var(--sy-texto);
}
.about-section .custom-btn:hover {
    background: var(--sy-tijolo);
    border-color: var(--sy-tijolo);
    color: #fff;
}
/* bloco editorial centrado (o GIF saiu a pedido de Keiny) */
.about-section .services-info .cta-fino {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.about-section .services-info h6 {
    max-width: 740px;
    margin: 0 auto 1.6rem;
}

/* ============================================================
   INDEX — PORTFÓLIO (só o entorno; o mosaico aprovado não muda)
   ============================================================ */
/* "PORTFÓLIO" sozinho como título da seção (Keiny removeu o
   "Projetos Realizados" e o subtítulo) — marcador maior */
.portfolio-eyebrow {
    color: var(--sy-acento); /* #9E1A16 não passa AA sobre grafite */
    font-size: 15px;
    letter-spacing: 6px;
    margin-bottom: 24px;
}
.portfolio-filtros button {
    color: var(--sy-texto-2);
    border-color: var(--sy-borda);
}
.portfolio-filtros button:hover {
    border-color: var(--sy-acento);
    color: var(--sy-acento);
}
.portfolio-filtros button.ativo {
    background: var(--sy-tijolo);
    border-color: var(--sy-tijolo);
    color: #fff;
}

/* ============================================================
   INDEX — NOSSOS DIFERENCIAIS
   Cartões terrosos translúcidos sobre grafite quente: véu de
   areia/bronze em gradiente sutil, filete tijolo, numeração
   01–06 em bronze e texto editorial alinhado à esquerda.
   ============================================================ */
.diferenciais {
    background:
        radial-gradient(1100px 520px at 82% -8%, rgba(158, 26, 22, 0.07), transparent 62%),
        radial-gradient(900px 420px at 8% 108%, rgba(192, 141, 95, 0.05), transparent 60%),
        linear-gradient(180deg, #171414 0%, #121011 100%);
}
.diferenciais .titulo-principal {
    margin-bottom: 2.4rem;
}
/* mesma pele terrosa para os dois tipos de card do template */
.diferenciais .bg-bordo,
.diferenciais .bg-white {
    position: relative;
    height: 100%;
    text-align: left !important;
    background: linear-gradient(160deg,
        rgba(216, 197, 178, 0.075) 0%,
        rgba(216, 197, 178, 0.028) 46%,
        rgba(158, 26, 22, 0.055) 100%) !important;
    border: 1px solid rgba(216, 197, 178, 0.13);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.35s ease, transform 0.35s ease;
}
/* variação quase imperceptível: gradiente espelhado nos pares */
.diferenciais .col-md-4:nth-child(even) .bg-bordo,
.diferenciais .col-md-4:nth-child(even) .bg-white {
    background: linear-gradient(200deg,
        rgba(216, 197, 178, 0.075) 0%,
        rgba(216, 197, 178, 0.028) 46%,
        rgba(158, 26, 22, 0.055) 100%) !important;
}
/* filete de marca no topo */
.diferenciais .bg-bordo::before,
.diferenciais .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 46%;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(158, 26, 22, 0.85),
        rgba(228, 75, 38, 0.35) 55%,
        transparent);
}
.diferenciais .bg-bordo:hover,
.diferenciais .bg-white:hover {
    border-color: rgba(216, 197, 178, 0.30);
    transform: translateY(-4px);
}
.diferenciais .card-body,
.diferenciais .card-body-2 {
    height: auto;
    max-height: none;
    padding: 30px 30px 28px;
}
/* numeração 01–06 em bronze */
.diferenciais .row {
    counter-reset: dif;
}
.diferenciais .col-md-4 {
    counter-increment: dif;
}
.diferenciais .card-title::before {
    content: counter(dif, decimal-leading-zero);
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 3.5px;
    color: var(--sy-bronze);
    margin-bottom: 14px;
}
.diferenciais .card-title {
    font-family: 'Orkney', 'Poppins', sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.35;
    color: #ece6de;
    margin-bottom: 0;
}
.diferenciais .card-title::after {
    content: '';
    display: block;
    width: 34px;
    height: 1px;
    margin-top: 13px;
    background: linear-gradient(90deg, rgba(192, 141, 95, 0.65), transparent);
}
.diferenciais .card-text {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.2px;
    color: #c9bfb5;
    margin-top: 13px;
}

/* ============================================================
   INDEX — DEPOIMENTOS (widget Elfsight / avaliações Google)
   O widget injeta texto quase-preto; as classes `es-*` são a
   API estável de customização da Elfsight. !important é
   necessário para vencer os estilos injetados por script.
   ============================================================ */
.es-review-author-name,
.es-review-author-name a {
    color: var(--sy-texto) !important;
}
.es-review-content,
.es-review-content-text-container,
.es-text-shortener {
    color: var(--sy-texto-2) !important;
}
.es-review-info-date,
.es-review-info-date-container,
.es-review-info-info-block,
.es-review-source-source-bottom-container {
    color: var(--sy-texto-3) !important;
}
.es-text-shortener-control {
    color: var(--sy-acento) !important;
}
.es-bullets-control-item {
    background: rgba(232, 237, 242, 0.25) !important;
}
.es-bullets-control-item.es-bullets-control-item-active {
    background: var(--sy-acento) !important;
}
.es-carousel-arrow-control {
    background: rgba(232, 237, 242, 0.12) !important;
}

/* ============================================================
   INDEX — FAIXA CTA (terrosa, alinhada aos Diferenciais)
   ============================================================ */
.site-footer-top-diferenciais {
    background:
        radial-gradient(900px 400px at 12% -30%, rgba(158, 26, 22, 0.20), transparent 62%),
        radial-gradient(700px 320px at 92% 130%, rgba(192, 141, 95, 0.10), transparent 60%),
        linear-gradient(180deg, #221513 0%, #1a100e 100%);
    border-top: 1px solid rgba(216, 197, 178, 0.10);
    border-bottom: 1px solid rgba(216, 197, 178, 0.10);
}
.site-footer-top-diferenciais h2 {
    color: #ece6de !important; /* vence o .text-white do Bootstrap */
}
.site-footer-top-diferenciais .custom-btn {
    border: 1px solid rgba(216, 197, 178, 0.45);
    color: #ece6de;
}
.site-footer-top-diferenciais .custom-btn:hover {
    background: var(--sy-tijolo);
    border-color: var(--sy-tijolo);
    color: #fff;
}