/* ==========================================================================
   Samia Abdel · Psicóloga — folha de estilos
   Mobile first. Tokens no :root; componentes; seções; movimento.
   Breakpoints (media queries não aceitam variáveis):
   480 · 640 · 768 · 900 · 1024 · 1100 · 1280
   ========================================================================== */

/* ---------- Fontes (self-hosted, OFL) ----------------------------------
   Ibarra Real Nova (títulos), Gantari (texto e interface) e Platypi Itálico
   (falas): display serifado + sans humanista de trabalho, na proporção 90/10.
   Escolha e justificativa em docs/DECISOES.md §4.
   ---------------------------------------------------------------------- */
@font-face {
    /* Títulos: serifa de transição, humanista, com maiúsculas de livro. */
    font-family: "Ibarra Real Nova";
    src: url("../fonts/ibarra-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    /* usada só nas falas em primeira pessoa e na frase da marca */
    font-family: "Platypi";
    src: url("../fonts/platypi-italic-400.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gantari";
    src: url("../fonts/gantari-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gantari";
    src: url("../fonts/gantari-italic-400.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ---------- Design tokens --------------------------------------------- */
:root {
    /* Cores da marca (rosas da identidade anterior, escurecidas onde há texto) */
    --color-primary: #8A4B56;          /* rosa profundo: CTAs e destaques (6,5:1 com branco) */
    --color-primary-strong: #74404A;   /* hover e texto sobre rosa claro */
    --color-primary-soft: #F6E4E4;
    --color-secondary: #D59999;        /* rosa antigo: só decoração */
    --color-accent: #E0ABAB;           /* rosa da identidade: realces e texto sobre escuro */
    --color-accent-soft: #F3D3D3;

    --color-background: #FFF8F7;
    --color-surface: #FFFFFF;
    --color-surface-soft: #FFF0F0;     /* rosa-claro da identidade */
    --color-surface-tint: #FBEDEC;
    --color-surface-dark: #3E2A2F;     /* cacau rosado */
    --color-surface-dark-2: #4A3238;

    --color-text: #3B2F32;
    --color-text-soft: #57494C;
    --color-muted: #6B5E61;
    --color-text-inverse: #FFF7F6;
    --color-inverse-soft: #E3D2D5;
    --color-inverse-muted: #CDB8BC;

    --color-border: #EFD8D8;
    --color-border-strong: #E0ABAB;
    --color-border-input: #9A7F85;     /* 3,6:1 sobre branco (contraste não textual) */
    --color-border-inverse: rgba(255, 240, 240, .14);

    --color-success: #2F6B4F;
    --color-warning: #8A5A12;
    --color-danger: #A3342B;
    --color-danger-soft: #FBEAEA;

    /* Tipografia */
    --font-display: "Ibarra Real Nova", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    /* itálico das falas em primeira pessoa e da frase da marca */
    --font-quote: "Platypi", "Iowan Old Style", Georgia, serif;
    --font-body: "Gantari", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1.0625rem;
    --fs-md: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    --fs-lg: clamp(1.2rem, 1.1rem + .45vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --fs-2xl: clamp(1.65rem, 1.25rem + 1.8vw, 2.5rem);
    --fs-display: clamp(1.95rem, 1.2rem + 3.2vw, 3.5rem);

    --lh-tight: 1.12;
    --lh-snug: 1.3;
    --lh-body: 1.65;

    /* Espaço (base 4px) */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --section-y: clamp(4rem, 2.75rem + 5vw, 7rem);

    /* Forma */
    --radius-sm: .5rem;
    --radius-md: .875rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;
    --radius-arch: 999px 999px var(--radius-xl) var(--radius-xl);

    /* Sombras com tom rosado, discretas */
    --shadow-sm: 0 1px 2px rgba(62, 42, 47, .06), 0 2px 8px rgba(62, 42, 47, .04);
    --shadow-md: 0 12px 32px -14px rgba(62, 42, 47, .22);
    --shadow-lg: 0 32px 64px -28px rgba(62, 42, 47, .32);
    --shadow-cta: 0 10px 24px -10px rgba(138, 75, 86, .55);

    /* Layout */
    --container-width: 1200px;
    --container-narrow: 46rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --header-h: 4.25rem;

    /* Movimento */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: .15s;
    --dur-base: .3s;
    --dur-slow: .7s;

    --focus-ring: 0 0 0 3px var(--color-background), 0 0 0 5px var(--color-primary);
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
    margin: 0;
    min-height: 100vh;
    font-synthesis: none;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-display);
    /* pesos intermediários do eixo variável: 560 sustenta a serifa em tamanho grande
       sem virar "título em negrito"; os títulos menores compensam com 620. */
    font-weight: 560;
    line-height: var(--lh-tight);
    letter-spacing: -.005em;
}

/* balance só nos títulos grandes: é caro e nos h3 curtos quase não muda nada */
h1,
h2 {
    text-wrap: balance;
}

/* Caixa alta pede espacejamento positivo e entrelinha um pouco maior, senão os
   acentos (Ã, Ó, Ç) encostam na linha de cima. A serifa precisa de menos
   espacejamento que a sans anterior: .02em já separa as maiúsculas. */
h1,
h2,
.faq-item__question,
.service__title,
.pillar__title,
.step__title,
.contact__card-title,
.service-help__title,
.legal__title {
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.16;
}

/* Títulos pequenos: mais peso para não sumirem perto do texto da Gantari, e palavras
   compridas em caixa alta (RELACIONAMENTOS, ACOMPANHAMENTO) quebram com hífen em vez de
   esticar a coluna do cartão. */
.faq-item__question,
.service__title,
.pillar__title,
.step__title,
.contact__card-title,
.service-help__title,
.legal__title {
    font-weight: 620;
    hyphens: auto;
    overflow-wrap: break-word;
}

p {
    margin: 0;
}

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

img,
svg,
picture {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

strong {
    font-weight: 600;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--color-accent-soft);
    color: var(--color-text);
}

main:focus {
    outline: none;
}

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 100;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus-visible {
    transform: none;
}

.container {
    width: 100%;
    max-width: calc(var(--container-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---------- Ícones ----------------------------------------------------- */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--flip {
    transform: scaleX(-1);
}

/* ---------- Tipografia de apoio ---------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    color: var(--color-primary);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    flex: none;
    background: currentColor;
}

.eyebrow--light {
    color: var(--color-accent);
}

.section-title {
    font-size: var(--fs-2xl);
}

.section-text {
    margin-top: var(--space-5);
    color: var(--color-text-soft);
    font-size: var(--fs-md);
}

.note {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-muted);
    font-size: var(--fs-sm);
}

.note .icon {
    margin-top: .15em;
    color: var(--color-success);
}

/* ---------- Links e botões --------------------------------------------- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(138, 75, 86, .35);
    text-underline-offset: .3em;
    transition: text-decoration-color var(--dur-base) ease, color var(--dur-base) ease;
}

.link-arrow:hover {
    color: var(--color-primary-strong);
    text-decoration-color: currentColor;
}

.link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--color-primary);
    --btn-border: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 3rem;
    padding: var(--space-2) var(--space-6);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--dur-base) ease,
        border-color var(--dur-base) ease,
        color var(--dur-base) ease,
        box-shadow var(--dur-base) ease,
        transform var(--dur-base) var(--ease-out);
}

.btn:focus-visible {
    border-radius: var(--radius-pill);
}

.btn:active {
    transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
    cursor: progress;
    opacity: .7;
    transform: none;
}

.btn--sm {
    min-height: 2.75rem;
    padding-inline: var(--space-5);
    font-size: .9375rem;
}

.btn--lg {
    min-height: 3.5rem;
    padding-inline: var(--space-8);
    font-size: 1.0625rem;
}

.btn--block {
    width: 100%;
}

.btn--primary {
    --btn-bg: var(--color-primary);
    --btn-fg: #FFFFFF;
    box-shadow: var(--shadow-cta);
}

.btn--primary:hover {
    --btn-bg: var(--color-primary-strong);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(138, 75, 86, .6);
}

.btn--primary:focus-visible {
    box-shadow: var(--focus-ring), var(--shadow-cta);
}

.btn--ghost {
    --btn-border: var(--color-border-strong);
    --btn-bg: rgba(255, 255, 255, .6);
}

.btn--ghost:hover {
    --btn-bg: var(--color-primary-soft);
    --btn-border: var(--color-primary);
}

.btn--outline {
    --btn-border: var(--color-primary);
}

.btn--outline:hover {
    --btn-bg: var(--color-primary-soft);
}

.btn--light {
    --btn-bg: var(--color-surface-soft);
    --btn-fg: var(--color-surface-dark);
}

.btn--light:hover {
    --btn-bg: #FFFFFF;
    transform: translateY(-2px);
}

.btn--light:focus-visible {
    box-shadow: 0 0 0 3px var(--color-surface-dark), 0 0 0 5px var(--color-accent);
}

.btn .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.icon--nudge {
    transition: transform var(--dur-base) var(--ease-out);
}

a:hover .icon--nudge,
a:focus-visible .icon--nudge {
    transform: translateX(3px);
}

/* ---------- Cabeçalho -------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 248, 247, .82);
    border-bottom: 1px solid transparent;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, background-color var(--dur-base) ease;
}

.site-header.is-scrolled {
    background: rgba(255, 248, 247, .94);
    border-bottom-color: var(--color-border);
    box-shadow: 0 8px 24px -20px rgba(62, 42, 47, .35);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    min-height: 44px;
    color: var(--color-text);
    text-decoration: none;
}

.brand__logo {
    width: 9.75rem;
    aspect-ratio: 4828 / 803;
    height: auto;
    color: var(--color-surface-dark);
}

.brand__meta {
    color: var(--color-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .9375rem;
    font-weight: 600;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
    display: block;
    width: 1rem;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) ease;
}

.nav-toggle__icon {
    position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__icon::before {
    top: -5px;
}

.nav-toggle__icon::after {
    top: 5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
    transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
    transform: translateY(-5px) rotate(-45deg);
}

/* Menu no celular: painel sob o cabeçalho */
.site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    z-index: 49;
    display: none;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-4) var(--gutter) var(--space-8);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
    box-shadow: var(--shadow-lg);
}

.site-nav.is-open {
    display: block;
}

.site-nav__list {
    display: grid;
}

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.375rem;
    text-decoration: none;
}

.site-nav__link:hover {
    color: var(--color-primary);
}

.site-nav__cta {
    width: 100%;
    margin-top: var(--space-6);
    min-height: 3.25rem;
}

html.nav-open {
    overflow: hidden;
}

/* Sem JavaScript, o menu fica sempre visível */
@media (scripting: none) {
    .nav-toggle {
        display: none;
    }

    .site-header {
        position: static;
    }

    .site-header__inner {
        flex-wrap: wrap;
        padding-block: var(--space-3);
    }

    .site-nav {
        position: static;
        display: block;
        width: 100%;
        max-height: none;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
}

@media (min-width: 1024px) {
    :root {
        --header-h: 5rem;
    }

    .brand__logo {
        width: 10.75rem;
    }

    .nav-toggle {
        display: none;
    }

    .site-nav {
        position: static;
        display: flex;
        align-items: center;
        gap: var(--space-8);
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .site-nav__list {
        display: flex;
        gap: var(--space-6);
    }

    .site-nav__link {
        position: relative;
        min-height: 44px;
        border: 0;
        font-family: var(--font-body);
        font-size: .9375rem;
        font-weight: 500;
        color: var(--color-text-soft);
    }

    .site-nav__link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: .55rem;
        height: 1px;
        background: var(--color-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--dur-base) var(--ease-out);
    }

    .site-nav__link:hover::after,
    .site-nav__link:focus-visible::after {
        transform: scaleX(1);
    }

    .site-nav__cta {
        width: auto;
        margin: 0;
        min-height: 2.75rem;
    }

    html.nav-open {
        overflow: visible;
    }
}

/* ---------- Seções (base) ---------------------------------------------- */
.section {
    position: relative;
    padding-block: var(--section-y);
    overflow-x: clip;
}

.section--soft {
    background: var(--color-surface-soft);
}

.section--tint {
    background: linear-gradient(180deg, var(--color-surface-tint) 0%, var(--color-background) 100%);
}

.section--dark {
    background:
        radial-gradient(60rem 30rem at 85% 0%, rgba(224, 171, 171, .14), transparent 60%),
        var(--color-surface-dark);
    color: var(--color-inverse-soft);
}

.section--dark .section-title {
    color: var(--color-text-inverse);
}

.section--contact {
    background:
        url("../images/ramo.svg") no-repeat right -5rem bottom -4rem / 14rem auto,
        linear-gradient(160deg, var(--color-surface-soft) 0%, #FBE3E2 100%);
}

.section-head {
    max-width: var(--container-narrow);
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head--center .eyebrow {
    justify-content: center;
}

@media (min-width: 1024px) {
    .section-head--split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: var(--space-12);
        max-width: none;
    }

    .section-head--split .section-text {
        margin-top: 0;
    }
}

/* ---------- Hero ------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(4rem, 2.5rem + 5vw, 6.5rem);
    overflow-x: clip;
    isolation: isolate;
}

.hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    background: var(--color-background);
}

/* A foto de grupo entra como textura: já sai do arquivo em duotone nas cores da marca
   (docs/ferramentas/otimizar-fundo-hero.py). O enquadramento também vem de lá — são três
   recortes, um por faixa de tela — porque aqui ela é sempre "cover", sem borda à mostra. */
.hero__backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/hero-fundo-800.webp") center / cover no-repeat;
    /* o topo da foto some antes de chegar ao menu */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%);
    mask-image: linear-gradient(to bottom, transparent, #000 24%);
}

@supports (background-image: image-set(url("a.avif") type("image/avif"))) {
    .hero__backdrop::before {
        background-image: image-set(url("../images/hero-fundo-800.avif") type("image/avif"),
                                    url("../images/hero-fundo-800.webp") type("image/webp"));
    }
}

/* Véu que devolve a cor do fundo por cima da foto — e a apaga na altura do título —
   mais os brilhos rosados que já existiam. */
.hero__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40rem 30rem at 86% 46%, rgba(224, 171, 171, .32), transparent 70%),
        radial-gradient(30rem 22rem at 0% 100%, rgba(243, 211, 211, .45), transparent 70%),
        linear-gradient(to top,
            rgba(255, 248, 247, .74) 0%,
            rgba(255, 248, 247, .84) 38%,
            rgba(255, 248, 247, .90) 64%,
            var(--color-background) 88%);
}

.hero__grid {
    display: grid;
    gap: var(--space-12);
    align-items: center;
}

.hero__title {
    font-size: var(--fs-display);
    max-width: 15em;
}

.hero__highlight {
    color: var(--color-primary);
    background: linear-gradient(transparent 68%, rgba(224, 171, 171, .45) 68%, rgba(224, 171, 171, .45) 92%, transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.hero__lead {
    max-width: 36rem;
    margin-top: var(--space-6);
    color: var(--color-text-soft);
    font-size: var(--fs-md);
}

.hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.hero__facts {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
    color: var(--color-text-soft);
    font-size: .9375rem;
}

.hero__facts li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.hero__facts .icon {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--color-primary);
}

.hero__extra {
    margin-top: var(--space-4);
    /* tom mais fechado que o link padrão: aqui ele cai sobre a parte forte da foto */
    color: var(--color-primary-strong);
    font-size: .9375rem;
}

.hero__visual {
    position: relative;
    width: 100%;
    max-width: 21rem;
    margin-inline: auto;
    padding: var(--space-4) var(--space-8) var(--space-12);
}

.arch {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-arch);
    background: linear-gradient(172deg, #D9A1A6 0%, #E8BDBD 42%, #F7E0DE 100%);
    box-shadow: 0 40px 80px -40px rgba(138, 75, 86, .55);
}

.arch::before {
    content: "";
    position: absolute;
    inset: .75rem;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--radius-arch);
    pointer-events: none;
}

.arch__sprig {
    position: absolute;
    top: 8%;
    left: 50%;
    width: 46%;
    aspect-ratio: 220 / 360;
    height: auto;
    color: rgba(255, 255, 255, .9);
    transform: translateX(-42%) rotate(-10deg);
}

.arch__signature {
    position: absolute;
    left: 50%;
    bottom: 27%;
    width: 86%;
    aspect-ratio: 4828 / 803;
    height: auto;
    color: #FFFFFF;
    filter: drop-shadow(0 6px 16px rgba(116, 64, 74, .45));
    transform: translateX(-50%) rotate(-7deg);
}

.arch__quote {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 8%;
    z-index: 3;
    color: #5A2F38;
    font-family: var(--font-quote);
    font-style: italic;
    font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
    line-height: var(--lh-snug);
    text-align: center;
    text-wrap: balance;
}

.arch--photo .arch__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Com foto, a frase sai de cima da imagem e vira legenda embaixo do arco — fora dele,
   porque o arco tem aspect-ratio fixo e overflow: hidden, que engoliriam o texto. */
.arch__quote--caption {
    position: static;
    /* a margem de baixo é o espaço do selo do CRP, que fica ancorado no fim do bloco */
    margin: var(--space-5) 0 var(--space-8);
    padding: 0 var(--space-2);
    color: var(--color-primary-strong);
}

.seal {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 15rem;
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
}

.seal__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.seal small {
    display: block;
    color: var(--color-muted);
    font-size: .75rem;
    font-weight: 500;
}

.seal--top {
    top: 14%;
    left: 0;
}

.seal--bottom {
    right: 0;
    bottom: 0;
}

@media (max-width: 379.98px) {
    .btn--lg {
        padding-inline: var(--space-5);
        gap: var(--space-2);
        font-size: 1rem;
    }

    .eyebrow {
        letter-spacing: .12em;
    }
}

@media (min-width: 480px) {
    .hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (min-width: 640px) {
    .hero__facts {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-6);
    }
}

@media (min-width: 700px) {
    .hero__backdrop::before {
        background-image: url("../images/hero-fundo-1200.webp");
    }

    @supports (background-image: image-set(url("a.avif") type("image/avif"))) {
        .hero__backdrop::before {
            background-image: image-set(url("../images/hero-fundo-1200.avif") type("image/avif"),
                                        url("../images/hero-fundo-1200.webp") type("image/webp"));
        }
    }
}

@media (min-width: 1300px) {
    .hero__backdrop::before {
        background-image: url("../images/hero-fundo-1600.webp");
    }

    @supports (background-image: image-set(url("a.avif") type("image/avif"))) {
        .hero__backdrop::before {
            background-image: image-set(url("../images/hero-fundo-1600.avif") type("image/avif"),
                                        url("../images/hero-fundo-1600.webp") type("image/webp"));
        }
    }
}

@media (min-width: 1024px) {
    .hero {
        padding-top: clamp(3rem, 1rem + 4vw, 5rem);
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
        gap: var(--space-16);
    }

    .hero__visual {
        max-width: 29rem;
        padding: var(--space-8) var(--space-10) var(--space-12);
    }

    .seal--top {
        left: -.5rem;
    }

    .seal--bottom {
        right: -1rem;
        bottom: .25rem;
    }
}

/* ---------- Identificação ---------------------------------------------- */
.split {
    display: grid;
    gap: var(--space-10);
}

.split__closing {
    margin-top: var(--space-6);
    color: var(--color-primary-strong);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
}

.split__intro .link-arrow {
    margin-top: var(--space-3);
}

.feelings {
    display: grid;
    gap: var(--space-3);
}

.feeling {
    position: relative;
    padding: var(--space-5) var(--space-5) var(--space-5) 3.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    /* falas em primeira pessoa: a voz da página, no itálico da Platypi */
    font-family: var(--font-quote);
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.45;
}

.feeling::before {
    content: "\201C";
    position: absolute;
    top: .35rem;
    left: 1.1rem;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
}

@media (min-width: 640px) {
    .feelings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .split {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: var(--space-16);
        align-items: start;
    }

    .split__intro {
        position: sticky;
        top: calc(var(--header-h) + var(--space-8));
    }
}

/* ---------- Abordagem (pilares) ---------------------------------------- */
.pillars {
    display: grid;
    gap: var(--space-4);
}

.pillar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease, border-color var(--dur-base) ease;
}

.pillar:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.pillar__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.pillar__icon .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.pillar__title {
    font-size: var(--fs-lg);
}

.pillar__text {
    color: var(--color-text-soft);
    font-size: 1rem;
}

@media (min-width: 640px) {
    .pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .pillars {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Atendimentos ----------------------------------------------- */
.services {
    display: grid;
    gap: var(--space-4);
}

.service {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
}

.service:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.service__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.service__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.service__icon .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.service__audience {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.service__title {
    font-size: var(--fs-xl);
}

.service__text {
    color: var(--color-text-soft);
    font-size: 1rem;
}

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

.tags li {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: .8125rem;
    line-height: 1.5;
}

.service__cta {
    margin-top: auto;
    padding-top: var(--space-2);
}

/* Cartão principal: psicoterapia individual */
.service--featured {
    border-color: transparent;
    background:
        radial-gradient(24rem 16rem at 100% 0%, rgba(224, 171, 171, .2), transparent 70%),
        var(--color-primary);
    color: #FFFFFF;
}

.service--featured .service__icon,
.service--featured .service__audience {
    background: rgba(62, 42, 47, .22);
    color: #FFFFFF;
}

.service--featured .service__text,
.service--featured .service__cta,
.service--featured .service__cta:hover {
    color: #FFFFFF;
}

.service--featured .service__cta {
    text-decoration-color: rgba(255, 255, 255, .5);
}

.service--featured .tags li {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(62, 42, 47, .22);
    color: #FFFFFF;
}

.service--featured .service__cta:focus-visible {
    box-shadow: 0 0 0 3px var(--color-primary), 0 0 0 5px #FFFFFF;
}

/* Cartão de violência: aviso de risco e saída rápida */
.service--care {
    border-color: var(--color-border-strong);
}

.service__care {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-danger-soft);
    color: var(--color-text);
    font-size: .9375rem;
    line-height: 1.5;
}

.service__care p {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.service__care .icon {
    color: var(--color-danger);
}

.service__care a {
    color: var(--color-danger);
    font-weight: 700;
}

.quick-exit {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4) 0 var(--space-3);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-danger);
    font-size: .875rem;
    font-weight: 600;
    transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}

.quick-exit:hover {
    background: var(--color-danger);
    color: #FFFFFF;
}

/* Ajuda para escolher */
.service-help {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    background:
        url("../images/ramo-claro.svg") no-repeat right -2.5rem bottom -2rem / 9rem auto,
        var(--color-surface-dark);
    color: var(--color-inverse-soft);
}

.service-help__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(224, 171, 171, .16);
    color: var(--color-accent);
}

.service-help__title {
    color: var(--color-text-inverse);
    font-size: var(--fs-xl);
}

.service-help .btn {
    align-self: flex-start;
}

@media (max-width: 767.98px) {
    .service-help .btn {
        align-self: stretch;
    }
}

@media (min-width: 768px) {
    .services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service--featured,
    .service-help {
        grid-column: 1 / -1;
    }

    .service-help {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--space-6);
        row-gap: var(--space-1);
        padding: var(--space-8);
    }

    .service-help__icon {
        grid-row: span 2;
    }

    .service-help__text {
        grid-column: 2;
    }

    .service-help .btn {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (min-width: 1100px) {
    .services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .service--featured {
        grid-column: span 2;
        padding-right: 38%;
        background:
            url("../images/ramo-branco.svg") no-repeat right 6% top -1.5rem / auto 118%,
            radial-gradient(24rem 16rem at 100% 0%, rgba(224, 171, 171, .2), transparent 70%),
            var(--color-primary);
    }

    .service--featured .service__title {
        font-size: clamp(2rem, 1.5rem + 1vw, 2.5rem);
    }
}

/* Faixa de fotos dentro de Atendimentos */
.gallery {
    grid-column: 1 / -1;
    margin: var(--space-2) 0 0;
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.gallery__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.gallery picture:nth-child(2) .gallery__img {
    border-radius: var(--radius-lg) var(--radius-lg) 999px 999px;
}

.gallery__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    color: var(--color-muted);
    font-size: .9375rem;
    text-align: center;
}

.gallery__caption .icon {
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .gallery__grid {
        gap: var(--space-4);
    }
}

@media (min-width: 1100px) {
    .gallery__grid {
        gap: var(--space-5);
        max-width: 64rem;
        margin-inline: auto;
    }
}

/* ---------- Como funciona ---------------------------------------------- */
.steps {
    position: relative;
    display: grid;
    gap: var(--space-8);
}

.steps::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: 1.75rem;
    left: calc(1.75rem - .5px);
    width: 1px;
    background: repeating-linear-gradient(180deg, var(--color-border-strong) 0 6px, transparent 6px 12px);
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: var(--space-5);
    row-gap: var(--space-2);
    align-items: start;
}

.step__num {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 0 0 .5rem var(--color-background);
    color: var(--color-primary);
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: .04em;
}

.step__title {
    padding-top: .6rem;
    font-size: var(--fs-lg);
}

.step__text {
    color: var(--color-text-soft);
    font-size: 1rem;
}

.steps__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-12);
    text-align: center;
}

@media (min-width: 900px) {
    .steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .steps::before {
        top: 1.75rem;
        bottom: auto;
        left: 12.5%;
        right: 12.5%;
        width: auto;
        height: 1px;
        background: repeating-linear-gradient(90deg, var(--color-border-strong) 0 6px, transparent 6px 12px);
    }

    .step {
        /* minmax(0, 1fr): sem isso o título em caixa alta (ACOMPANHAMENTO)
           impõe sua largura mínima e vaza da coluna. O texto centraliza com
           text-align, nunca com justify-items. */
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-3);
        text-align: center;
    }

    .step__num {
        grid-row: auto;
        margin-inline: auto;
    }

    .step__title {
        padding-top: var(--space-2);
        /* Quatro colunas estreitas pedem um título menor; palavras compridas
           quebram com hífen em vez de estourar a coluna. */
        font-size: var(--fs-md);
        hyphens: auto;
        overflow-wrap: break-word;
    }
}

