/* ============================================================
   LUMIS — Design System compartilhado (páginas internas)
   Estética da home: cream #FAF8F3 · ink #22201A · slate #3D4B56
   terracota #AF6E4E · brown #8F5335 · beige #F1EBDD
   Fontes: Newsreader (títulos) + Albert Sans (corpo)
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --cream: #FAF8F3;
    --ink: #22201A;
    --slate: #3D4B56;
    --terra: #AF6E4E;
    --brown: #8F5335;
    --brown-dark: #633920;
    --sec: #55503F;
    --border: #E7E0D2;
    --beige: #F1EBDD;
    --peach: #EFCDB9;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Albert Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

p,
blockquote,
li {
    text-align: justify;
    hyphens: none;
}

a {
    color: var(--brown);
    text-decoration: none;
}

a:hover {
    color: var(--brown-dark);
}

::selection {
    background: #EBD5C8;
}

h1,
h2,
h3,
blockquote {
    font-family: 'Newsreader', serif;
    font-weight: 500;
    text-wrap: pretty;
}

/* --- Granulado de filme (assinatura Lumis) --- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.18;
}

/* --- Fundo: vídeo em câmera lenta + esfera de rede (estático no scroll) --- */
.bgvideo {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    view-transition-name: lumis-bg;
}

.bgvideo video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 128%;
    object-fit: cover;
    transition: opacity 1.6s ease;
    opacity: 0.4;
}

.bgvideo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(250, 248, 243, 0.65);
}

.bgvideo canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@keyframes lumisBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.15;
    }
}

.logo-ball.blinking {
    animation: lumisBlink 4s ease-in-out infinite;
}

/* --- Scroll reveal --- */
@keyframes lumisReveal {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

[data-reveal] {
    opacity: 0;
}

[data-reveal].lumis-in {
    animation: lumisReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --- Container de imagem (sem véu: fotos sempre em cores plenas) --- */
.img-veil {
    position: relative;
    display: block;
    overflow: hidden;
}

.img-veil img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Eyebrow --- */
.eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown);
}

.eyebrow-lando {
    --lando-idle: #8F5335;
    --lando-accent: #AF6E4E;
}

/* --- Botão degradê (slate → terracota) --- */
.btn-grad {
    display: inline-block;
    background: linear-gradient(135deg, #3D4B56 0%, #3D4B56 40%, #AF6E4E 60%, #AF6E4E 100%);
    background-size: 300% 300%;
    background-position: 0% 0%;
    color: var(--cream);
    font-weight: 600;
    transition: background-position 0.6s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-grad:hover {
    background-position: 100% 100%;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 26px rgba(175, 110, 78, 0.35);
    color: var(--cream);
}

.link-underline {
    color: var(--slate);
    font-weight: 600;
    border-bottom: 2px solid var(--terra);
    padding-bottom: 3px;
}

.link-underline:hover {
    color: var(--brown);
}

/* --- Página ---
   .page vai de ponta a ponta do viewport; a coluna de 1600px vive no <main>.
   Assim o header e o rodapé sangram até as bordas em qualquer resolução,
   enquanto o conteúdo continua centrado e legível. */
.page {
    position: relative;
    z-index: 1;
}

/* o conteúdo mantém a coluna de 1600px; o clip preserva o recorte dos
   círculos flutuantes, que antes era feito pelo max-width do .page */
main {
    max-width: 1600px;
    margin: 0 auto;
    overflow-x: clip;
}

/* --- Header --- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* fundo de ponta a ponta, mas conteúdo alinhado à coluna de 1600px:
       acima de 1600px a lateral cresce junto com a sobra do viewport */
    padding: 20px max(64px, calc((100% - 1600px) / 2 + 64px));
    border-bottom: 1px solid var(--border);
    background: rgba(250, 248, 243, 0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 5;
    view-transition-name: site-header;
}

.lumis-logo {
    display: inline-block;
    text-align: center;
}

.lumis-logo .logo-word {
    position: relative;
    display: inline-block;
    padding-left: 6px;
}

.lumis-logo .logo-ball-big {
    position: absolute;
    left: -8px;
    top: -7px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--terra);
    z-index: 0;
}

.lumis-logo .logo-text {
    position: relative;
    z-index: 1;
    font-family: 'Albert Sans', sans-serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.22em;
    color: var(--slate);
}

.lumis-logo .logo-ball-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--terra);
    margin-left: 2px;
}

.lumis-logo .logo-sub {
    display: block;
    border-top: 1px solid var(--slate);
    margin-top: 2px;
    padding-top: 3px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--brown-dark);
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 14.5px;
    font-weight: 500;
}

.desktop-nav a {
    color: var(--ink);
}

.desktop-nav a.active {
    color: var(--brown);
    /* o LANDO HOVER pinta os caracteres pela variável própria */
    --lando-idle: #8F5335;
}

.desktop-nav .btn-grad,
.desktop-nav .btn-grad:hover {
    padding: 12px 24px;
    color: var(--cream);
}

.hamburger {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    width: 22px;
    height: 2px;
    background: var(--ink);
    display: block;
    transition: transform 0.3s, opacity 0.3s;
}

.hamburger span:nth-child(3) {
    width: 14px;
    background: var(--terra);
    align-self: flex-start;
    margin-left: 11px;
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    width: 22px;
    align-self: center;
    margin-left: 0;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    background: rgba(250, 248, 243, 0.97);
    backdrop-filter: blur(12px);
    padding: 96px 32px 40px;
    flex-direction: column;
    gap: 24px;
    font-size: 19px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 44px rgba(34, 32, 26, 0.14);
}

