/**
 * styles.css — estilos do site.
 * Todos os valores vêm das variáveis definidas em colors_and_type.css.
 */

/* ---------------------------------------------------------------
   1. Layout base
   --------------------------------------------------------------- */

.wt-main {
    width: 100%;
}

.wt-container {
    width: 100%;
    max-width: var(--wt-container);
    margin-inline: auto;
    padding-inline: var(--wt-container-pad);
}

.wt-section {
    width: 100%;
    padding-block: var(--wt-section-pad);
}

.wt-section--light {
    background-color: var(--wt-ivory);
    color: var(--wt-text-on-light);
}

.wt-section--dark {
    background-color: var(--wt-navy-deep);
    color: var(--wt-text-on-dark);
}

.wt-section--facet {
    background-color: var(--wt-navy-deep);
    background-image: var(--wt-facet-gradient);
    color: var(--wt-text-on-dark);
}

.wt-section__head {
    max-width: var(--wt-measure);
    margin-inline: auto;
    margin-bottom: var(--wt-space-7);
    text-align: center;
}

.wt-section__title {
    margin-bottom: var(--wt-space-4);
}

.wt-section--dark .wt-section__title,
.wt-section--facet .wt-section__title {
    color: var(--wt-white);
}

.wt-section__lead {
    font-size: var(--wt-fs-lead);
    line-height: var(--wt-lh-snug);
    color: var(--wt-text-muted);
}

.wt-section--dark .wt-section__lead,
.wt-section--facet .wt-section__lead {
    color: var(--wt-text-on-dark-soft);
}

/* Sobrescreve o ivory de .wt-section--light (mesma especificidade, vem depois
   no cascade): aqui o fundo claro é branco. */
.wt-fechamento,
.wt-reviews {
    background-color: var(--wt-white);
}

.wt-fechamento .wt-section__head {
    max-width: none;
}

.wt-label {
    display: block;
    margin-bottom: var(--wt-space-3);
    font-size: var(--wt-fs-label);
    font-weight: var(--wt-fw-semibold);
    letter-spacing: var(--wt-tracking-label);
    text-transform: uppercase;
    color: var(--wt-gold-ink);
}

.wt-section--dark .wt-label,
.wt-section--facet .wt-label {
    color: var(--wt-gold);
}

.wt-skip-link {
    position: absolute;
    left: var(--wt-offscreen);
    top: 0;
    z-index: 1000;
    padding: var(--wt-space-3) var(--wt-space-4);
    background: var(--wt-gold);
    color: var(--wt-navy);
    font-weight: var(--wt-fw-semibold);
    border-radius: 0 0 var(--wt-radius) 0;
}

.wt-skip-link:focus {
    left: 0;
}

/* Texto justificado (padrão do cliente para descrições). A hifenização evita
   os "rios" de espaço que a justificação abre em colunas estreitas. */
.wt-hero__lead,
.wt-card__text,
.wt-urgencia__text,
.wt-sobre__text,
.wt-escritorio__text,
.wt-situacao__text,
.wt-faq__answer,
.wt-legal__body p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ---------------------------------------------------------------
   2. Botões
   --------------------------------------------------------------- */

.wt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wt-space-2);
    padding: var(--wt-space-3) var(--wt-space-6);
    border: var(--wt-border-width) solid transparent;
    border-radius: var(--wt-radius-sm);
    font-family: var(--wt-font-sans);
    font-size: var(--wt-fs-sm);
    font-weight: var(--wt-fw-semibold);
    letter-spacing: var(--wt-tracking-wide);
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--wt-transition), color var(--wt-transition), border-color var(--wt-transition), transform var(--wt-transition);
}

.wt-btn:hover {
    transform: translateY(-1px);
}

.wt-btn__icon {
    width: var(--wt-icon);
    height: var(--wt-icon);
    flex: 0 0 auto;
}

/* Base pensada para fundo escuro (navy): botão branco cheio, para contrastar.
   Sobre fundo claro, as sobrescritas abaixo invertem a polaridade para navy
   sobre branco — mesmas seções que já serviam de referência para a variante
   clara do outline dourado anterior. */
.wt-btn--primary {
    background-color: var(--wt-white);
    border-color: var(--wt-white);
    color: var(--wt-navy);
}

.wt-btn--primary:hover {
    background-color: var(--wt-gray-light);
    border-color: var(--wt-gray-light);
}