/* ---------- Sobre ------------------------------------------------------ */
.about {
    display: grid;
    gap: var(--space-12);
    align-items: center;
}

.about__media {
    position: relative;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    padding-bottom: var(--space-8);
}

.about__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-arch);
    background:
        radial-gradient(18rem 14rem at 50% 20%, rgba(224, 171, 171, .35), transparent 70%),
        linear-gradient(165deg, var(--color-primary) 0%, #5C343C 78%);
    outline: 1px solid var(--color-border-inverse);
    outline-offset: .75rem;
}

.about__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__sprig {
    position: absolute;
    left: 6%;
    bottom: 4%;
    width: 52%;
    aspect-ratio: 220 / 360;
    height: auto;
    color: rgba(255, 240, 240, .6);
    transform: rotate(-6deg);
}

.about__sprig--mirror {
    top: 6%;
    right: 4%;
    bottom: auto;
    left: auto;
    width: 40%;
    color: rgba(255, 240, 240, .3);
    transform: scaleX(-1) rotate(-14deg);
}

.about__signature {
    position: absolute;
    left: 50%;
    bottom: -1.25rem;
    width: 88%;
    aspect-ratio: 4828 / 803;
    height: auto;
    color: var(--color-text-inverse);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35));
    transform: translateX(-50%) rotate(-6deg);
}