.mobile-menu.open {
    display: flex;
    animation: lumisReveal 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-menu a {
    color: var(--ink);
}

.mobile-menu a.active {
    color: var(--brown);
}

.mobile-menu .btn-grad,
.mobile-menu .btn-grad:hover {
    text-align: center;
    padding: 15px 24px;
    border-radius: 999px;
    color: var(--cream);
}

/* --- Hero das páginas internas --- */
@keyframes lumisRise {
    from {
        opacity: 0;
        transform: translateY(32px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.page-hero {
    padding: 96px 64px 80px;
}

/* entrada em cascata: eyebrow → título → texto (feeling de coisa surgindo) */
.page-hero .eyebrow,
.page-hero h1,
.page-hero .lead {
    animation: lumisRise 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.2s;
}

.page-hero h1 {
    animation-delay: 0.35s;
}

.page-hero .lead {
    animation-delay: 0.5s;
}

.page-hero .lead+.lead {
    animation-delay: 0.62s;
}

.page-hero .eyebrow {
    margin-bottom: 20px;
}

.page-hero h1 {
    font-size: 54px;
    line-height: 1.08;
    margin: 0 0 24px;
    max-width: 900px;
}

.page-hero .lead {
    font-size: 18.5px;
    line-height: 1.65;
    color: var(--sec);
    max-width: 860px;
    margin: 0;
    /* justificado sem dividir palavras: coluna larga o bastante p/ palavras inteiras */
    hyphens: none;
}

.page-hero .lead+.lead {
    margin-top: 16px;
}

/* --- Seções e painéis (box de bordas retas) --- */
.section {
    padding: 0 64px 96px;
}

.section h2 {
    font-size: 40px;
    line-height: 1.12;
    margin: 0 0 24px;
}

.section .body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--sec);
}

.panel {
    margin: 0 64px 96px;
    padding: 64px 72px;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(61, 75, 86, 0.28);
}

.panel-slate {
    background: var(--slate);
}

.panel-slate h1,
.panel-slate h2,
.panel-slate h3 {
    color: var(--cream);
}

.panel-slate p,
.panel-slate li {
    color: #E9EDEF;
}

.panel-slate .eyebrow {
    color: var(--peach);
}

/* variante marrom — intercala com o slate nos painéis de serviços.
   brown-dark tem luminância quase igual à do slate, então a alternância
   lê como troca de matiz, não de claro/escuro */
.panel-brown {
    background: var(--brown-dark);
}

.panel-brown h1,
.panel-brown h2,
.panel-brown h3 {
    color: var(--cream);
}

.panel-brown p,
.panel-brown li {
    color: #F0E6DC;
}

.panel-brown .eyebrow {
    color: var(--peach);
}

.panel-brown:hover {
    box-shadow: 0 14px 36px rgba(99, 57, 32, 0.32);
}

.panel h2 {
    font-size: 38px;
    line-height: 1.12;
    margin: 0 0 20px;
}

.panel h3 {
    font-size: 32px;
    line-height: 1.15;
    margin: 0 0 18px;
}

.panel p {
    font-size: 17px;
    line-height: 1.7;
}

.badge {
    display: inline-block;
    background: var(--terra);
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 14px;
    margin-bottom: 20px;
    white-space: nowrap;
}

/* --- Layout dividido (texto + imagem) --- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.split .img-veil {
    height: 420px;
}

.split h2 {
    font-size: 36px;
    line-height: 1.14;
    margin: 0 0 18px;
}

.split h3 {
    font-size: 32px;
    line-height: 1.15;
    margin: 0 0 18px;
}

.split p {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--sec);
}

.panel .split p {
    color: #E9EDEF;
}

.split p+p {
    margin-top: 14px;
}

/* --- Listas com marcador terracota --- */
.lumis-list {
    list-style: none;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lumis-list li {
    position: relative;
    padding-left: 24px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--sec);
}

.lumis-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--terra);
    font-weight: 700;
}

.panel-brown .lumis-list li {
    color: #F0E6DC;
}

.panel-brown .lumis-list li::before {
    color: var(--peach);
}

.panel-slate .lumis-list li {
    color: #E9EDEF;
}

.panel-slate .lumis-list li::before {
    color: var(--peach);
}

/* --- Cards (bordas retas) --- */
.cards {
    display: grid;
    gap: 16px;
}

.cards-2 {
    grid-template-columns: 1fr 1fr;
}

.card {
    border: 1px solid var(--border);
    padding: 26px 28px;
    background: rgba(250, 248, 243, 0.6);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(61, 75, 86, 0.16);
    background: var(--cream);
    border-color: var(--terra);
}

.card-title {
    font-weight: 700;
    font-size: 16.5px;
    color: var(--slate);
    margin-bottom: 8px;
}

.card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--sec);
    margin: 0;
}

/* card com imagem no topo (soluções NR-1, artigos) */
.media-card {
    background: var(--cream);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.media-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(61, 75, 86, 0.16);
    border-color: var(--terra);
}

.media-card .img-veil {
    height: 210px;
}

.media-card-body {
    padding: 26px 28px 30px;
}

.media-card-body h3 {
    font-weight: 600;
    font-size: 23px;
    margin: 0 0 10px;
}

.media-card-body .lumis-list li {
    font-size: 14.5px;
}

/* --- Blog (mesmos cards da home) --- */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.blog-card {
    display: block;
    color: var(--ink);
    border: 1px solid var(--border);
    overflow: hidden;
    background: #FFFFFF;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
    border-color: var(--terra);
    color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(61, 75, 86, 0.16);
}