.wt-btn--primary:active {
    background-color: var(--wt-navy);
    border-color: var(--wt-navy);
    color: var(--wt-white);
}

.wt-btn--outline {
    background-color: transparent;
    border-color: var(--wt-white);
    color: var(--wt-white);
}

.wt-btn--outline:hover {
    background-color: var(--wt-white);
    color: var(--wt-navy);
}

/* Sobre fundo claro: primary vira navy sobre branco. */
.wt-section--light .wt-btn--primary,
.wt-hero .wt-btn--primary,
.wt-videos .wt-btn--primary {
    background-color: var(--wt-navy);
    border-color: var(--wt-navy);
    color: var(--wt-white);
}

.wt-section--light .wt-btn--primary:hover,
.wt-hero .wt-btn--primary:hover,
.wt-videos .wt-btn--primary:hover {
    background-color: var(--wt-navy-card);
    border-color: var(--wt-navy-card);
}

.wt-section--light .wt-btn--primary:active,
.wt-hero .wt-btn--primary:active,
.wt-videos .wt-btn--primary:active {
    background-color: var(--wt-white);
    border-color: var(--wt-navy);
    color: var(--wt-navy);
}

/* Sobre fundo claro: outline vira contorno navy. */
.wt-btn--on-light,
.wt-section--light .wt-btn--outline,
.wt-hero .wt-btn--outline,
.wt-videos .wt-btn--outline {
    border-color: var(--wt-navy);
    color: var(--wt-navy);
}

.wt-btn--on-light:hover,
.wt-section--light .wt-btn--outline:hover,
.wt-hero .wt-btn--outline:hover,
.wt-videos .wt-btn--outline:hover {
    background-color: var(--wt-navy);
    color: var(--wt-white);
}

.wt-btn--lg {
    padding: var(--wt-space-4) var(--wt-space-8);
    font-size: var(--wt-fs-body);
}

/* ---------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------- */

.wt-hero {
    position: relative;
    width: 100%;
    background-color: var(--wt-white);
    color: var(--wt-text-on-light);
    overflow: hidden;
}

.wt-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.wt-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--wt-space-9);
    padding-left: max(var(--wt-container-pad), calc((100vw - var(--wt-container)) / 2 + var(--wt-container-pad)));
    padding-right: var(--wt-space-7);
}

.wt-hero__hat {
    width: var(--wt-logo-hero);
    height: auto;
    margin-bottom: var(--wt-space-6);
}

.wt-hero__title {
    color: var(--wt-navy);
    font-size: 35px;
    margin-bottom: var(--wt-space-5);
}

.wt-hero__lead {
    font-size: var(--wt-fs-lead);
    line-height: var(--wt-lh-snug);
    color: var(--wt-text-muted);
}

.wt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wt-space-4);
    margin-top: var(--wt-space-7);
}

.wt-hero__media {
    position: relative;
}

.wt-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ---------------------------------------------------------------
   5. Itens (faixa de diferenciais)
   --------------------------------------------------------------- */

.wt-itens {
    width: 100%;
    background-color: var(--wt-gray);
    color: var(--wt-text-on-light);
    border-top: var(--wt-border-light);
    border-bottom: var(--wt-border-light);
    padding-block: var(--wt-space-7);
}

.wt-itens__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wt-space-6);
}

.wt-itens__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wt-space-4);
    text-align: center;
}

.wt-itens__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--wt-control-lg);
    height: var(--wt-control-lg);
    color: var(--wt-gold-ink);
}

.wt-itens__icon .wt-icon {
    width: 26px;
    height: 26px;
}

.wt-itens__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wt-space-1);
}

.wt-itens__title {
    font-size: 20px;
    font-weight: var(--wt-fw-medium);
    line-height: var(--wt-lh-snug);
    color: var(--wt-text-on-light);
}

.wt-itens__desc {
    font-size: 14px;
    line-height: var(--wt-lh-snug);
    color: var(--wt-text-muted);
}

/* ---------------------------------------------------------------
   6. Depoimentos
   --------------------------------------------------------------- */

.wt-reviews__widget {
    width: 100%; /* sem max-width: o Trustindex calcula os cards pela largura disponível */
}

.wt-reviews__cta {
    text-align: center;
    margin-top: var(--wt-space-6);
}

