/* ===================================
    Marcelo Caetano — overrides (Trend Pro)
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Antonio:wght@100..700&display=swap');
/* variable */
:root {     
    --base-color: #185cd9;
    --base-color-alt: #161B87;
    --medium-gray:#838383;
    --light-gray: #cbcbcb;
    --alt-font: 'Inter', sans-serif;
    --primary-font: 'Inter', sans-serif;
    /* Hero nome: Antonio — peso máximo no GF é 700 (variável 100–700) */
    --hero-name-font: 'Antonio', 'Inter', system-ui, sans-serif;
}

.alt-font {
    font-family: var(--alt-font);
}

/* custom cursor */
@media (hover: hover) and (pointer: fine) {
    .custom-cursor .circle-cursor-outer {
        border: 1px solid transparent;
        background: var(--base-color);
    }
    .custom-cursor .circle-cursor-inner {
        background: var(--black);
    }
    .custom-cursor .circle-cursor-inner.cursor-link-hover {
        background-color: var(--black);
        width: 10px;
        height: 10px;
        margin-left: -5px;
        margin-top: -5px;

    }
}
html {
    overflow-x: hidden;
}
body {
    font-size: 18px;
    line-height: 34px;
    overflow-x: hidden;
}

/* Fundo padrão do site (linhas verticais), como no frontend de referência */
body.background-position-center-top {
    background-image: url("../images/vertical-line-bg-small-medium-gray.svg");
}

/*
 * Seções com .bg-white: o branco opaco cobre o fundo do body — as linhas somem só nessa faixa.
 * Repete a mesma textura do body aqui (não “sobrescreve” o CSS do body; devolve o padrão visível).
 */
.secao-imagem-palavras.bg-white {
    background-image: url("../images/vertical-line-bg-small-medium-gray.svg");
    background-position: center top;
    background-repeat: repeat;
}

/* -------------------------------------------------------
 * Blocos ACF — overrides pontuais
 * ----------------------------------------------------- */

/* Overlay do marquee: não estourar a largura do bloco */
.secao-imagem-palavras__overlay {
    max-width: 100%;
}