.blog-card .img-veil {
    height: 260px;
}

.blog-card-body {
    padding: 28px 30px 32px;
}

.blog-card-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 12px;
}

.blog-card h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    margin: 0 0 12px;
}

.blog-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sec);
    margin: 0;
}

/* --- Granulado reforçado nas imagens dos serviços ---
   textura de filme por cima da foto (e do hover-video). Usa mix-blend-mode
   overlay para somar grão SEM criar véu de cor: o cinza-médio do ruído não
   altera a imagem, só os desvios claros/escuros marcam a textura. */
.panel .img-veil::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='ng'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ng)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    /* ↓ único ponto de ajuste da intensidade (0 = sem grão, 1 = máximo) */
    opacity: var(--grain-img-força, 0.5);
}

/* --- Imagem que vira vídeo no hover (mesmo tamanho da imagem) --- */
.hover-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* hover real (mouse/trackpad); no touch quem controla é a classe .playing via JS */
@media (hover: hover) {
    .hover-video:hover video {
        opacity: 1;
    }
}

.hover-video.playing video {
    opacity: 1;
}

/* loop com crossfade ([data-crossfade]): o wrapper .video-loop assume o
   hover imagem↔vídeo; os 2 players internos fazem o fade entre reproduções
   com opacidade inline controlada pelo JS */
.hover-video .video-loop {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

@media (hover: hover) {
    .hover-video:hover .video-loop {
        opacity: 1;
    }
}

.hover-video.playing .video-loop {
    opacity: 1;
}

.hover-video .video-loop video {
    transition: opacity 1s linear;
}

/* --- Faixa de foto full-width --- */
.photo-band {
    margin: 0 64px 96px;
}

.photo-band .img-veil {
    height: 420px;
}

/* --- CTA central --- */
.cta-center {
    text-align: center;
    padding: 0 64px 110px;
}

.cta-center .btn-grad {
    padding: 18px 40px;
    font-size: 17px;
}

/* --- Rodapé --- */
.site-footer {
    background: var(--ink);
    color: #CFC8B6;
    /* mesma técnica do header: fundo full-bleed, conteúdo na coluna */
    padding: 64px max(64px, calc((100% - 1600px) / 2 + 64px)) 48px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 100px;
    align-items: start;
}

.site-footer .lumis-logo {
    margin-bottom: 14px;
}

.site-footer .logo-text {
    color: var(--cream);
}

.site-footer .logo-sub {
    border-top-color: #8F8770;
    color: var(--peach);
}

.footer-tagline {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

.footer-tagline .indent {
    display: inline-block;
    padding-left: 48px;
}

.footer-label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8F8770;
    margin-bottom: 14px;
}

.site-footer p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
}

.footer-contact-links {
    line-height: 1.9;
}

.site-footer a {
    color: #CFC8B6;
}

.site-footer a:hover {
    color: var(--peach);
}

.footer-bottom {
    border-top: 1px solid #3A3628;
    margin-top: 48px;
    padding-top: 24px;
    font-size: 13px;
    color: #8F8770;
}

/* --- Transição entre páginas: DESLIZE LATERAL ---
   A navegação não recarrega o documento (ver lumis.js): header, rodapé,
   vídeo de fundo e esfera são montados uma única vez e permanecem
   intocados. Só o <main> é substituído.

   As duas páginas coexistem e deslizam juntas: a que sai vira um
   "fantasma" fixo no viewport (para o scroll voltar ao topo sem
   arrastá-la) e sai por um lado, enquanto a que entra ocupa o fluxo
   normal e chega pelo outro. Indo adiante: entra pela direita. Voltando
   (botão do navegador): entra pela esquerda.

   O corte lateral é feito pelo overflow-x: clip do .page — sem ele o
   deslize criaria barra de rolagem horizontal.

   >>> ÚNICOS PONTOS DE AJUSTE <<<
   O JS lê a duração daqui; não há número duplicado em lumis.js.
   Aceita ms ou s (ex.: 600ms, 1.5s). */
:root {
    --page-transition: 1000ms;
    --page-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* página que sai: congelada onde estava e empurrada para fora */
main.is-ghost {
    position: fixed;
    z-index: 2;
    /* abaixo do header (z-index 5): o nav nunca é coberto pelo fantasma */
    margin: 0;
    pointer-events: none;
    will-change: transform;
    transform: translateX(0);
    transition: transform var(--page-transition) var(--page-ease);
}

main.is-ghost.sliding {
    transform: translateX(-100vw);
}

/* voltando no histórico, a que sai vai para o outro lado */
main.is-ghost.from-left.sliding {
    transform: translateX(100vw);
}

/* página que entra: parte de fora da tela e desliza até o lugar */
main.is-incoming {
    will-change: transform;
    transform: translateX(100vw);
    transition: transform var(--page-transition) var(--page-ease);
}

main.is-incoming.from-left {
    transform: translateX(-100vw);
}

/* depois das variantes de direção, para vencer por ordem no cascade */
main.is-incoming.shown,
main.is-incoming.from-left.shown {
    transform: translateX(0);
}

/* primeira carga do documento: fade curto e fixo, independente do
   deslize — senão a primeira pintura demoraria a duração inteira */
@keyframes pageEnter {
    from {
        opacity: 0;
    }
}

main.is-first {
    animation: pageEnter 500ms ease both;
}

/* ============================================================
   ABERTURA DA HOME — sequência encadeada
   montanhas → esfera → nav → conteúdo

   Presa a html.intro, marcado pelo JS UMA vez no boot e só quando a
   primeira página carregada é a home. Não pode depender de body.home:
   essa classe é trocada a cada navegação, e a intro voltaria a rodar ao
   chegar na home vindo de outra página — o nav sumiria por 4s no meio
   da sessão. Como o header e o .bgvideo nunca são recriados (a navegação
   troca só o <main>), a sequência roda exatamente uma vez por visita.
   ============================================================ */
@keyframes lumisFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* o vídeo repousa em 0.4, não em 1 — daí um keyframe próprio */
@keyframes lumisFadeVid {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.4;
    }
}