.about__frame--photo + .about__signature {
    bottom: -2rem;
    width: 78%;
}

.about__text {
    margin-top: var(--space-5);
    color: var(--color-inverse-soft);
    font-size: var(--fs-md);
}

.about__subtitle {
    margin: var(--space-10) 0 var(--space-3);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.timeline__item {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-border-inverse);
}

.timeline__item:last-child {
    border-bottom: 1px solid var(--color-border-inverse);
}

.timeline__mark {
    color: var(--color-accent);
    font-size: .9375rem;
    font-weight: 600;
    font-variant-numeric: lining-nums;
    letter-spacing: .06em;
    line-height: 1.6;
}

.timeline__body strong {
    display: block;
    color: var(--color-text-inverse);
    font-weight: 500;
    line-height: 1.45;
}

.timeline__body span {
    display: block;
    color: var(--color-inverse-muted);
    font-size: .9375rem;
}

.registry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-1) var(--space-4);
    margin: var(--space-8) 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border-inverse);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .04);
}

.registry__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(224, 171, 171, .16);
    color: var(--color-accent);
}

.registry__text strong {
    display: block;
    color: var(--color-text-inverse);
    font-weight: 600;
}

.registry__text span {
    display: block;
    color: var(--color-inverse-muted);
    font-size: .9375rem;
}