/* ---------------------------------------------------------------
   7. Cards de áreas de atuação
   --------------------------------------------------------------- */

.wt-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--wt-card-min), 1fr));
    gap: var(--wt-space-5);
}

.wt-card {
    display: flex;
    flex-direction: column;
    gap: var(--wt-space-3);
    padding: var(--wt-space-6);
    background-color: var(--wt-navy-card);
    border: var(--wt-border-gold);
    border-radius: var(--wt-radius-lg);
    transition: border-color var(--wt-transition), transform var(--wt-transition);
}

.wt-card:hover {
    border-color: var(--wt-gold);
    transform: translateY(-2px);
}

.wt-card__title {
    color: var(--wt-white);
}

.wt-card__text {
    flex: 1 1 auto;
    font-size: var(--wt-fs-sm);
    color: var(--wt-text-on-dark-soft);
}

.wt-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wt-space-2);
    width: 100%;
    margin-top: var(--wt-space-2);
    padding: var(--wt-space-3) var(--wt-space-6);
    border-radius: var(--wt-radius-sm);
    background-color: var(--wt-navy);
    font-size: var(--wt-fs-label);
    font-weight: var(--wt-fw-semibold);
    letter-spacing: var(--wt-tracking-wide);
    text-transform: uppercase;
    color: var(--wt-white);
    transition: background-color var(--wt-transition), color var(--wt-transition);
}

.wt-card__cta:hover {
    background-color: var(--wt-navy-card);
}

.wt-card__cta-icon {
    width: var(--wt-icon);
    height: var(--wt-icon);
    flex: 0 0 auto;
}

/* Complemento lido só por leitor de tela — diferencia os "Fale conosco" repetidos. */
.wt-card__cta-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Variantes claras da faixa de área de atuação (cinza) e do agronegócio (branca):
   ícone + título centralizados, CTA preenchido — mesmo padrão de card nas duas. */
.wt-areas {
    background-color: var(--wt-gray);
    color: var(--wt-text-on-light);
}

.wt-agro {
    background-color: var(--wt-white);
    color: var(--wt-text-on-light);
}

.wt-areas .wt-card {
    background-color: var(--wt-gray-light);
    border: var(--wt-border-light);
    box-shadow: var(--wt-shadow-sm);
}

.wt-agro .wt-card {
    background-color: var(--wt-gray-light);
    border: var(--wt-border-light);
    box-shadow: var(--wt-shadow-sm);
}

.wt-areas .wt-card:hover,
.wt-agro .wt-card:hover {
    border-color: var(--wt-gold);
    box-shadow: var(--wt-shadow);
}

.wt-areas .wt-card__icon,
.wt-agro .wt-card__icon {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wt-control-lg);
    height: var(--wt-control-lg);
    color: var(--wt-gold-ink);
}

.wt-areas .wt-card__icon .wt-icon,
.wt-agro .wt-card__icon .wt-icon {
    width: 26px;
    height: 26px;
}

.wt-areas .wt-card__title,
.wt-agro .wt-card__title {
    text-align: center;
    color: var(--wt-navy);
}

.wt-areas .wt-card__text,
.wt-agro .wt-card__text {
    color: var(--wt-text-muted);
}

/* ---------------------------------------------------------------
   8. Urgência (Maria) e Janela (Criminal)
   --------------------------------------------------------------- */

.wt-urgencia__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wt-space-8);
    align-items: center;
    text-align: left;
}

.wt-urgencia__title {
    font-size: var(--wt-fs-display);
    font-weight: var(--wt-fw-regular);
    line-height: var(--wt-lh-tight);
    color: var(--wt-white);
    margin: 0;
}

.wt-urgencia__title em {
    font-family: var(--wt-font-serif);
    font-style: italic;
    color: var(--wt-gold);
}

.wt-urgencia__content {
    display: flex;
    flex-direction: column;
}

.wt-urgencia__subtitle {
    font-size: var(--wt-fs-lead);
    font-weight: var(--wt-fw-regular);
    color: var(--wt-gold);
    margin-bottom: var(--wt-space-5);
}

.wt-urgencia__text {
    color: var(--wt-text-on-dark-soft);
}

.wt-urgencia__actions {
    margin-top: var(--wt-space-7);
}

.wt-janela {
    background-color: var(--wt-navy-darkest);
}

.wt-janela__inner {
    text-align: center;
}

