/* /www/wwwroot/livintech/modulos/assets/landing.css */
/* Padrão visual das páginas de segmento (/modulos/<segmento>/), conceito de 18/10/2026.
   Parte 1: componentes cd-* (hero, cabeçalho centralizado, cards, janela, timeline).
   Parte 2: os componentes antigos de perfil.css (.bloco, .cab, .item, .lista, .print, .cta)
   redesenhados no mesmo padrão. Carregar DEPOIS de perfil.css. */

:root {
    --bg: #0F1014;
    --surface: #181A1F;
    --surface-2: #1E2026;
    --line: #262930;
    --line-2: #33363E;
    --line-3: #4A4E57;
    --text: #F4F4F5;
    --text-2: #B4B8C0;
    --text-3: #A7ABB3;
    --text-4: #868B94;
    --accent: #FF8F3F;
    --accent-tint: #2B1D12;
    --radius: 16px;
}

body { background: var(--bg); }

/* ---------- base das seções ---------- */
.cd-sec {
    padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
    color: var(--text);
    font-family: 'Archivo', system-ui, sans-serif;
}
.cd-sec + .cd-sec { border-top: 1px solid var(--line); }
.cd-wrap {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 72px);
}
.cd-sec h1, .cd-sec h2, .cd-sec h3, .cd-sec p, .cd-sec ol { margin: 0; padding: 0; }
.cd-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}
.cd-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-4);
}
.cd-or { color: var(--accent); }

.cd-titulo {
    font-weight: 900;
    font-stretch: 116%;
    text-transform: uppercase;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.cd-h2 {
    font-size: clamp(26px, 3vw, 44px);
    line-height: .95;
    text-align: center;
    margin-top: 16px;
}
.cd-apoio {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-2);
}

/* ---------- cards e quadrados de ícone ---------- */
.cd-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}
.cd-ico {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--accent-tint);
    display: grid;
    place-items: center;
}
.cd-ico svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cd-ico--g { width: 56px; height: 56px; border-radius: 14px; }
.cd-ico--g svg { width: 26px; height: 26px; }
.cd-card h3 {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    text-wrap: balance;
    margin-top: 18px;
}
.cd-card p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-3);
    margin-top: 8px;
}

/* =========================================================
   HERO
   ========================================================= */