.registry__link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--space-2);
    min-height: 44px;
    color: #F2C9C9;
    font-size: .9375rem;
    font-weight: 600;
    text-underline-offset: .25em;
}

.registry__link .icon {
    width: 1rem;
    height: 1rem;
}

.registry__link:focus-visible {
    box-shadow: 0 0 0 3px var(--color-surface-dark), 0 0 0 5px var(--color-accent);
}

@media (min-width: 480px) {
    .timeline__item {
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: var(--space-4);
    }
}

@media (min-width: 1024px) {
    .about {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        gap: var(--space-20);
    }

    .about__media {
        max-width: 26rem;
    }
}

/* ---------- Feedbacks (carrossel) --------------------------------------- */
.carousel {
    position: relative;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.carousel__track {
    display: flex;
    gap: var(--space-4);
    /* alinha o primeiro cartão com o container e deixa o resto "sangrar" na borda */
    padding: var(--space-2) max(var(--gutter), (100% - var(--container-width)) / 2) var(--space-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--gutter), (100% - var(--container-width)) / 2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

.carousel__track:focus-visible {
    border-radius: var(--radius-lg);
}

.carousel__item {
    flex: 0 0 auto;
    width: min(82vw, 24rem);
    scroll-snap-align: start;
}

.feedback {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}

.feedback:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.feedback__img {
    width: 100%;
    height: clamp(11rem, 8rem + 14vw, 15rem);
    padding: var(--space-4) var(--space-4) 0;
    object-fit: contain;
    object-position: top center;
}

.feedback__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: .875rem;
}

.feedback__source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-weight: 600;
}