.wt-janela__title {
    font-size: var(--wt-fs-h2);
    font-weight: var(--wt-fw-regular);
    line-height: var(--wt-lh-tight);
    margin-bottom: var(--wt-space-5);
}

.wt-janela__title em {
    font-family: var(--wt-font-serif);
    font-style: italic;
    color: var(--wt-gold);
}

.wt-janela__text {
    color: var(--wt-text-on-dark-soft);
}

.wt-janela__highlight {
    display: inline-flex;
    align-items: center;
    gap: var(--wt-space-3);
    margin-top: var(--wt-space-6);
    padding: var(--wt-space-3) var(--wt-space-5);
    border: var(--wt-border-width) solid var(--wt-gold);
    border-radius: var(--wt-radius-pill);
    font-weight: var(--wt-fw-semibold);
    letter-spacing: var(--wt-tracking-wide);
    color: var(--wt-gold);
}

.wt-janela__icon {
    width: var(--wt-icon-md);
    height: var(--wt-icon-md);
    color: var(--wt-gold-ink);
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   9. Vídeos (facade do YouTube)
   --------------------------------------------------------------- */

.wt-videos {
    background-color: var(--wt-white);
    color: var(--wt-text-on-light);
}

.wt-videos__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--wt-space-5);
}

.wt-videos__item {
    flex: 0 1 var(--wt-video-vertical);
    max-width: var(--wt-video-vertical-max);
}

.wt-video-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: var(--wt-border-gold);
    border-radius: var(--wt-radius-lg);
    background-color: var(--wt-navy-card);
    line-height: 0;
    transition: border-color var(--wt-transition);
}

.wt-video-btn:hover {
    border-color: var(--wt-gold);
}

.wt-videos__item .wt-video-btn img {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
}

.wt-video-btn__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wt-control-play);
    height: var(--wt-control-play);
    border-radius: 50%;
    background-color: var(--wt-gold);
    color: var(--wt-navy);
    box-shadow: var(--wt-shadow-lg);
    transition: background-color var(--wt-transition), transform var(--wt-transition);
}

.wt-video-btn:hover .wt-video-btn__play {
    background-color: var(--wt-gold-light);
    transform: translate(-50%, -50%) scale(1.06);
}

.wt-video-btn__play .wt-icon {
    width: var(--wt-icon-xl);
    height: var(--wt-icon-xl);
    margin-left: 3px;
}

.wt-videos__cta {
    text-align: center;
    margin-top: var(--wt-space-7);
}

/* ---------------------------------------------------------------
   10. Sobre
   --------------------------------------------------------------- */

/* Sobrescreve o ivory de .wt-section--light (mesma especificidade, vem depois
   no cascade): aqui o fundo claro é cinza. */
.wt-sobre,
.wt-escritorio,
.wt-locais {
    background-color: var(--wt-gray);
}

.wt-sobre__inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--wt-space-8);
    align-items: center;
}

.wt-sobre__photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--wt-radius-lg);
    border: var(--wt-border-width) solid var(--wt-gold-translucent);
    box-shadow: var(--wt-shadow);
}

.wt-sobre__title {
    font-size: var(--wt-fs-h2);
    font-weight: var(--wt-fw-regular);
    margin-bottom: var(--wt-space-5);
}

.wt-sobre__text {
    color: var(--wt-text-muted);
}

.wt-sobre__actions {
    margin-top: var(--wt-space-6);
}

/* ---------------------------------------------------------------
   11. Escritório
   --------------------------------------------------------------- */

.wt-escritorio__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wt-space-8);
    align-items: center;
}

.wt-escritorio__content .wt-section__head {
    max-width: none;
    margin-inline: 0;
    text-align: left;
}

.wt-escritorio__text {
    color: var(--wt-text-muted);
}

.wt-escritorio__actions {
    margin-top: var(--wt-space-6);
}

.wt-escritorio__slider {
    position: relative;
}

.wt-escritorio__gallery {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--wt-radius-lg);
    overflow: hidden;
}

.wt-escritorio__item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.wt-escritorio__item.is-active {
    opacity: 1;
}

.wt-escritorio__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--wt-radius-lg);
    border: var(--wt-border-width) solid var(--wt-gold-translucent);
}

