/* Primori Consultoria
   ---------------------------------------------------------------------------
   Folha única, escrita para este site. As cores, a tipografia e os cantos
   arredondados são da marca da Primori; o resto — grade, componentes, nomes de
   classe — é desta casa.

   Ordem: tokens · base · utilidades de layout · cabeçalho · rodapé · seções.
   --------------------------------------------------------------------------- */

/* ------------------------------------------------------------------ tokens */

:root {
    /* marca */
    --marca:          #c43632;
    --marca-escura:   #9c0e0a;
    --escuro:         #1b2435;
    --escuro-claro:   #434c5d;
    --tinta:          #3b4557;
    --papel:          #ffffff;
    --papel-morno:    #faf9f9;
    --linha:          #dfdfdf;
    --zap:            #1eb954;
    --zap-escuro:     #17a048;

    /* tipografia */
    --fonte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --corpo:      1rem;
    --miudo:     .875rem;
    --mini:      .8125rem;

    /* ritmo */
    --medida:    1200px;
    --gutter:    1.5rem;
    --respiro:   clamp(3.5rem, 7vw, 6rem);

    /* forma */
    --canto:      .75rem;
    --canto-mini: .5rem;
    --pilula:     2rem;
    --sombra:     0 2px 10px rgba(27, 36, 53, .07);
    --sombra-alta:0 18px 45px -22px rgba(27, 36, 53, .45);

    --transicao: .2s ease;
    /* curva com peso: acelera rápido e assenta devagar, em vez do ease padrão */
    --curva: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--corpo);
    /* Regular, não Light: a 16px o Light tem traço fino demais para texto
       corrido. O Light fica só nos trechos grandes sobre fundo escuro, que é
       onde o original também usa. */
    font-weight: 400;
    line-height: 1.65;
    color: var(--tinta);
    background: var(--papel);
    overflow-wrap: break-word;
}

/* Toda <img> declara width/height no HTML para reservar espaço e não deixar a
   página pular. Estas duas linhas garantem que isso não vire tamanho fixo: o
   layout continua mandando, os atributos só dão a proporção. */
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--marca); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--marca-escura); }

h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0 0 .6em; color: var(--escuro); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: 0; }

:focus-visible {
    outline: 3px solid var(--marca);
    outline-offset: 3px;
    border-radius: 2px;
}