.feedback__source .icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-primary);
}

.feedback__zoom {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-primary);
    font-size: .8125rem;
    font-weight: 600;
    transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}

.feedback__zoom:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.feedback__zoom .icon {
    width: 1.05rem;
    height: 1.05rem;
}

.carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.carousel__btn {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    transition: background-color var(--dur-base) ease, opacity var(--dur-base) ease;
}

.carousel__btn:hover:not([disabled]) {
    background: var(--color-primary-soft);
}

.carousel__btn[disabled] {
    opacity: .35;
    cursor: default;
}

.carousel__status {
    min-width: 5.5rem;
    color: var(--color-muted);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.lightbox:not([open]) {
    display: none;
}

.lightbox[open] {
    display: grid;
    justify-items: center;
    width: min(92vw, 46rem);
    max-height: 92dvh;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
}

.lightbox::backdrop {
    background: rgba(62, 42, 47, .66);
}

.lightbox__img {
    width: 100%;
    height: auto;
}

.lightbox__close {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin: var(--space-4) 0;
    padding: 0 var(--space-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-primary);
    font-weight: 600;
}

.lightbox__close:hover {
    background: var(--color-primary-soft);
}

@media (min-width: 1100px) {
    .carousel__item {
        width: 27rem;
    }
}

/* ---------- Dúvidas (FAQ) ---------------------------------------------- */
.faq {
    display: grid;
    gap: var(--space-10);
}

.faq__intro .btn {
    margin-top: var(--space-6);
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
    border-top: 1px solid var(--color-border);
}

.faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 44px;
    padding-block: var(--space-5);
    cursor: pointer;
    list-style: none;
}