.wt-escritorio__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--wt-space-2);
    background: none;
    border: 0;
    color: var(--wt-white);
    cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    transform: translateY(-50%);
    transition: opacity var(--wt-transition);
}

.wt-escritorio__nav:hover {
    opacity: 0.7;
}

.wt-escritorio__nav--prev {
    left: var(--wt-space-2);
}

.wt-escritorio__nav--next {
    right: var(--wt-space-2);
}

.wt-escritorio__nav .wt-icon {
    width: 28px;
    height: 28px;
}

/* ---------------------------------------------------------------
   12. Fechamento (situações)
   --------------------------------------------------------------- */

.wt-situacoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--wt-card-min), 1fr));
    gap: var(--wt-space-5);
}

.wt-situacao {
    padding: var(--wt-space-6);
    background-color: var(--wt-white);
    border: var(--wt-border-light);
    border-top: var(--wt-border-accent) solid var(--wt-gold);
    border-radius: var(--wt-radius-lg);
    box-shadow: var(--wt-shadow-sm);
}

.wt-situacao__label {
    margin-bottom: var(--wt-space-2);
    text-align: center;
}

.wt-situacao__title {
    margin-bottom: var(--wt-space-3);
    color: var(--wt-navy);
    text-align: center;
}

.wt-situacao__text {
    font-size: var(--wt-fs-sm);
    color: var(--wt-text-muted);
}

/* ---------------------------------------------------------------
   13. Localização
   --------------------------------------------------------------- */

.wt-locais__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--wt-card-min-lg), 1fr));
    gap: var(--wt-space-6);
}

.wt-local {
    overflow: hidden;
    background-color: var(--wt-white);
    border: var(--wt-border-light);
    border-radius: var(--wt-radius-lg);
    box-shadow: var(--wt-shadow-sm);
}

.wt-local__map {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--wt-gray-light);
}

.wt-local__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.wt-local__body {
    padding: var(--wt-space-6);
}

.wt-local__title {
    margin-bottom: var(--wt-space-4);
    color: var(--wt-navy);
}

.wt-local__address {
    display: flex;
    align-items: flex-start;
    gap: var(--wt-space-3);
    font-size: var(--wt-fs-sm);
    color: var(--wt-text-muted);
}

.wt-local__icon {
    width: var(--wt-icon-md);
    height: var(--wt-icon-md);
    flex: 0 0 auto;
    color: var(--wt-gold-ink);
}

.wt-local__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wt-space-3);
    margin-top: var(--wt-space-5);
}

/* ---------------------------------------------------------------
   14. FAQ
   --------------------------------------------------------------- */

/* Sobrescreve o ivory de .wt-section--light (mesma especificidade, vem depois
   no cascade): aqui o fundo claro é branco. */
.wt-faq {
    background-color: var(--wt-white);
}

/* Painel único com divisórias, em vez de um card por pergunta: as outras seções
   já usam grades de cards e a repetição deixava a lista visualmente picotada. */
.wt-faq__list {
    max-width: var(--wt-measure-lg);
    margin-inline: auto;
    background-color: var(--wt-white);
    border: var(--wt-border-light);
    border-radius: var(--wt-radius-lg);
    box-shadow: var(--wt-shadow-sm);
    overflow: hidden;
}

.wt-faq__item + .wt-faq__item {
    border-top: var(--wt-border-light);
}

/* Barra dourada por dentro (não border-left) para o texto não deslocar ao abrir. */
.wt-faq__details[open] {
    background-color: var(--wt-ivory);
    box-shadow: inset var(--wt-border-accent) 0 0 var(--wt-gold);
}

.wt-faq__question {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wt-space-5);
    padding: var(--wt-space-5) var(--wt-space-6);
    cursor: pointer;
    list-style: none;
    font-size: var(--wt-fs-lead);
    font-weight: var(--wt-fw-medium);
    line-height: var(--wt-lh-snug);
    color: var(--wt-navy);
    transition: color var(--wt-transition), background-color var(--wt-transition);
}

.wt-faq__question::-webkit-details-marker {
    display: none;
}

.wt-faq__details:not([open]) .wt-faq__question:hover {
    background-color: var(--wt-ivory);
}

.wt-faq__question:hover,
.wt-faq__details[open] .wt-faq__question {
    color: var(--wt-gold-ink);
}