.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--escuro);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--canto-mini) 0;
}
.pular:focus { left: 0; color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone { width: 1.25em; height: 1.25em; flex: none; }
.icone--mini { width: .85em; height: .85em; }

/* ---------------------------------------------------------------- estrutura */

.medida {
    width: 100%;
    max-width: var(--medida);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bloco { padding-block: var(--respiro); }
.bloco--curto { padding-block: calc(var(--respiro) * .55); }
.bloco--claro { background: var(--papel-morno); }
.bloco--marca { background: var(--marca); color: #fff; }
.bloco--marca .titulo { color: #fff; }

.titulo {
    font-size: clamp(1.6rem, 3.4vw, 2rem);
    text-transform: uppercase;
    color: var(--marca);
}
.titulo--centro { text-align: center; }
.titulo--claro { color: #fff; }

.bloco__intro {
    max-width: 62ch;
    margin: -.4em auto 2.6rem;
    text-align: center;
    font-size: 1.0625rem;
    color: var(--tinta);
}

.etiqueta {
    display: block;
    width: max-content;
    margin: 0 auto 1.1rem;
    padding: .3rem 1rem;
    border-radius: var(--pilula);
    background: var(--papel-morno);
    font-size: var(--mini);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--escuro);
}

.subtitulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--escuro);
    margin-bottom: .5em;
}

/* Dentro do cartão colorido, o primeiro título do texto é a frase de destaque
   — herda o peso, não o tamanho de um subtítulo comum. */
.duo__texto--cartao .subtitulo {
    font-size: 1.0625rem;
    color: #fff;
}

.marcadores { margin: 0 0 1.1em; padding-left: 1.4em; list-style: none; }
.marcadores li { position: relative; margin-bottom: .45em; }
.marcadores li::before {
    content: "";
    position: absolute;
    left: -1.1em;
    top: .62em;
    width: .4em;
    height: .4em;
    border-radius: 50%;
    background: var(--marca);
}

.risca { height: 1px; background: var(--linha); margin: 0; }

/* ------------------------------------------------------------------ botões */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .78rem 2rem;
    border: 1px solid transparent;
    border-radius: var(--pilula);
    font-size: var(--miudo);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.botao:hover { transform: translateY(-1px); }
.botao--largo { width: 100%; }

.botao--marca { background: var(--marca); color: #fff; }
.botao--marca:hover { background: var(--marca-escura); color: #fff; }

.botao--claro { background: #fff; color: var(--escuro); }
.botao--claro:hover { background: var(--papel-morno); color: var(--escuro); }

.botao--zap { background: var(--zap); color: #fff; }
.botao--zap:hover { background: var(--zap-escuro); color: #fff; }

/* ------------------------------------------------------------------ redes */

.redes { display: flex; gap: .9rem; align-items: center; }
.redes a { color: inherit; display: inline-flex; }
.redes .icone { width: 1.35rem; height: 1.35rem; }
.redes a:hover { color: var(--marca); }

/* --------------------------------------------------------------- cabeçalho */

.topo {
    position: relative;
    z-index: 30;
    background: var(--escuro);
    color: #fff;
    padding-block: 1.25rem;
}

/* Na home o cabeçalho flutua sobre a capa. */
.topo--sobreposto {
    position: absolute;
    inset-inline: 0;
    background: transparent;
}

.topo__grade {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.topo__marca img { width: 170px; height: auto; }

.menu { margin-left: auto; }
.menu > ul { display: flex; align-items: center; gap: 1.6rem; }

.menu__item > a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
    font-size: var(--miudo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding-block: .4rem;
}
.menu__item > a:hover { color: var(--marca); }

.menu__item--pai { position: relative; }

.submenu {
    position: absolute;
    top: calc(100% + .6rem);
    left: -1rem;
    min-width: 17rem;
    padding: .4rem 0;
    background: #fff;
    border-radius: var(--canto);
    box-shadow: var(--sombra-alta);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.35rem);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.menu__item--pai:hover .submenu,
.menu__item--pai:focus-within .submenu,
.submenu.aberto { opacity: 1; visibility: visible; transform: none; }

.submenu a {
    display: block;
    padding: .7rem 1.25rem;
    color: var(--escuro);
    font-size: var(--miudo);
}
.submenu a:hover { background: var(--papel-morno); color: var(--marca); }

.redes--topo { color: #fff; }

.abrir-gaveta {
    display: none;
    margin-left: auto;
    padding: .5rem;
    border: 0;
    border-radius: var(--canto-mini);
    background: #fff;
    color: var(--escuro);
    cursor: pointer;
}
.abrir-gaveta .icone { width: 1.6rem; height: 1.6rem; }

/* ------------------------------------------------------------------ gaveta */

.gaveta {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem var(--gutter) 2.5rem;
    background: #fff;
    overflow-y: auto;
    animation: entra-esquerda .3s ease;
}
.gaveta[hidden] { display: none; }

@keyframes entra-esquerda {
    from { opacity: 0; transform: translateX(-1.5rem); }
    to   { opacity: 1; transform: none; }
}

.gaveta__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -1.5rem calc(var(--gutter) * -1) 0;
    padding: 1.5rem var(--gutter);
    background: var(--escuro);
}
.gaveta__topo img { width: 150px; }

.fechar-gaveta {
    padding: .45rem;
    border: 0;
    border-radius: var(--canto-mini);
    background: #fff;
    color: var(--marca);
    cursor: pointer;
}
.fechar-gaveta .icone { width: 1.5rem; height: 1.5rem; }

.gaveta__item { border-bottom: 1px solid var(--linha); padding-block: .9rem; }

.gaveta__item > a,
.gaveta__pai {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--marca);
    text-align: left;
    cursor: pointer;
}
.gaveta__pai .icone { color: var(--escuro); transition: transform var(--transicao); }
.gaveta__pai[aria-expanded="true"] .icone { transform: rotate(180deg); }

.gaveta__filhos { margin-top: .9rem; }
.gaveta__filhos a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    color: var(--escuro);
    font-size: var(--corpo);
}
.gaveta__filhos .icone { color: var(--marca); }

/* Com "Serviços" virando botão de acordeão, este é o único caminho para a
   página de serviços dentro da gaveta. Fica discreto, abaixo dos filhos. */
.gaveta__atalho {
    display: inline-flex;
    margin-top: .6rem;
    font-size: var(--miudo);
    font-weight: 400;
    color: var(--tinta);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gaveta__atalho:hover { color: var(--marca); }

/* ------------------------------------------------------------------- capa */

.capa {
    display: flex;
    align-items: center;
    min-height: 680px;
    padding-block: 9rem 4rem;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.capa__titulo {
    max-width: 23ch;   /* 21,4ch é o que "TRANSFORMANDO NEGÓCIOS" ocupa; abaixo disso quebra */
    margin-bottom: 1.5rem;
    /* O mínimo é o que faz "TRANSFORMANDO NEGÓCIOS" caber numa linha no
       celular, como no original; acima de ~510px o vw assume. */
    font-size: clamp(1.4rem, 4.4vw, 2.5rem);
    line-height: 1.15;
}
.capa__linha1, .capa__linha2 { display: block; }
.capa__linha1 { font-weight: 300; color: var(--marca); }
.capa__linha2 { font-weight: 700; color: #fff; }

.capa__texto {
    max-width: 68ch;   /* duas linhas, como no original */
    margin-bottom: 2.25rem;
    font-weight: 300;
    font-size: var(--miudo);
    color: rgba(255, 255, 255, .92);
}

.capa__acoes { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ------------------------------------------------------------------ faixa */

.faixa {
    padding-block: 3.5rem;
    background: var(--escuro);
    color: #fff;
}
.faixa__titulo { color: #fff; font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: .35rem; }
.faixa__texto { font-size: var(--miudo); color: rgba(255, 255, 255, .8); margin-bottom: 1rem; }

.trilha ol { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--mini); }
.trilha li + li::before { content: "/"; margin-right: .5rem; color: rgba(255, 255, 255, .45); }
.trilha a { color: rgba(255, 255, 255, .8); }
.trilha a:hover { color: #fff; }
.trilha [aria-current] { font-weight: 700; color: #fff; }

/* -------------------------------------------------------------------- duo */

.duo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.duo--invertido .duo__figura { order: 2; }

.duo__figura { margin: 0; }
.duo__figura img {
    width: 100%;
    border-radius: var(--canto);
    object-fit: cover;
}

.duo__texto > .titulo { margin-bottom: 1.2rem; }
.duo__acao { margin-top: 1.6rem; margin-bottom: 0; }
.duo__cargo {
    margin-bottom: 1.2rem;
    font-size: var(--mini);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* variante com cartão colorido, usada nas páginas de serviço e no sobre */
.duo--cartao { align-items: stretch; gap: 0; }
.duo--cartao .duo__figura { display: flex; align-items: flex-end; }
.duo--cartao .duo__figura img { border-radius: var(--canto) 0 0 var(--canto); height: 100% !important; }

.duo__texto--cartao {
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--marca);
    border-radius: 0 var(--canto) var(--canto) 0;
    color: rgba(255, 255, 255, .92);
}
.duo__texto--cartao .marcadores li::before { background: #fff; }
.duo__texto--cartao a { color: #fff; text-decoration: underline; }

.duo--cartao.duo--invertido .duo__figura img { border-radius: 0 var(--canto) var(--canto) 0; }
.duo--cartao.duo--invertido .duo__texto--cartao { border-radius: var(--canto) 0 0 var(--canto); }

/* --------------------------------------------------------------- cartões */

.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}

.cartao {
    border-radius: var(--canto);
    background: #fff;
    box-shadow: var(--sombra);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.cartao > a { display: block; height: 100%; color: inherit; }

.cartao__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.cartao__corpo { padding: 1.4rem; }
.cartao__titulo {
    margin-bottom: .5rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--marca);
    transition: color var(--transicao);
}
.cartao > a:hover .cartao__titulo { color: var(--escuro); }
.cartao__texto { font-size: var(--miudo); color: var(--tinta); margin: 0; }

/* ---------------------------------------------------------------- marcas */

.marcas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    align-items: center;
}
.marcas li {
    /* Flex, não grid: com `place-items:center` a área do item fica de altura
       indefinida, o `height:100%` da imagem não resolve e o navegador cai na
       proporção do arquivo — era o que fazia o escudo do PRS, que é retrato,
       renderizar 141px dentro de um cartão de 140px e vazar. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Altura fixa: os logos têm proporções muito diferentes e sem isto cada
       cartão encolhe até o seu próprio logo, deixando a fileira irregular. */
    height: 140px;
    padding: .9rem;
    border-radius: var(--canto-mini);
    background: #fff;
    box-shadow: var(--sombra);
    overflow: hidden;
}
.marcas img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity var(--transicao);
}

/* O logo original, com as cores da marca, aparece ao passar o mouse. Fica
   sobreposto ao recorte e some por padrão. Sem hover — celular, tablet — o
   visitante vê só o recorte, que é o estado pensado para a fileira. */
.marcas img.marcas__cor {   /* precisa bater `.marcas img`, que é mais específico que só a classe */
    position: absolute;
    left: .9rem;
    top: .9rem;
    /* Tamanho explícito, não `inset`: com os quatro lados presos e largura
       automática a imagem estica, e o `max-width:100%` mede o cartão inteiro em
       vez da área interna — o logo vazava 14px de cada lado. */
    width: calc(100% - 1.8rem);
    height: calc(100% - 1.8rem);
    max-width: none;
    max-height: none;
    object-fit: contain;
    opacity: 0;
    transition: opacity var(--transicao);
}
.marcas li:hover img.marcas__cor,
.marcas li:focus-within img.marcas__cor { opacity: 1; }

/* O recorte some junto. Só sobrepor não basta: ele é aparado justo e o original
   mantém o quadrado inteiro, então as duas imagens ocupam áreas diferentes do
   cartão e as bordas do recorte apareciam em volta do colorido. */
.marcas li:hover img:not(.marcas__cor),
.marcas li:focus-within img:not(.marcas__cor) { opacity: 0; }

/* --------------------------------------------------------------- chamada */

.chamada__grade {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 3rem;
    text-align: center;
}
.chamada .titulo { margin-bottom: .2rem; }
.chamada__texto { font-weight: 300; color: rgba(255, 255, 255, .85); }
.bloco:not(.bloco--marca) .chamada__texto { color: var(--tinta); }

/* ---------------------------------------------------------------- passos */

.passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem 2rem;
}
.passo { display: flex; align-items: center; gap: 1rem; }
.passo__numero {
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 1;
    color: var(--marca);
}
.passo p { font-size: var(--miudo); margin: 0; }

/* ------------------------------------------------------------ princípios */

.principios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem 2.5rem;
}
.principio__etiqueta {
    width: max-content;
    margin-bottom: .5rem;
    padding: .2rem .7rem;
    border-radius: var(--canto-mini);
    background: var(--escuro);
    color: #fff;
    font-size: var(--mini);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.principio__titulo { font-size: 1rem; color: var(--marca); margin-bottom: .35rem; }
.principio p { font-size: var(--miudo); margin: 0; }

/* --------------------------------------------------------------- colunas */

.colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2.5rem;
}
.coluna { font-size: var(--miudo); }
.coluna + .coluna { position: relative; }
.coluna .subtitulo { font-size: 1.05rem; color: var(--marca); }

/* ------------------------------------------------- escopo, destaque, jornada
   Blocos desenhados para a página de BPO de RH. Usam os mesmos tokens do resto
   do site — nada de cor, fonte ou canto novo. O que muda é o ritmo: cartão com
   ícone em vez de lista numerada, um número grande como ponto de parada, e
   etapas ligadas por um fio.                                                  */

.escopo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 28vw, 17rem), 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.escopo__item {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.6rem 1.5rem 1.7rem;
    border-radius: var(--canto);
    background: var(--papel);
    box-shadow: var(--sombra);
    transition: transform .45s var(--curva), box-shadow .45s var(--curva);
}
.escopo__item:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-alta);
}

/* O ícone mora num disco com a cor da marca bem diluída: dá presença sem virar
   um carimbo vermelho repetido oito vezes. */
.escopo__marca {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca) 10%, transparent);
    color: var(--marca);
}
.escopo__marca .icone { width: 1.5rem; height: 1.5rem; }

.escopo__titulo {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--escuro);
}
.escopo__item p {
    margin: 0;
    font-size: var(--miudo);
    color: var(--tinta);
}

/* ------------------------------------------------------------------ destaque */

.destaque__grade {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 3rem;
}
.destaque__numero {
    margin: 0;
    font-size: clamp(3.4rem, 11vw, 5.5rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.03em;
    color: #fff;
}
.destaque__corpo { flex: 1 1 22rem; }
.destaque__titulo {
    margin: 0 0 .4rem;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    line-height: 1.25;
    color: #fff;
}
.destaque__corpo p {
    margin: 0;
    font-size: var(--miudo);
    color: rgba(255, 255, 255, .88);
    max-width: 56ch;
}

/* ------------------------------------------------------------------- jornada */

.jornada {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2.25rem 1.5rem;
    margin-top: 2.75rem;
}

.jornada__etapa {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    text-align: center;
}

/* O fio que liga uma etapa à seguinte só existe quando as quatro cabem numa
   linha só — abaixo disso a grade quebra e o tracejado apontaria para o nada.
   Por isso a largura é travada em quatro colunas na mesma faixa. */
@media (min-width: 1000px) {
    .jornada { grid-template-columns: repeat(4, 1fr); }
    .jornada__etapa::after {
        content: "";
        position: absolute;
        top: 1.75rem;
        left: calc(50% + 2.4rem);
        right: calc(-50% + 2.4rem);
        height: 2px;
        background: repeating-linear-gradient(to right,
            var(--linha) 0 6px, transparent 6px 12px);
    }
    .jornada__etapa:last-child::after { display: none; }
}

.jornada__marca {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--escuro);
    color: #fff;
    transition: transform .45s var(--curva), background .45s var(--curva);
}
.jornada__etapa:hover .jornada__marca {
    transform: translateY(-4px);
    background: var(--marca);
}
.jornada__marca .icone { width: 1.6rem; height: 1.6rem; }

.jornada__titulo {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--escuro);
}
.jornada__etapa p {
    margin: 0;
    font-size: var(--miudo);
    color: var(--tinta);
    max-width: 30ch;
}

/* ---------------------------------------------------- entrada ao rolar a tela
   Só vale para quem optou pelo atributo `data-revela`. Sem JavaScript — ou com
   movimento reduzido — o conteúdo já nasce visível. */

[data-revela] {
    opacity: 0;
    transform: translateY(1.25rem);
}
.js-revela [data-revela] {
    transition: opacity .7s var(--curva), transform .7s var(--curva);
}
[data-revela].revelado,
html:not(.js-revela) [data-revela] {
    opacity: 1;
    transform: none;
}

@media (min-width: 861px) {
    .coluna + .coluna { padding-left: 2.5rem; margin-left: -.5rem; border-left: 1px solid var(--linha); }
}

/* --------------------------------------------------------------- convite */

.convite { text-align: center; }
.convite__alternativas { margin-top: 1.6rem; font-size: var(--miudo); }

/* ---------------------------------------------------------------- planos */

.planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.75rem;
    max-width: 960px;
    margin-inline: auto;
}
.plano {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    border-radius: var(--canto);
    background: #fff;
    box-shadow: var(--sombra-alta);
}
.plano__etiqueta {
    width: max-content;
    margin: 0 auto 1rem;
    padding: .3rem 1rem;
    border-radius: var(--canto-mini);
    background: var(--marca);
    color: #fff;
    font-size: var(--mini);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.plano__preco {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--escuro);
}
.plano__preco span { font-size: 1.1rem; font-weight: 400; margin-right: .2rem; }
.plano__resumo { text-align: center; font-size: var(--miudo); margin-bottom: 1.5rem; }

.plano__itens { margin-bottom: 1.75rem; }
.plano__itens li {
    display: flex;
    gap: .55rem;
    margin-bottom: .55rem;
    font-size: var(--miudo);
}
.plano__itens .icone { color: var(--zap); margin-top: .18em; }
.plano .botao { margin-top: auto; }

/* ------------------------------------------------------------------ mapa */

.mapa {
    position: relative;
    height: 420px;
    border-radius: var(--canto);
    overflow: hidden;
    background: #e8e4dd;
    box-shadow: var(--sombra);
    cursor: grab;
    touch-action: none;
}
.mapa.arrastando { cursor: grabbing; }
.mapa__lona { position: absolute; inset: 0; }
.mapa__lona img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; }
.topo__marca img, .gaveta__topo img, .rodape__marca img { height: auto; }