.faq-item__summary::-webkit-details-marker {
    display: none;
}

.faq-item__question {
    font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem);
    line-height: var(--lh-snug);
    transition: color var(--dur-base) ease;
}

.faq-item__summary:hover .faq-item__question {
    color: var(--color-primary);
}

.faq-item__toggle {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    transition: background-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}

.faq-item__toggle::before,
.faq-item__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .75rem;
    height: 1.5px;
    border-radius: 2px;
    background: var(--color-primary);
    transform: translate(-50%, -50%);
    transition: transform var(--dur-base) var(--ease-out);
}

.faq-item__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__toggle {
    background: var(--color-primary-soft);
    transform: rotate(180deg);
}

.faq-item[open] .faq-item__toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item__answer {
    padding: 0 var(--space-12) var(--space-6) 0;
    color: var(--color-text-soft);
}

@media (min-width: 1024px) {
    .faq {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: var(--space-16);
        align-items: start;
    }

    .faq__intro {
        position: sticky;
        top: calc(var(--header-h) + var(--space-8));
    }
}

/* ---------- Agendamento e formulário ----------------------------------- */
.contact {
    display: grid;
    gap: var(--space-12);
    align-items: center;
}

.contact__intro .btn {
    margin-top: var(--space-8);
}

.contact__number {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    color: var(--color-muted);
}