.wt-faq__question-text {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.wt-faq__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--wt-icon-lg);
    height: var(--wt-icon-lg);
    color: var(--wt-text-muted);
    transition: transform var(--wt-transition), color var(--wt-transition);
}

.wt-faq__marker .wt-icon {
    width: var(--wt-icon-lg);
    height: var(--wt-icon-lg);
}

.wt-faq__question:hover .wt-faq__marker,
.wt-faq__details[open] .wt-faq__marker {
    color: var(--wt-gold-ink);
}

.wt-faq__details[open] .wt-faq__marker {
    transform: rotate(45deg);
}

/* O recuo à direita reserva a coluna do marcador, alinhando o bloco de resposta
   com a coluna da pergunta. */
.wt-faq__answer {
    padding: 0 calc(var(--wt-space-6) + var(--wt-icon-lg) + var(--wt-space-5)) var(--wt-space-6) var(--wt-space-6);
    color: var(--wt-text-muted);
    animation: wt-faq-reveal var(--wt-transition) both;
}

@keyframes wt-faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* ---------------------------------------------------------------
   15. Formulário
   --------------------------------------------------------------- */

.wt-form {
    background-image: var(--wt-facet-radial);
}

/* O cabeçalho ocupa o container inteiro; só os campos ficam na coluna estreita. */
.wt-form .wt-section__head {
    max-width: none;
}

.wt-form__inner {
    max-width: var(--wt-measure);
    margin-inline: auto;
}

.wt-form__form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wt-space-5);
}

.wt-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--wt-space-2);
}

.wt-form__field--full,
.wt-form__actions {
    grid-column: 1 / -1;
}

.wt-form__label {
    font-size: var(--wt-fs-label);
    font-weight: var(--wt-fw-semibold);
    letter-spacing: var(--wt-tracking-wide);
    text-transform: uppercase;
    color: var(--wt-gold);
}

.wt-form__input {
    width: 100%;
    padding: var(--wt-space-3) var(--wt-space-4);
    font-family: var(--wt-font-sans);
    font-size: var(--wt-fs-body);
    color: var(--wt-navy);
    background-color: var(--wt-ivory);
    border: var(--wt-border-width) solid var(--wt-gold-translucent);
    border-radius: var(--wt-radius);
    transition: border-color var(--wt-transition);
}

.wt-form__input:focus {
    border-color: var(--wt-gold);
}

.wt-form__textarea {
    resize: vertical;
    min-height: var(--wt-textarea-min);
}

.wt-form__actions {
    text-align: center;
    margin-top: var(--wt-space-2);
}

.wt-form__honeypot {
    position: absolute;
    left: var(--wt-offscreen);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wt-form__feedback {
    padding: var(--wt-space-4) var(--wt-space-5);
    margin-bottom: var(--wt-space-6);
    border-radius: var(--wt-radius);
    font-weight: var(--wt-fw-medium);
    text-align: center;
}

.wt-form__feedback--ok {
    background-color: var(--wt-navy-card);
    border: var(--wt-border-width) solid var(--wt-gold);
    color: var(--wt-white);
}

.wt-form__feedback--erro {
    background-color: var(--wt-navy-card);
    border: var(--wt-border-width) solid var(--wt-gold-dark);
    color: var(--wt-text-on-dark-soft);
}

/* ---------------------------------------------------------------
   16. Faixa "Localização Privilegiada"
   --------------------------------------------------------------- */

.wt-proximidade {
    width: 100%;
    background-color: var(--wt-navy-darkest);
    border-block: var(--wt-border-gold);
    padding-block: var(--wt-space-6);
}

.wt-proximidade__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wt-space-5);
    text-align: center;
}

.wt-proximidade__title {
    font-family: var(--wt-font-sans);
    font-size: var(--wt-fs-label);
    font-weight: var(--wt-fw-semibold);
    letter-spacing: var(--wt-tracking-label);
    text-transform: uppercase;
    color: var(--wt-gold);
}

.wt-proximidade__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--wt-space-3) var(--wt-space-7);
}

.wt-proximidade__item {
    display: inline-flex;
    align-items: center;
    gap: var(--wt-space-2);
    font-size: var(--wt-fs-sm);
    color: var(--wt-text-on-dark-soft);
}

.wt-proximidade__icon {
    width: var(--wt-icon);
    height: var(--wt-icon);
    flex: 0 0 auto;
    color: var(--wt-gold);
}