html.intro .bgvideo video:first-of-type {
    animation: lumisFadeVid 1s ease 0s backwards;
}

html.intro .bgvideo canvas {
    animation: lumisFadeIn 1s ease 3s backwards;
}

html.intro .site-header {
    animation: lumisFadeIn 1s ease 4s backwards;
}

/* só o <main> da carga inicial; os inseridos pela navegação não têm
   .is-first e portanto entram sem espera */
html.intro main.is-first {
    animation: lumisFadeIn 1s ease 5s backwards;
}

@media (prefers-reduced-motion: reduce) {

    html.intro .bgvideo video:first-of-type,
    html.intro .bgvideo canvas,
    html.intro .site-header,
    html.intro main.is-first {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    main.is-ghost,
    main.is-incoming,
    main.is-incoming.from-left {
        transition: none;
        transform: none;
    }

    main.is-first {
        animation: none;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
    .site-header {
        padding: 14px 20px;
    }

    .desktop-nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .page-hero {
        padding: 48px 24px 40px;
    }

    .page-hero h1 {
        font-size: 34px;
        line-height: 1.12;
        margin-bottom: 16px;
    }

    .page-hero .lead {
        font-size: 15px;
    }

    .section {
        padding: 0 24px 44px;
    }

    .section h2 {
        font-size: 26px;
    }

    .panel {
        margin: 0 20px 44px;
        border-radius: 16px;
        padding: 28px 24px;
    }

    .panel h2 {
        font-size: 26px;
    }

    .panel h3 {
        font-size: 22px;
    }

    .panel p {
        font-size: 14px;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .split .img-veil {
        height: 240px;
        border-radius: 16px;
    }

    .split h2 {
        font-size: 26px;
    }

    .split h3 {
        font-size: 22px;
    }

    .split p {
        font-size: 14px;
    }

    .lumis-list li {
        font-size: 14px;
    }

    .cards-2 {
        grid-template-columns: 1fr;
    }

    .card {
        border-radius: 14px;
        padding: 18px 20px;
    }

    .media-card {
        border-radius: 16px;
    }

    .media-card .img-veil {
        height: 160px;
    }

    .media-card-body h3 {
        font-size: 18px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .blog-card {
        border-radius: 16px;
    }

    .blog-card .img-veil {
        height: 170px;
    }

    .blog-card h3 {
        font-size: 18px;
    }

    .blog-card p {
        font-size: 12.5px;
    }

    .photo-band {
        margin: 0 20px 44px;
    }

    .photo-band .img-veil {
        height: 220px;
        border-radius: 16px;
    }

    .cta-center {
        padding: 0 24px 48px;
    }

    .cta-center .btn-grad {
        display: block;
        border-radius: 999px;
        padding: 16px 24px;
        font-size: 15px;
    }

    /* rodapé centralizado no mobile */
    .site-footer {
        padding: 36px 24px 28px;
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        justify-items: center;
    }

    .footer-tagline,
    .site-footer p {
        text-align: center;
    }

    .footer-tagline .indent {
        padding-left: 0;
    }
}

/* --- Acessibilidade --- */
@media (prefers-reduced-motion: reduce) {

    [data-reveal] {
        opacity: 1;
        animation: none;
    }

    .page-hero .eyebrow,
    .page-hero h1,
    .page-hero .lead {
        animation: none;
    }
}

/* ============================================================
   CÍRCULOS FLUTUANTES (identidade do design antigo — aplicados
   nas internas em 29/07, espelhando os da home)
   ============================================================ */
:root {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}

/* corta o sangrado lateral sem quebrar o sticky do header (clip ≠ hidden) */
.page {
    overflow-x: clip;
}

.page-hero {
    position: relative;
}

.page-hero::before,
.page-hero::after,
.panel::after,
.site-footer::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    background-blend-mode: overlay, normal;
    animation: driftA 28s ease-in-out infinite;
}

/* HERO interno: círculo suave à direita, atrás do conteúdo */
.page-hero::before {
    width: 520px;
    height: 520px;
    top: -160px;
    right: -200px;
    z-index: -1;
    background: var(--grain), rgba(175, 110, 77, 0.10);
    animation: driftB 34s ease-in-out infinite;
}

/* acento sólido sangrando pela borda esquerda, cruzando p/ a seção seguinte */
.page-hero::after {
    width: 130px;
    height: 130px;
    bottom: -45px;
    left: -45px;
    z-index: 1;
    background: var(--grain), radial-gradient(circle at 35% 30%, rgb(175, 110, 77), rgb(135, 82, 55));
    animation: driftA 21s ease-in-out -7s infinite;
}

/* PAINÉIS: halo claro recortado pela borda do painel. A posição vem das
   classes .circle-* abaixo, para cada painel ter um enquadramento próprio. */
.panel::after {
    width: 420px;
    height: 420px;
    bottom: -170px;
    right: -160px;
    z-index: 0;
    background: var(--grain), rgba(255, 255, 255, 0.05);
    animation: driftB 30s ease-in-out -6s infinite;
}

.panel>* {
    position: relative;
    z-index: 1;
}

/* posições do halo — uma por painel, p/ quebrar a repetição do canto direito.
   cada uma redefine os 4 lados porque a regra base fixa bottom/right. */
.circle-br::after {
    inset: auto -160px -170px auto;
    width: 420px;
    height: 420px;
    animation: driftB 30s ease-in-out -6s infinite;
}

.circle-tl::after {
    inset: -140px auto auto -130px;
    width: 340px;
    height: 340px;
    animation: driftA 26s ease-in-out -11s infinite;
}

.circle-tr::after {
    inset: -190px -170px auto auto;
    width: 480px;
    height: 480px;
    animation: driftA 34s ease-in-out -3s infinite;
}

.circle-bl::after {
    inset: auto auto -150px -120px;
    width: 380px;
    height: 380px;
    animation: driftB 24s ease-in-out -16s infinite;
}

/* meia-altura na borda esquerda: enquadramento distinto dos quatro cantos.
   usa driftMid porque o drift comum sobrescreveria a centralização vertical */
.circle-ml::after {
    inset: 50% auto auto -150px;
    width: 300px;
    height: 300px;
    /* estático também: com prefers-reduced-motion a animação é desligada */
    transform: translateY(-50%);
    animation: driftMid 31s ease-in-out -8s infinite;
}

@keyframes driftMid {

    0%,
    100% {
        transform: translateY(-50%);
    }

    33% {
        transform: translateY(-50%) translate(14px, -10px);
    }

    66% {
        transform: translateY(-50%) translate(-10px, 12px);
    }
}

/* FOOTER (ink): círculo terracota discreto */
.site-footer {
    position: relative;
    overflow: clip;
}

.site-footer::before {
    width: 380px;
    height: 380px;
    bottom: -150px;
    right: -130px;
    z-index: 0;
    background: var(--grain), rgba(175, 110, 77, 0.18);
    animation: driftB 35s ease-in-out -14s infinite;
}

.site-footer>* {
    position: relative;
    z-index: 1;
}

@keyframes driftA {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(16px, -12px);
    }

    66% {
        transform: translate(-12px, 14px);
    }
}

@keyframes driftB {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(-14px, 10px);
    }

    66% {
        transform: translate(12px, -14px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .page-hero::before,
    .page-hero::after,
    .panel::after,
    .site-footer::before {
        animation: none;
    }
}

/* ============================================================
   ARTIGOS, CONTATO, 404 E PÁGINAS LEGAIS
   (adicionado em 13/08/2026 junto com as páginas de artigo)
   ============================================================ */

/* o menu passou a ter 5 itens + botão: aperta o gap antes do breakpoint
   mobile para não empurrar o botão contra a borda em telas médias */
@media (max-width: 1240px) and (min-width: 1081px) {
    .desktop-nav {
        gap: 22px;
        font-size: 14px;
    }
}

/* --- Cabeçalho do artigo --- */
.article-hero {
    padding: 80px 64px 40px;
    position: relative;
}

.article-hero .article-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.article-hero h1 {
    font-size: 46px;
    line-height: 1.1;
    margin: 0 0 20px;
    max-width: 820px;
}

.article-standfirst {
    font-size: 19px;
    line-height: 1.65;
    color: var(--sec);
    max-width: 760px;
    margin: 0 0 24px;
    text-align: justify;
    hyphens: none;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: #6B6046;
    border-top: 1px solid var(--border);
    padding-top: 18px;
    max-width: 760px;
}

.article-meta .sep {
    color: var(--terra);
}

/* --- Imagem de topo --- */
.article-figure {
    margin: 0 64px 56px;
}

.article-figure .img-veil {
    height: 460px;
}

/* --- Corpo do texto: coluna estreita, justificado como no resto do site.
   Sem hifenização (padrão Lumis), então a coluna precisa ser larga o
   bastante para palavras inteiras — daí os 720px. --- */
.article-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 64px 72px;
}

.article-body p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--sec);
    margin: 0 0 22px;
    text-align: justify;
    hyphens: none;
}