/* Fundo da seção branco: palavras brancas com sombra leve para ler sobre a imagem */
.secao-imagem-palavras__marquee-text--fundo-branco {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Escape full-width dentro do editor, quando necessário */
.secao-imagem-palavras-block {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Seção Números: não herdar estilos globais de UL sem classe do conteúdo. */
.secao-numeros ul:not([class]):not(.no-bullets),
.secao-numeros-block ul:not([class]):not(.no-bullets) {
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none !important;
}

.secao-numeros ul:not([class]):not(.no-bullets) li,
.secao-numeros-block ul:not([class]):not(.no-bullets) li {
    margin-bottom: 0;
    list-style: none !important;
}

/*
 * trendpro.css força color: --medium-gray !important em li de listas do conteúdo;
 * nesta seção (fundo preto) o texto deve poder ser branco / herdado do contexto.
 */
.entry-content .secao-numeros .wp-block-list ul li,
.entry-content .secao-numeros ul.wp-block-list li,
.entry-content .secao-numeros .wp-block-post-content .wp-block-list ul li,
.entry-content .secao-numeros ul:not([class]):not(.no-bullets) li,
.wp-block-post-content .secao-numeros ul:not([class]):not(.no-bullets) li,
.wp-block-group .secao-numeros ul:not([class]):not(.no-bullets) li,
.wp-block-column .secao-numeros ul:not([class]):not(.no-bullets) li,
.entry-content .secao-numeros-block .wp-block-list ul li,
.entry-content .secao-numeros-block ul.wp-block-list li,
.entry-content .secao-numeros-block .wp-block-post-content .wp-block-list ul li,
.entry-content .secao-numeros-block ul:not([class]):not(.no-bullets) li,
.wp-block-post-content .secao-numeros-block ul:not([class]):not(.no-bullets) li,
.wp-block-group .secao-numeros-block ul:not([class]):not(.no-bullets) li,
.wp-block-column .secao-numeros-block ul:not([class]):not(.no-bullets) li {
    color: var(--white) !important;
}

/* Clientes (logos): evitar distorção quando classes de altura são usadas */
.secao-logos-grade .clients-style-06 .client-box img,
.secao-logos-grade-block .clients-style-06 .client-box img,
.secao-galeria-clientes .clients-style-06 .client-box img,
.secao-galeria-clientes-block .clients-style-06 .client-box img {
    width: auto !important;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Galeria de clientes — fundo claro: logos sem filtro invert (use PNGs escuros/coloridos) */
.secao-galeria-clientes.bg-white .secao-galeria-clientes__logo--light-bg,
.secao-galeria-clientes-block.bg-white .secao-galeria-clientes__logo--light-bg {
    filter: none;
}

/* Formação acadêmica — retrato (fluxo normal na coluna, sem outside-box) */
.secao-formacao-academica .secao-formacao-academica__retrato {
    position: relative;
}
.secao-formacao-academica .secao-formacao-academica__img-vertical,
.secao-formacao-academica-block .secao-formacao-academica__img-vertical {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(65vh, 520px);
    object-fit: contain;
}

/* Formação acadêmica — galeria do rodapé: mais espaço entre linhas no desktop (2 colunas) */
@media (min-width: 992px) {
    .secao-formacao-academica .secao-formacao-academica__galeria,
    .secao-formacao-academica-block .secao-formacao-academica__galeria {
        row-gap: 2.5rem;
    }
}

/* Formação acadêmica — galeria do rodapé (recorte WP caetano_formacao_rodape + limite visual) */
.secao-formacao-academica .secao-formacao-academica__logo-rodape,
.secao-formacao-academica-block .secao-formacao-academica__logo-rodape {
    width: auto !important;
    max-width: 180px;
    max-height: 50px;
    height: auto;
    object-fit: contain;
}

/* CTA — modo encaixe (colunas / grupo) + links no WYSIWYG conforme contraste */
.secao-cta-botao--encaixe,
.secao-cta-linha--encaixe {
    max-width: 100%;
}
.secao-cta-botao--tema-escuro .secao-cta-botao__texto a,
.secao-cta-linha--tema-escuro .secao-cta-linha__texto a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.secao-cta-botao--tema-escuro .secao-cta-botao__texto a:hover,
.secao-cta-linha--tema-escuro .secao-cta-linha__texto a:hover {
    opacity: 0.88;
}
.secao-cta-botao--tema-claro .secao-cta-botao__texto a,
.secao-cta-linha--tema-claro .secao-cta-linha__texto a {
    color: var(--base-color);
}
.secao-cta-botao--tema-claro .secao-cta-botao__texto a:hover,
.secao-cta-linha--tema-claro .secao-cta-linha__texto a:hover {
    opacity: 0.88;
}

/*
 * Home com hero no topo (body.home-hero-top): sobre o vídeo, menu e hamburger claros; ao rolar,
 * sticky-active — fundo claro e links escuros (igual demo elder-care).
 * Home sem hero no topo usa o mesmo padrão de páginas internas (menu escuro desde o início).
 */
body.home-hero-top header:not(.sticky) .navbar.header-light[data-header-hover="light"] .navbar-nav .nav-link {
    color: var(--white);
}
body.home-hero-top header:not(.sticky) .navbar.header-light[data-header-hover="light"] .navbar-nav .nav-item:hover .nav-link,
body.home-hero-top header:not(.sticky) .navbar.header-light[data-header-hover="light"] .navbar-nav .nav-item.active .nav-link {
    color: var(--white);
    opacity: 0.65;
}
body.home-hero-top header:not(.sticky) .navbar[data-header-hover="light"] .navbar-toggler-line {
    background-color: var(--white);
}

/* Nome em texto no lugar do logo: mesma lógica de cor do menu (claro no hero, escuro após rolar / internas). */
body.home-hero-top header:not(.sticky) .navbar-brand.caetano-navbar-brand-text {
    color: var(--white);
}
body.home-hero-top header:not(.sticky) .navbar-brand.caetano-navbar-brand-text:hover {
    color: var(--white);
    opacity: 0.85;
}
body.home-hero-top header.sticky.sticky-active .navbar-brand.caetano-navbar-brand-text,
body:not(.home-hero-top) .navbar-brand.caetano-navbar-brand-text {
    color: var(--dark-gray);
}
body.home-hero-top header.sticky.sticky-active .navbar-brand.caetano-navbar-brand-text:hover,
body:not(.home-hero-top) .navbar-brand.caetano-navbar-brand-text:hover {
    color: var(--medium-gray);
}

@media (min-width: 992px) {
    body:not(.home-hero-top) header .navbar-brand .default-logo {
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
    }
    body:not(.home-hero-top) header .navbar-brand .alt-logo {
        visibility: visible !important;
        opacity: 1 !important;
        width: 160px;
        max-width: 100%;
    }
}
header .navbar {
    z-index: 100;
}
header .navbar-brand .default-logo {
    width: 160px;
    max-width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}
header .navbar-brand .alt-logo {
    max-width: 160px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}
@media (min-width: 992px) {
    header.sticky.sticky-active .navbar-brand .alt-logo {
        width: 160px;
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    header .navbar-brand {
        font-size: 1rem;
        line-height: 1;
    }
    header .navbar-brand .default-logo,
    header .navbar-brand .alt-logo {
        display: block;
        box-sizing: content-box;
    }
    body:not(.home-hero-top) header .navbar-brand .default-logo,
    body:not(.home-hero-top) header.sticky.sticky-active .navbar-brand .default-logo {
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    body:not(.home-hero-top) header .navbar-brand .alt-logo,
    body:not(.home-hero-top) header.sticky.sticky-active .navbar-brand .alt-logo {
        visibility: visible !important;
        opacity: 1 !important;
        width: 140px !important;
        max-width: min(140px, 52vw) !important;
        min-width: 100px !important;
        max-height: 48px !important;
        height: auto !important;
        object-fit: contain !important;
        flex: 0 0 auto !important;
    }
    body.home-hero-top header .navbar-brand .default-logo {
        visibility: visible !important;
        opacity: 1 !important;
        width: 140px !important;
        max-width: min(140px, 52vw) !important;
        min-width: 100px !important;
        max-height: 48px !important;
        height: auto !important;
        object-fit: contain !important;
        flex: 0 0 auto !important;
    }
    body.home-hero-top header .navbar-brand .alt-logo {
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    body.home-hero-top header.sticky.sticky-active .navbar-brand .default-logo {
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    body.home-hero-top header.sticky.sticky-active .navbar-brand .alt-logo {
        visibility: visible !important;
        opacity: 1 !important;
        width: 140px !important;
        max-width: min(140px, 52vw) !important;
        min-width: 100px !important;
        max-height: 48px !important;
        height: auto !important;
        object-fit: contain !important;
        flex: 0 0 auto !important;
    }
}
.navbar .navbar-nav .nav-link {
    font-weight: 600;
    padding: 10px 25px;
    font-size: 18px;
}
.navbar .navbar-nav .nav-item:last-child .nav-link{
    padding-right: 0;
}
header .container-fluid {
    padding-left: 80px;
    padding-right: 80px;
}
/* font size */
.fs-220 {
    font-size: 13.75rem;
    line-height: 11.7rem;
}
.fs-280 {
    font-size: 17.5rem;
    line-height: 17.5rem;
}
/* margin */
.mb-50 {
    margin-bottom: 50%;
}
.small-icon li {
    margin: 0 8px;
}
/* btn */
.btn {
    font-family: var(--primary-font);
    font-weight: 800;
}

/*
 * Conteúdo do post: estilos de link (trendpro.css) não devem vencer botões Crafto nem
 * blocos Gutenberg .wp-block-button — mesmo com regras longas no meio do conteúdo.
 */
.entry-content a.btn,
.post-content a.btn,
.content a.btn,
.wp-block-media-text a.btn,
.wp-block-media-text__content a.btn,
.wp-block-list a.btn,
.wp-block-list li a.btn,
p a.btn,
.entry-content .wp-block-button .wp-block-button__link,
.post-content .wp-block-button .wp-block-button__link,
.content .wp-block-button .wp-block-button__link {
    text-decoration: none !important;
    opacity: 1 !important;
}

/* contact form-style 03 */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--black) !important; text-overflow: ellipsis; opacity:1; }
input::-moz-placeholder, textarea::-moz-placeholder { color: var(--black) !important; text-overflow: ellipsis; opacity:1; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--black) !important; text-overflow: ellipsis; opacity:1; }
input, select, textarea, .form-control, .form-select {
    color: var(--black) !important;
}
/* media query responsive */

@media (max-width: 1199px) {
    .fs-220 {
        font-size: 12.5rem;
        line-height: 12.5rem;
    }
    .fs-280 {
        font-size: 15rem;
        line-height: 15rem;
    }
}
@media (max-width: 991px) {
    body.home-hero-top .navbar.bg-transparent {
        background-color: transparent !important;
    }
    .fs-220 {
        font-size: 10rem;
        line-height: 10rem;
    } 
    .fs-280 {
        font-size: 12rem;
        line-height: 12rem;
    }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner {
        background-image: url(../../images/vertical-line-bg-small.svg) !important;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav {
        text-align: center;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav > .nav-item {
        border-bottom: 0;
        padding: 0;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav .nav-item .nav-link {
        font-size: 42px;
        line-height: 46px;
    }
}
@media (max-width: 575px) {
    .fs-220 {
        font-size: 5.625rem;
        line-height: 5.625rem;
    } 
    .fs-280 {
        font-size: 8rem;
        line-height: 8rem;
    }
}

/* blog - popular post sidebar figure custom width */
.popular-post-sidebar li figure.figure-blog-large {
    height: 100px !important;
    width: 150px !important;
}

/* gradiente caetano - imagem transparente embaixo, opaca em cima */
.gradiente-caetano {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 40%);
}

/* Hero vídeo — overlay só escurece o vídeo; .hero-stack fica sempre acima (sem texto escurecido) */
.page-title-background-video {
    position: relative;
    box-sizing: border-box;
    /* Fallback conservador: viewport clássico */
    height: 100vh !important;
    max-height: 100vh !important;
    padding-top: clamp(90px, 16vh, 140px);
    padding-bottom: 0;
    background-color: #050505;
    background-image: url('../images/marcelo_02.jpg');
    background-size: cover;
    background-position: center top;
    /* overflow-x visível: o nome é dimensionado ao container-fluid (cqw), não cortar nas bordas */
    overflow-x: visible;
    overflow-y: hidden;
}

/*
 * iOS/Android: o tamanho do "visual viewport" muda ao rolar (barra do navegador),
 * causando reflow e pequenos "saltos" principalmente em seções com altura fixa.
 * `svh` tende a ser mais estável do que `vh`/`dvh` para esse caso.
 */
@supports (height: 100svh) {
    .page-title-background-video {
        height: 100svh !important;
        max-height: 100svh !important;
        padding-top: clamp(90px, 16svh, 140px) !important;
    }

    .page-title-background-video .hero-stack {
        padding-bottom: clamp(0.75rem, 3svh, 1.75rem) !important;
    }

    .page-title-background-video .hero-inner {
        padding-bottom: clamp(3.75rem, 12svh, 9.5rem) !important;
    }

    .page-title-background-video .hero-name-wrap {
        padding-bottom: clamp(0.5rem, 2.5svh, 1.5rem) !important;
    }

    @media (max-width: 991.98px) {
        .page-title-background-video .hero-inner {
            padding-bottom: clamp(3.25rem, 26svh, 6rem) !important;
        }

        .hero-copy-row {
            margin-bottom: clamp(0.75rem, 2.5svh, 1.5rem) !important;
        }
    }

    @media (min-width: 992px) {
        .hero-name-wrap {
            padding-bottom: clamp(2.75rem, 5.5svh, 5rem) !important;
        }
    }

    @media (max-height: 720px) {
        .page-title-background-video .hero-inner {
            padding-bottom: clamp(3rem, 10svh, 7rem) !important;
        }
    }
}
.page-title-background-video .hero-media {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.page-title-background-video .hero-media .html-video {
    z-index: 0;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    left: 0;
    top: 50%;
    object-fit: cover;
}
/* Overlay local (não usar .opacity-extra-medium global aqui — evita empilhamento estranho) */
.page-title-background-video .hero-video-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
}
@media (max-width: 991.98px) {
    .page-title-background-video .hero-video-overlay {
        opacity: 0.58;
    }
}
.page-title-background-video .hero-stack {
    position: relative;
    z-index: 10;
    isolation: isolate;
    min-height: 0;
    transform: translateZ(0);
    height: 100%;
    width: 100%;
    max-width: 100%;
    padding-bottom: clamp(0.75rem, 3vh, 1.75rem); /* reserva para o nome fixo */
}
.page-title-background-video .hero-inner {
    position: relative;
    min-height: 0;
    padding-bottom: clamp(3.75rem, 12vh, 9.5rem); /* evita sobreposição com o nome */
}
/* Mobile/tablet: bloco de copy no terço inferior (ref. hero editorial), não centrado na viewport */
@media (max-width: 991.98px) {
    .page-title-background-video .hero-inner {
        justify-content: flex-end;
        /* reserva para o nome gigante + scaleY(1.14) no .hero-name-ml11 .text-wrapper */
        padding-bottom: clamp(6.25rem, 26vh, 13rem);
    }
    /*
     * flex-grow-1 na row esticava a linha e o espaço extra ia ENTRE as duas colunas empilhadas
     * (inspector mostrava “margem” enorme). No mobile a row só envolve o conteúdo.
     */
    .hero-copy-row {
        flex-grow: 0 !important;
        align-content: flex-end;
        row-gap: 0.35rem;
        margin-bottom: clamp(0.75rem, 2.5vh, 1.5rem);
    }
}
.hero-name-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    flex-shrink: 0;
    padding-inline: clamp(1rem, 4vw, 4rem);
    padding-bottom: clamp(0.5rem, 2.5vh, 1.5rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    container-type: inline-size;
}
@media (max-width: 991.98px) {
    .hero-name-wrap {
        /* acima da home indicator + barra de abas / chrome inferior (DevTools não simula) */
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + max(3.25rem, 13vmin));
    }
}
.hero-name-animate {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Copy do hero: estado inicial — anime.js em caetano.js (sequência: tagline → parágrafo → nome) */
@media (prefers-reduced-motion: no-preference) {
    .page-title-background-video .hero-headline,
    .page-title-background-video .hero-lead {
        opacity: 0;
        transform: translate3d(0, 0.5rem, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-title-background-video .hero-headline,
    .page-title-background-video .hero-lead {
        opacity: 1;
        transform: none;
    }
}
.hero-headline {
    font-size: clamp(1.75rem, 4.2vw, 3.25rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 500;
}
/* Nome “Marcelo Caetano” — ml11 (linha + letras), js/caetano.js; scaleY no .text-wrapper (não no h2) */
.hero-name-ml11 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.04em;
    padding-right: 0.05em;
    padding-bottom: 0.08em;
    transform: scaleY(1.14);
    transform-origin: bottom left;
}
.hero-name-ml11 .letters {
    display: inline-block;
    white-space: nowrap;
}
.hero-name-animate {
    /* Reserva mínima para evitar micro "saltos" no primeiro ciclo */
    min-height: 1em;
}
@media (prefers-reduced-motion: no-preference) {
    .hero-name-ml11 .line {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: 0 50%;
    }
    .hero-name-ml11 .letter {
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-name-ml11 .line {
        display: none;
    }
}
.hero-name-ml11 .line {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #fff;
    pointer-events: none;
}
.hero-name-ml11 .letter {
    display: inline-block;
    line-height: inherit;
    vertical-align: baseline;
}
.hero-lead {
    text-align: justify;
    text-wrap: balance;
}
@media (max-width: 991px) {
    .hero-headline {
        font-size: clamp(1.35rem, 4.8vw, 1.85rem);
        line-height: 1.25;
        font-weight: 600;
        max-width: min(100%, 28ch);
    }
    .hero-lead {
        text-align: left;
        text-wrap: pretty;
        max-width: 36rem;
        line-height: 1.55;
    }
}
@media (max-width: 575px) {
    .hero-lead {
        text-align: left;
    }
}

/*
 * Nome: não ultrapassa o container-fluid (max-width: 100% + min-width: 0).
 * Tamanho: cqw = % da largura do .hero-name-wrap (o próprio container-fluid).
 * Fallback: vw (viewport), um pouco menor para não estourar.
 */
.hero-name-giant {
    font-family: var(--hero-name-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 0.82;
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    font-size: clamp(2rem, 8.5vw, 170px);
    -webkit-font-smoothing: antialiased;
}
.hero-name-wrap .hero-name-giant {
    /* Base (desktop-first fallback); mobile sobrescreve abaixo */
    font-size: clamp(2.25rem, 10.5cqw, 220px);
}
/*
 * Mobile: maior possível numa linha, sem estourar a largura útil do .hero-name-wrap
 * (cqi = content box; divisor ~8.35 compensa "MARCELO CAETANO" + letter-spacing em Antonio)
 */
@media (max-width: 991.98px) {
    .hero-name-wrap .hero-name-giant {
        font-size: clamp(2.85rem, 12.5cqw, 280px);
    }
    @supports (font-size: 1cqi) {
        .hero-name-wrap .hero-name-giant {
            font-size: clamp(2.85rem, calc(100cqi / 8.35), 280px);
        }
    }
}
@media (min-width: 992px) {
    .hero-name-wrap {
        /* Sem padding-inline extra no desktop: largura útil (cqi) maior + nome maior */
        padding-inline: 0;
        /* Mais respiro acima da borda inferior da viewport */
        padding-bottom: clamp(2.75rem, 5.5vh, 5rem);
    }
    .hero-name-giant {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        color: rgba(255, 255, 255, 0.9);
    }
    .hero-name-ml11 .text-wrapper {
        transform-origin: bottom center;
    }
    /* Nome maior, uma linha; teto maior agora que padding-inline não reduz cqi */
    .hero-name-wrap .hero-name-giant {
        font-size: clamp(3rem, 13cqw, 360px);
    }
    @supports (font-size: 1cqi) {
        .hero-name-wrap .hero-name-giant {
            font-size: clamp(3rem, calc(100cqi / 8.35), 360px);
        }
    }
}
@media (max-height: 720px) {
    .page-title-background-video {
        padding-top: 76px;
    }
    .page-title-background-video .hero-inner {
        padding-bottom: clamp(3rem, 10vh, 7rem);
    }
}
/* Altura baixa só no desktop: nome menor mas proporcional ao container */
@media (max-height: 720px) and (min-width: 992px) {
    .hero-name-wrap .hero-name-giant {
        font-size: clamp(2.25rem, 10cqw, 220px);
    }
    @supports (font-size: 1cqi) {
        .hero-name-wrap .hero-name-giant {
            font-size: clamp(2.25rem, calc(100cqi / 8.45), 220px);
        }
    }
}
/* Paisagem no mobile: mesma lógica one-line, teto um pouco menor */
@media (max-height: 720px) and (max-width: 991.98px) {
    .hero-name-wrap .hero-name-giant {
        font-size: clamp(2.5rem, 11.5cqw, 240px);
    }
    @supports (font-size: 1cqi) {
        .hero-name-wrap .hero-name-giant {
            font-size: clamp(2.5rem, calc(100cqi / 8.45), 240px);
        }
    }
}
@media (max-height: 720px) and (max-width: 991.98px) {
    .page-title-background-video .hero-inner {
        padding-bottom: clamp(5.5rem, 22vh, 11rem);
    }
}

.scroll-anchor {
    scroll-margin-top: 100px;
}
#newsletter.scroll-anchor {
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Contato (Form) — seção com imagem full background + card */
.contato-hero {
    position: relative;
    /* Acima do CTA flutuante (z-index 40) para o formulário não ficar por baixo do botão */
    z-index: 50;
    background-image: url('../images/marcelo_02.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
}
.contato-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.contato-hero .container {
    z-index: 1;
}
.contato-hero-title {
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.contato-hero-card {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.contato-hero-card .b24-form,
.contato-hero-card .b24-form * {
    box-sizing: border-box;
}
.contato-hero-card .b24-form-wrapper,
.contato-hero-card .b24-form-content,
.contato-hero-card .b24-form-content form {
    width: 100%;
}
.contato-hero-card .b24-form-padding-side {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.contato-hero-card .b24-form-field {
    width: 100%;
    margin-bottom: 18px;
}
.contato-hero-card .b24-form-control-container {
    width: 100%;
}
.contato-hero-card .b24-form-control {
    width: 100%;
    border-radius: 4px;
}
.contato-hero-card .b24-form-btn-container {
    margin-top: 10px;
}
.contato-hero-card .b24-form-btn {
    width: 100%;
    border-radius: 999px;
    font-weight: 700;
}

/* Temas — cards horizontais com capa 16:9 */
.tema-card-temas {
    gap: 35px;
}
.tema-card-title {
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.tema-card-desc {
    color: var(--medium-gray);
    margin-bottom: 0;
}
.tema-card-media {
    width: 320px;
    aspect-ratio: 16 / 9;
}
.tema-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 767.98px) {
    .tema-card-temas {
        gap: 22px;
    }

    .tema-card-media {
        width: 100%;
    }

    .tema-card-title {
        font-size: 22px;
    }
}
/* Landing page — lp.html (estático) + bloco ACF «Hero LP» (fundo via inline style) */
.page-lp .lp-hero,
.secao-hero-lp.lp-hero {
    min-height: min(100vh, 920px);
}
.page-lp .lp-hero-bg,
.secao-hero-lp .lp-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}
.page-lp .lp-hero-overlay,
.secao-hero-lp .lp-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    pointer-events: none;
}

/* LP + bloco Intro — label + título + descrição (referência: lp.html .lp-section-head) */
.page-lp .lp-section-head-label,
.secao-intro .lp-section-head-label {
    display: inline-block;
    padding: 8px 20px;
    margin-bottom: 15px;
    border-radius: 100px;
    background-color: var(--base-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--white);
}
.page-lp .lp-section-head-title,
.secao-intro .lp-section-head-title {
    margin-top: 0;
}
.page-lp .lp-section-head-desc,
.secao-intro .lp-section-head-desc {
    max-width: 42em;
    line-height: 1.65;
}

/* Centro: a descrição tem max-width — sem mx-auto a caixa fica à esquerda e parece desalinhada ao título */
.secao-intro--centro .lp-section-head-desc {
    margin-left: auto;
    margin-right: auto;
}

/* LP — galeria carrossel: caixa fixa + crop (estático lp.html + bloco ACF) */
.page-lp .lp-galeria-carousel .lp-galeria-carousel-img,
.secao-galeria-carousel-lp .lp-galeria-carousel-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    height: auto;
}

/*
 * Menus com dropdown — rodapé: .dropup abre o 1º nível para cima (borda inferior da página).
 * O main.js aplica .open no hover em todo .dropdown; o CSS cobre footer onde o base não cobre.
 */
@media (min-width: 992px) {
    footer .footer-navbar > .nav-item.dropdown.simple-dropdown {
        position: relative;
    }
    footer .footer-navbar .dropdown.open > .dropdown-menu,
    footer .footer-navbar .dropdown.show > .dropdown-menu {
        display: block !important;
        -webkit-animation: show-animation 0.5s;
        animation: show-animation 0.5s;
    }
    /* Primeiro nível: acima do link (dropup), alinhado ao canto inferior do item */
    footer .footer-navbar .dropup.simple-dropdown > .dropdown-menu {
        position: absolute;
        left: 0;
        right: auto;
        top: auto !important;
        bottom: 100% !important;
        transform: none !important;
        width: 245px;
        padding: 35px 0;
        margin-top: 0;
        margin-bottom: 0.125rem;
        border-radius: 0;
        box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.1);
        z-index: 1050;
    }
    footer .footer-navbar .simple-dropdown .dropdown-menu li {
        padding: 0 45px 0 40px;
    }
    footer .footer-navbar .simple-dropdown .dropdown-menu li a {
        display: block;
        padding-bottom: 12px;
        color: var(--dark-gray);
        font-size: 16px;
        line-height: normal;
        white-space: normal;
    }
    footer .footer-navbar .simple-dropdown .dropdown-menu .dropdown {
        position: relative;
    }
    footer .footer-navbar .simple-dropdown .dropdown-menu .dropdown-menu {
        display: none;
        position: absolute;
        left: calc(100% + 1px);
        top: -35px;
        width: 245px;
        padding: 35px 0;
        box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.1);
    }
    footer .footer-navbar .simple-dropdown .dropdown-menu .dropdown.open > .dropdown-menu {
        display: block;
    }
}

/*
 * Mega menu mobile (full-screen): lista plana — todos os links visíveis, hierarquia só por indentação.
 * O JS em caetano.js remove data-bs-toggle / dropdown-toggle e o click do main.js no overlay.
 */
@media (max-width: 991px) {
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav > .nav-item {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        text-align: center;
        padding: 6px 0 14px;
    }
    /* Todos os <a> do painel: link normal, sem “botão” de dropdown */
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav a.nav-link,
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav .dropdown-menu a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 10px 16px !important;
        float: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center !important;
        justify-content: unset !important;
        align-items: unset !important;
        font-size: clamp(22px, 5.5vw, 36px) !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: var(--white) !important;
        text-decoration: none !important;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav .dropdown-menu a {
        font-size: clamp(18px, 4.5vw, 28px) !important;
        font-weight: 500 !important;
        opacity: 0.92;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav a.nav-link::after,
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav .dropdown-menu a::after {
        display: none !important;
        content: none !important;
    }
    /* Submenus sempre visíveis */
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav ul.dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        float: none !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 6px !important;
        padding: 8px 8px 12px 16px !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        list-style: none !important;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav .dropdown-menu ul.dropdown-menu {
        margin-top: 8px !important;
        padding-left: 14px !important;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav .dropdown-menu li {
        display: block !important;
        width: 100% !important;
        padding: 2px 0 !important;
    }
    /* Rodapé: coluna (desktop continua com dropdown hover) */
    footer .footer-navbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        list-style: none !important;
    }
    footer .footer-navbar > li.nav-item {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    footer .footer-navbar .nav-link {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
    }
}

/* Faixa mídia + texto: no mobile, assinatura alinha à esquerda (evita faixa estreita com text-end + padding).
   Ícone menor + padding proporcional para não espremer o nome/cargo. */
@media (max-width: 767.98px) {
    .secao-faixa-midia-texto__quote-decor {
        width: 88px !important;
        height: auto;
    }
    .secao-faixa-midia-texto__assinatura-com-aspas {
        padding-right: 5.75rem;
        box-sizing: border-box;
    }
}

/*
 * Heroes: ficam acima do CTA flutuante (stacking). O header usa z-index 100 no .navbar.
 */
.page-title-background-video,
.page-lp .lp-hero,
.secao-hero-lp.lp-hero {
    z-index: 50;
}

/* CTA flutuante (Opções → Contato) — acima do restante do fluxo, atrás da hero / hero-lp e do menu */
.caetano-floating-cta {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 40;
    max-width: calc(100vw - 32px);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
@media (max-width: 991px) {
    .caetano-floating-cta {
        bottom: max(88px, env(safe-area-inset-bottom));
    }
}

/* Hover: Crafto usa .btn-base-color com fundo transparente no hover — ruim sobre fundos claros/variados */
.caetano-floating-cta.btn.btn-base-color:hover,
.caetano-floating-cta.btn.btn-base-color:active,
.caetano-floating-cta.btn.btn-base-color:focus-visible {
    background-color: var(--white);
    color: var(--base-color);
    border-color: var(--base-color);
}

/* Home e páginas internas: conteúdo em .container; blocos full-width do Gutenberg escapam à largura da viewport */
.home-gutenberg-inner .alignfull,
.page-gutenberg-inner .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.home-gutenberg-inner .alignwide,
.page-gutenberg-inner .alignwide {
    max-width: min(100%, 1200px);
    margin-left: auto;
    margin-right: auto;
}