/* Paginas de servico (redesign 2026)
   --sv-bg / --sv-fg vem do template; --menu vem do header.
   ========================================================= */

@font-face {
    font-family: textMedium500;
    src: url("./fonts/Montserrat-Medium.ttf") format("truetype");
    font-display: swap;
}

body.abw-servico-page .menu li a,
body.abw-servico-page .menu li.current_page_item a,
body.abw-servico-page .menu li.current-menu-item a {
    color: var(--menu, #1E9186);
}

body.abw-servico-page {
    background-color: #FFFAF7;
}

body.abw-servico-page .main-menu-wrapper .menu li.nav-cta a {
    background-color: var(--cta, #1E9186);
}

body.abw-servico-page .main-menu-wrapper .menu li.nav-cta a:hover {
    background-color: #FFFAF7;
    color: var(--cta, #1E9186);
}

body.abw-servico-page .menu li.nav-cta a {
    color: #FFFAF7;
}

body.abw-servico-page .menu li.nav-cta a:hover {
    color: var(--cta, #F63C3B);
}

.abw-sv-hero {
    background-color: var(--sv-bg, #B9E3E3);
    padding-top: 56px;
    padding-bottom: 64px;
}

.abw-sv-back {
    display: inline-block;
    margin-bottom: 28px;
    font-family: text;
    font-size: 16px;
    line-height: 1.2;
    color: var(--sv-fg, #1E9186);
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.abw-sv-back:hover,
.abw-sv-back:focus {
    color: var(--sv-fg, #1E9186);
    text-decoration: none;
    opacity: 0.7;
}

.abw-sv-title {
    margin: 0;
    font-family: textMedium;
    font-size: 64px;
    line-height: 1.2;
    color: var(--sv-fg, #1E9186);
}

.abw-sv-sub {
    max-width: 822px;
    margin: 24px 0 0 0;
    font-family: text;
    font-size: 20px;
    line-height: 1.4;
    color: #2B2B2B;
}

.abw-sv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 119px 0 0 0;
    padding: 0;
    list-style: none;
}

.abw-sv-tags li {
    padding: 10px;
    background-color: #FFFFFF;
    font-family: text;
    font-size: 20px;
    line-height: 1.4;
    color: var(--cta, var(--sv-fg, #1E9186));
}

.abw-sv-intro {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
}

.abw-sv-reveal {
    margin: 0;
    font-family: text;
    font-size: 48px;
    line-height: 1.2;
    color: var(--sv-content-fg, var(--sv-fg, #1E9186));
}

.abw-reveal-w {
    opacity: 0.2;
    transition: opacity 0.12s linear;
}

.abw-sv-cols {
    display: flex;
    gap: 117px;
    margin-top: 80px;
}

.abw-sv-cols p {
    flex: 1 1 0;
    margin: 0;
    font-family: text;
    font-size: 20px;
    line-height: 1.4;
    color: #2B2B2B;
}

@media only screen and (max-width: 1000px) {
    .abw-sv-title {
        font-size: 44px;
    }

    .abw-sv-tags {
        margin-top: 60px;
    }

    .abw-sv-reveal {
        font-size: 34px;
    }

    .abw-sv-cols {
        gap: 40px;
    }
}

@media only screen and (max-width: 768px) {
    .abw-sv-hero {
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .abw-sv-title {
        font-size: 34px;
    }

    .abw-sv-sub,
    .abw-sv-tags li,
    .abw-sv-cols p {
        font-size: 17px;
    }

    .abw-sv-tags {
        margin-top: 40px;
        gap: 10px;
    }

    .abw-sv-intro {
        padding: 60px 0;
    }

    .abw-sv-reveal {
        font-size: 26px;
    }

    .abw-sv-cols {
        display: block;
    }

    .abw-sv-cols p + p {
        margin-top: 24px;
    }
}

/* --- Paginas de servico: blocos de conteudo -------------------------- */

.abw-sv-eyebrow {
    margin: 0 0 12px 0;
    font-family: text;
    font-size: 19px;
    line-height: 1.2;
    color: var(--sv-content-fg, var(--sv-fg, #1E9186));
}

.abw-sv-h2 {
    margin: 0;
    font-family: text;
    font-size: 48px;
    line-height: 1.2;
    color: #2B2B2B;
}

.abw-sv-centro {
    margin: 0 0 48px 0;
    font-family: textMedium;
    font-size: 50px;
    line-height: 1.2;
    color: #2B2B2B;
    text-align: center;
}

.abw-sv-centro .red {
    color: #F63C3B;
}

/* foto full-bleed */
.abw-sv-foto {
    margin: 0;
    width: 100%;
    aspect-ratio: 1440 / 680;
    overflow: hidden;
}

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

/* paragrafo grande */
.abw-sv-destaque {
    padding: 120px 0;
}

.abw-sv-destaque p {
    margin: 0;
    font-family: text;
    font-size: 48px;
    line-height: 1.2;
    color: var(--sv-content-fg, var(--sv-fg, #1E9187));
}

.abw-sv-destaque strong {
    font-family: textMedium;
    font-weight: 400;
}

.abw-sv-destaque .med {
    font-family: textMedium500;
}

/* quem servimos */
.abw-sv-perfis {
    padding-top: 120px;
}

.abw-sv-perfis-lista {
    margin-top: 64px;
}

.abw-sv-perfil {
    padding: 120px 0;
}

.abw-sv-perfil .container {
    display: flex;
    gap: 117px;
}

.abw-sv-perfil h3 {
    flex: 0 0 560px;
    margin: 0;
    font-family: textMedium500;
    font-size: 48px;
    line-height: 1.2;
    color: var(--sv-content-dark, var(--sv-fg, #1E9186));
}

.abw-sv-perfil p {
    flex: 1 1 auto;
    margin: 0;
    font-family: text;
    font-size: 16px;
    line-height: 1.4;
    color: #2B2B2B;
    opacity: 0.6;
}

/* citacao com barra lateral */
.abw-sv-citacao {
    padding: 120px 0 0 0;
}

.abw-sv-citacao blockquote {
    margin: 48px 0 0 0;
    padding: 0 0 0 24px;
    border-left: 2px solid var(--sv-content-fg, var(--sv-fg, #1E9187));
    font-family: textMedium500;
    font-size: 32px;
    line-height: 1.2;
    color: var(--sv-content-fg, var(--sv-fg, #1E9187));
}

.abw-sv-citacao blockquote strong {
    font-family: textMedium;
    font-weight: 400;
}

/* cartoes */
.abw-sv-cartoes {
    padding: 120px 0;
}

.abw-sv-grelha {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 64px;
}

.abw-sv-cartao {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 387px;
    padding: 32px;
    border: 1px solid #35BEB2;
}

.abw-sv-cartao h3 {
    margin: 0;
    font-family: textMedium500;
    font-size: 36px;
    line-height: 1.2;
    color: var(--sv-content-dark, var(--sv-fg, #1E9187));
}

.abw-sv-cartao p {
    margin: 48px 0 0 0;
    font-family: text;
    font-size: 16px;
    line-height: 1.4;
    color: #807E7D;
}

.abw-servico--content-strategy-geo-ai-visibility .abw-sv-cartao {
    border-color: #F0E5C7;
}

/* faixa de cor com xadrez */
.abw-sv-faixa-texto {
    padding: 180px 0;
    background-color: var(--sv-bg, #B9E3E3);
}

.abw-sv-faixa-texto p {
    margin: 0;
    font-family: text;
    font-size: 48px;
    line-height: 1.2;
    color: var(--sv-fg, #1E9187);
    text-align: center;
}

.abw-sv-faixa-texto strong {
    font-family: textMedium;
    font-weight: 400;
}

.abw-sv-xadrez-linha {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
}

.abw-sv-xadrez-linha span {
    display: block;
    aspect-ratio: 1;
}

/* cases */
.abw-sv-cases {
    padding: 120px 0;
}

.abw-sv-cases-grelha {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
}

.abw-sv-case {
    color: #2B2B2B;
    text-decoration: none;
}

.abw-sv-case:hover,
.abw-sv-case:focus {
    color: #2B2B2B;
    text-decoration: none;
}

.abw-sv-case figure {
    margin: 0 0 20px 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.abw-sv-case figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.abw-sv-case:hover figure img {
    transform: scale(1.03);
}

.abw-sv-case strong {
    display: block;
    margin-bottom: 6px;
    font-family: text;
    font-size: 16px;
    line-height: 1.4;
}

.abw-sv-case h3 {
    margin: 0;
    font-family: text;
    font-size: 36px;
    line-height: 1.2;
}

/* explorar os outros servicos */
.abw-sv-outros {
    padding: 80px 0 120px;
}

.abw-sv-outros .abw-sv-centro {
    margin-bottom: 32px;
}

body:has(.abw-servico--content-strategy-geo-ai-visibility) .home-logo-container figure a {
    position: relative;
    display: inline-block;
}

body:has(.abw-servico--content-strategy-geo-ai-visibility) .home-logo-container .home-logo {
    opacity: 0;
}

body:has(.abw-servico--content-strategy-geo-ai-visibility) .home-logo-container figure a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #BE9205;
    -webkit-mask: url('../img/abw/logosquare_red.svg') center / contain no-repeat;
    mask: url('../img/abw/logosquare_red.svg') center / contain no-repeat;
    pointer-events: none;
}

.abw-sv-formas {
    position: relative;
    width: 100%;
    max-width: 1103px;
    margin: 0 auto;
    aspect-ratio: 1103 / 451;
    container-type: inline-size;
}

.abw-sv-forma {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    text-decoration: none;
}

.abw-sv-forma:hover,
.abw-sv-forma:focus {
    text-decoration: none;
    opacity: 1;
}

.abw-sv-forma-sq {
    position: absolute;
    display: block;
    pointer-events: auto;
    transform-origin: 0 0;
    background-color: var(--f-bg);
    transition: background-color 0.35s ease;
    translate: var(--pointer-x, 0px) var(--pointer-y, 0px);
}

.abw-sv-forma-tx {
    position: absolute;
    display: block;
    pointer-events: auto;
    white-space: nowrap;
    font-family: textMedium;
    font-size: 2.904cqw;
    line-height: 3.310cqw;
    letter-spacing: -0.0546em;
    color: var(--f-tx);
    transition: color 0.35s ease;
    translate: var(--pointer-x, 0px) var(--pointer-y, 0px);
}

.abw-sv-forma:hover .abw-sv-forma-sq,
.abw-sv-forma:focus-visible .abw-sv-forma-sq {
    background-color: var(--f-bg-hover);
}

.abw-sv-forma:hover .abw-sv-forma-tx,
.abw-sv-forma:focus-visible .abw-sv-forma-tx {
    color: var(--f-tx-hover);
}

@media (prefers-reduced-motion: reduce) {
    .abw-sv-forma-sq,
    .abw-sv-forma-tx,
    .abw-exp-square,
    .abw-exp-label {
        transition-duration: 0.01ms;
    }
}

.abw-sv-forma.is-esq .abw-sv-forma-sq {
    left: -0.036cqw;
    top: 14.796cqw;
    width: 28.549cqw;
    height: 28.549cqw;
    transform: rotate(-28.69deg);
}

.abw-sv-forma.is-esq .abw-sv-forma-tx {
    left: 11.694cqw;
    top: 15.229cqw;
}

.abw-sv-forma.is-meio .abw-sv-forma-sq {
    left: 32.838cqw;
    top: 9.102cqw;
    width: 26.620cqw;
    height: 26.620cqw;
    transform: rotate(-7.9deg);
}

.abw-sv-forma.is-meio .abw-sv-forma-tx {
    left: 41.940cqw;
    top: 13.507cqw;
}

.abw-servico--content-strategy-geo-ai-visibility .abw-sv-forma.is-meio .abw-sv-forma-sq {
    left: 39.88cqw;
    top: 0.8cqw;
    width: 31.05cqw;
    height: 31.05cqw;
    transform: rotate(17.27deg);
}

.abw-servico--content-strategy-geo-ai-visibility .abw-sv-forma.is-meio .abw-sv-forma-tx {
    left: 39.18cqw;
    top: 14.03cqw;
}

.abw-servico--content-strategy-geo-ai-visibility .abw-sv-forma.is-meio {
    z-index: 2;
}

.abw-servico--content-strategy-geo-ai-visibility .abw-sv-forma.is-esq {
    z-index: 3;
}

.abw-servico--content-strategy-geo-ai-visibility .abw-sv-forma.is-dir {
    z-index: 1;
}

.abw-sv-forma.is-dir .abw-sv-forma-sq {
    left: 59.075cqw;
    top: 18.568cqw;
    width: 29.012cqw;
    height: 29.012cqw;
    transform: rotate(-39.79deg);
}

.abw-sv-forma.is-dir .abw-sv-forma-tx {
    left: 68.087cqw;
    top: 16.229cqw;
}

/* Os títulos ES são mais longos: centrá-los no interior das formas e
   manter o texto amarelo legível na zona de sobreposição com o azul. */
.abw-servico--executive-brand-digital-presence .abw-sv-forma.is-esq .abw-sv-forma-tx,
.abw-servico--executive-brand-digital-presence .abw-sv-forma.is-meio .abw-sv-forma-tx,
.abw-servico--executive-brand-digital-presence .abw-sv-forma.is-dir .abw-sv-forma-tx {
    width: max-content;
    white-space: nowrap;
    text-align: left;
    font-size: 2.4cqw;
    line-height: 1.14;
    transform: translate(-50%, -50%);
}

.abw-servico--executive-brand-digital-presence .abw-sv-forma.is-esq .abw-sv-forma-tx {
    left: 19.3cqw;
    top: 20.6cqw;
}

.abw-servico--executive-brand-digital-presence .abw-sv-forma.is-meio {
    z-index: 2;
}

.abw-servico--executive-brand-digital-presence .abw-sv-forma.is-meio .abw-sv-forma-tx {
    left: 47.8cqw;
    top: 20.5cqw;
}

.abw-servico--executive-brand-digital-presence .abw-sv-forma.is-dir .abw-sv-forma-tx {
    left: 79.5cqw;
    top: 20.7cqw;
    font-size: 2.2cqw;
}

/* Variante PR: azul por cima do amarelo; verde fecha a composição à direita. */
.abw-servico--pr-media-influencer-relations .abw-sv-sub {
    color: #FFFAF7;
}

.abw-servico--pr-media-influencer-relations .abw-sv-tags li {
    color: #F63C3B;
}

body.abw-servico-page:has(.abw-servico--pr-media-influencer-relations) .menu li.nav-cta a {
    color: #F63C3B;
}

body.abw-servico-page:has(.abw-servico--pr-media-influencer-relations) .menu li.nav-cta a:hover,
body.abw-servico-page:has(.abw-servico--pr-media-influencer-relations) .menu li.nav-cta a:focus {
    color: #F63C3B;
    background-color: #B9E3E3;
}

.abw-servico--pr-media-influencer-relations .abw-sv-forma.is-esq { z-index: 3; }
.abw-servico--pr-media-influencer-relations .abw-sv-forma.is-dir { z-index: 2; }
.abw-servico--pr-media-influencer-relations .abw-sv-forma.is-meio { z-index: 1; }

.abw-servico--pr-media-influencer-relations .abw-sv-forma.is-esq .abw-sv-forma-sq {
    left: 8.9cqw;
    top: 0.5cqw;
    width: 29cqw;
    height: 29cqw;
    transform: rotate(17.27deg);
}

.abw-servico--pr-media-influencer-relations .abw-sv-forma.is-esq .abw-sv-forma-tx {
    left: 8.3cqw;
    top: 12cqw;
}

/* Centrar o título no quadrado rodado, deixando margem para a sobreposição verde. */
.abw-servico--pr-media-influencer-relations .abw-sv-forma.is-meio .abw-sv-forma-tx,
.abw-servico--strategic-communication-corporate-reputation .abw-sv-forma.is-meio .abw-sv-forma-tx {
    left: 47.8cqw;
    top: 20.5cqw;
    width: max-content;
    font-size: 2.2cqw;
    line-height: 1.1;
    white-space: nowrap;
    text-align: left;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1000px) {
    .abw-sv-h2,
    .abw-sv-destaque p,
    .abw-sv-faixa-texto p {
        font-size: 34px;
    }

    .abw-sv-centro {
        font-size: 36px;
    }

    .abw-sv-perfil h3 {
        flex-basis: 40%;
        font-size: 34px;
    }

    .abw-sv-perfil .container {
        gap: 40px;
    }

    .abw-sv-citacao blockquote {
        font-size: 24px;
    }

    .abw-sv-cartao h3 {
        font-size: 28px;
    }

    .abw-sv-case h3 {
        font-size: 26px;
    }
}

@media only screen and (max-width: 768px) {
    .abw-sv-destaque,
    .abw-sv-cartoes,
    .abw-sv-cases,
    .abw-sv-outros {
        padding: 60px 0;
    }

    .abw-sv-outros .abw-sv-centro {
        margin-bottom: 24px;
    }

    .abw-sv-perfis,
    .abw-sv-citacao {
        padding-top: 60px;
    }

    .abw-sv-perfil {
        padding: 48px 0;
    }

    .abw-sv-perfil .container {
        display: block;
    }

    .abw-sv-perfil h3 {
        margin-bottom: 20px;
        font-size: 26px;
    }

    .abw-sv-h2,
    .abw-sv-destaque p,
    .abw-sv-faixa-texto p {
        font-size: 24px;
    }

    .abw-sv-centro {
        margin-bottom: 32px;
        font-size: 26px;
    }

    .abw-sv-citacao blockquote {
        margin-top: 28px;
        font-size: 19px;
    }

    .abw-sv-grelha,
    .abw-sv-cases-grelha {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .abw-sv-cartao {
        min-height: 0;
    }

    .abw-sv-cartao p {
        margin-top: 24px;
    }

    .abw-sv-faixa-texto {
        padding: 80px 0;
    }

    .abw-sv-foto {
        aspect-ratio: 4 / 3;
    }
}

/* Formas decorativas da seccao de abertura (quadrados de 707px a 17.29deg) */
.abw-sv-linha {
    position: absolute;
    display: block;
    width: 707px;
    height: 707px;
    border: 1px solid var(--sv-content-fg, var(--sv-fg, #1E9186));
    transform-origin: 0 0;
    transform: rotate(17.29deg);
    pointer-events: none;
}

.abw-sv-linha.esq {
    left: -600px;
    top: -71px;
}

.abw-sv-linha.dir {
    left: calc(100% + 125px);
    top: -117px;
}

/* Formas decorativas da pagina Executive - geometria lida do Figma
   (amostragem dos tracos: arestas a 50,1 e 39,9 graus, vertices medidos
   em relacao as margens da seccao). A regra base usa 17,29 graus, que
   nao corresponde a esta pagina. */
.abw-servico--executive-brand-digital-presence .abw-sv-linha {
    transform: rotate(50.1deg);
}

.abw-servico--executive-brand-digital-presence .abw-sv-linha.esq {
    left: -380px;
    top: -132px;
}

.abw-servico--executive-brand-digital-presence .abw-sv-linha.dir {
    left: calc(100% + 458px);
    top: -168px;
}

.abw-servico--content-strategy-geo-ai-visibility .abw-sv-linha {
    top: 0;
    height: calc(100% + 100px);
    transform: rotate(-7.9deg);
}

.abw-servico--content-strategy-geo-ai-visibility .abw-sv-linha.esq {
    left: calc(-707px - 1.6%);
    transform-origin: 100% 0;
}

.abw-servico--content-strategy-geo-ai-visibility .abw-sv-linha.dir {
    left: 94.2%;
    transform-origin: 0 0;
}

/* O Figma antialiasa o texto em escala de cinzentos; sem isto o Chrome
   no macOS engorda os titulos grandes com subpixel antialiasing. */
.abw-servico {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media only screen and (max-width: 768px) {
    .abw-sv-linha {
        display: none;
    }
}

/* ------------------------------------------------------------------
   CTA do menu nas paginas de servico — cor do texto
   O abw.css tem `body.invert-body .main-menu-wrapper .menu li.nav-cta a`
   (4 classes) a forcar color:#F63C3B. A regra equivalente aqui so tinha
   3 classes e perdia por especificidade, deixando texto vermelho sobre
   o fundo colorido do botao. Aqui igualamos a especificidade e usamos
   --cta-text (definido no header.php) para o caso da pagina vermelha,
   onde o botao e branco e o texto tem de ser vermelho.
   ------------------------------------------------------------------ */

body.abw-servico-page .main-menu-wrapper .menu li.nav-cta a,
body.abw-servico-page.invert-body .main-menu-wrapper .menu li.nav-cta a,
body.abw-servico-page.menu-white .main-menu-wrapper .menu li.nav-cta a {
	background-color: var(--cta, #1E9186);
	color: var(--cta-text, #FFFAF7);
}

body.abw-servico-page .main-menu-wrapper .menu li.nav-cta a:hover,
body.abw-servico-page .main-menu-wrapper .menu li.nav-cta a:focus,
body.abw-servico-page.invert-body .main-menu-wrapper .menu li.nav-cta a:hover,
body.abw-servico-page.invert-body .main-menu-wrapper .menu li.nav-cta a:focus,
body.abw-servico-page.menu-white .main-menu-wrapper .menu li.nav-cta a:hover,
body.abw-servico-page.menu-white .main-menu-wrapper .menu li.nav-cta a:focus {
	background-color: var(--cta-hover, var(--cta-text, #FFFAF7));
	color: var(--cta-hover-text, var(--cta, #1E9186));
}