.article-body p strong {
    color: var(--ink);
    font-weight: 600;
}

.article-body h2 {
    font-size: 30px;
    line-height: 1.2;
    margin: 52px 0 16px;
}

.article-body h3 {
    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;
    margin: 36px 0 12px;
}

.article-body .lumis-list {
    margin: 0 0 24px;
}

.article-body .lumis-list li {
    font-size: 17px;
    line-height: 1.7;
    text-align: justify;
    hyphens: none;
}

/* citação de destaque: fica à esquerda de propósito — 3 linhas a 24px
   justificadas abrem rios de espaço grandes demais para ignorar */
.article-body blockquote {
    margin: 40px 0;
    padding: 4px 0 4px 28px;
    border-left: 3px solid var(--terra);
    font-size: 24px;
    line-height: 1.4;
    color: var(--slate);
    text-align: left;
}

/* caixa de apoio (contexto, checklist, aviso) */
.article-note {
    background: rgba(241, 235, 221, 0.75);
    border-left: 3px solid var(--terra);
    padding: 24px 28px;
    margin: 36px 0;
}

.article-note .article-note-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 10px;
}

.article-note p,
.article-note li {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    text-align: justify;
    hyphens: none;
}

.article-note p+p {
    margin-top: 12px;
}

/* --- Rodapé do artigo: CTA + relacionados --- */
.article-cta {
    margin: 0 64px 96px;
    background: var(--slate);
    padding: 56px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.article-cta h2 {
    font-size: 32px;
    line-height: 1.15;
    color: var(--cream);
    margin: 0 0 14px;
}

.article-cta p {
    font-size: 17px;
    line-height: 1.6;
    color: #E9EDEF;
    max-width: 620px;
    margin: 0 auto 28px;
    text-align: center;
}

/* O painel do CTA é slate e o .btn-grad padrão também começa em slate, então
   o preenchimento do botão se perdia no fundo. Mantém-se o degradê padrão
   (slate → terracota) e quem desenha o botão antes do hover é o contorno
   off-white: 8,5:1 contra o painel. O texto cream sempre teve 8,5:1 — o
   problema era só o limite do botão, não a legibilidade. */
.article-cta .btn-grad {
    padding: 17px 38px;
    font-size: 16.5px;
    border: 1px solid var(--cream);
}

.article-related {
    padding: 0 64px 96px;
}

.article-related h2 {
    font-size: 28px;
    margin: 0 0 28px;
}

.article-back {
    padding: 0 64px 56px;
}

/* --- Página de contato --- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.contact-card {
    display: block;
    border: 1px solid var(--border);
    background: rgba(250, 248, 243, 0.6);
    padding: 32px 30px 34px;
    color: var(--ink);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(61, 75, 86, 0.16);
    background: var(--cream);
    border-color: var(--terra);
    color: var(--ink);
}

.contact-card .contact-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 12px;
}

.contact-card .contact-value {
    display: block;
    font-family: 'Newsreader', serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--slate);
    line-height: 1.2;
    margin-bottom: 8px;
    word-break: break-word;
}

.contact-card .contact-hint {
    display: block;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--sec);
    text-align: left;
}

.contact-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* --- Página 404 --- */
.error-page {
    padding: 120px 64px 130px;
    text-align: center;
    position: relative;
}

.error-code {
    font-family: 'Newsreader', serif;
    font-size: 120px;
    line-height: 1;
    color: var(--terra);
    margin: 0 0 8px;
}

.error-page h1 {
    font-size: 40px;
    line-height: 1.14;
    margin: 0 0 18px;
}

.error-page>p {
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--sec);
    max-width: 560px;
    margin: 0 auto 36px;
    text-align: center;
}