.cd-hero__topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.cd-selo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #3A3D44;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
}
.cd-selo::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}
.cd-h1 {
    /* 18/10: o Hugo pediu menor e centralizado (122 → 80 → 64px) */
    font-size: clamp(30px, 4.6vw, 64px);
    text-align: center;
    line-height: .88;
    letter-spacing: -.02em;
}
.cd-hero__base {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}
.cd-hero__cards {
    flex: 2 1 560px;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.cd-hero__cards .cd-card {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.cd-hero__cards .cd-card p {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
    text-wrap: balance;
}
.cd-fala {
    flex: 1 1 340px;
    background: var(--accent);
    color: #0F1014;
    border-radius: var(--radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
}
.cd-fala svg { width: 36px; height: 28px; fill: #0F1014; }
.cd-fala blockquote {
    margin: 0;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 800;
    line-height: 1.2;
    text-wrap: balance;
}
.cd-fala .cd-mono { color: #3A2410; }

/* =========================================================
   01 · PORTARIA AO VIVO
   ========================================================= */
.cd-cab-centro {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cd-cab-centro .cd-h2 { max-width: 960px; }
.cd-cab-centro .cd-apoio { max-width: 640px; margin-top: 22px; }

.cd-portaria__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}
.cd-portaria__col {
    flex: 1 1 250px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cd-portaria__centro { flex: 2.2 1 560px; min-width: 0; }

.cd-janela {
    margin: 0;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    padding: 12px;
}
.cd-janela__pontos { display: flex; gap: 8px; padding: 2px 4px 12px; }
.cd-janela__pontos i { width: 10px; height: 10px; border-radius: 50%; background: #3A3D44; }
.cd-janela__pontos i:last-child { background: var(--accent); }
.cd-janela img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    cursor: zoom-in;
}
.cd-janela figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 4px 4px;
}
.cd-janela figcaption b { font-size: 15px; font-weight: 700; }

/* =========================================================
   02 · VISITANTE SEM FILA
   ========================================================= */
/* 18/10: centralizado a pedido do Hugo (igual à seção 01) */
.cd-cab-lado {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
}
.cd-cab-lado > div { display: flex; flex-direction: column; align-items: center; }
.cd-cab-lado > .cd-apoio { max-width: 640px; }

.cd-timeline {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    row-gap: 40px;
}
.cd-timeline li {
    flex: 1 1 250px;
    padding-right: 24px;
    min-width: 0;
}
.cd-passo__topo { display: flex; align-items: center; }
.cd-circulo {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid var(--line-3);
    background: var(--surface);
    display: grid;
    place-items: center;
}
.cd-circulo svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #E4E6EA;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cd-passo__linha { flex: 1; height: 1.5px; background: var(--line-2); margin-left: 12px; }
.cd-passo--3 .cd-passo__linha { background: var(--accent); }
.cd-passo--4 .cd-circulo { background: var(--accent); border-color: var(--accent); }
.cd-passo--4 .cd-circulo svg { stroke: #0F1014; }
.cd-timeline .cd-mono { display: block; margin-top: 22px; }
.cd-timeline h3 {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 8px;
    text-wrap: balance;
}
.cd-timeline p { font-size: 15px; line-height: 1.55; color: var(--text-3); margin-top: 8px; }
.cd-passo--4 .cd-mono, .cd-passo--4 h3 { color: var(--accent); }

.cd-paineis { display: flex; flex-wrap: wrap; gap: 16px; }
.cd-paineis .cd-card {
    flex: 1 1 420px;
    min-width: 0;
    padding: 32px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.cd-paineis h3 { font-size: 21px; margin-top: 0; }

/* ---------- ajustes finos no celular ---------- */
@media (max-width: 640px) {
    .cd-h1 { font-size: clamp(26px, 7.4vw, 34px); }
    .cd-h2 { font-size: clamp(22px, 6.4vw, 28px); }
    .cd-card { padding: 22px; }
    .cd-paineis .cd-card { padding: 24px; flex-direction: column; }
    .cd-timeline li { padding-right: 0; }
    .cd-hero__cards .cd-card, .cd-paineis .cd-card, .cd-fala { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cd-sec * { transition: none !important; }
}

/* =========================================================
   PARTE 2 — componentes antigos (perfil.css) no padrão novo
   ========================================================= */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.mono.or { font-size: 12px; letter-spacing: .16em; color: var(--accent); }

.bloco {
    padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
    border-bottom: 1px solid var(--line);
}
.bloco > .box { max-width: 1240px; padding: 0; }

/* cabeçalho de seção: eyebrow, título e apoio centralizados */
.bloco .cab {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    margin: 0 0 clamp(40px, 5vw, 64px);
}
.bloco .cab[style] { margin: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 64px) !important; }
.bloco .cab > div { display: flex; flex-direction: column; align-items: center; }
.bloco .cab p { max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.bloco h2, .cta h2 {
    font-weight: 900;
    font-stretch: 116%;
    text-transform: uppercase;
    letter-spacing: -.015em;
    text-wrap: balance;
    font-size: clamp(26px, 3vw, 44px);
    line-height: .95;
    text-align: center;
    max-width: 960px;
    min-height: 0;
    margin-top: 16px;
}
.bloco h2 em, .cta h2 em { color: var(--accent); }

/* grades viram cards separados */
.grade { background: none; border: 0; gap: 16px; }
.item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    gap: 0;
}
.item:hover { background: var(--surface); border-color: var(--line-2); }
.item > i {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent-tint);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 19px;
    opacity: 1;
    margin-bottom: 18px;
}
.item h3 { font-size: 19px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.item p { font-size: 15px; line-height: 1.55; color: var(--text-3); margin-top: 8px; }
.item > .mono { padding-top: 16px; font-size: 11px; letter-spacing: .12em; color: var(--text-4); }
.item > .mono.or { color: var(--accent); }
.item > .mono.or:first-child { padding-top: 0; margin-bottom: 14px; }
.passo { border-top: 1px solid var(--line); }
.passo:last-child { border-color: var(--accent); }

/* lista ao lado da tela: cards empilhados */
.duo { align-items: center; gap: 24px; }
.lista { border-top: 0; display: flex; flex-direction: column; gap: 16px; }
.lista div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 28px;
}
.lista b { font-size: 19px; font-weight: 800; line-height: 1.2; }
.lista span { font-size: 15px; line-height: 1.55; color: var(--text-3); margin-top: 8px; }

/* tela real: moldura de janela com 3 bolinhas */
.print {
    position: relative;
    width: min(640px, 100%);
    margin: 32px auto 0;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    padding: 34px 12px 0;
    box-shadow: none;
}
.print::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 16px;
    width: 46px;
    height: 10px;
    background:
        radial-gradient(circle at 5px 5px, #3A3D44 5px, transparent 5.5px),
        radial-gradient(circle at 23px 5px, #3A3D44 5px, transparent 5.5px),
        radial-gradient(circle at 41px 5px, var(--accent) 5px, transparent 5.5px);
}
.print img { border: 0; border-radius: 10px; }
.print figcaption { padding: 14px 4px 14px; align-items: baseline; }
.print figcaption b { font-size: 15px; }
.print figcaption span { color: var(--text-4); }
.duo .print { margin: 0; width: 100%; }

/* contato */
.cta { padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px); }
.cta h2 { margin: 16px auto 0; }
.cta p { color: var(--text-2); }

@media (max-width: 640px) {
    .bloco h2, .cta h2 { font-size: clamp(22px, 6.4vw, 28px); }
    .item { padding: 22px; }
    .lista div { padding: 20px 22px; }
}

/* ---------- integrador: a mesma tela em 4 cores de marca (white label) ---------- */
.wl-amostras { display: flex; flex-wrap: wrap; gap: 16px; }
.wl-amostra {
    flex: 1 1 220px;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
}
.wl-amostra i { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 10px; background: var(--wl); }
.wl-amostra b { font-size: 16px; font-weight: 800; }
.wl-amostra span { font-size: 13px; color: var(--text-4); }
.wl-amostra em {
    grid-column: 1 / -1;
    margin-top: 16px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wl) 0 58%, var(--line-2) 58% 100%);
}
/* recurso liberado por contrato (integrador) */
.item.sob { border-style: dashed; border-color: var(--line-3); }
/* /www/wwwroot/livintech/modulos/assets/landing.css */