.mapa__pino {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--marca);
    box-shadow: 0 0 0 2px rgba(196, 54, 50, .35), 0 2px 6px rgba(0, 0, 0, .3);
    pointer-events: none;
}

.mapa__zoom { position: absolute; top: 10px; left: 10px; display: grid; gap: 2px; }
.mapa__zoom button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--canto-mini);
    background: rgba(255, 255, 255, .92);
    color: var(--escuro);
    font: 700 1.1rem/1 var(--fonte);
    cursor: pointer;
    box-shadow: var(--sombra);
}
.mapa__zoom button:hover { background: #fff; }

.mapa__creditos {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 6px;
    border-top-left-radius: var(--canto-mini);
    background: rgba(255, 255, 255, .85);
    font-size: 11px;
}
.mapa__creditos a { color: var(--tinta); }

.mapa__endereco {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    font-size: var(--miudo);
}
.mapa__endereco .icone { color: var(--marca); }
.mapa__endereco strong { color: var(--escuro); }

/* --------------------------------------------------------------- contato */

.contato__grade {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}
.contato__convite p { font-size: 1.0625rem; }
.contato__convite .botao { margin-top: 1.5rem; }

.ficha {
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border-radius: var(--canto);
    background: var(--marca);
    color: #fff;
    box-shadow: var(--sombra-alta);
}
.ficha__titulo { color: #fff; font-size: 1.5rem; }
.ficha__bloco + .ficha__bloco { margin-top: 1.5rem; }
.ficha__bloco h3 {
    margin-bottom: .5rem;
    font-size: var(--mini);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}
.ficha__bloco li { font-size: var(--miudo); margin-bottom: .3rem; }
.ficha__bloco a { color: #fff; }
.ficha__bloco a:hover { color: #fff; text-decoration: underline; }
.ficha .redes { color: #fff; margin-top: .25rem; }
.ficha .redes a:hover { color: rgba(255, 255, 255, .7); }

/* ----------------------------------------------------------------- índice */

.indice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2.5rem;
}
.indice__grupo h2 { font-size: 1.35rem; color: var(--marca); }
.indice__grupo li { margin-bottom: .45rem; }
.indice__grupo a { color: var(--tinta); }
.indice__grupo a:hover { color: var(--marca); }

/* ------------------------------------------------------------------ prosa */

.prosa { max-width: 70ch; }
.prosa--larga { max-width: 82ch; }
.prosa--larga .titulo { margin-bottom: 1.1rem; }
.prosa__secao {
    margin-top: 2.6rem;
    font-size: 1.2rem;
    color: var(--marca);
}
.prosa__secao:first-child { margin-top: 0; }
.prosa .subtitulo { margin-top: 1.6rem; color: var(--escuro); }

/* ----------------------------------------------------------------- rodapé */

.rodape {
    position: relative;
    padding-block: var(--respiro) 2rem;
    background: var(--escuro);
    color: #fff;
    font-size: var(--miudo);
}
.rodape a { color: #fff; }
.rodape a:hover { color: var(--marca); }

.rodape__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
    gap: 2.5rem;
}
.rodape h2 {
    margin-bottom: .9rem;
    font-size: var(--mini);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--marca);
}
.rodape li { margin-bottom: .4rem; }

.rodape__marca img { width: 180px; margin-bottom: 1.5rem; }
.selos { display: flex; gap: .5rem; }
.selos li { flex: 1; margin: 0; }
.selos img {
    width: 100%;
    height: 64px !important;
    padding: .3rem;
    border-radius: var(--canto-mini);
    background: #fff;
    object-fit: contain;
}

.rodape__coluna h2 + h2 { margin-top: 1.75rem; }
/* O e-mail é uma palavra só. Como o <a> é flex, o item nasce com
   `min-width:auto` e se recusa a encolher abaixo da palavra inteira — vazava
   da coluna e criava rolagem horizontal entre ~560px e 1080px, onde a coluna
   do rodapé é mais estreita. `min-width:0` libera o encolhimento e o
   `overflow-wrap` quebra o endereço. */
.rodape__contatos a { display: flex; align-items: center; gap: .5rem; }
.rodape__contatos a > span { min-width: 0; overflow-wrap: anywhere; }
.rodape__contatos .icone { color: var(--marca); flex: none; }

.rodape__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--mini);
    color: rgba(255, 255, 255, .7);
}
.rodape__rodape p { margin: 0; }

.meraki {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    opacity: .7;
    transition: opacity var(--transicao);
}
.meraki:hover { opacity: 1; color: #fff; }
.meraki svg { width: 18px; height: 18px; }

.rodape .ao-topo {
    position: absolute;
    top: -22px;
    right: var(--gutter);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--escuro);
    box-shadow: var(--sombra-alta);
}
.rodape .ao-topo:hover { background: var(--marca); color: #fff; }

/* ------------------------------------------------------- botão flutuante */

.zap-flutuante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--zap);
    color: #fff;
    box-shadow: 0 8px 24px -6px rgba(30, 185, 84, .6);
    transition: background var(--transicao), transform var(--transicao);
}
.zap-flutuante:hover { background: var(--zap-escuro); color: #fff; transform: scale(1.06); }
.zap-flutuante .icone { width: 1.9rem; height: 1.9rem; }

/* ------------------------------------------------------------ responsivo */

@media (max-width: 1080px) {
    .menu, .redes--topo { display: none; }
    .abrir-gaveta { display: inline-flex; }
    .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .duo, .contato__grade { grid-template-columns: minmax(0, 1fr); }
    .duo--invertido .duo__figura { order: 0; }

    .duo--cartao .duo__figura img,
    .duo--cartao.duo--invertido .duo__figura img { border-radius: var(--canto) var(--canto) 0 0; }
    .duo__texto--cartao,
    .duo--cartao.duo--invertido .duo__texto--cartao { border-radius: 0 0 var(--canto) var(--canto); }

    /* Sem formulário, o botão do WhatsApp é a ação principal do /contato:
       no celular ele vem antes do cartão de endereço, não depois. */
    .contato__convite { order: 0; }
    .ficha { order: 1; }

    /* A goteira padrão de 24px deixa o título 1px largo demais num Android de
       360px e o joga para três linhas. Só no hero ela encolhe. */
    .capa > .medida { padding-inline: 1.25rem; }

    .capa {
        /* No celular o texto desce para a base: a foto do banner tem as pessoas
           no topo e o texto centralizado cairia em cima dos rostos. */
        align-items: flex-end;
        min-height: 90vh;
        padding-block: 7rem 3rem;
    }
    .capa__acoes .botao { width: 100%; }

    .chamada__grade { flex-direction: column; }
}

@media (max-width: 560px) {
    .rodape__grade { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .passo { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}