.error-links {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 15.5px;
    font-weight: 600;
}

/* --- Botão quadrado de retorno ao topo (canto inferior direito) ---
   Nasce deslizado para baixo e sobe ao entrar em cena. Fica fora de .page
   de propósito: .page tem overflow-x: clip, que em alguns navegadores
   recorta descendentes fixos. */
.to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 40;
    width: 52px;
    height: 52px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--terra);
    /* ink no terracota: mesmo par usado no .nr1-badge */
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(26px);
    transition: opacity 0.35s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.35s,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover {
    background: var(--brown-dark);
    color: var(--cream);
    box-shadow: 0 10px 26px rgba(34, 32, 26, 0.32);
}

.to-top:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.to-top svg {
    width: 19px;
    height: 19px;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .to-top {
        transition: opacity 0.2s linear, visibility 0.2s, background 0.2s ease, color 0.2s ease;
        transform: none;
    }
}

/* --- Páginas legais (privacidade) --- */
.legal-body {
    max-width: 760px;
    padding: 0 64px 96px;
}

.legal-body h2 {
    font-size: 26px;
    line-height: 1.2;
    margin: 48px 0 14px;
}

.legal-body h2:first-child {
    margin-top: 0;
}

.legal-body p,
.legal-body li {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--sec);
    text-align: left;
}

.legal-body p {
    margin: 0 0 16px;
}

.legal-body .lumis-list {
    margin-bottom: 20px;
}

/* marcador dos campos que a Lumis precisa preencher antes de publicar */
.legal-todo {
    background: #FFF3D6;
    border-bottom: 2px solid var(--terra);
    padding: 1px 6px;
    font-weight: 600;
    color: #6B4A12;
}

.footer-legal-links {
    margin-top: 8px;
    font-size: 13px;
}

.footer-legal-links a {
    color: #8F8770;
}

.footer-legal-links a:hover {
    color: var(--peach);
}

/* ============================================================
   RESPONSIVE — novas páginas
   ============================================================ */
