/* ------------------------------------------------------------------
   Os mesmos tokens do :root de public/assets/css/app.css, que por sua
   vez são os de www.catcom.com.br. O hotsite e a tela de login abrem
   com a mesma cara de propósito: quem clica em "Entrar" não deve achar
   que trocou de empresa.
   ------------------------------------------------------------------ */
:root {
    --catcom-blue: #1d4ed8;
    --catcom-blue-light: #3b82f6;
    --catcom-blue-dark: #1e40af;
    --catcom-accent: #f59e0b;
    --catcom-font: "Orbitron", "Inter", system-ui, sans-serif;

    --brand: var(--catcom-blue);
    --brand-soft: #eff6ff;
    --surface: #ffffff;
    --page-bg: #f8fafc;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #475569;

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-primary: #1d4ed8;
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: #1d4ed8;
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: #1e40af;
    --bs-focus-ring-color: rgba(29, 78, 216, 0.1);
}

body {
    background-color: var(--surface);
    color: var(--text);
    font-family: var(--bs-body-font-family);
}

/* Toda âncora interna é alcançada pelo menu; sem isto o cabeçalho fixo
   cobre o título da seção recém-rolada. */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

a { text-decoration: none; }

/* --------------------------------------------------------- navbar */
.site-navbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.brand-lockup { display: flex; align-items: center; gap: 0.65rem; }
.brand-lockup img { filter: drop-shadow(0 3px 10px rgba(29, 78, 216, 0.3)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }

/* Espelha .logo-name / .logo-tagline do catcom.com.br. */
.brand-name {
    font-family: var(--catcom-font);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 3.5px;
    background: linear-gradient(135deg, #1e293b 30%, var(--catcom-blue) 70%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--catcom-blue);
}

.brand-tagline {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
}

.site-navbar .nav-link {
    font-weight: 500;
    color: var(--text-muted);
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus { color: var(--brand); }

/* ----------------------------------------------------------- hero */
.hero {
    background:
        radial-gradient(900px 420px at 82% -10%, rgba(59, 130, 246, 0.16), transparent 62%),
        linear-gradient(160deg, var(--brand-soft) 0%, var(--page-bg) 48%, var(--page-bg) 100%);
    border-bottom: 1px solid var(--border);
    padding: 5rem 0 4.5rem;
}

.hero h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-size: clamp(2.1rem, 5vw, 3.35rem);
}

.hero .lead { color: var(--text-muted); max-width: 34rem; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.hero-mark {
    filter: drop-shadow(0 18px 40px rgba(29, 78, 216, 0.28));
}

/* Cartão do hero: a lista do que o sistema resolve, ao lado da marca. */
.hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px -30px rgba(15, 23, 42, 0.35);
    padding: 1.5rem;
}

.hero-card li { display: flex; gap: 0.6rem; align-items: flex-start; }
.hero-card li + li { margin-top: 0.85rem; }
.hero-card i { color: var(--brand); font-size: 1.05rem; line-height: 1.35; }

/* --------------------------------------------------------- seções */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--page-bg); border-block: 1px solid var(--border); }

.section-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(1.6rem, 3.2vw, 2.15rem);
}

.section-subtitle { color: var(--text-muted); max-width: 42rem; }

.card-recurso {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card-recurso:hover {
    transform: translateY(-3px);
    border-color: #cbd5e1;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.4);
}

.card-recurso h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; }
.card-recurso p { color: var(--text-muted); font-size: 0.94rem; margin: 0; }

.icone-quadro {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* Passos numerados de "como assinar". O número é o elemento gráfico da
   seção — por isso ele, e não um ícone, ganha o quadro colorido. */
.passo-numero {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #ffffff;
    font-weight: 700;
    flex: 0 0 auto;
}

.lista-check { list-style: none; padding: 0; margin: 0; }
.lista-check li { display: flex; gap: 0.6rem; margin-bottom: 0.75rem; color: var(--text-muted); }
.lista-check i { color: var(--catcom-accent); font-size: 1.05rem; line-height: 1.4; }

/* ------------------------------------------------------- perguntas */
.duvida {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.duvida > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.duvida > summary::-webkit-details-marker { display: none; }
.duvida > summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    color: var(--brand);
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.duvida[open] > summary::after { transform: rotate(180deg); }
.duvida p { color: var(--text-muted); margin: 0.75rem 0 0; font-size: 0.95rem; }

/* ------------------------------------------------------ chamada final */
.cta {
    background: linear-gradient(135deg, var(--catcom-blue-dark) 0%, var(--catcom-blue) 55%, #7c3aed 100%);
    color: #ffffff;
    padding: 4rem 0;
}

.cta h2 { font-weight: 800; letter-spacing: -0.02em; }
.cta p { color: rgba(255, 255, 255, 0.85); }

.cta .btn-light { color: var(--catcom-blue-dark); font-weight: 600; }
.cta .btn-outline-light { font-weight: 600; }

/* --------------------------------------------------------------- rodapé
   Marcação em views/partials/rodape.php.

   Fundo escuro contra o corpo claro da página: o rodapé é o fim do
   documento, e a mudança de fundo é o que diz isso sem precisar de borda.

   DEPENDE de .brand-lockup e .brand-text, definidas na seção da navbar
   acima. O mesmo bloco de marca aparece no topo e no fim; repetir as
   regras aqui faria os dois divergirem na primeira alteração.

   As cores são literais e não tokens de propósito: elas só existem neste
   contexto escuro, e promovê-las a variável no :root sugeriria que valem
   para a página inteira. --text e --border, que são os tokens próximos,
   pertencem ao tema claro e não servem aqui.
   --------------------------------------------------------------------- */
.site-footer {
    background: #0f172a;
    color: #cbd5e1;
    padding: 3rem 0 2rem;
    font-size: 0.92rem;
}

.site-footer a { color: #e2e8f0; }
.site-footer a:hover { color: #ffffff; }

/* Cabeçalho de cada coluna. */
.site-footer .footer-title { color: #ffffff; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.75rem; }

/* opacity: 1 porque o Bootstrap deixa o <hr> a 25%, invisível no escuro. */
.site-footer hr { border-color: #1e293b; opacity: 1; }

.btn-primary { --bs-btn-bg: #1d4ed8; --bs-btn-border-color: #1d4ed8; --bs-btn-hover-bg: #1e40af; --bs-btn-hover-border-color: #1e40af; }