/* ---------------------------------------------------------------
   17. Rodapé
   --------------------------------------------------------------- */

.wt-footer {
    width: 100%;
    background-color: var(--wt-navy-deep);
    background-image: var(--wt-facet-overlay);
    color: var(--wt-text-on-dark);
}

.wt-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
    gap: var(--wt-space-7);
    padding-block: var(--wt-space-8);
}

.wt-footer__logo {
    width: var(--wt-logo-footer);
    height: auto;
}

.wt-footer__title {
    font-family: var(--wt-font-sans);
    font-size: var(--wt-fs-label);
    font-weight: var(--wt-fw-semibold);
    letter-spacing: var(--wt-tracking-label);
    text-transform: uppercase;
    color: var(--wt-gold);
    margin-bottom: var(--wt-space-4);
}

.wt-footer__address {
    display: block;
    font-size: var(--wt-fs-sm);
    color: var(--wt-text-on-dark-soft);
    transition: color var(--wt-transition);
}

.wt-footer__address:hover {
    color: var(--wt-gold);
}

.wt-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--wt-space-3);
}

.wt-footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--wt-space-3);
    font-size: var(--wt-fs-sm);
    color: var(--wt-text-on-dark-soft);
    transition: color var(--wt-transition);
}

.wt-footer__link:hover {
    color: var(--wt-gold);
}

.wt-footer__icon {
    width: var(--wt-icon);
    height: var(--wt-icon);
    flex: 0 0 auto;
    color: var(--wt-gold);
}

.wt-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wt-space-2);
}

.wt-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wt-control);
    height: var(--wt-control);
    border: var(--wt-border-gold);
    border-radius: var(--wt-radius-pill);
    transition: background-color var(--wt-transition);
}

.wt-footer__social-link:hover {
    background-color: var(--wt-navy-card);
}

.wt-footer__bottom {
    border-top: var(--wt-border-gold);
}

.wt-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wt-space-4);
    padding-block: var(--wt-space-5);
    font-size: var(--wt-fs-sm);
    color: var(--wt-text-on-dark-soft);
}

.wt-footer__policy {
    color: var(--wt-gold);
    transition: color var(--wt-transition);
}

.wt-footer__policy:hover {
    color: var(--wt-gold-light);
}

.wt-footer__credit {
    border-top: var(--wt-border-gold);
    padding-block: var(--wt-space-4);
    font-size: var(--wt-fs-label);
    text-align: center;
    color: var(--wt-text-on-dark-soft);
}

.wt-footer__credit a {
    color: var(--wt-gold);
}

.wt-footer__credit a:hover {
    color: var(--wt-gold-light);
}

/* ---------------------------------------------------------------
   18. Botão flutuante do WhatsApp
   --------------------------------------------------------------- */

.wt-whatsapp-float {
    position: fixed;
    bottom: calc(var(--wt-float-offset) + env(safe-area-inset-bottom, 0px));
    right: var(--wt-float-offset);
    width: var(--wt-control-xl);
    height: var(--wt-control-xl);
    background: var(--wt-whatsapp);
    color: var(--wt-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wt-shadow-lg);
    z-index: 999;
    transition: transform var(--wt-transition);
    text-decoration: none;
}

.wt-whatsapp-float:hover {
    transform: scale(1.1);
}

.wt-whatsapp-float svg {
    width: var(--wt-icon-float);
    height: var(--wt-icon-float);
}

/* ---------------------------------------------------------------
   19. Página legal e fallback
   --------------------------------------------------------------- */

.wt-legal__inner {
    max-width: var(--wt-measure-lg);
}

.wt-legal__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wt-space-4);
    margin-bottom: var(--wt-space-8);
}

.wt-legal__topbar img {
    width: var(--wt-logo-legal);
    height: auto;
}

.wt-legal__title {
    color: var(--wt-white);
}

.wt-legal__meta {
    text-align: center;
    font-size: var(--wt-fs-sm);
    color: var(--wt-text-on-dark-soft);
    margin-bottom: var(--wt-space-7);
}

.wt-legal__body {
    color: var(--wt-text-on-dark-soft);
}

.wt-legal__body p {
    margin-bottom: var(--wt-space-4);
}