@media (max-width: 1080px) {
    .article-hero {
        padding: 40px 24px 28px;
    }

    .article-hero h1 {
        font-size: 28px;
        line-height: 1.15;
    }

    .article-standfirst {
        font-size: 15.5px;
    }

    .article-meta {
        font-size: 12.5px;
        padding-top: 14px;
    }

    .article-figure {
        margin: 0 20px 32px;
    }

    .article-figure .img-veil {
        height: 220px;
        border-radius: 16px;
    }

    .article-body {
        padding: 0 24px 48px;
    }

    .article-body p {
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 18px;
    }

    .article-body h2 {
        font-size: 23px;
        margin: 36px 0 12px;
    }

    .article-body h3 {
        font-size: 18.5px;
        margin: 26px 0 10px;
    }

    .article-body .lumis-list li {
        font-size: 15.5px;
    }

    .article-body blockquote {
        font-size: 19px;
        margin: 28px 0;
        padding-left: 18px;
    }

    .article-note {
        padding: 18px 20px;
        margin: 26px 0;
    }

    .article-note p,
    .article-note li {
        font-size: 15px;
    }

    .article-cta {
        margin: 0 20px 44px;
        border-radius: 18px;
        padding: 32px 24px;
    }

    .article-cta h2 {
        font-size: 24px;
    }

    .article-cta p {
        font-size: 15px;
    }

    .article-cta .btn-grad {
        display: block;
        border-radius: 999px;
        padding: 16px 24px;
        font-size: 15px;
    }

    .article-related,
    .article-back {
        padding: 0 24px 44px;
    }

    .article-related h2 {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .contact-grid,
    .contact-aside {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-card {
        border-radius: 16px;
        padding: 22px 22px 24px;
    }

    .contact-card .contact-value {
        font-size: 21px;
    }

    .error-page {
        padding: 56px 24px 64px;
    }

    .error-code {
        font-size: 76px;
    }

    .error-page h1 {
        font-size: 26px;
    }

    .error-page>p {
        font-size: 15px;
    }

    .error-links {
        flex-direction: column;
        gap: 14px;
        font-size: 15px;
    }

    .legal-body {
        padding: 0 24px 48px;
    }

    .legal-body h2 {
        font-size: 21px;
        margin: 32px 0 12px;
    }

    .legal-body p,
    .legal-body li {
        font-size: 15.5px;
    }

    .to-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .to-top svg {
        width: 17px;
        height: 17px;
    }
}


/* ============================================================
   HOME — seções exclusivas da página inicial
   Migrado do <style> inline de index.html em 13/08/2026, quando a home
   passou a usar o CSS/JS compartilhado para que a navegação possa trocar
   apenas o <main> sem recarregar nav e rodapé.
   ============================================================ */

.who, .why, .blog {
    position: relative;
}

.who::before, .who::after, .why::before, .blog::before, .site-footer::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    background-blend-mode: overlay, normal;
    animation: driftA 28s ease-in-out infinite;
}

.who::before, .who::after, .why::before, .blog::before {
    z-index: -1;
}

.who::before {
    width: 520px;
    height: 520px;
    top: -160px;
    right: -200px;
    background: var(--grain), rgba(175, 110, 77, 0.10);
    animation: driftB 34s ease-in-out infinite;
}

.who::after {
    width: 130px;
    height: 130px;
    bottom: -45px;
    left: -45px;
    z-index: 1;
    background: var(--grain), radial-gradient(circle at 35% 30%, rgb(175, 110, 77), rgb(135, 82, 55));
    animation: driftA 21s ease-in-out -7s infinite;
}

.why::before {
    width: 380px;
    height: 380px;
    top: -130px;
    left: -150px;
    background: var(--grain), rgba(175, 110, 77, 0.10);
    animation: driftB 27s ease-in-out -3s infinite;
}

.blog::before {
    width: 520px;
    height: 520px;
    top: -210px;
    right: -190px;
    background: var(--grain), rgba(175, 110, 77, 0.09);
    animation: driftB 30s ease-in-out -6s infinite;
}

.hero {
    padding: 110px 64px 96px;
}

.hero-box {
    max-width: 820px;
}

.hero .eyebrow {
    margin-bottom: 22px;
}

.eyebrow-desktop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.45em;
}

.eyebrow-dot {
    color: var(--brown);
}

.eyebrow-mobile {
    display: none;
}

.hero h1 {
    font-size: 62px;
    line-height: 1.06;
    margin: 0 0 26px;
}

.hero-sub {
    font-size: 18.5px;
    line-height: 1.6;
    color: var(--sec);
    max-width: 640px;
    margin: 0 0 36px;
    hyphens: none;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.hero-ctas .btn-grad {
    padding: 16px 32px;
    font-size: 16px;
}

.hero-ctas .link-underline {
    font-size: 16px;
}

.nr1-strip {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin: 0 64px 0;
    background: var(--slate);
    padding: 28px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.nr1-strip:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(61, 75, 86, 0.28);
}

.nr1-strip-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nr1-badge {
    background: var(--terra);
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    padding: 8px 14px;
    white-space: nowrap;
}

.nr1-strip p {
    margin: 0;
    color: #E9EDEF;
    font-size: 16.5px;
    line-height: 1.5;
}

.nr1-strip-link {
    color: var(--peach);
    font-weight: 600;
    white-space: nowrap;
}

.nr1-strip-link:hover {
    color: var(--cream);
}

.who {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    padding: 0 64px 110px;
    align-items: start;
}

.who .eyebrow {
    margin-bottom: 18px;
}

.who h2 {
    font-size: 40px;
    line-height: 1.12;
    margin: 0;
}

.who-body {
    padding-top: 44px;
}

.who-body p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--sec);
    margin: 0 0 18px;
}

.approach {
    background: rgba(241, 235, 221, 0.8);
    padding: 90px 64px 100px;
}

.approach h2 {
    font-size: 40px;
    margin: 0 0 52px;
}

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

.approach-card {
    background: var(--cream);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.approach-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(61, 75, 86, 0.16);
    border-color: var(--terra);
}

.approach-card .img-veil {
    height: 210px;
}

.approach-card-body {
    padding: 28px 28px 32px;
}

.approach-card h3 {
    font-weight: 600;
    font-size: 23px;
    margin: 0 0 12px;
}

.approach-card p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--sec);
    margin: 0;
}

.why {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 80px;
    padding: 110px 64px;
    align-items: start;
}

.why .eyebrow {
    margin-bottom: 18px;
}

.why h2 {
    font-size: 40px;
    line-height: 1.12;
    margin: 0 0 24px;
}

.why-sub {
    font-size: 17px;
    line-height: 1.65;
    color: var(--sec);
    margin: 0;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.why-card {
    border: 1px solid var(--border);
    padding: 24px 26px;
    background: rgba(250, 248, 243, 0.6);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(61, 75, 86, 0.16);
    background: var(--cream);
    border-color: var(--terra);
}

.why-card-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--slate);
    margin-bottom: 8px;
}

.why-card-body {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--sec);
    text-align: justify;
    hyphens: none;
}