.contact__number .icon {
    color: var(--color-primary);
}

.contact__number strong {
    color: var(--color-text);
}

.contact__card {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.contact__card-title {
    font-size: var(--fs-xl);
}

.contact__card-text {
    margin-top: var(--space-2);
    color: var(--color-text-soft);
    font-size: 1rem;
}

.form {
    position: relative;
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field__label {
    display: block;
    margin-bottom: var(--space-2);
    padding: 0;
    color: var(--color-text);
    font-size: .9375rem;
    font-weight: 600;
}

.field__optional {
    color: var(--color-muted);
    font-weight: 400;
}

.field__input {
    width: 100%;
    min-height: 3.25rem;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: #FFFCFB;
    font-size: 1rem;
    transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}

.field__input:hover {
    border-color: var(--color-primary);
}

.field__input:focus-visible {
    border-color: var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 4px rgba(138, 75, 86, .2);
}

.field__input[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 4px rgba(163, 52, 43, .12);
}

.field__select {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A4B56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
}

.field__error {
    margin-top: var(--space-2);
    color: var(--color-danger);
    font-size: .875rem;
    font-weight: 500;
}

.choices {
    display: grid;
    gap: var(--space-2);
}

.choice {
    position: relative;
    display: block;
}

.choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.choice__box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: var(--space-3) var(--space-4) var(--space-3) 2.9rem;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: #FFFCFB;
    cursor: pointer;
    font-size: .9375rem;
    line-height: 1.35;
    transition: border-color var(--dur-base) ease, background-color var(--dur-base) ease, color var(--dur-base) ease;
}

.choice__box::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.5px solid var(--color-border-input);
    border-radius: 50%;
    background: #FFFFFF;
    transform: translateY(-50%);
    transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, background-color var(--dur-base) ease;
}

.choice:hover .choice__box {
    border-color: var(--color-primary);
}

.choice input:checked + .choice__box {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-weight: 600;
}

.choice input:checked + .choice__box::before {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: inset 0 0 0 3px #FFFFFF;
}

.choice input:focus-visible + .choice__box {
    box-shadow: var(--focus-ring);
}

.field--trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__submit.is-loading .icon {
    animation: pulse 1s ease-in-out infinite;
}

.form__status {
    min-height: 1.5rem;
    margin-top: calc(var(--space-2) * -1);
    font-size: .9375rem;
    font-weight: 500;
}

.form__status:empty {
    min-height: 0;
    margin-top: calc(var(--space-6) * -1);
}

.form__status.is-error {
    color: var(--color-danger);
}

.form__status.is-success {
    color: var(--color-success);
}

.form__status a {
    color: inherit;
    font-weight: 700;
}

.form__note {
    color: var(--color-muted);
    font-size: .875rem;
}

.form__note a {
    color: var(--color-primary-strong);
}

@media (min-width: 480px) {
    .choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .section--contact {
        background:
            url("../images/ramo.svg") no-repeat right -4rem bottom -6rem / 20rem auto,
            linear-gradient(160deg, var(--color-surface-soft) 0%, #FBE3E2 100%);
    }

    .contact {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: var(--space-16);
    }
}

/* ---------- Aviso de emergência ---------------------------------------- */
.emergency {
    padding-block: var(--space-8);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.emergency__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.emergency__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.emergency__title {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
}

.emergency__text {
    margin-top: var(--space-1);
    color: var(--color-text-soft);
    font-size: .9375rem;
}

.emergency__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.emergency__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-1) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: .875rem;
    text-decoration: none;
    transition: border-color var(--dur-base) ease, background-color var(--dur-base) ease;
}

.emergency__link strong {
    color: var(--color-danger);
    font-size: 1.0625rem;
    font-weight: 700;
}