.wt-legal__body h2 {
    margin-top: var(--wt-space-7);
    margin-bottom: var(--wt-space-4);
    padding-top: var(--wt-space-5);
    border-top: var(--wt-border-gold);
    font-size: var(--wt-fs-h3);
    color: var(--wt-white);
}

.wt-legal__body ul {
    list-style: disc;
    padding-left: var(--wt-space-5);
    margin-bottom: var(--wt-space-4);
}

.wt-legal__body a {
    color: var(--wt-gold);
    text-decoration: underline;
}

.wt-legal__pending {
    padding: var(--wt-space-6);
    background-color: var(--wt-navy-card);
    border: var(--wt-border-gold);
    border-radius: var(--wt-radius-lg);
    text-align: center;
}

.wt-legal__actions--bottom {
    margin-top: var(--wt-space-8);
    text-align: center;
}

.wt-article__title {
    margin-bottom: var(--wt-space-5);
}

.wt-article__body {
    color: var(--wt-text-muted);
}

/* ---------------------------------------------------------------
   20. Responsivo
   --------------------------------------------------------------- */

@media (max-width: 1024px) {
    :root {
        --wt-section-pad: 72px;
    }

    .wt-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--wt-space-7);
    }

    .wt-hero__content {
        padding-inline: var(--wt-container-pad);
        padding-block: var(--wt-space-7);
    }

    .wt-hero__title {
        font-size: 30px;
    }

    /* Sangra até a borda da viewport — mesma foto sem moldura do desktop,
       só que abaixo do conteúdo (ordem natural do DOM) em vez de ao lado. */
    .wt-hero__media {
        position: relative;
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        aspect-ratio: 4 / 5;
    }

    .wt-hero__photo {
        position: absolute;
        inset: 0;
    }

    .wt-itens__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wt-urgencia__inner {
        grid-template-columns: 1fr;
        gap: var(--wt-space-6);
        text-align: center;
    }

    .wt-sobre__inner {
        grid-template-columns: 1fr;
        gap: var(--wt-space-7);
    }

    .wt-sobre__media {
        max-width: var(--wt-media-narrow);
        margin-inline: auto;
    }

    .wt-escritorio__inner {
        grid-template-columns: 1fr;
        gap: var(--wt-space-7);
    }

    .wt-escritorio__slider {
        max-width: var(--wt-media-wide);
        margin-inline: auto;
        width: 100%;
    }

    .wt-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wt-space-6);
    }
}

@media (max-width: 768px) {
    :root {
        --wt-section-pad: 64px;
    }

    .wt-hero__hat {
        width: var(--wt-logo-legal);
    }

    .wt-form__form {
        grid-template-columns: 1fr;
    }

    .wt-proximidade__list {
        flex-direction: column;
        align-items: center;
        gap: var(--wt-space-4);
    }
}

@media (max-width: 600px) {
    .wt-itens__grid {
        grid-template-columns: 1fr;
        gap: var(--wt-space-5);
    }

    .wt-hero__actions .wt-btn,
    .wt-local__actions .wt-btn {
        flex: 1 1 100%;
    }

    /* Dois por linha; o terceiro sobra sozinho e o justify-content: center
       do .wt-videos__row já centraliza ele embaixo, entre os outros dois. */
    .wt-videos__item {
        flex: 0 1 calc(50% - var(--wt-space-5) / 2);
        max-width: calc(50% - var(--wt-space-5) / 2);
    }

    .wt-faq__question {
        font-size: var(--wt-fs-body);
        padding: var(--wt-space-4) var(--wt-space-5);
    }

    .wt-faq__answer {
        padding: 0 var(--wt-space-5) var(--wt-space-5);
    }

    /* No mobile o texto centralizado quebra em linhas muito desiguais;
       justificado fica mais legível sem mudar o alinhamento no desktop. */
    .wt-janela__text {
        text-align: justify;
    }

    /* Rodapé: uma coluna, tudo centralizado. */
    .wt-footer__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .wt-footer__col--brand {
        display: flex;
        justify-content: center;
    }

    .wt-footer__list {
        align-items: center;
    }

    .wt-footer__link {
        flex-direction: column;
        gap: var(--wt-space-1);
    }

    .wt-footer__social {
        justify-content: center;
    }

    .wt-footer__bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .wt-legal__topbar {
        flex-direction: column;
        gap: var(--wt-space-5);
    }

    .wt-legal__title {
        font-size: var(--wt-fs-h2);
    }
}