.testimonial {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin: 0 64px 110px;
    background: var(--slate);
    padding: 72px 120px;
    position: relative;
    overflow: hidden;
}

.testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(61, 75, 86, 0.28);
}

.testimonial canvas {
    position: absolute;
    left: -240px;
    top: 50%;
    transform: translateY(-50%);
    width: 640px;
    height: 640px;
    pointer-events: none;
    opacity: 0.45;
}

.testimonial-inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.testimonial .eyebrow {
    color: var(--peach);
    margin-bottom: 20px;
}

.testimonial blockquote {
    font-weight: 400;
    font-size: 30px;
    line-height: 1.35;
    color: var(--cream);
    margin: 0 0 24px;
}

.testimonial-attribution {
    color: #AEBAC2;
    font-size: 15px;
    font-weight: 500;
}

.blog {
    padding: 0 64px 110px;
}

.blog-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 44px;
}

.blog-head .eyebrow {
    margin-bottom: 14px;
}

.blog-head h2 {
    font-size: 40px;
    margin: 0;
}

.cta-final {
    padding: 0 64px 110px;
    text-align: center;
}

.cta-final-box {
    max-width: 720px;
    margin: 0 auto;
}

.cta-final h2 {
    font-size: 44px;
    line-height: 1.12;
    margin: 0 0 20px;
}

.cta-final p {
    font-size: 18px;
    line-height: 1.65;
    color: var(--sec);
    margin: 0 0 36px;
    text-align: center;
}

.cta-final .btn-grad {
    padding: 18px 40px;
    font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {

    .who::before, .who::after, .why::before, .blog::before, .site-footer::before {
        animation: none;
    }
}

@media (max-width: 1080px) {

    .hero {
        padding: 48px 24px 40px;
    }

    .hero h1 {
        font-size: 36px;
        line-height: 1.1;
        margin-bottom: 16px;
    }

    .hero .eyebrow-desktop {
        display: none !important;
    }

    .eyebrow-mobile {
        display: block;
        font-size: 11px;
        letter-spacing: 0.16em;
        margin-bottom: 14px;
        text-align: center;
    }

    .hero-sub {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-ctas .btn-grad {
        border-radius: 999px;
        text-align: center;
        padding: 15px 24px;
        font-size: 15px;
    }

    .hero-ctas .link-underline {
        border-bottom: none;
        text-align: center;
        padding: 12px;
        font-size: 15px;
    }

    .nr1-strip {
        margin: 0 20px 0;
        border-radius: 16px 16px 0 0;
        padding: 22px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .nr1-strip-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .nr1-badge {
        border-radius: 999px;
        font-size: 11px;
        padding: 6px 12px;
    }

    .nr1-strip p {
        font-size: 13.5px;
    }

    .who {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 24px 44px;
    }

    .who h2 {
        font-size: 26px;
        margin-bottom: 14px;
    }

    .who-body {
        padding-top: 0;
    }

    .who-body p {
        font-size: 14px;
    }

    .approach {
        padding: 40px 24px 44px;
    }

    .approach h2 {
        font-size: 26px;
        margin-bottom: 22px;
    }

    .approach-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .approach-card {
        border-radius: 16px;
    }

    .approach-card .img-veil {
        height: 150px;
    }

    .approach-card h3 {
        font-size: 18px;
    }

    .approach-card p {
        font-size: 13px;
    }

    .why {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 44px 24px;
    }

    .why h2 {
        font-size: 26px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .why-card {
        border-radius: 14px;
        padding: 16px 18px;
    }

    .testimonial {
        margin: 0 20px 44px;
        border-radius: 18px;
        padding: 28px 24px;
    }

    .testimonial canvas {
        display: none;
    }

    /* "DEPOIMENTO" centralizado */
    .testimonial .eyebrow {
        text-align: center;
    }

    .testimonial blockquote {
        font-size: 18px;
        line-height: 1.45;
    }

    /* atribuição em duas linhas centralizadas: o travessão some e cada
       parte vira bloco próprio */
    .testimonial-attribution {
        text-align: center;
    }

    .testimonial-attribution .attr-sep {
        display: none;
    }

    .testimonial-attribution .attr-role,
    .testimonial-attribution .attr-org {
        display: block;
    }

    .blog {
        padding: 0 24px 44px;
    }

    .blog-head {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 18px;
    }

    .blog-head h2 {
        font-size: 26px;
    }

    .cta-final {
        padding: 0 24px 48px;
    }

    .cta-final h2 {
        font-size: 28px;
    }

    .cta-final p {
        font-size: 14px;
    }

    .cta-final .btn-grad {
        display: block;
        border-radius: 999px;
        padding: 16px 24px;
        font-size: 15px;
    }
}


/* --- Override específico da home ---
   O <body> carrega a classe da página (sincronizada pelo JS na troca de
   <main>). Aqui a faixa de foto arredonda só embaixo, porque no mobile ela
   forma um cartão único com a .nr1-strip logo acima. */
@media (max-width: 1080px) {
    body.home .photo-band .img-veil {
        border-radius: 0 0 16px 16px;
    }
}


/* --- Mobile: sem a bola terracota sólida ---
   O acento sólido (.page-hero::after nas internas, .who::after na home)
   sangra pela borda esquerda com z-index 1, ou seja, na frente do
   conteúdo. No desktop ele passa ao lado do texto; no mobile, com a
   coluna estreita, cai sobre ele. Some abaixo do breakpoint.
   Os círculos suaves de fundo (::before, translúcidos e atrás do
   conteúdo) continuam. */
@media (max-width: 1080px) {

    .page-hero::after,
    .who::after {
        display: none;
    }
}