.emergency__link:hover {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

/* ---------- Rodapé ----------------------------------------------------- */
.site-footer {
    padding-top: var(--space-16);
    background: var(--color-surface-dark);
    color: var(--color-inverse-soft);
    font-size: .9375rem;
}

.site-footer a {
    color: var(--color-inverse-soft);
    transition: color var(--dur-base) ease, opacity var(--dur-base) ease;
}

.site-footer a:hover {
    color: #FFFFFF;
}

.site-footer :focus-visible {
    box-shadow: 0 0 0 3px var(--color-surface-dark), 0 0 0 5px var(--color-accent);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-10);
    padding-bottom: var(--space-12);
}

.site-footer__logo {
    width: 12.5rem;
    aspect-ratio: 4828 / 803;
    height: auto;
    color: var(--color-surface-soft);
}

.site-footer__legal {
    margin-top: var(--space-5);
    line-height: 1.6;
}

.site-footer__legal strong {
    color: var(--color-text-inverse);
    font-weight: 600;
}

.site-footer__desc {
    max-width: 22rem;
    margin-top: var(--space-3);
    color: var(--color-inverse-muted);
}

.site-footer__heading {
    margin-bottom: var(--space-3);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.site-footer__nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
}

.site-footer__nav a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    text-decoration: none;
}

.site-footer__whats,
.site-footer__social {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-weight: 600;
    text-decoration: none;
}

.site-footer__whats .icon,
.site-footer__social .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-accent);
}

.site-footer__note {
    margin-top: var(--space-2);
    color: var(--color-inverse-muted);
}

.site-footer__bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding-block: var(--space-5);
    color: var(--color-inverse-muted);
    font-size: .875rem;
}

.site-footer__bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--gutter);
    right: var(--gutter);
    height: 1px;
    background: var(--color-border-inverse);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.kyn-credit {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    min-height: 44px;
    color: var(--color-text-inverse);
    font-size: .72rem;
    letter-spacing: .02em;
    text-decoration: none;
    opacity: .72; /* .5 do styleguide reprova contraste sobre o cacau */
}

.site-footer .kyn-credit:hover,
.site-footer .kyn-credit:focus-visible {
    color: var(--color-text-inverse);
    opacity: 1;
}

.kyn-credit__logo {
    width: 34px;
    height: 16.4px;
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .site-footer__nav ul {
        grid-template-columns: 1fr;
    }
}

/* ---------- Barra fixa de agendamento (celular) ------------------------ */
.sticky-cta {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(100% + 2rem));
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) ease, visibility 0s linear var(--dur-slow);
}

.sticky-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) ease, visibility 0s;
}

.sticky-cta .btn {
    box-shadow: 0 18px 40px -14px rgba(62, 42, 47, .55);
}

@media (min-width: 768px), (scripting: none) {
    .sticky-cta {
        display: none;
    }
}

/* ---------- Consentimento ---------------------------------------------- */
.consent {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    z-index: 60;
    max-width: 28rem;
}

.consent[hidden] {
    display: none;
}

.consent__box {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.consent__title {
    font-size: var(--fs-lg);
}

.consent__text {
    margin-top: var(--space-2);
    color: var(--color-text-soft);
    font-size: .9375rem;
}

.consent__text a {
    color: var(--color-primary-strong);
}

.consent__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* ---------- Páginas de texto (privacidade, 404) ------------------------ */
.legal {
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
    background:
        radial-gradient(34rem 22rem at 100% 0%, rgba(224, 171, 171, .25), transparent 70%),
        var(--color-background);
}

.legal__inner {
    max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.legal__title {
    font-size: var(--fs-2xl);
}

.legal__updated {
    margin: var(--space-3) 0 var(--space-8);
    color: var(--color-muted);
    font-size: var(--fs-sm);
}

.legal h2 {
    margin: var(--space-10) 0 var(--space-3);
    font-size: var(--fs-xl);
}

.legal p {
    color: var(--color-text-soft);
}

.legal p + p {
    margin-top: var(--space-4);
}

.legal__back {
    margin-top: var(--space-10);
}

.legal--center {
    text-align: center;
}

.legal--center .eyebrow {
    justify-content: center;
}

.legal--center .legal__inner p {
    margin-inline: auto;
    max-width: 34rem;
}

.legal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/* ---------- Movimento --------------------------------------------------- */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
}

@keyframes float {
    50% {
        transform: translateY(-6px);
    }
}

@keyframes pulse {
    50% {
        opacity: .35;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    .hero__visual .arch {
        animation: rise .6s var(--ease-out) both;
    }

    /* a flutuação começa depois da carga, para não disputar com a primeira pintura */
    .seal--top {
        animation: rise .6s var(--ease-out) .12s both, float 7s ease-in-out 3s infinite;
    }

    .seal--bottom {
        animation: rise .6s var(--ease-out) .2s both, float 8s ease-in-out 3.6s infinite;
    }

    /* Revelar ao rolar. O JS só liga isso depois de marcar o que já está na tela. */
    .reveal-ready .reveal {
        transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease-out);
        transition-delay: var(--reveal-delay, 0ms);
    }

    .reveal-ready .reveal:not(.is-visible) {
        opacity: 0;
        transform: translateY(24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
    }
}

/* ---------- Impressão -------------------------------------------------- */
@media print {
    .site-header,
    .sticky-cta,
    .consent,
    .hero__visual,
    .contact__card {
        display: none;
    }

    body {
        background: #FFFFFF;
    }
}