/* =========================================================================
   Página pública da Dra. Ingrid Esquillaro — sistema editorial "warm clinic".
   Self-contained, servido cru (sem build). Namespace .ie-* para não colidir
   com o fluxo de agendamento (.public-booking-*) que vive em app.css.
   Tipografia: Avie Fraunces (display) + Avie Instrument Sans (texto).
   Paleta desta página (pedido da Dra. 2026-06): mauve rosado, menos roxo.
   Mauve rosado #825c7c, bordo #3b2132, rosa claro #d8afc4, creme/nude.
   Ouro só nas estrelas de avaliação (--ie-star). Botões: mauve -> bordo.
   ========================================================================= */

@font-face {
    font-family: "Avie Fraunces";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("/static/fonts/avie/fraunces-latin.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Avie Fraunces";
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url("/static/fonts/avie/fraunces-latin.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Avie Fraunces";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("/static/fonts/avie/fraunces-latin-ext.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Avie Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/static/fonts/avie/instrument-sans-latin.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Avie Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/static/fonts/avie/instrument-sans-latin-ext.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Avie Instrument Sans";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/static/fonts/avie/instrument-sans-italic-latin.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.ie-body {
    --ie-nude: #f7eef3;
    --ie-cream: #fbf5f8;
    --ie-paper: #fffdff;
    --ie-wine: #825c7c;
    --ie-wine-soft: #a87899;
    --ie-bordo: #3b2132;
    --ie-rose: #d8afc4;
    --ie-rose-tint: #efd8e6;
    --ie-rose-wash: #f8edf3;
    /* "gold" agora é lilás suave (menos dourado); o ouro real vive só em --ie-star */
    --ie-gold: #a87899;
    --ie-gold-text: #80506e;
    --ie-gold-soft: rgba(130, 92, 124, 0.30);
    --ie-star: #e0b248;
    --ie-ink: #2c1d23;
    --ie-text: #5d4a50;
    --ie-muted: #8b7980;
    --ie-line: rgba(59, 33, 50, 0.12);
    --ie-line-strong: rgba(59, 33, 50, 0.22);
    --ie-shadow: 0 30px 70px rgba(59, 33, 50, 0.13);
    --ie-shadow-soft: 0 18px 44px rgba(59, 33, 50, 0.08);
    --ie-shell: min(1200px, calc(100vw - 48px));
    --ie-pad: max(24px, calc((100vw - 1200px) / 2));
    margin: 0;
    color: var(--ie-ink);
    font-family: "Avie Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background:
        radial-gradient(1100px 620px at 84% -4%, rgba(216, 175, 196, 0.34), transparent 70%),
        radial-gradient(900px 540px at 6% 8%, rgba(168, 120, 153, 0.16), transparent 68%),
        linear-gradient(180deg, var(--ie-nude) 0%, var(--ie-cream) 46%, var(--ie-paper) 100%);
    /* `clip` e nao `hidden`, e a diferenca nao e cosmetica.
       Regra do CSS Overflow: com um eixo `visible` e o outro `hidden`, o `visible`
       vira `auto` — ou seja, `overflow-x: hidden` transformava o BODY em um
       container de rolagem que nunca rola. `animation-timeline: view()` se ancora
       no scroller ancestral mais proximo, entao TODA animacao dirigida por scroll
       da pagina ficava presa num scrollport parado: a linha do processo, os aneis
       dos passos, a citacao que acende. Ficavam congeladas num valor qualquer, sem
       erro nenhum no console.
       `clip` corta igual e NAO cria container de rolagem (e para isso que ele
       existe), e `clip` + `visible` nao dispara a regra acima. */
    overflow-x: clip;
}
html.public-rise-html {
    height: auto;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: smooth;
}
html.public-rise-html body.ie-body {
    height: auto;
    min-height: 100vh;
    /* Ver a nota em .ie-body: `hidden` aqui faria o body virar scroll container e
       matar em silencio toda animacao com animation-timeline: view(). */
    overflow-x: clip !important;
    overflow-y: visible !important;
}
.ie-body *,
.ie-body *::before,
.ie-body *::after {
    box-sizing: border-box;
}
.ie-body a {
    color: inherit;
}
.ie-body img {
    max-width: 100%;
}
.ie-body h1,
.ie-body h2,
.ie-body h3 {
    margin: 0;
    font-family: "Avie Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ie-ink);
}
.ie-body :where(p) {
    margin: 0;
}

/* ---- Reveal ---- */
.ie-reveal {
    opacity: 1;
    transform: none;
}
.js-enabled .ie-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-enabled .ie-reveal.is-visible {
    opacity: 1;
    transform: none;
}
[data-reveal-delay="2"] { transition-delay: 110ms; }
[data-reveal-delay="3"] { transition-delay: 200ms; }
[data-reveal-delay="4"] { transition-delay: 290ms; }
[data-reveal-delay="5"] { transition-delay: 380ms; }
[data-reveal-delay="6"] { transition-delay: 470ms; }

/* ---- Shared type helpers ---- */
.ie-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: var(--ie-wine);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.ie-eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--ie-gold);
}
.ie-script {
    margin: 0 0 14px;
    color: var(--ie-wine-soft);
    font-family: "Avie Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.32rem;
    letter-spacing: 0;
}
.ie-section-lead {
    margin-top: 22px;
    max-width: 46ch;
    color: var(--ie-text);
    font-size: 1.06rem;
    line-height: 1.62;
}

/* ===== Skip link ===== */
.ie-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--ie-bordo);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.ie-skip:focus { transform: translateY(72px); }

/* ===== Nav ===== */
.ie-nav {
    position: sticky;
    top: 0;
    z-index: 90;
    width: var(--ie-shell);
    margin: 0 auto;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--ie-line);
    background: rgba(251, 245, 248, 0.84);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.ie-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1;
}
.ie-logo-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--ie-wine), var(--ie-bordo));
    box-shadow: 0 10px 24px rgba(59, 33, 50, 0.18);
}
.ie-logo-icon img {
    display: block;
    width: 31px;
    height: 31px;
    object-fit: contain;
}
.ie-logo-type {
    display: grid;
    gap: 2px;
}
.ie-logo-type span {
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ie-ink);
}
.ie-logo-type small {
    color: var(--ie-wine);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}
.ie-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ie-nav-links a {
    padding: 9px 13px;
    border-radius: 999px;
    color: var(--ie-text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.16s ease, background 0.16s ease;
}
.ie-nav-links a:hover {
    color: var(--ie-wine);
    background: rgba(216, 175, 196, 0.24);
}
.ie-nav-cta {
    margin-left: 6px;
    background: linear-gradient(135deg, var(--ie-wine), var(--ie-bordo)) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(59, 33, 50, 0.2);
}
.ie-nav-cta:hover,
.ie-nav-cta:visited { color: #fff !important; }
.ie-nav-toggle { display: none; }

/* ===== Buttons ===== */
.ie-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 24px;
    border: 1px solid var(--ie-gold-soft);
    border-radius: 999px;
    background: linear-gradient(135deg, #9d6f90 0%, #5d334f 58%, #825c7c 100%);
    background-color: var(--ie-wine);
    color: #fff !important;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
    box-shadow: 0 8px 20px rgba(59, 33, 50, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.ie-btn:visited,
.ie-btn:hover,
.ie-btn:focus {
    color: #fff !important;
}
.ie-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(59, 33, 50, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.ie-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ie-wine);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
}
.ie-link::after {
    content: "";
    width: 30px;
    height: 1px;
    background: currentColor;
    transition: width 0.2s ease;
}
.ie-link:hover::after { width: 46px; }

/* ===== Hero ===== */
.ie-main { width: 100%; }
.ie-hero {
    width: var(--ie-shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.78fr);
    gap: clamp(40px, 5.5vw, 84px);
    align-items: center;
    padding: clamp(44px, 6vw, 76px) 0 clamp(56px, 7vw, 96px);
}
.ie-hero-copy { min-width: 0; }
.ie-hero-title {
    font-size: clamp(3.2rem, 8vw, 6.4rem);
    line-height: 0.96;
    text-wrap: balance;
}
.ie-name {
    display: grid;
    gap: clamp(4px, 0.45vw, 8px);
}
.ie-name-first { color: var(--ie-wine); }
.ie-name-last {
    color: var(--ie-ink);
    font-style: italic;
    font-weight: 500;
}
.ie-lead {
    margin-top: clamp(30px, 2.8vw, 40px);
    max-width: 38ch;
    color: var(--ie-ink);
    font-size: clamp(1.24rem, 2.1vw, 1.6rem);
    line-height: 1.4;
    font-weight: 500;
}
.ie-hero-body {
    margin-top: 18px;
    max-width: 46ch;
    color: var(--ie-text);
    font-size: 1.04rem;
    line-height: 1.64;
}
.ie-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
}
.ie-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 38px;
    max-width: 560px;
}
.ie-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 12px 16px;
    border: 1px solid var(--ie-line);
    border-radius: 14px;
    background: rgba(255, 253, 249, 0.7);
    box-shadow: var(--ie-shadow-soft);
}
.ie-highlight svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--ie-gold);
}
.ie-highlight strong {
    color: var(--ie-ink);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ===== Variante B do teste A/B =============================================
   So .ie-hero-b. A variante A nao pode mudar um pixel: e o controle do teste.

   O problema que isto resolve: num aparelho de 390x844 a dobra fica em 766px e a
   variante A gasta 424px so com a foto, entao a primeira tela nao tem promessa,
   prova nem botao — o H1 comeca em 659px e o primeiro CTA em 1050px. ========== */

/* Chip de prova social. Fica colado no CTA de proposito: prova longe do botao
   nao reduz o atrito da decisao. */
.ie-hero-proof {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 9px 16px;
    border: 1px solid var(--ie-line);
    border-radius: 999px;
    background: rgba(255, 253, 249, 0.85);
    box-shadow: var(--ie-shadow-soft);
    color: var(--ie-ink);
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
}
.ie-hero-proof:hover,
.ie-hero-proof:focus-visible { border-color: var(--ie-wine); }
.ie-hero-proof strong { font-weight: 700; }
.ie-hero-proof-stars {
    color: var(--ie-star);
    font-size: 0.98rem;
    letter-spacing: 1px;
}

/* Garantias: laudo incluso, retorno gratuito, duracao. Texto que a pagina ja
   tinha, mas so na FAQ e no card 04 — a milhares de pixels de rolagem. */
.ie-hero-assurances {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    padding: 0;
    list-style: none;
}
.ie-hero-assurances li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ie-ink);
    font-size: 1rem;
    line-height: 1.35;
}
.ie-hero-assurances svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--ie-wine);
}
.ie-hero-reassure {
    margin-top: 10px;
    color: var(--ie-muted);
    font-size: 0.92rem;
}

/* Ancora: sem isto, com o nav sticky de ~76px, todo clique no menu aterrissa com
   o titulo da secao escondido atras da barra. */
body[data-variant="b"] .ie-section[id],
body[data-variant="b"] .ie-band[id] { scroll-margin-top: 84px; }

/* Rodape com NAP (nome, endereco, contato). A variante A nao tem rodape proprio. */
.ie-footer {
    border-top: 1px solid var(--ie-line);
    background: var(--ie-nude);
    padding: clamp(32px, 4vw, 52px) var(--ie-pad);
}
.ie-footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(20px, 3vw, 40px);
    max-width: var(--ie-shell);
    margin: 0 auto;
}
.ie-footer-block {
    display: grid;
    align-content: start;
    gap: 6px;
    font-size: 0.95rem;
    line-height: 1.5;
}
.ie-footer-block strong {
    color: var(--ie-ink);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ie-footer-block span,
.ie-footer-block address {
    color: var(--ie-text);
    font-style: normal;
}
.ie-footer-block a {
    color: var(--ie-wine);
    text-decoration: none;
    width: fit-content;
}
.ie-footer-block a:hover,
.ie-footer-block a:focus-visible { text-decoration: underline; }
.ie-faq-more { margin-top: 22px; }

/* ===== Variante B — imersao ================================================
   Direcao de design, e nao gosto pessoal: o publico e familia de crianca
   neurodivergente, e a propria pagina fala em "sensibilidade a sons, roupas,
   alimentos e mudancas". Parallax, autoplay e movimento brusco sao hostis
   justamente para quem queremos acolher. Entao o que impressiona aqui e dominio
   calmo: movimento que parece respiracao, com duracao longa e curva suave, e que
   some por completo em prefers-reduced-motion. Nada se move sem motivo. ======= */

/* --- Progresso de leitura ---------------------------------------------------
   A pagina tem ~15 mil px no celular. Sem referencia de progresso, rolar vira tunel sem fim,
   e "quanto ainda falta?" e ansiedade gratuita para quem ja chegou ansiosa.
   Feito com scroll-driven CSS: zero JS, composto na GPU, sem custo de scroll. */
.ie-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    /* Acima de tudo (nav 200, WA FAB 210, banner de cookies 230): sao 3px no topo
       da tela, nao competem por espaco com nada e a referencia de progresso perde
       o sentido se some atras de um overlay. */
    z-index: 250;
    background: transparent;
    pointer-events: none;
    display: none;
}
.ie-progress::before {
    content: "";
    display: block;
    height: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--ie-rose), var(--ie-wine));
}
/* So aparece onde o browser sabe animar por scroll. Sem suporte, uma barra parada
   em zero seria pior que barra nenhuma — pareceria site quebrado. */
@supports (animation-timeline: scroll()) {
    body[data-variant="b"] .ie-progress { display: block; }
    body[data-variant="b"] .ie-progress::before {
        animation: ie-progress-grow linear both;
        animation-timeline: scroll(root block);
    }
}
@keyframes ie-progress-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* --- Secao ativa no menu ---------------------------------------------------- */
body[data-variant="b"] .ie-nav-links a[data-nav-section] {
    position: relative;
    transition: color 240ms ease;
}
body[data-variant="b"] .ie-nav-links a[data-nav-section]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--ie-wine);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body[data-variant="b"] .ie-nav-links a[data-nav-section].is-current {
    color: var(--ie-wine);
}
body[data-variant="b"] .ie-nav-links a[data-nav-section].is-current::after {
    transform: scaleX(1);
}

/* --- Timeline do processo ---------------------------------------------------
   Os 4 passos sao a narrativa central ("da preocupacao ao plano"). Ganham uma
   linha que se desenha conforme a pessoa rola: o gesto de leitura vira o proprio
   progresso do cuidado. Estado PADRAO = linha cheia, para que browser sem
   scroll-timeline mostre o resultado final em vez de uma linha pela metade. */
body[data-variant="b"] .ie-approach-grid { position: relative; }
body[data-variant="b"] .ie-approach-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 22px;
    top: 22px;
    bottom: 22px;
    width: 1.5px;
    background: linear-gradient(180deg, var(--ie-gold-soft), rgba(255, 255, 255, 0.08));
    transform-origin: 50% 0;
    display: none;
}
body[data-variant="b"] .ie-approach-card { position: relative; z-index: 1; }

/* No desktop os 4 passos ficam lado a lado, entao a linha e horizontal e passa na
   altura do centro dos circulos numerados (padding 28px + metade dos 44px). */
@media (min-width: 621px) {
    body[data-variant="b"] .ie-approach-grid::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: 48px;
        right: 48px;
        top: 50px;
        height: 1.5px;
        background: linear-gradient(90deg, var(--ie-gold-soft), rgba(255, 255, 255, 0.08));
        transform-origin: 0 50%;
    }
}

/* A linha se desenha conforme a secao atravessa a tela: o gesto de leitura vira o
   proprio avanco do cuidado. `animation-range` faz o traco terminar antes do fim
   da secao, para nao ficar completando fora da vista.
   Sem suporte a scroll-timeline a linha simplesmente ja nasce inteira — o estado
   padrao e o final, entao ninguem ve traco pela metade. */
@supports (animation-timeline: view()) {
    body[data-variant="b"] .ie-approach-grid::before {
        animation: ie-line-draw-y linear both;
        animation-timeline: view();
        animation-range: entry 30% cover 55%;
    }
    @media (min-width: 621px) {
        body[data-variant="b"] .ie-approach-grid::after {
            animation: ie-line-draw-x linear both;
            animation-timeline: view();
            animation-range: entry 30% cover 55%;
        }
    }
}
@keyframes ie-line-draw-y {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes ie-line-draw-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* --- Momento "mae atipica" --------------------------------------------------
   E o unico ativo que nenhuma concorrente pode copiar, e estava sussurrado num
   blockquote. Ganha uma aspa em Fraunces como marca dagua e um respiro maior:
   e o ponto onde a pagina para de vender e passa a falar de pessoa para pessoa. */
/* A aspa e marca dagua ATRAS do texto, entao precisa ancorar no proprio
   blockquote. Ancorada no wrapper ela escapa para cima do olho-de-texto e vira
   sujeira solta na tela. */
body[data-variant="b"] .ie-family-copy blockquote {
    position: relative;
    padding-top: 0.22em;
}
body[data-variant="b"] .ie-family-copy blockquote::before {
    content: "\201C";
    position: absolute;
    top: -0.34em;
    left: -0.04em;
    z-index: 0;
    color: var(--ie-rose);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: clamp(9rem, 22vw, 15rem);
    line-height: 1;
    opacity: 0.2;
    pointer-events: none;
    user-select: none;
}
body[data-variant="b"] .ie-family-copy blockquote p { position: relative; z-index: 1; }

/* Assinatura: e o que transforma a citacao em voz de alguem. */
.ie-family-cite {
    display: block;
    margin-top: 22px;
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.02rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
}
.ie-family-cite span {
    display: block;
    margin-top: 2px;
    color: var(--ie-muted);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    font-style: italic;
}
/* Reveal mais lento aqui do que no resto da pagina: e o unico lugar onde queremos
   que a pessoa desacelere e leia devagar. */
body[data-variant="b"] .ie-family .ie-reveal {
    transition-duration: 1100ms;
}
body[data-variant="b"] .ie-family-photo img {
    transition: transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body[data-variant="b"] .ie-family-photo.is-visible img,
body[data-variant="b"] .ie-family-photo:hover img {
    transform: scale(1.02);
}

/* --- Micro-interacoes -------------------------------------------------------
   Elevacao de 2px e sombra um pouco mais funda. O suficiente para a interface
   responder ao toque, longe de qualquer coisa que chame atencao para si. */
body[data-variant="b"] .ie-doubt,
body[data-variant="b"] .ie-value {
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 320ms ease;
}
body[data-variant="b"] .ie-doubt:hover,
body[data-variant="b"] .ie-value:hover {
    transform: translateY(-2px);
    box-shadow: var(--ie-shadow);
}
body[data-variant="b"] .ie-hero-assurances svg {
    transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body[data-variant="b"] .ie-hero-assurances li:hover svg { transform: scale(1.12); }

/* --- O contrato de acessibilidade -------------------------------------------
   Para ESTE publico isto nao e checkbox: e requisito de produto. Quem pediu menos
   movimento ve a pagina inteira parada, com todo o conteudo no estado final. */
@media (prefers-reduced-motion: reduce) {
    body[data-variant="b"] .ie-progress { display: none; }
    body[data-variant="b"] .ie-approach-grid::before,
    body[data-variant="b"] .ie-approach-grid::after { animation: none; transform: none; }
    body[data-variant="b"] .ie-family-photo img,
    body[data-variant="b"] .ie-doubt,
    body[data-variant="b"] .ie-value,
    body[data-variant="b"] .ie-hero-assurances svg,
    body[data-variant="b"] .ie-nav-links a[data-nav-section]::after {
        transition: none;
        transform: none;
    }
    body[data-variant="b"] .ie-family-photo.is-visible img { transform: none; }
}

/* Porta de entrada por sintoma, dentro do card de cenario. Discreto de proposito:
   e saida para quem ainda pesquisa, nao pode competir com o CTA de agendar. */
.ie-doubt-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--ie-wine);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.ie-doubt-link:hover,
.ie-doubt-link:focus-visible { color: var(--ie-bordo); }

/* ===== Variante B — profundidade ===========================================
   Segunda camada da imersao. A primeira resolveu NAVEGACAO (onde estou, quanto
   falta). Esta resolve PRESENCA: a pagina deixa de ser um documento que rola e
   passa a reagir ao gesto de quem le.

   A tecnica que sustenta tudo abaixo e `@property`: registrar uma custom property
   com tipo faz o browser saber INTERPOLAR o valor. Sem registro, `--x: 0%` -> `100%`
   troca de um frame para o outro; com registro, vira animacao continua. E isso
   destrava animar coisas que CSS nunca soube animar — parada de gradiente, angulo
   de conic-gradient, eixo de fonte variavel.

   Casado com `animation-timeline`, nada disso roda sozinho: quem move e a rolagem
   da pessoa. Essa e a diferenca que importa para este publico. Autoplay e movimento
   imposto; animacao dirigida por scroll para quando a mao para. Um leitor sensivel a
   movimento controla cada quadro — e ainda assim tudo desaparece em
   prefers-reduced-motion.

   Valor inicial de cada propriedade = ESTADO FINAL. Browser sem suporte a
   scroll-timeline nunca ve meia obra: ve a obra pronta.
   ========================================================================= */

@property --ie-sweep {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 140%;
}
@property --ie-ring {
    syntax: "<angle>";
    inherits: false;
    initial-value: 360deg;
}
@property --ie-wght {
    syntax: "<number>";
    inherits: false;
    initial-value: 600;
}
@property --ie-soft {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

/* --- Campo de luz -----------------------------------------------------------
   A luz da pagina muda conforme a pessoa desce: quente no acolhimento (topo),
   serena na parte informativa (meio), quente de novo no convite (fim). E luz de
   cena, roteirizada — a mesma coisa que um fotografo faz para conduzir o olho.

   Custo perto de zero: as manchas sao gradientes estaticos e o que anima e so
   `opacity` e `translate`, que o compositor resolve sem repintar nada. Nao existe
   listener de scroll no meio disto. */
.ie-aura {
    position: fixed;
    inset: 0;
    /* z-index negativo pinta ACIMA do fundo do body e ABAIXO de todo o conteudo —
       mas so se o body for contexto de empilhamento, senao a camada escapa para
       tras do fundo e some. Dai o `isolation` no body logo abaixo. */
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
body[data-variant="b"] { isolation: isolate; }
.ie-aura i {
    position: absolute;
    inset: -25% -20%;
    display: block;
    opacity: 0;
    will-change: opacity, transform;
}
.ie-aura .ie-aura-open {
    background: radial-gradient(46% 34% at 76% 12%, rgba(216, 175, 196, 0.55), transparent 68%);
    opacity: 1;
}
.ie-aura .ie-aura-calm {
    background: radial-gradient(52% 40% at 14% 46%, rgba(168, 120, 153, 0.26), transparent 70%);
}
.ie-aura .ie-aura-invite {
    background: radial-gradient(58% 40% at 52% 88%, rgba(216, 175, 196, 0.5), transparent 72%);
}
@supports (animation-timeline: scroll()) {
    body[data-variant="b"] .ie-aura i {
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root block);
    }
    body[data-variant="b"] .ie-aura-open { animation-name: ie-aura-open; }
    body[data-variant="b"] .ie-aura-calm { animation-name: ie-aura-calm; }
    body[data-variant="b"] .ie-aura-invite { animation-name: ie-aura-invite; }
}
@keyframes ie-aura-open {
    0% { opacity: 1; transform: none; }
    38% { opacity: 0.12; transform: translate3d(0, -3%, 0); }
    100% { opacity: 0; transform: translate3d(0, -5%, 0); }
}
@keyframes ie-aura-calm {
    0% { opacity: 0; }
    30% { opacity: 0.85; }
    72% { opacity: 0.7; }
    100% { opacity: 0.2; }
}
@keyframes ie-aura-invite {
    0% { opacity: 0; transform: translate3d(0, 4%, 0); }
    62% { opacity: 0; transform: translate3d(0, 2%, 0); }
    100% { opacity: 1; transform: none; }
}

/* --- A citacao que acende linha por linha -----------------------------------
   O ponto emocional da pagina. O texto comeca apagado e ACENDE de cima para
   baixo, na mesma direcao e no mesmo ritmo em que se le — a rolagem vira o gesto
   de ler.

   Como: a parada do gradiente e uma propriedade registrada, o gradiente e
   recortado nas letras (`background-clip: text`) e a parada anda pelo bloco. Nao
   ha um span por palavra, nao ha JS, e o texto continua sendo texto (selecionavel,
   pesquisavel, lido por leitor de tela).

   Estado apagado NAO e invisivel: e o cinza do corpo em 34%. Se algo der errado no
   meio do caminho, o pior caso e um paragrafo de baixo contraste, nunca um
   paragrafo em branco. */
@supports (animation-timeline: view()) and (background-clip: text) {
    body[data-variant="b"] .ie-quote-lit {
        background-image: linear-gradient(
            180deg,
            var(--ie-ink) 0%,
            var(--ie-ink) calc(var(--ie-sweep) - 16%),
            rgba(93, 74, 80, 0.34) calc(var(--ie-sweep) + 6%),
            rgba(93, 74, 80, 0.34) 100%
        );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: ie-quote-lit linear both;
        animation-timeline: view();
        animation-range: entry 22% cover 55%;
    }
}
@keyframes ie-quote-lit {
    from { --ie-sweep: 0%; }
    to { --ie-sweep: 140%; }
}
/* Alto contraste do Windows joga fora as cores da pagina e ficaria so o texto
   transparente. Aqui o efeito nao existe. */
@media (forced-colors: active) {
    body[data-variant="b"] .ie-quote-lit {
        background-image: none;
        color: CanvasText;
        -webkit-text-fill-color: CanvasText;
        animation: none;
    }
}

/* --- Tipografia que assenta -------------------------------------------------
   Fraunces e fonte variavel de verdade (eixos wght, SOFT, WONK, opsz — conferido
   no arquivo servido, nao presumido). Entao o nome dela nao aparece: ele ENTRA EM
   FOCO. Comeca leve e de terminacoes arredondadas (SOFT 100) e assenta no peso e
   na definicao finais.

   Interpolar eixo de fonte so e possivel porque --ie-wght/--ie-soft sao registradas.
   Duas palavras, uma vez, no load: e caro (relayout por quadro) e por isso nao se
   repete pagina afora. */
@supports (font-variation-settings: "wght" 400) {
    body[data-variant="b"] .ie-hero-title .ie-name-first,
    body[data-variant="b"] .ie-hero-title .ie-name-last {
        font-variation-settings: "wght" var(--ie-wght), "SOFT" var(--ie-soft);
        animation: ie-type-settle 1150ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    body[data-variant="b"] .ie-hero-title .ie-name-last {
        animation-delay: 130ms;
    }
}
@keyframes ie-type-settle {
    from { --ie-wght: 330; --ie-soft: 100; }
    to { --ie-wght: 600; --ie-soft: 0; }
}

/* A aspa da citacao amolece e cresce conforme a secao chega. Um glifo so, entao o
   custo de layout e irrelevante. */
body[data-variant="b"] .ie-family-copy blockquote::before {
    font-variation-settings: "wght" var(--ie-wght), "SOFT" var(--ie-soft);
}
@supports (animation-timeline: view()) {
    body[data-variant="b"] .ie-family-copy blockquote::before {
        animation: ie-quote-mark linear both;
        animation-timeline: view();
        animation-range: entry 12% cover 42%;
    }
}
/* O `to` fecha exatamente nos valores iniciais registrados (600/0/0.2): assim quem
   desliga a animacao ve o MESMO desenho de quem a viu terminar. */
@keyframes ie-quote-mark {
    from { --ie-wght: 300; --ie-soft: 100; opacity: 0.05; transform: translateY(8px); }
    to { --ie-wght: 600; --ie-soft: 0; opacity: 0.2; transform: none; }
}

/* --- Aneis dos passos -------------------------------------------------------
   Os numeros 01-04 ganham um anel que se fecha conforme o passo chega, escalonado
   um depois do outro: os quatro passos deixam de ser uma lista e viram contagem.

   Um anel animado normalmente pede SVG com stroke-dasharray. Aqui e um
   conic-gradient com o angulo registrado, recortado em anel por mask — mesma
   coisa, sem markup nenhum. Tudo dentro do @supports da mask: sem ela o
   conic-gradient viraria uma pizza cheia atras do numero, e a borda original
   continua sendo o estado bom. */
@supports ((mask: radial-gradient(#000, #000)) or (-webkit-mask: radial-gradient(#000, #000))) {
    body[data-variant="b"] .ie-approach-card span {
        position: relative;
        border-color: transparent;
    }
    body[data-variant="b"] .ie-approach-card span::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient(from -90deg, var(--ie-gold) 0 var(--ie-ring), transparent var(--ie-ring) 360deg);
        opacity: 0.5;
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    }
    @supports (animation-timeline: view()) {
        body[data-variant="b"] .ie-approach-card span::before {
            animation: ie-ring-close linear both;
            animation-timeline: view();
            animation-range: entry 28% cover 46%;
        }
        body[data-variant="b"] .ie-approach-card:nth-child(2) span::before { animation-range: entry 34% cover 52%; }
        body[data-variant="b"] .ie-approach-card:nth-child(3) span::before { animation-range: entry 40% cover 58%; }
        body[data-variant="b"] .ie-approach-card:nth-child(4) span::before { animation-range: entry 46% cover 64%; }
    }
}
@keyframes ie-ring-close {
    from { --ie-ring: 0deg; }
    to { --ie-ring: 360deg; }
}

/* --- Abertura de capitulo ---------------------------------------------------
   Cada secao e anunciada por um sobretitulo em script. Ele ganha um fio que se
   traca quando a secao chega: a pagina passa a ter capitulos, e nao so blocos
   empilhados. E o detalhe que faz a imersao valer para a pagina INTEIRA, e nao
   so para os dois momentos grandes. */
body[data-variant="b"] .ie-script {
    position: relative;
    display: inline-block;
    padding-bottom: 9px;
}
body[data-variant="b"] .ie-script::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    /* currentColor e nao uma cor fixa: o mesmo sobretitulo aparece no creme e
       dentro da faixa vinho escura, e um fio bordo sumiria na faixa. */
    background: linear-gradient(90deg, currentColor, transparent);
    opacity: 0.4;
    transform-origin: 0 50%;
}
@supports (animation-timeline: view()) {
    body[data-variant="b"] .ie-script::after {
        animation: ie-line-draw-x linear both;
        animation-timeline: view();
        animation-range: entry 22% cover 34%;
    }
}

/* Quebra de linha decente em titulo e paragrafo: sem isto o navegador so evita
   passar da margem, e sobra titulo com uma palavra orfa na ultima linha. */
@supports (text-wrap: balance) {
    body[data-variant="b"] h1,
    body[data-variant="b"] h2,
    body[data-variant="b"] h3 { text-wrap: balance; }
}
@supports (text-wrap: pretty) {
    body[data-variant="b"] .ie-lead,
    body[data-variant="b"] .ie-quote-lit,
    body[data-variant="b"] .ie-approach-card p { text-wrap: pretty; }
}

/* --- O botao vira o modal (View Transitions API) ----------------------------
   Abrir o agendamento hoje e um corte: o modal simplesmente aparece por cima. Com
   view transition o proprio botao CRESCE ate virar o modal, e a pessoa nao perde
   de vista de onde aquilo veio — que e o momento de maior hesitacao da pagina.

   O nome de transicao e posto no botao antes e no modal depois; o browser cuida do
   resto. Regras `::view-transition-*` sao globais por natureza, mas so a variante B
   dispara a transicao (ver ie_booking.js). */
::view-transition-group(ie-booking-morph) {
    animation-duration: 460ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
::view-transition-old(ie-booking-morph) {
    animation: ie-vt-out 180ms linear both;
}
::view-transition-new(ie-booking-morph) {
    animation: ie-vt-in 300ms 120ms linear both;
}
@keyframes ie-vt-out {
    to { opacity: 0; }
}
@keyframes ie-vt-in {
    from { opacity: 0; }
}

/* --- O contrato de acessibilidade, parte 2 ----------------------------------
   Mesmo principio da parte 1: quem pediu menos movimento ve tudo parado e no
   estado final. Nenhuma das propriedades registradas anima; todas ficam no valor
   de chegada, que ja e o valor inicial declarado la em cima. */
@media (prefers-reduced-motion: reduce) {
    body[data-variant="b"] .ie-aura i {
        animation: none;
        transform: none;
    }
    /* Sem rolagem para revelar as manchas, sobra so a luz de acolhimento. */
    body[data-variant="b"] .ie-aura-open { opacity: 1; }
    body[data-variant="b"] .ie-aura-calm { opacity: 0.5; }
    body[data-variant="b"] .ie-aura-invite { opacity: 0; }
    body[data-variant="b"] .ie-quote-lit {
        animation: none;
        --ie-sweep: 140%;
    }
    body[data-variant="b"] .ie-hero-title .ie-name-first,
    body[data-variant="b"] .ie-hero-title .ie-name-last,
    body[data-variant="b"] .ie-family-copy blockquote::before,
    body[data-variant="b"] .ie-approach-card span::before,
    body[data-variant="b"] .ie-script::after {
        animation: none;
        transform: none;
    }
    body[data-variant="b"] .ie-family-copy blockquote::before { opacity: 0.2; }
    /* View transition tambem e movimento: em reduced-motion o JS nem chama a API,
       e este bloco e a rede caso alguma outra parte do app chame. */
    ::view-transition-group(ie-booking-morph),
    ::view-transition-old(ie-booking-morph),
    ::view-transition-new(ie-booking-morph) {
        animation: none;
    }
}

/* ===== Variante B — glossário vivo =========================================
   Terceira camada. As duas primeiras trataram de navegacao e de presenca; esta
   trata de COMPREENSAO, que e onde a pagina medica de verdade perde gente.

   A pagina diz TEA, TDAH, laudo, hipotese clinica, plano terapeutico. Quem le e
   mae que comecou a pesquisar semana passada — e quem nao entende uma palavra
   quase nunca pergunta: fecha a aba. Site medico costuma escolher entre escrever
   para colega (e perder a familia) ou apagar o termo tecnico (e perder precisao).
   Da para nao escolher.

   Tres APIs que quase ninguem pos em producao, cada uma resolvendo um pedaco:
   Custom Highlight API marca os termos sem tocar no DOM (o texto vem do banco e
   muda pelo admin; envolver palavra em <span> quebraria na primeira edicao);
   Anchor Positioning cola o cartao na PALAVRA e o vira sozinho na borda da tela;
   Popover API entrega top layer, ESC e clique-fora de graca.
   ========================================================================= */

/* --- A marca no texto -------------------------------------------------------
   ::highlight() aceita pouca coisa de proposito (cor, fundo, sublinhado, sombra):
   e um destaque de TEXTO, nao uma caixa. O sublinhado pontilhado e a convencao de
   "isto tem definicao" — a mesma de dicionario impresso — e o fundo rosado da o
   alvo de toque no celular, onde sublinhado sozinho passa despercebido. */
::highlight(avie-termo) {
    background-color: rgba(216, 175, 196, 0.34);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ie-wine);
    text-underline-offset: 3px;
}
/* Na faixa vinho escura o rosa translucido some e o vinho do sublinhado tambem.
   Highlight herda pela arvore do proprio pseudo, entao basta redeclarar na faixa. */
.ie-band::highlight(avie-termo) {
    background-color: rgba(255, 255, 255, 0.16);
    text-decoration-color: rgba(255, 255, 255, 0.72);
}
/* Cursor so onde ha ponteiro fino. O highlight nao e elemento e nao recebe
   :hover — quem descobre o termo sob o mouse e o JS, que so liga esta classe. */
#conteudo.is-over-term { cursor: help; }

/* --- O cartao ---------------------------------------------------------------
   A ancora e um elemento vazio deitado exatamente em cima da palavra, em
   coordenadas de PAGINA: assim ela rola junto com o texto e o cartao continua
   colado no termo enquanto a pessoa rola. */
.ie-term-anchor {
    position: absolute;
    pointer-events: none;
    anchor-name: --ie-term;
}
.ie-term-pop {
    /* O UA da ao popover `inset: 0` + `margin: auto` (centralizado na tela).
       Zerar os dois e o que devolve o posicionamento para a ancora. */
    inset: auto;
    margin: 0;
    padding: 16px 18px 14px;
    border: 1px solid var(--ie-line);
    border-radius: 16px;
    max-width: min(320px, calc(100vw - 28px));
    background: var(--ie-paper);
    box-shadow: var(--ie-shadow);
    color: var(--ie-text);
    font-size: 0.94rem;
    line-height: 1.5;
    overflow: visible;
}
@supports (position-anchor: --a) {
    .ie-term-pop {
        position-anchor: --ie-term;
        position-area: block-end;
        justify-self: anchor-center;
        margin-block-start: 10px;
        /* Termo no rodape da tela: o cartao sobe sozinho em vez de sair do campo
           de visao. Sem isto seria posicao fixa + calculo na mao no scroll. */
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    }
}
.ie-term-pop-name {
    margin: 0 0 6px;
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.06rem;
    font-weight: 600;
}
.ie-term-pop-body { margin: 0; }
.ie-term-pop-foot {
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--ie-line);
    color: var(--ie-muted);
    font-size: 0.78rem;
}
/* Entrada e saida do popover. `allow-discrete` e o que permite animar `display` e
   `overlay`: sem ele o cartao apareceria e sumiria em corte seco, porque display
   nao interpola. `@starting-style` da o ponto de partida de um elemento que
   ACABOU de existir — nao existe outro jeito de animar a entrada de algo que veio
   da top layer. */
@media (prefers-reduced-motion: no-preference) {
    .ie-term-pop {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
        transition:
            opacity 200ms ease,
            transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
            overlay 220ms allow-discrete,
            display 220ms allow-discrete;
    }
    .ie-term-pop:popover-open {
        opacity: 1;
        transform: none;
    }
    @starting-style {
        .ie-term-pop:popover-open {
            opacity: 0;
            transform: translateY(-6px) scale(0.985);
        }
    }
}

/* --- A lista (caminho canonico) --------------------------------------------
   O destaque no texto e atalho para quem esta com o dedo ali. Esta lista e o que
   funciona no teclado, no leitor de tela, na impressao e sem JS — e e dela que o
   JS le os verbetes, entao nao existe conteudo duplicado para sair de sincronia. */
.ie-glossary-block { margin-top: 26px; }
.ie-glossary-toggle summary {
    cursor: pointer;
    color: var(--ie-wine);
    font-weight: 600;
    list-style: none;
}
.ie-glossary-toggle summary::-webkit-details-marker { display: none; }
.ie-glossary-toggle summary::before {
    content: "+ ";
    font-weight: 700;
}
.ie-glossary-toggle[open] summary::before { content: "− "; }
.ie-glossary-intro {
    margin: 12px 0 0;
    color: var(--ie-muted);
    font-size: 0.86rem;
}
.ie-glossary {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}
.ie-glossary li {
    padding-left: 14px;
    border-left: 2px solid var(--ie-gold-soft);
    /* Sem teto de largura o verbete vira uma linha de 1.200px no desktop e o olho
       perde o comeco da linha seguinte. Verbete e texto de leitura, nao tabela. */
    max-width: 74ch;
    font-size: 0.94rem;
    line-height: 1.5;
}
.ie-glossary strong {
    display: block;
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-weight: 600;
}
.ie-glossary span { color: var(--ie-text); }

/* --- <details> que abre de verdade -----------------------------------------
   `height: auto` nunca foi animavel: por isso todo acordeao da web ou usa JS para
   medir a altura, ou finge com max-height (que da o atraso caracteristico quando
   o chute e alto demais). `interpolate-size: allow-keywords` autoriza o
   navegador a interpolar ate `auto`, e `::details-content` da acesso ao miolo do
   <details>, que antes nao tinha caixa propria. Resultado: acordeao correto, sem
   uma linha de JS e sem numero magico. */
body[data-variant="b"] { interpolate-size: allow-keywords; }
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {
    body[data-variant="b"] .ie-faq-list details::details-content,
    body[data-variant="b"] .ie-glossary-toggle::details-content {
        block-size: 0;
        overflow-y: clip;
        transition:
            block-size 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
            content-visibility 360ms allow-discrete;
    }
    body[data-variant="b"] .ie-faq-list details[open]::details-content,
    body[data-variant="b"] .ie-glossary-toggle[open]::details-content {
        block-size: auto;
    }
}

/* --- A barra que sabe que grudou -------------------------------------------
   `scroll-state(stuck: top)` deixa o CSS perguntar "eu ja estou grudado?". Antes
   isto exigia IntersectionObserver com elemento sentinela — JS para responder uma
   pergunta puramente visual. Aqui a barra se enxuga sozinha ao grudar: some o
   sobrenome, o icone encolhe e o menu ganha o espaco. */
@supports (container-type: scroll-state) {
    body[data-variant="b"] .ie-nav {
        container-type: scroll-state;
        container-name: ie-nav;
    }
    body[data-variant="b"] .ie-logo-icon,
    body[data-variant="b"] .ie-logo-type small {
        transition: all 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    @container ie-nav scroll-state(stuck: top) {
        .ie-logo-icon {
            width: 34px;
            height: 34px;
            border-radius: 11px;
        }
        .ie-logo-icon img {
            width: 25px;
            height: 25px;
        }
        .ie-logo-type small {
            font-size: 0;
            letter-spacing: 0;
            opacity: 0;
        }
    }
}

/* --- Alinhamento optico dos titulos ----------------------------------------
   Toda linha de texto carrega meio espaco de entrelinha em cima e embaixo, e e
   por isso que um titulo nunca fica exatamente alinhado com o que esta ao lado —
   a caixa e maior que as letras. `text-box-trim` corta essa sobra e alinha pela
   altura real das maiusculas. Ninguem nota; todo mundo sente. */
@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
    body[data-variant="b"] .ie-hero-title,
    body[data-variant="b"] .ie-family-copy blockquote p {
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
    }
}

/* --- As duas preferencias que ninguem atende --------------------------------
   `prefers-reduced-motion` virou padrao. Estas duas quase nao existem na web, e
   para ESTE publico sao as mais relevantes depois dela: quem pede menos
   transparencia normalmente pede porque texto sobre fundo semitransparente
   embaralha, e quem pede mais contraste ja esta forcando a vista.

   Custa duas media queries. O sistema operacional ja sabe a resposta e ninguem
   pergunta. */
@media (prefers-reduced-transparency: reduce) {
    body[data-variant="b"] .ie-nav {
        background: var(--ie-cream);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body[data-variant="b"] .ie-term-pop {
        background: #fff;
    }
    /* O campo de luz e feito de camadas translucidas sobrepostas: fica so a de
       acolhimento, em intensidade fixa. */
    body[data-variant="b"] .ie-aura i { animation: none; }
    body[data-variant="b"] .ie-aura-open { opacity: 0.6; }
    body[data-variant="b"] .ie-aura-calm,
    body[data-variant="b"] .ie-aura-invite { opacity: 0; }
    /* Marca de termo passa a ser so sublinhado: fundo translucido sobre texto e
       exatamente o que a preferencia esta pedindo para nao existir. */
    ::highlight(avie-termo) {
        background-color: transparent;
        text-decoration-thickness: 2px;
    }
    .ie-band::highlight(avie-termo) { background-color: transparent; }
}
@media (prefers-contrast: more) {
    body[data-variant="b"] {
        --ie-text: #3a2b31;
        --ie-muted: #5d4a50;
        --ie-line: rgba(59, 33, 50, 0.34);
        --ie-line-strong: rgba(59, 33, 50, 0.55);
    }
    ::highlight(avie-termo) {
        background-color: transparent;
        text-decoration-color: var(--ie-bordo);
        text-decoration-thickness: 2px;
    }
    body[data-variant="b"] .ie-term-pop {
        border-color: var(--ie-bordo);
        border-width: 2px;
    }
    /* A citacao acesa vive de diferenca de opacidade entre aceso e apagado —
       o oposto do que esta preferencia pede. Fica tudo aceso. */
    body[data-variant="b"] .ie-quote-lit {
        animation: none;
        --ie-sweep: 140%;
    }
}

/* --- Saidas de movimento ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body[data-variant="b"] .ie-faq-list details::details-content,
    body[data-variant="b"] .ie-glossary-toggle::details-content,
    body[data-variant="b"] .ie-logo-icon,
    body[data-variant="b"] .ie-logo-type small {
        transition: none;
    }
    .ie-term-pop {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

.ie-hero-figure {
    position: relative;
    min-width: 0;
    justify-self: end;
    width: 100%;
    max-width: 460px;
}
.ie-hero-figure::before {
    content: "";
    position: absolute;
    inset: 26px -22px -26px 24px;
    border-radius: 220px 220px 24px 24px;
    background: linear-gradient(160deg, var(--ie-rose-wash), rgba(216, 175, 196, 0.28));
    z-index: 0;
}
.ie-hero-figure::after {
    content: "";
    position: absolute;
    inset: 8px 10px;
    border: 1px solid var(--ie-gold-soft);
    border-radius: 220px 220px 18px 18px;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
}
.ie-hero-photo {
    position: relative;
    z-index: 1;
    margin: 0;
}
.ie-hero-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 4.7;
    object-fit: cover;
    object-position: top center;
    border-radius: 210px 210px 16px 16px;
    box-shadow: var(--ie-shadow);
}
.ie-doctor-chip { display: none; }

/* ===== Quote strip ===== */
.ie-strip {
    width: min(940px, calc(100vw - 48px));
    margin: 0 auto;
    padding: 8px 0 clamp(56px, 7vw, 88px);
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: center;
}
.ie-strip::before,
.ie-strip::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ie-gold-soft), transparent);
}
.ie-strip span {
    color: var(--ie-wine);
    font-family: "Avie Fraunces", Georgia, serif;
    font-style: italic;
    font-size: clamp(1.16rem, 2.4vw, 1.52rem);
    line-height: 1.3;
}

/* ===== Generic section ===== */
.ie-section {
    width: var(--ie-shell);
    margin: 0 auto;
    padding: clamp(56px, 7vw, 104px) 0;
}
.ie-section h2 {
    max-width: 780px;
    font-size: clamp(2.15rem, 3.55vw, 3.35rem);
    line-height: 1.06;
    text-wrap: balance;
}
.ie-title-gold {
    color: var(--ie-gold-text);
}
.ie-band {
    padding: clamp(56px, 7vw, 104px) var(--ie-pad);
}

/* ---- Story ---- */
.ie-story {
    display: grid;
    grid-template-columns: minmax(400px, 0.94fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 78px);
    align-items: start;
}
.ie-story-copy {
    position: sticky;
    top: 104px;
    max-width: 42rem;
}
.ie-doubts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.ie-doubt {
    padding: 24px;
    border: 1px solid var(--ie-line);
    border-radius: 18px;
    background: rgba(255, 253, 249, 0.78);
    box-shadow: var(--ie-shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ie-doubt:hover {
    transform: translateY(-4px);
    box-shadow: var(--ie-shadow);
}
.ie-doubt span {
    display: block;
    margin-bottom: 12px;
    color: var(--ie-gold);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
}
.ie-doubt strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.22rem;
    font-weight: 600;
}
.ie-doubt p {
    color: var(--ie-text);
    font-size: 0.96rem;
    line-height: 1.56;
}

/* ---- Family lens ---- */
.ie-family {
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}
.ie-family-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ie-line);
    border-radius: 22px;
    box-shadow: var(--ie-shadow);
    background: var(--ie-rose-wash);
}
.ie-family-photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 36%;
    background: linear-gradient(180deg, transparent, rgba(59, 33, 50, 0.18));
    pointer-events: none;
}
.ie-family-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.ie-family-copy {
    padding: clamp(26px, 4vw, 46px);
    border-left: 2px solid var(--ie-gold-soft);
}
.ie-family-copy blockquote {
    margin: 26px 0 0;
    padding: 0;
}
.ie-family-copy blockquote p {
    max-width: 48rem;
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: clamp(1.42rem, 2.55vw, 2.25rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.28;
}

/* ---- Approach (dark wine band) ---- */
.ie-approach {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(820px 500px at 84% 6%, rgba(168, 120, 153, 0.26), transparent 70%),
        radial-gradient(700px 480px at 6% 96%, rgba(216, 175, 196, 0.22), transparent 70%),
        linear-gradient(150deg, #4a2531 0%, var(--ie-bordo) 60%, #2a141d 100%);
}
.ie-approach::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -90px;
    width: 360px;
    height: 360px;
    border: 1px solid var(--ie-gold-soft);
    border-radius: 50%;
    pointer-events: none;
}
.ie-approach-head {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-bottom: clamp(34px, 4vw, 56px);
}
.ie-approach-head .ie-script { color: var(--ie-rose); }
.ie-approach-head h2 { color: #fff; }
.ie-approach-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.ie-approach-card {
    padding: 28px 26px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(6px);
}
.ie-approach-card span {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border: 1px solid var(--ie-gold-soft);
    border-radius: 50%;
    color: var(--ie-gold);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.16rem;
    font-weight: 600;
}
.ie-approach-card h3 {
    margin-bottom: 12px;
    color: #fff;
    font-size: 1.32rem;
}
.ie-approach-card p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.98rem;
    line-height: 1.58;
}

/* ---- Observation ---- */
.ie-observe {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.92fr);
    gap: clamp(32px, 4vw, 60px);
    align-items: start;
}
.ie-observe-copy {
    position: sticky;
    top: 104px;
    max-width: 44rem;
}
.ie-observe h2,
.ie-trajectory h2,
.ie-prepare h2,
.ie-reviews h2,
.ie-location h2 {
    font-size: clamp(2.02rem, 2.82vw, 2.86rem);
    line-height: 1.1;
    text-wrap: pretty;
}
.ie-observe h2 {
    font-size: clamp(1.92rem, 2.5vw, 2.5rem);
    text-wrap: balance;
}
.ie-signals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.ie-signal {
    position: relative;
    padding: 22px 22px 22px 24px;
    border: 1px solid var(--ie-line);
    border-radius: 16px;
    background: var(--ie-paper);
    box-shadow: var(--ie-shadow-soft);
}
.ie-signal::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--ie-gold), var(--ie-rose));
}
.ie-signal strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ie-wine);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.14rem;
    font-weight: 600;
}
.ie-signal span {
    color: var(--ie-text);
    font-size: 0.94rem;
    line-height: 1.5;
}

/* ---- Values ---- */
.ie-values {
    background: linear-gradient(180deg, var(--ie-rose-wash), rgba(255, 253, 249, 0.4));
}
.ie-values-head {
    max-width: 760px;
    margin-bottom: clamp(30px, 4vw, 48px);
}
.ie-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.ie-value {
    padding: 28px;
    border: 1px solid var(--ie-line);
    border-top: 3px solid var(--ie-gold);
    border-radius: 4px 4px 18px 18px;
    background: rgba(255, 253, 249, 0.86);
    box-shadow: var(--ie-shadow-soft);
}
.ie-value strong {
    display: block;
    margin-bottom: 10px;
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.3rem;
    font-weight: 600;
}
.ie-value p {
    color: var(--ie-text);
    font-size: 0.98rem;
    line-height: 1.58;
}

/* ---- Trajectory ---- */
.ie-trajectory {
    display: grid;
    grid-template-columns: minmax(520px, 1.14fr) minmax(0, 0.86fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}
.ie-traj-copy { position: sticky; top: 104px; max-width: 50rem; }
.ie-cert-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 28px;
    padding: 18px;
    border: 1px solid var(--ie-gold-soft);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(130, 92, 124, 0.1), rgba(255, 253, 255, 0.82)),
        var(--ie-paper);
    box-shadow: var(--ie-shadow-soft);
}
.ie-cert-card img {
    width: 92px;
    height: 112px;
    object-fit: cover;
    object-position: center top;
    border-radius: 14px;
    background: var(--ie-bordo);
}
.ie-cert-card span {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--ie-wine);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ie-cert-card p {
    color: var(--ie-text);
    font-size: 0.94rem;
    line-height: 1.5;
}
.ie-cert-card small {
    display: block;
    margin-top: 10px;
    color: var(--ie-wine);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.36;
}
.ie-credentials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 28px;
    border: 1px solid var(--ie-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--ie-line);
}
.ie-credentials > div {
    padding: 16px 18px;
    background: var(--ie-paper);
}
.ie-credentials span {
    display: block;
    margin-bottom: 4px;
    color: var(--ie-wine);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ie-credentials strong {
    color: var(--ie-ink);
    font-size: 0.96rem;
    font-weight: 600;
}
.ie-timeline {
    display: grid;
    gap: 0;
}
.ie-timeline article {
    position: relative;
    padding: 26px 0 26px 34px;
    border-bottom: 1px solid var(--ie-line);
}
.ie-timeline article:last-child { border-bottom: 0; }
.ie-timeline article::before {
    content: "";
    position: absolute;
    left: 0;
    top: 32px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ie-gold);
    box-shadow: 0 0 0 5px var(--ie-rose-wash);
}
.ie-timeline article::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 43px;
    bottom: -1px;
    width: 1px;
    background: var(--ie-line);
}
.ie-timeline article:last-child::after { display: none; }
.ie-timeline span {
    display: block;
    margin-bottom: 6px;
    color: var(--ie-wine);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ie-timeline h3 {
    margin-bottom: 8px;
    font-size: 1.26rem;
}
.ie-timeline p {
    color: var(--ie-text);
    font-size: 0.98rem;
    line-height: 1.58;
}
.ie-timeline small {
    display: block;
    margin-top: 8px;
    color: var(--ie-wine-soft);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.38;
}

/* ---- Prepare ---- */
.ie-prepare {
    display: grid;
    grid-template-columns: minmax(380px, 0.86fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
    background: var(--ie-cream);
}
.ie-prepare-copy { max-width: 40rem; }
.ie-prepare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.ie-prepare-grid article {
    display: flex;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--ie-line);
    border-radius: 16px;
    background: rgba(255, 253, 249, 0.82);
}
.ie-prepare-grid article:last-child { grid-column: 1 / -1; }
.ie-prep-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ie-rose-wash);
    color: var(--ie-wine);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 0.95rem;
    font-weight: 600;
}
.ie-prepare-grid strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.12rem;
    font-weight: 600;
}
.ie-prepare-grid span {
    color: var(--ie-text);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ---- Reviews ---- */
.ie-reviews {
    display: grid;
    grid-template-columns: minmax(380px, 0.86fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
}
.ie-reviews-copy { max-width: 42rem; }
.ie-google-card {
    padding: 28px;
    border: 1px solid var(--ie-line);
    border-radius: 20px;
    background:
        radial-gradient(360px 220px at 90% 4%, rgba(216, 175, 196, 0.2), transparent 70%),
        var(--ie-paper);
    box-shadow: var(--ie-shadow-soft);
}
.ie-google-score {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--ie-line);
}
.ie-google-score > div {
    display: grid;
    gap: 4px;
}
.ie-google-score > div > span {
    color: var(--ie-wine);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ie-google-score em {
    color: var(--ie-muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 700;
}
.ie-google-score strong {
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
}
.ie-google-score strong small {
    font-size: 1rem;
    color: var(--ie-muted);
}
.ie-google-stars {
    color: var(--ie-star);
    font-size: 1rem;
    letter-spacing: 0.08em;
}
.ie-google-score p {
    flex-basis: 100%;
    color: var(--ie-text);
    font-size: 0.94rem;
}
.ie-review-list {
    display: grid;
    gap: 14px;
}
.ie-review-list blockquote {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--ie-line);
    border-radius: 14px;
    background: var(--ie-paper);
    box-shadow: var(--ie-shadow-soft);
}
.ie-review-list blockquote p {
    color: var(--ie-ink);
    font-size: 0.98rem;
    line-height: 1.56;
}
.ie-review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ie-review-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ie-wine), var(--ie-bordo));
    color: #fff;
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
}
.ie-review-id {
    display: grid;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}
.ie-review-id strong {
    color: var(--ie-ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ie-review-id small {
    color: var(--ie-muted);
    font-size: 0.78rem;
}
.ie-review-g {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}
.ie-review-stars {
    color: var(--ie-star);
    margin-bottom: 8px;
    font-size: 0.94rem;
    letter-spacing: 0.05em;
}
.ie-review-list footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    color: var(--ie-muted);
    font-size: 0.82rem;
    font-weight: 600;
}
.ie-review-list footer a { color: var(--ie-wine); }

@media (min-width: 1100px) {
    .ie-review-list blockquote {
        padding: 16px 18px;
    }
    .ie-review-list blockquote p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    .ie-review-list footer {
        gap: 8px;
        font-size: 0.76rem;
    }
}
.ie-google-action {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    color: var(--ie-wine);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}
.ie-google-action:hover { text-decoration: underline; }
.ie-trust-panel {
    padding: 20px;
    border: 1px dashed var(--ie-line-strong);
    border-radius: 14px;
    background: rgba(244, 230, 225, 0.34);
}
.ie-trust-panel strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.16rem;
}
.ie-trust-panel p { color: var(--ie-text); font-size: 0.96rem; line-height: 1.56; }
.ie-google-note {
    margin-top: 16px;
    color: var(--ie-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ---- Proof: avaliações + localização lado a lado ---- */
.ie-proof-intro {
    max-width: 760px;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.ie-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: clamp(22px, 2.6vw, 36px);
    align-items: start;
}
.ie-proof-grid .ie-google-card { align-self: start; }
.ie-proof-place {
    display: grid;
    gap: 18px;
    min-width: 0;
}
.ie-place-head h3 {
    font-family: "Avie Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    line-height: 1.14;
    color: var(--ie-ink);
    text-wrap: balance;
}
.ie-place-head address {
    display: block;
    margin-top: 12px;
    color: var(--ie-text);
    font-style: normal;
    font-size: 1rem;
    line-height: 1.55;
}

/* ---- FAQ ---- */
.ie-faq-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.ie-faq-list {
    display: grid;
    gap: 12px;
    max-width: 920px;
}
.ie-faq-list details {
    border: 1px solid var(--ie-line);
    border-radius: 16px;
    background: rgba(255, 253, 249, 0.82);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ie-faq-list details[open] {
    border-color: var(--ie-gold-soft);
    box-shadow: var(--ie-shadow-soft);
}
.ie-faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.16rem;
    font-weight: 600;
}
.ie-faq-list summary::-webkit-details-marker { display: none; }
.ie-faq-list summary::after {
    content: "+";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--ie-gold-soft);
    color: var(--ie-wine);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.2s ease;
}
.ie-faq-list details[open] summary::after { transform: rotate(45deg); }
.ie-faq-list p {
    padding: 0 24px 22px;
    color: var(--ie-text);
    font-size: 0.99rem;
    line-height: 1.62;
}

/* ---- Location ---- */
.ie-location {
    display: grid;
    grid-template-columns: minmax(380px, 0.88fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}
.ie-location-copy { max-width: 42rem; }
.ie-location-copy address {
    margin-top: 16px;
    color: var(--ie-text);
    font-style: normal;
    font-size: 1.02rem;
    line-height: 1.55;
}
.ie-location-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
}
.ie-location-visuals {
    display: grid;
    gap: 16px;
    min-width: 0;
}
.ie-clinic-gallery-block {
    display: grid;
    gap: 22px;
    margin-top: clamp(34px, 5vw, 58px);
}
.ie-clinic-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.ie-clinic-gallery-head {
    display: grid;
    gap: 4px;
    padding-top: 8px;
}
.ie-clinic-gallery-head .ie-script {
    margin-bottom: 2px;
}
.ie-clinic-gallery-head h3 {
    max-width: 30rem;
    color: var(--ie-bordo);
    font-size: clamp(1.42rem, 2vw, 1.8rem);
    line-height: 1.12;
}
.ie-clinic-gallery-head .ie-link {
    justify-self: start;
    margin-top: 6px;
}
.ie-clinic-gallery figure {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ie-line);
    border-radius: 18px;
    background: var(--ie-paper);
    box-shadow: var(--ie-shadow-soft);
}
.ie-clinic-gallery figure:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
.ie-clinic-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.ie-clinic-gallery figure:first-child img {
    height: 100%;
    aspect-ratio: 1 / 1.08;
}
.ie-clinic-gallery figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 34px 16px 14px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.24;
    background: linear-gradient(180deg, transparent, rgba(59, 33, 50, 0.78));
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}
.ie-map {
    display: grid;
    margin: 0;
    border: 1px solid var(--ie-line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--ie-shadow);
}
.ie-map-embed {
    display: block;
    width: 100%;
    height: clamp(240px, 26vw, 340px);
    border: 0;
    background: var(--ie-rose-wash);
}
.ie-map-card {
    order: -1;
    display: grid;
    align-content: center;
    gap: 16px;
    min-height: 320px;
    padding: clamp(28px, 4vw, 44px);
    background:
        radial-gradient(460px 320px at 84% 8%, rgba(216, 175, 196, 0.32), transparent 70%),
        radial-gradient(360px 300px at 6% 96%, rgba(168, 120, 153, 0.16), transparent 70%),
        linear-gradient(150deg, var(--ie-rose-wash), var(--ie-paper));
}
.ie-map.has-embed .ie-map-card {
    min-height: 220px;
    border-bottom: 1px solid var(--ie-line);
}
.ie-map-pin {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid var(--ie-gold-soft);
    background: rgba(255, 253, 249, 0.8);
    color: var(--ie-wine);
}
.ie-map-pin svg { width: 26px; height: 26px; }
.ie-map-card strong {
    color: var(--ie-ink);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 600;
    line-height: 1.12;
}
.ie-map-card p { color: var(--ie-text); font-size: 1rem; line-height: 1.58; }
.ie-map-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ie-map-modes span {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--ie-gold-soft);
    background: rgba(255, 253, 249, 0.7);
    color: var(--ie-wine);
    font-size: 0.84rem;
    font-weight: 700;
}

/* ---- Final CTA ---- */
.ie-final {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
    color: #fff;
    background:
        radial-gradient(620px 420px at 12% 14%, rgba(168, 120, 153, 0.24), transparent 70%),
        radial-gradient(560px 420px at 92% 86%, rgba(216, 175, 196, 0.2), transparent 70%),
        linear-gradient(140deg, var(--ie-wine) 0%, var(--ie-bordo) 70%);
}
.ie-final::before {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -60px;
    width: 320px;
    height: 320px;
    border: 1px solid var(--ie-gold-soft);
    border-radius: 50%;
    pointer-events: none;
}
.ie-final > div {
    position: relative;
    z-index: 1;
    max-width: 38ch;
}
.ie-final .ie-script { color: var(--ie-rose); }
.ie-final h2 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.5rem); }
.ie-final p { margin-top: 16px; color: rgba(255, 255, 255, 0.78); font-size: 1.04rem; }
.ie-final .ie-btn {
    position: relative;
    z-index: 1;
    background: #fff;
    background-color: #fff;
    color: var(--ie-wine) !important;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
    text-shadow: none;
}
.ie-final .ie-btn::after { display: none; }
.ie-final .ie-btn:hover,
.ie-final .ie-btn:visited { color: var(--ie-bordo) !important; }

/* ===== Floating CTA ===== */
.ie-fab {
    position: fixed;
    right: 22px;
    bottom: 96px; /* acima do FAB verde do WhatsApp */
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid var(--ie-gold-soft);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ie-wine), var(--ie-bordo));
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.94rem;
    box-shadow: 0 18px 38px rgba(59, 33, 50, 0.32);
    animation: ie-fab-pulse 6s ease-in-out infinite;
}
.ie-fab:visited,
.ie-fab:hover,
.ie-fab:focus {
    color: #fff !important;
}
.ie-fab svg { width: 20px; height: 20px; }
@keyframes ie-fab-pulse {
    0%, 70%, 100% { transform: translateY(0); }
    80% { transform: translateY(-4px); }
}

/* ===== Signature footer (partial public_avie_signature.html) ===== */
.ie-body .public-avie-signature {
    margin: 0;
    padding: 30px 24px 44px;
    text-align: center;
}
.ie-body .public-avie-signature a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ie-muted);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    transition: color 0.16s ease;
}
.ie-body .public-avie-signature a:hover { color: var(--ie-wine); }
.ie-body .public-avie-signature img {
    width: 22px;
    height: 22px;
    opacity: 0.85;
}
.ie-body .public-legal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
    padding: 0 24px 38px;
    color: var(--ie-muted);
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.45;
}
.ie-body .public-legal-footer span {
    max-width: 620px;
}
.ie-body .public-legal-footer a {
    color: var(--ie-wine);
    font-weight: 760;
    text-decoration: none;
}
.ie-body .public-legal-footer a:hover {
    text-decoration: underline;
}
/* No mobile os FABs flutuam sobre o fim da pagina: reserva de area segura
   para o footer legal nunca ficar coberto (o perfil empilha 2 FABs). */
@media (max-width: 760px) {
    .ie-body .public-legal-footer { padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + 88px); }
    body[data-page="dra-perfil"] .public-legal-footer { padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + 156px); }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 980px) {
    .ie-hero,
    .ie-story,
    .ie-family,
    .ie-observe,
    .ie-trajectory,
    .ie-prepare,
    .ie-reviews,
    .ie-location,
    .ie-proof-grid {
        grid-template-columns: 1fr;
    }
    .ie-story-copy,
    .ie-family-copy,
    .ie-observe-copy,
    .ie-traj-copy {
        position: static;
        max-width: none;
    }
    .ie-family-copy {
        padding: 0;
        border-left: 0;
    }
    .ie-hero-figure {
        justify-self: center;
        max-width: 400px;
        order: -1;
    }
    .ie-location-visuals {
        width: 100%;
    }
    .ie-approach-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ie-values-grid {
        grid-template-columns: 1fr;
    }
    .ie-clinic-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ie-final { gap: 28px; }
}

@media (max-width: 760px) {
    .ie-nav-links { display: none; }
    .ie-nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border: 1px solid var(--ie-line-strong);
        border-radius: 999px;
        background: rgba(255, 253, 249, 0.7);
        color: var(--ie-ink);
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
    }
    .ie-nav.is-open .ie-nav-links {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        display: grid;
        gap: 4px;
        padding: 14px;
        border: 1px solid var(--ie-line);
        border-radius: 18px;
        background: rgba(255, 253, 249, 0.98);
        box-shadow: var(--ie-shadow);
        backdrop-filter: blur(16px);
    }
    .ie-nav.is-open .ie-nav-links a {
        padding: 12px 14px;
        font-size: 0.96rem;
    }
    .ie-nav.is-open .ie-nav-cta { text-align: center; justify-content: center; }
    .ie-nav { position: relative; }
}

@media (max-width: 620px) {
    .ie-body { --ie-shell: calc(100vw - 32px); font-size: 16px; }
    .ie-nav { min-height: 64px; }
    .ie-hero {
        width: 100%;
        padding: 0 0 48px;
        gap: 22px;
    }
    .ie-hero-copy {
        width: var(--ie-shell);
        margin: 0 auto;
        position: relative;
        z-index: 3;
    }
    .ie-hero-figure {
        order: -1;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .ie-hero-figure::before,
    .ie-hero-figure::after {
        display: none;
    }
    .ie-hero-photo {
        overflow: hidden;
        background: var(--ie-rose-wash);
    }
    .ie-hero-photo::after {
        content: "";
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        bottom: -1px;
        height: clamp(92px, 24vw, 124px);
        background: linear-gradient(180deg, rgba(247, 238, 243, 0), var(--ie-nude) 72%, var(--ie-nude));
        pointer-events: none;
    }
    .ie-hero-photo img {
        aspect-ratio: 4 / 4.35;
        border-radius: 0;
        box-shadow: none;
    }
    .ie-hero-title {
        font-size: clamp(2.86rem, 13.2vw, 3.7rem);
        line-height: 0.98;
    }
    .ie-name { gap: 3px; }
    .ie-lead { max-width: none; }
    .ie-hero-body { max-width: none; }
    .ie-actions { flex-direction: column; align-items: stretch; }
    .ie-btn { width: 100%; }
    .ie-link { justify-content: center; }
    .ie-section h2,
    .ie-observe h2,
    .ie-trajectory h2,
    .ie-prepare h2,
    .ie-reviews h2,
    .ie-location h2 {
        max-width: none;
        font-size: clamp(2rem, 8.6vw, 2.55rem);
        line-height: 1.08;
    }
    .ie-highlights {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 28px;
    }
    .ie-signals,
    .ie-prepare-grid {
        grid-template-columns: 1fr;
    }

    /* --- Variante B: cabe promessa + prova + CTA na primeira tela ------------
       Orcamento da dobra em 390x844 (766px uteis): nav 64 + foto ~239 + eyebrow
       ~33 + H1 duas linhas ~104 + lead ~90 + chip de prova ~48 + CTA ~64.
       A variante A gasta 424px so na foto e nao sobra nada. */
    /* object-position 18% (e nao `top`) porque o rosto dela nao esta no topo do
       enquadramento: cortando a partir do topo, a foto fica sem boca e queixo.
       Valor ajustado no browser, nao na conta. */
    .ie-hero-b .ie-hero-photo img {
        aspect-ratio: 4 / 2.45;
        object-position: 50% 18%;
    }
    /* O degrade de fusao com o fundo tem altura fixa; na foto mais baixa ele
       comeria quase metade da imagem. */
    .ie-hero-b .ie-hero-photo::after {
        height: clamp(48px, 13vw, 72px);
    }
    .ie-hero-b { padding: 0 0 28px; }
    .ie-hero-b .ie-lead {
        margin-top: 16px;
        font-size: 1.12rem;
    }
    .ie-hero-b .ie-actions { margin-top: 18px; }
    .ie-hero-b .ie-hero-proof { margin-top: 14px; }
    /* order empurra corpo denso e chips de identidade para depois do CTA. Nenhum
       deles e focavel, e o DOM segue eyebrow > h1 > lead, entao a ordem de leitura
       do leitor de tela nao muda. */
    .ie-hero-b .ie-hero-copy { display: grid; }
    .ie-hero-b .ie-hero-body { order: 5; margin-top: 22px; }
    .ie-hero-b .ie-highlights { order: 6; margin-top: 18px; }
    /* A faixa decorativa some no mobile da B: ja e aria-hidden, entao nao ha perda
       de conteudo, e devolve ~120px de rolagem. */
    .ie-hero-b + .ie-strip { display: none; }

    /* --- Variante B: os 4 passos saem do carrossel e viram linha do tempo ------
       O carrossel deixa ~1,2 card visivel: 3 dos 4 passos ficam escondidos atras
       de um gesto de swipe que muita gente nao faz. E justamente esses 4 passos
       sao a narrativa que responde "o que vai acontecer comigo la dentro" — a
       pergunta que trava a mae antes de marcar. Aqui eles viram uma coluna
       vertical, com a linha ligando um passo ao outro. */
    body[data-variant="b"] .ie-approach-grid {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: 1fr;
        gap: 0;
        overflow-x: visible;
        margin: 0;
        padding: 0;
        scroll-snap-type: none;
    }
    body[data-variant="b"] .ie-approach-grid::before { display: block; }
    body[data-variant="b"] .ie-approach-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 16px;
        width: auto;
        padding: 0 0 26px;
        border: 0;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        scroll-snap-align: none;
    }
    body[data-variant="b"] .ie-approach-card:last-child { padding-bottom: 0; }
    body[data-variant="b"] .ie-approach-card span {
        grid-row: 1 / span 2;
        margin-bottom: 0;
        /* Opaco de proposito: a linha passa por tras e nao pode cruzar o numero. */
        background: var(--ie-bordo);
    }
    body[data-variant="b"] .ie-approach-card h3 { align-self: center; }
    body[data-variant="b"] .ie-approach-card p { grid-column: 2; margin-top: 8px; }

    /* --- B, C e D: os dois flutuantes viram UMA barra -------------------
       Na variante A eles ocupam uma coluna de ~140px na borda direita durante
       toda a rolagem, os dois animados, competindo entre si — e cobrindo o texto
       (dava para ver por cima dos cards de avaliacao). Aqui o agendar vira barra
       larga e o WhatsApp vira icone: area ocluida cai de ~140px para 66px, e a
       hierarquia booking-primario / WhatsApp-secundario fica explicita. */
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-fab {
        left: max(14px, env(safe-area-inset-left));
        right: 82px;
        bottom: max(14px, env(safe-area-inset-bottom));
        width: auto;
        justify-content: center;
        animation: none;
        transition: opacity .18s ease, visibility .18s ease;
    }
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-wa-fab {
        width: 52px;
        padding: 0;
        justify-content: center;
        animation: none;
    }
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-wa-fab .ie-wa-fab-label { display: none; }
    /* Cards em carrossel horizontal (swipe) para a pagina ficar mais enxuta.
       Bleed ate a borda da tela: o card cortado a direita sinaliza "arrasta". */
    .ie-doubts,
    .ie-approach-grid,
    .ie-values-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min(78vw, 320px);
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        margin: 0 calc(-1 * var(--ie-pad));
        padding: 4px var(--ie-pad) 16px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--ie-pad);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ie-doubts::-webkit-scrollbar,
    .ie-approach-grid::-webkit-scrollbar,
    .ie-values-grid::-webkit-scrollbar { display: none; }
    .ie-doubt,
    .ie-approach-card,
    .ie-value {
        scroll-snap-align: start;
        min-width: 0;
    }
    /* Dentro do scroller horizontal os cards fora da tela nao interseccionam
       com o viewport; sem isto ficariam invisiveis ate o failsafe do reveal. */
    .ie-approach-card.ie-reveal,
    .ie-value.ie-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ie-clinic-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .ie-clinic-gallery figure:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .ie-clinic-gallery img { aspect-ratio: 4 / 5; }
    .ie-clinic-gallery figure:first-child img { aspect-ratio: 16 / 10.8; }
    .ie-clinic-gallery figcaption {
        display: none;
    }
    .ie-map-card {
        min-height: auto;
        padding: 24px 82px 24px 24px;
    }
    .ie-cert-card {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
    }
    .ie-cert-card img {
        width: 76px;
        height: 94px;
        border-radius: 12px;
    }
    .ie-map.has-embed .ie-map-card {
        border-bottom: 1px solid var(--ie-line);
    }
    .ie-map-embed {
        height: 240px;
    }
    .ie-prepare-grid article:last-child { grid-column: auto; }
    .ie-credentials { grid-template-columns: 1fr; }
    .ie-strip { gap: 14px; }
    .ie-faq-list summary {
        padding: 18px;
        font-size: 1.06rem;
        line-height: 1.28;
    }
    .ie-faq-list p {
        padding: 0 18px 20px;
    }
    .ie-fab {
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(max(14px, env(safe-area-inset-bottom)) + 74px);
        justify-content: center;
        width: auto;
        min-width: 118px;
        height: 52px;
        padding: 0 18px;
    }
    .ie-fab span { display: inline; }
}

/* ===== WhatsApp FAB (verde, estilo landing, com chamada de atenção) ===== */
.ie-wa-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 110;
    display: inline-flex;
    align-items: center;
    height: 62px;
    border-radius: 999px;
    background: linear-gradient(140deg, #2bd566 0%, #128c4e 100%);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 18px 40px rgba(18, 140, 78, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
    animation: ie-wa-bounce 3.6s ease-in-out infinite;
}
.ie-wa-fab:visited,
.ie-wa-fab:hover,
.ie-wa-fab:focus { color: #fff !important; }
.ie-wa-fab::before {
    content: "";
    position: absolute;
    /* `inset` e nao 60x60 fixo. Com tamanho fixo o anel vazava do botao assim que
       alguem mudava a altura do FAB (a variante B o encolheu para 52px) — e o
       excesso de um box-shadow animado dentro de elemento fixo composto acabava
       pintado na ORIGEM da camada, ou seja, dois borroes no topo da tela, longe do
       botao. Levou um bisect inteiro para achar. Com `inset` o anel acompanha o
       botao e o caso deixa de existir; em 62px o resultado e igual ao de hoje,
       entao a variante A nao muda um pixel. */
    inset: 1px;
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(43, 213, 102, 0.55);
    animation: ie-wa-ring 2.4s ease-out infinite;
}
.ie-wa-fab-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    position: relative;
    z-index: 1;
}
.ie-wa-fab-icon svg { width: 30px; height: 30px; }
.ie-wa-fab-label {
    padding-right: 22px;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.96rem;
}
.ie-wa-fab:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(18, 140, 78, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
@keyframes ie-wa-ring {
    0% { box-shadow: 0 0 0 0 rgba(43, 213, 102, 0.55); }
    70% { box-shadow: 0 0 0 18px rgba(43, 213, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(43, 213, 102, 0); }
}
@keyframes ie-wa-bounce {
    0%, 82%, 100% { transform: translateY(0); }
    88% { transform: translateY(-5px); }
    94% { transform: translateY(-2px); }
}
@media (max-width: 760px) {
    .ie-wa-fab {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        height: 52px;
    }
    .ie-wa-fab-icon { width: 52px; height: 52px; flex: 0 0 52px; }
    .ie-wa-fab-icon svg { width: 26px; height: 26px; }
    .ie-wa-fab-label { padding-right: 18px; font-size: 0.94rem; }
    .ie-wa-fab::before { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .ie-btn::after,
    .ie-fab,
    .ie-wa-fab,
    .ie-wa-fab::before {
        animation: none;
    }
    html.public-rise-html { scroll-behavior: auto; }

    /* O reveal escapava daqui, e era o movimento MAIS presente da pagina: todo
       bloco entrava deslizando 26px por 760ms. Quem pediu menos movimento estava
       recebendo movimento em cada secao — e numa pagina para familias de criancas
       neurodivergentes isso nao e detalhe de acessibilidade, e o publico. Agora o
       conteudo simplesmente ja esta la.

       Vale para as duas variantes de proposito: prefers-reduced-motion e pedido
       explicito do usuario, nao variavel de experimento. */
    .js-enabled .ie-reveal,
    .js-enabled .ie-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =====================================================================
   Agendamento — modal "reserve um horário" (estilo Calendly/cal.com)
   ===================================================================== */
.ie-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
html.ie-booking-lock,
html.ie-booking-lock body.ie-body { overflow: hidden !important; }

.ie-booking[hidden] { display: none; }
/* [hidden] em botões .ie-btn precisa vencer o display:inline-flex da classe */
.ie-booking [hidden] { display: none !important; }
.ie-booking {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 36px);
}
.ie-booking-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(36, 16, 24, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.ie-booking.is-open .ie-booking-backdrop { opacity: 1; }

.ie-booking-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    /* Linha 1fr com min 0: deixa a coluna de conteudo encolher dentro do max-height
       e rolar internamente (sem isso o grid cresce com o conteudo e o overflow:hidden
       do dialog corta o rodape com os botoes no desktop). */
    grid-template-rows: minmax(0, 1fr);
    width: min(940px, 100%);
    max-height: min(92vh, 780px);
    background: var(--ie-paper);
    border: 1px solid var(--ie-line);
    border-radius: 26px;
    box-shadow: var(--ie-shadow);
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ie-booking.is-open .ie-booking-dialog { opacity: 1; transform: none; }

.ie-booking-x {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ie-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ie-ink);
    cursor: pointer;
    transition: background 0.16s ease, transform 0.2s ease;
}
.ie-booking-x:hover { background: #fff; transform: rotate(90deg); }
.ie-booking-x svg { width: 18px; height: 18px; }

/* ---- Aside (resumo) ---- */
.ie-booking-aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 3vw, 38px);
    background:
        radial-gradient(120% 90% at 0% 0%, var(--ie-rose-wash), transparent 60%),
        linear-gradient(165deg, var(--ie-cream), var(--ie-nude));
    border-right: 1px solid var(--ie-line);
    overflow-y: auto;
    min-height: 0;
}
.ie-booking-doc { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ie-booking-doc img,
.ie-booking-doc span {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: var(--ie-shadow-soft);
    display: grid;
    place-items: center;
    background: var(--ie-wine);
    color: #fff;
    font-weight: 700;
}
.ie-booking-doc strong { display: block; font-family: "Avie Fraunces", Georgia, serif; font-size: 1.04rem; color: var(--ie-ink); }
.ie-booking-doc small { color: var(--ie-muted); font-size: 0.82rem; }
.ie-booking-aside .ie-script { margin: 0; font-size: 1.04rem; }
.ie-booking-aside h2 { font-size: clamp(1.5rem, 2.4vw, 1.94rem); line-height: 1.12; }
.ie-booking-meta {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--ie-line);
    border-radius: 16px;
    overflow: hidden;
}
.ie-booking-meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.62);
}
.ie-booking-meta span { color: var(--ie-muted); font-size: 0.86rem; }
.ie-booking-meta strong { color: var(--ie-ink); font-weight: 700; font-size: 0.95rem; text-align: right; }
.ie-booking-reassure { margin-top: auto; padding-top: 14px; color: var(--ie-text); font-size: 0.9rem; line-height: 1.5; }

/* ---- Main (passos) ---- */
.ie-booking-main {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.6vw, 34px);
    overflow-y: auto;
    min-height: 0;
}
/* Scroll do modal nao "vaza" para a pagina de fundo ao chegar no fim (iOS). */
.ie-booking .ie-booking-main,
.ie-booking .ie-booking-aside { overscroll-behavior: contain; }
.ie-booking-steps { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; }
.ie-booking-steps li { display: flex; align-items: center; gap: 8px; color: var(--ie-muted); font-size: 0.82rem; font-weight: 700; }
.ie-booking-steps li::after { content: ""; width: 16px; height: 1px; background: var(--ie-line-strong); margin-left: 2px; }
.ie-booking-steps li:last-child::after { display: none; }
.ie-booking-steps li span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--ie-line-strong);
    font-size: 0.8rem;
}
.ie-booking-steps li.is-active { color: var(--ie-wine); }
.ie-booking-steps li.is-active span { background: var(--ie-wine); border-color: var(--ie-wine); color: #fff; }
.ie-booking-steps li.is-done span { background: var(--ie-gold); border-color: var(--ie-gold); color: #fff; }
.ie-booking-steps .ie-dot-label { font-style: normal; }
/* Faixa adulto: passo 4 (Paciente) some; corta tambem o conector do passo 3. */
.ie-booking-steps li[hidden] { display: none; }
.ie-booking-steps.is-adult li[data-step-dot='3']::after { display: none; }

.ie-booking-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ie-booking-panel { flex: 1; }
.ie-booking-panel[hidden] { display: none; }
.ie-booking-head .ie-script { font-size: 1.02rem; }
.ie-booking-head h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: 4px; }

.ie-booking-modality { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; padding: 0; margin: 16px 0 18px; }
.ie-booking-modality label { position: relative; display: block; cursor: pointer; }
.ie-booking-modality input { position: absolute; opacity: 0; inset: 0; }
.ie-booking-modality span {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--ie-line-strong);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ie-booking-modality strong { display: block; color: var(--ie-ink); }
.ie-booking-modality small { color: var(--ie-muted); font-size: 0.82rem; }
.ie-booking-modality input:checked + span { border-color: var(--ie-wine); box-shadow: 0 0 0 1px var(--ie-wine), var(--ie-shadow-soft); }
.ie-booking-modality input:focus-visible + span { outline: 2px solid var(--ie-gold); outline-offset: 2px; }

.ie-booking-sublabel { margin: 14px 0 6px; font-size: 0.86rem; font-weight: 700; color: var(--ie-ink); }
.ie-booking-sublabel + .ie-booking-modality { margin-top: 0; margin-bottom: 12px; }

.ie-booking-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: thin; }
.ie-booking-day {
    flex: 0 0 auto;
    min-width: 64px;
    padding: 8px 12px;
    border: 1px solid var(--ie-line-strong);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ie-booking-day small { display: block; color: var(--ie-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ie-booking-day strong { color: var(--ie-ink); font-size: 0.96rem; }
.ie-booking-day.is-active { border-color: var(--ie-wine); background: var(--ie-rose-wash); }
.ie-booking-day.is-active strong { color: var(--ie-wine); }

.ie-booking-timegrid { display: none; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.ie-booking-timegrid.is-active { display: grid; }
.ie-booking-time {
    padding: 12px 8px;
    border: 1px solid var(--ie-line-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--ie-ink);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}
.ie-booking-time:hover { border-color: var(--ie-wine); transform: translateY(-1px); }
.ie-booking-time.is-selected { border-color: var(--ie-wine); background: var(--ie-wine); color: #fff; }

.ie-booking-hint { margin-top: 14px; color: var(--ie-muted); font-size: 0.84rem; line-height: 1.5; }
.ie-booking-empty { padding: 26px; border: 1px dashed var(--ie-line-strong); border-radius: 16px; text-align: center; }
.ie-booking-empty strong { display: block; color: var(--ie-ink); margin-bottom: 6px; }
.ie-booking-empty p { color: var(--ie-text); }

.ie-booking-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
/* Cabecalho de grupo (Responsavel / Endereco / Paciente) dentro do grid. */
.ie-field-group {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ie-line);
    color: var(--ie-wine);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ie-booking-fields > .ie-field-group:first-child { margin-top: 0; }
/* scroll-margin: o scrollIntoView do campo invalido nao pode parar embaixo
   dos dots (topo) nem do rodape sticky com os botoes (base). */
.ie-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; font-weight: 700; color: var(--ie-ink); scroll-margin: 76px 0 96px; }
.ie-field em { color: var(--ie-muted); font-weight: 400; font-style: normal; }
.ie-field-name em { margin-left: 5px; font-size: 0.8em; letter-spacing: 0.02em; opacity: 0.8; }
.ie-field-help { color: var(--ie-muted); font-weight: 400; font-size: 0.78rem; line-height: 1.4; }
.ie-field-help strong { color: var(--ie-wine); font-weight: 700; }
.ie-field-full { grid-column: 1 / -1; }
.ie-field input,
.ie-field textarea {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    color: var(--ie-ink);
    padding: 11px 13px;
    border: 1px solid var(--ie-line-strong);
    border-radius: 12px;
    background: #fff;
}
.ie-field input:focus,
.ie-field textarea:focus { outline: 2px solid var(--ie-gold); outline-offset: 1px; border-color: var(--ie-wine); }
.ie-field textarea { resize: vertical; }
.ie-uf { text-transform: uppercase; }

/* Seletor de DDI (codigo do pais) fundido ao campo de WhatsApp */
.ie-phone-row { display: flex; gap: 8px; align-items: stretch; }
.ie-phone-row > input { flex: 1 1 auto; min-width: 0; }
.ie-ddi { position: relative; flex: 0 0 auto; display: flex; }
.ie-ddi-select {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ie-ink);
    padding: 11px 28px 11px 12px;
    border: 1px solid var(--ie-line-strong);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    line-height: 1.2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.ie-ddi-select:focus { outline: 2px solid var(--ie-gold); outline-offset: 1px; border-color: var(--ie-wine); }
.ie-ddi::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    pointer-events: none;
    border-right: 2px solid var(--ie-muted);
    border-bottom: 2px solid var(--ie-muted);
    transform: rotate(45deg);
}

/* Validacao inline (sem balao nativo) */
.ie-field.is-invalid input,
.ie-field.is-invalid textarea { border-color: #b3261e; background: rgba(179, 38, 30, 0.04); }
.bk-field-error { color: #b3261e; font-size: 0.78rem; font-weight: 600; line-height: 1.3; }

/* Status do autofill por CEP */
.ie-cep-status {
    grid-column: 1 / -1;
    margin-top: -4px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ie-muted);
}
.ie-cep-status[data-state="ok"] { color: #1f7a4d; }
.ie-cep-status[data-state="warn"] { color: #9a6a16; }
.ie-cep-status[data-state="loading"] { color: var(--ie-wine); }

.ie-booking-done { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 0; }
.ie-booking-check {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: linear-gradient(135deg, #748e83, #4f7665);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 18px 42px rgba(73, 109, 91, 0.28);
}
.ie-booking-check svg { width: 32px; height: 32px; }
.ie-booking-done h3 { max-width: 12em; font-size: 1.72rem; line-height: 1.08; }
.ie-booking-done p { color: var(--ie-text); max-width: 45ch; line-height: 1.58; }
.ie-booking-done .ie-btn { margin-top: 10px; }

.ie-booking-error {
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(165, 42, 42, 0.08);
    border: 1px solid rgba(165, 42, 42, 0.25);
    color: #7a2230;
    font-size: 0.9rem;
}
.ie-booking-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ie-line);
    background: var(--ie-paper);
}
.ie-booking-foot .ie-btn { min-height: 46px; padding: 12px 24px; }
.ie-booking-next,
.ie-booking-submit { margin-left: auto; }
.ie-booking-back { background: none; border: 0; color: var(--ie-wine); font-family: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; padding: 8px 4px; }
.ie-booking-next:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.ie-booking-submit.is-loading { opacity: 0.7; pointer-events: none; }

@media (max-width: 760px) {
    .ie-booking { padding: 0; align-items: flex-end; }
    .ie-booking-dialog {
        display: flex;
        flex-direction: column;
        width: 100%;
        /* dvh acompanha a barra dinamica do navegador; vh fica de fallback
           (94vh estoura a viewport real com a barra visivel e some com o CTA). */
        max-height: 94vh;
        max-height: 94dvh;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
    }
    .ie-booking-aside { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--ie-line); padding: 12px 16px; }
    /* No mobile o cabecalho da consulta vira uma faixa fina: libera espaco para os horarios e os campos. */
    .ie-booking-aside .ie-booking-doc,
    .ie-booking-aside .ie-script,
    .ie-booking-aside h2,
    .ie-booking-reassure { display: none; }
    .ie-booking-meta {
        margin: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 10px;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .ie-booking-meta li {
        flex: 1 1 100%;
        justify-content: flex-start;
        gap: 8px;
        padding: 7px 12px;
        border: 1px solid var(--ie-line);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.55);
    }
    /* a 1a faixa cede espaco para o botao de fechar (X no topo direito) */
    .ie-booking-meta li:first-child { padding-right: 52px; }
    .ie-booking-meta span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
    .ie-booking-meta strong { font-size: 0.86rem; text-align: left; }
    .ie-booking-fields { grid-template-columns: 1fr; }
    .ie-booking-main { flex: 1 1 auto; min-height: 0; padding: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
    /* CTA proeminente no toque: Continuar/Confirmar em largura total (>=48px
       de alvo); o Voltar (texto) segue compacto ao lado. */
    .ie-booking-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .ie-booking-foot .ie-btn { flex: 1 1 auto; min-height: 48px; }
}
@media (max-width: 620px) {
    /* 4 passos com rotulo ocupam ~470px e estouram em tela estreita:
       rotulo so no passo ativo. */
    .ie-booking-steps { gap: 6px; }
    .ie-booking-steps li { gap: 6px; }
    .ie-booking-steps li::after { width: 10px; }
    .ie-booking-steps li:not(.is-active) .ie-dot-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ie-booking-backdrop,
    .ie-booking-dialog,
    .ie-booking-x { transition: none; }
}

/* =========================================================================
   Agendamento em tela cheia (/marcar_consulta) + ajustes do wizard
   compartilhado (2026-06-30). O wizard .ie-booking-* (modal no perfil)
   e reusado aqui em modo inline (.ie-booking-inline, sem chrome de modal).
   ========================================================================= */

/* WhatsApp FAB sempre acima do modal de agendamento (z-index do modal = 200) */
.ie-wa-fab { z-index: 210; }
/* ...mas some enquanto o modal esta aberto: no mobile o FAB cobria o botao
   "Continuar" no canto inferior, e o wizard ja tem seu proprio link de WhatsApp. */
.ie-booking-lock .ie-wa-fab { opacity: 0; visibility: hidden; pointer-events: none; }
/* Na pagina inteira do formulario (mobile) o FAB verde cobria os cards de
   dias/horarios e os botoes do wizard; o wizard tem link proprio de WhatsApp. */
@media (max-width: 760px) {
    .ie-booking-page .ie-wa-fab { display: none; }
}

/* Nav simplificada das paginas de agendamento/confirmacao/cancelamento.
   O CTA aqui e filho direto do header (fora de .ie-nav-links), entao nao
   herda o padding/radius de ".ie-nav-links a" — sem estas regras o texto
   "Voltar ao perfil" quebrava/cortava no mobile sobre o fundo vinho. */
.ie-nav-simple { gap: 12px; }
.ie-nav-simple .ie-logo { min-width: 0; }
.ie-nav-simple .ie-nav-cta {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
@media (max-width: 620px) {
    .ie-nav-simple .ie-nav-cta { padding: 9px 14px; font-size: 0.8rem; }
}
@media (max-width: 380px) {
    .ie-nav-simple .ie-logo-type small { display: none; }
}

/* Alerta de erro (fallback sem JS) */
.ie-alert {
    width: var(--ie-shell);
    margin: 0 auto 18px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(165, 42, 42, 0.08);
    border: 1px solid rgba(165, 42, 42, 0.25);
    color: #7a2230;
    font-size: 0.92rem;
}

/* Shell da pagina de agendamento */
.ie-booking-shell {
    width: var(--ie-shell);
    margin: 0 auto;
    padding: clamp(20px, 4vw, 44px) 0 clamp(60px, 8vw, 96px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 30px);
}

/* Intro com a foto da doutora (substitui o antigo monograma "DE") */
.ie-booking-intro { max-width: 720px; }
.ie-booking-intro-doc { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.ie-booking-intro-doc img,
.ie-booking-intro-doc > span {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: var(--ie-shadow-soft);
    display: grid;
    place-items: center;
    background: var(--ie-wine);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}
.ie-booking-intro-doc strong { display: block; font-family: "Avie Fraunces", Georgia, serif; font-size: 1.05rem; color: var(--ie-ink); }
.ie-booking-intro-doc small { color: var(--ie-muted); font-size: 0.82rem; }
.ie-booking-intro .ie-script { margin-bottom: 8px; }
.ie-booking-intro h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.08; max-width: 16ch; }
.ie-booking-intro-lead { margin-top: 14px; max-width: 46ch; color: var(--ie-text); font-size: 1.04rem; line-height: 1.6; }

/* Wizard em modo inline (sem position:fixed do modal) */
.ie-booking-inline {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    width: 100%;
    background: var(--ie-paper);
    border: 1px solid var(--ie-line);
    border-radius: 24px;
    box-shadow: var(--ie-shadow);
    overflow: hidden;
}
/* [hidden] precisa vencer o display:inline-flex de .ie-btn (passos/botoes ocultos).
   No modal isso vem de ".ie-booking [hidden]"; o inline usa .ie-booking-inline. */
.ie-booking-inline [hidden] { display: none !important; }
.ie-booking-inline .ie-booking-aside,
.ie-booking-inline .ie-booking-main { overflow: visible; min-height: 0; }
/* Foto/titulo/script do aside duplicam a intro da pagina: ocultos no inline. */
.ie-booking-inline .ie-booking-doc,
.ie-booking-inline .ie-booking-aside > .ie-script,
.ie-booking-inline .ie-booking-aside > h2 { display: none; }
.ie-booking-inline .ie-booking-aside { gap: 8px; }
.ie-booking-inline .ie-booking-meta { margin-top: 0; }
/* Rodape do wizard: estatico no inline (nao gruda na viewport, nao colide com o FAB) */
.ie-booking-inline .ie-booking-foot { position: static; }

/* Preco enxuto: valor a vista + linha pequena do cartao */
.ie-price-meta strong { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ie-price-meta strong em { font-style: normal; font-weight: 500; font-size: 0.74rem; color: var(--ie-muted); }

/* Disclaimer de WhatsApp abaixo dos horarios */
.ie-booking-wa-note { margin-top: 8px; color: var(--ie-text); font-size: 0.84rem; line-height: 1.5; }
.ie-booking-wa-note a { color: var(--ie-wine); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ie-booking-empty .ie-btn { margin-top: 14px; }

/* Revela o endereco so depois do CEP (booking_form.js controla a classe) */
.is-cep-hidden { display: none !important; }

@media (max-width: 760px) {
    .ie-booking-inline {
        display: flex;
        flex-direction: column;
        border-radius: 20px;
    }
    .ie-price-meta strong { align-items: flex-start; }
    .ie-booking-intro-doc img,
    .ie-booking-intro-doc > span { width: 52px; height: 52px; }
}

/* Botao secundario (ghost) reutilizavel */
.ie-btn-ghost,
.ie-btn-ghost:visited,
.ie-btn-ghost:hover,
.ie-btn-ghost:focus {
    background: #fff !important;
    background-image: none !important;
    color: var(--ie-wine) !important;
    border: 1px solid var(--ie-line-strong);
    box-shadow: var(--ie-shadow-soft);
    text-shadow: none;
}
.ie-btn-ghost::after { display: none; }
.ie-btn-ghost:hover { background: var(--ie-rose-wash) !important; transform: translateY(-2px); }

/* =========================================================================
   Pagina de confirmacao do agendamento (.ie-confirm-*) — 2026-06-30.
   Sistema .ie-* (antes era .public-* do app.css). Sem o bloco de URL/token.
   ========================================================================= */
.ie-confirm-shell {
    width: min(720px, calc(100vw - 40px));
    margin: 0 auto;
    padding: clamp(24px, 5vw, 56px) 0 clamp(60px, 8vw, 96px);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vw, 26px);
}
.ie-confirm-hero { text-align: center; }
.ie-confirm-hero .ie-eyebrow { justify-content: center; }
.ie-confirm-check {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #748e83, #4f7665);
    color: #fff;
    box-shadow: 0 18px 42px rgba(73, 109, 91, 0.30);
}
.ie-confirm-hero.is-cancelled .ie-confirm-check {
    background: linear-gradient(135deg, #c39, #8a4b58);
    box-shadow: 0 18px 42px rgba(138, 75, 88, 0.28);
}
.ie-confirm-check svg { width: 36px; height: 36px; }
.ie-confirm-hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.08; }
.ie-confirm-lead { margin: 14px auto 0; max-width: 46ch; color: var(--ie-text); font-size: 1.04rem; line-height: 1.6; }

.ie-confirm-pass {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(16px, 3vw, 26px);
    padding: clamp(18px, 3vw, 26px);
    background: var(--ie-paper);
    border: 1px solid var(--ie-line);
    border-radius: 22px;
    box-shadow: var(--ie-shadow-soft);
}
.ie-pass-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 14px 16px;
    border-radius: 16px;
    background:
        radial-gradient(120% 90% at 0% 0%, var(--ie-rose-wash), transparent 60%),
        linear-gradient(165deg, var(--ie-cream), var(--ie-nude));
    border: 1px solid var(--ie-line);
}
.ie-pass-date span { color: var(--ie-wine); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.ie-pass-date strong { font-family: "Avie Fraunces", Georgia, serif; font-size: 2.4rem; line-height: 1; color: var(--ie-ink); }
.ie-pass-date em { font-style: normal; color: var(--ie-muted); font-size: 0.84rem; }
.ie-pass-eyebrow { color: var(--ie-muted); font-size: 0.8rem; }
.ie-pass-main h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 2px 0 12px; }
.ie-pass-details { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; padding: 0; }
.ie-pass-details div { display: flex; flex-direction: column; }
.ie-pass-details dt { color: var(--ie-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ie-pass-details dd { margin: 0; color: var(--ie-ink); font-weight: 700; }
.ie-pass-place { padding-top: 12px; border-top: 1px solid var(--ie-line); display: flex; flex-direction: column; gap: 2px; }
.ie-pass-place span { color: var(--ie-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ie-pass-place strong { color: var(--ie-ink); }
.ie-pass-place small { color: var(--ie-muted); font-size: 0.84rem; }
.ie-pass-map {
    margin-top: 6px;
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--ie-wine);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ie-pass-map:hover { color: var(--ie-ink); }

.ie-confirm-calendar {
    padding: clamp(18px, 3vw, 26px);
    background: var(--ie-paper);
    border: 1px solid var(--ie-line);
    border-radius: 22px;
    box-shadow: var(--ie-shadow-soft);
}
.ie-confirm-calendar-copy h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 2px; }
.ie-confirm-calendar-copy p { color: var(--ie-text); margin-top: 6px; }
.ie-confirm-calendar-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 12px; }
.ie-confirm-calendar-actions .ie-btn {
    flex: 0 1 auto;
    width: auto;
    min-height: 44px;
    padding: 10px 20px;
    font-size: 0.9rem;
}
.ie-confirm-calendar-actions .ie-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.ie-confirm-calendar-actions .ie-btn span { white-space: nowrap; }
.ie-confirm-calendar-note { color: var(--ie-muted); font-size: 0.84rem; line-height: 1.5; }

.ie-confirm-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ie-confirm-next li {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 16px;
    background: var(--ie-paper);
    border: 1px solid var(--ie-line);
    border-radius: 14px;
}
.ie-confirm-next li span { grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--ie-wine); color: #fff; font-weight: 700; }
.ie-confirm-next li strong { color: var(--ie-ink); }
.ie-confirm-next li small { color: var(--ie-muted); }

.ie-confirm-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.ie-confirm-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    color: var(--ie-wine);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ie-confirm-back:hover { color: var(--ie-ink); }
.ie-confirm-cancel { color: var(--ie-muted); font-size: 0.88rem; text-decoration: underline; text-underline-offset: 2px; }
.ie-confirm-cancel:hover { color: var(--ie-wine); }

/* A regra mobile global ".ie-btn { width: 100% }" (620px) e pensada para o
   perfil; na confirmacao ela empilhava pilulas gigantes. Escopo so desta
   pagina (body.ie-confirm-page) — tap target segue >= 44px via min-height. */
@media (max-width: 620px) {
    body.ie-confirm-page .ie-btn { width: auto; }
    body.ie-confirm-page .ie-confirm-calendar-actions .ie-btn { flex: 1 1 auto; }
}

@media (max-width: 600px) {
    .ie-confirm-pass { grid-template-columns: 1fr; }
    .ie-pass-date { flex-direction: row; gap: 10px; min-width: 0; align-items: baseline; justify-content: flex-start; }
    .ie-pass-date strong { font-size: 1.8rem; }
    .ie-confirm-calendar-actions .ie-btn { flex: 1 1 auto; }
}

/* =====================================================================
   Cancelamento (/cancelar/{token}) — mesma familia visual da confirmacao
   ===================================================================== */
.ie-cancel-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(18px, 3vw, 26px);
    background: var(--ie-paper);
    border: 1px solid var(--ie-line);
    border-radius: 22px;
    box-shadow: var(--ie-shadow-soft);
}
.ie-cancel-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ie-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ie-cancel-form select {
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--ie-line);
    border-radius: 12px;
    background: #fff;
    color: var(--ie-ink);
    font: inherit;
    font-size: 0.95rem;
}
.ie-cancel-note { margin: -4px 0 0; color: var(--ie-muted); font-size: 0.84rem; line-height: 1.5; }
.ie-cancel-form .ie-btn { align-self: flex-start; }
/* Acao destrutiva: solida escura (paleta de erro ja usada no .ie-alert),
   sem o gradiente festivo do .ie-btn padrao. */
.ie-btn-danger {
    background: #7a2230;
    background-color: #7a2230;
    border-color: rgba(165, 42, 42, 0.4);
    box-shadow: 0 8px 20px rgba(122, 34, 48, 0.22);
}
.ie-btn-danger:hover {
    box-shadow: 0 12px 26px rgba(122, 34, 48, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
@media (max-width: 620px) {
    .ie-cancel-form .ie-btn { align-self: stretch; }
}

/* =====================================================================
   Banner de cookies (partial analytics.html) — sem estas regras o banner
   renderiza cru nas paginas publicas (o estilo dele so existia em
   landing.css, que estas paginas nao carregam).
   ===================================================================== */
.consent-banner {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 230; /* acima do WA FAB (210) e do modal de agendamento (200) */
    width: min(420px, calc(100vw - 36px));
    padding: 16px 18px;
    background: var(--ie-paper);
    border: 1px solid var(--ie-line);
    border-radius: 16px;
    box-shadow: var(--ie-shadow);
}
.consent-banner[hidden] { display: none; }
.consent-banner p {
    margin: 0 0 12px;
    color: var(--ie-text);
    font-size: 0.9rem;
    line-height: 1.5;
}
.consent-actions { display: flex; gap: 10px; }
.consent-actions button {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.consent-actions button[data-consent="accept"] {
    border: 1px solid var(--ie-wine);
    background: linear-gradient(135deg, var(--ie-wine), var(--ie-bordo));
    color: #fff;
    box-shadow: 0 12px 26px rgba(59, 33, 50, 0.2);
}
.consent-actions button[data-consent="accept"]:hover { transform: translateY(-1px); }
.consent-actions button[data-consent="reject"] {
    border: 1px solid var(--ie-line);
    background: transparent;
    color: var(--ie-wine);
}
.consent-actions button[data-consent="reject"]:hover { background: var(--ie-rose-wash); }
/* Enquanto o modal de agendamento esta aberto, o banner nao cobre o rodape */
.ie-booking-lock .consent-banner { visibility: hidden; }
@media (max-width: 620px) {
    .consent-banner {
        left: 12px;
        right: 12px;
        width: auto;
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 12px);
    }
}

/* ===== Variante B — trilhos de leitura lateral ==============================
   O celular lia 15.262px de pagina. Metade disso e lista: 6 avaliacoes, 9 fotos,
   5 itens de preparo, 4 passos, a trajetoria. Empilhado, cada um desses blocos
   custa uma tela inteira de rolagem para conteudo que a pessoa consome de relance.

   Vira trilho horizontal: o bloco ocupa a altura de UM cartao e quem quiser ler os
   outros arrasta para o lado. A objecao obvia — "e quem nao percebe que da para
   arrastar?" — e exatamente o que matava carrossel na web ate 2025, e e o que as
   os desenha, `:target-current` marca o atual e `::scroll-button()` gera as setas,
   que se desabilitam sozinhas nas pontas.

   Nao e so menos JS: o grupo de marcadores nasce focavel e navegavel por seta, com
   papel de tablist — coisa que carrossel de biblioteca quase nunca acerta.
   ========================================================================= */

/* Escalonar entrada por posicao sempre exigiu `style="--i: 3"` no HTML — dado de
   apresentacao vazando para o template. `sibling-index()` da a posicao em CSS, e
   `@function` deixa guardar a conta num nome em vez de repetir o calc(). */
@function --escalonar(--passo type(<time>)) returns type(<time>) {
    result: calc(sibling-index() * var(--passo));
}

/* Posicao da regua de progresso dos trilhos. Nasce em 100% para que browser sem
   scroll-timeline mostre a regua inteira ("tem conteudo aqui") em vez de uma barra
   parada em zero, que pareceria quebrada. */
@property --ie-rail-pos {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@keyframes ie-rail-progress {
    from { --ie-rail-pos: 12%; }
    to { --ie-rail-pos: 100%; }
}

@media (max-width: 620px) {
    body[data-variant="b"] .ie-review-list,
    body[data-variant="b"] .ie-clinic-gallery,
    body[data-variant="b"] .ie-timeline,
    body[data-variant="b"] .ie-prepare-grid,
    body[data-variant="b"] .ie-approach-grid,
    body[data-variant="b"] .ie-doubts,
    body[data-variant="b"] .ie-values-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        /* `clip` no eixo Y e nao `hidden`: com `hidden` o trilho vira scroll
           container tambem na vertical e rouba os view() timelines de dentro dele
           (foi assim que a pagina inteira congelou uma vez). */
        overflow-x: auto;
        overflow-y: clip;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Sangra ate a borda da tela e devolve o respiro por padding: cartao
           cortado na margem e o que comunica "tem mais coisa desse lado". */
        margin-inline: calc(var(--ie-pad) * -1);
        padding-inline: var(--ie-pad);
        scroll-timeline: --ie-rail inline;
    }
    body[data-variant="b"] .ie-review-list::-webkit-scrollbar,
    body[data-variant="b"] .ie-clinic-gallery::-webkit-scrollbar,
    body[data-variant="b"] .ie-timeline::-webkit-scrollbar,
    body[data-variant="b"] .ie-prepare-grid::-webkit-scrollbar { display: none; }

    body[data-variant="b"] .ie-review-list > *,
    body[data-variant="b"] .ie-clinic-gallery > *,
    body[data-variant="b"] .ie-timeline > *,
    body[data-variant="b"] .ie-prepare-grid > *,
    body[data-variant="b"] .ie-approach-grid > *,
    body[data-variant="b"] .ie-doubts > *,
    body[data-variant="b"] .ie-values-grid > * {
        flex: 0 0 var(--ie-rail-card, min(80vw, 320px));
        scroll-snap-align: center;
        /* `always` impede que um gesto rapido pule dois cartoes: em trilho de
           conteudo, passar direto por um item e perder o item. */
        scroll-snap-stop: always;
    }


    /* --- A regua de progresso do trilho -----------------------------------
       Isto substitui as CSS Carousels (`::scroll-marker-group`), que era a
       solucao obvia e elegante — e que teve de sair.

       Motivo, medido e nao suposto: com os 8 trilhos da pagina, o Chromium 147
       DERRUBA O RENDERER durante a rolagem. Bisect: 0, 1 e 2 grupos passam; 8
       matam a aba. Nao e o full-page screenshot, e a rolagem normal. 147 e versao
       corrente, e uma aba que morre enquanto a mae rola a pagina custa mais do
       que qualquer pontinho bonito vale.

       No lugar entra uma regua que faz o mesmo trabalho com tecnologia que esta
       pagina ja provou estavel: o trilho publica a propria rolagem como timeline
       nomeado (`scroll-timeline: --ie-rail inline`), o container o torna visivel
       com `timeline-scope`, e o `::after` do container — que fica FORA do
       scroller e por isso nao anda junto — desenha o avanco.

       Ganha de pontinho em dois pontos, alias: funciona igual com 4 ou com 9
       itens, e mostra proporcao (quanto falta), nao so posicao. */
    body[data-variant="b"] .ie-google-card,
    body[data-variant="b"] .ie-clinic-gallery-block,
    body[data-variant="b"] .ie-trajectory,
    body[data-variant="b"] .ie-prepare,
    body[data-variant="b"] .ie-approach,
    body[data-variant="b"] .ie-ig {
        timeline-scope: --ie-rail;
        position: relative;
    }
    body[data-variant="b"] .ie-google-card::after,
    body[data-variant="b"] .ie-clinic-gallery-block::after,
    body[data-variant="b"] .ie-trajectory::after,
    body[data-variant="b"] .ie-prepare::after,
    body[data-variant="b"] .ie-approach::after,
    body[data-variant="b"] .ie-ig::after {
        content: "";
        position: absolute;
        left: var(--ie-pad);
        right: var(--ie-pad);
        bottom: 14px;
        height: 3px;
        border-radius: 99px;
        /* Trilho e preenchimento no MESMO elemento: a parada do gradiente e uma
           propriedade registrada, entao da para anima-la. Sem isso seriam dois
           pseudo-elementos, e `::before` ja e o aro decorativo da faixa. */
        background: linear-gradient(
            90deg,
            currentColor 0 var(--ie-rail-pos),
            color-mix(in srgb, currentColor 22%, transparent) var(--ie-rail-pos) 100%
        );
        opacity: 0.5;
        pointer-events: none;
    }
    /* A parte preenchida. Sem suporte a scroll-timeline fica a regua inteira
       acesa: le-se como "tem conteudo aqui", que e verdade, em vez de uma barra
       parada em zero, que pareceria quebrada. */
    @supports (animation-timeline: scroll()) {
        body[data-variant="b"] .ie-google-card::after,
        body[data-variant="b"] .ie-clinic-gallery-block::after,
        body[data-variant="b"] .ie-trajectory::after,
        body[data-variant="b"] .ie-prepare::after,
        body[data-variant="b"] .ie-approach::after,
        body[data-variant="b"] .ie-ig::after {
            animation: ie-rail-progress linear both;
            animation-timeline: --ie-rail;
        }
    }
    /* A faixa vinho e escura: a regua nela e clara. */
    body[data-variant="b"] .ie-approach::after { color: #fff; }

    /* --- Ajustes por trilho ----------------------------------------------- */
    /* `min-width: auto` num item de grid/flex faz o container herdar o
       min-content do trilho e estourar a coluna (a lista de avaliacoes chegou a
       1099px num viewport de 390, cortada pelo clip do body). Zerar o minimo e o
       que deixa o trilho ser realmente rolavel em vez de invisivel. */
    body[data-variant="b"] .ie-google-card,
    body[data-variant="b"] .ie-proof-grid,
    body[data-variant="b"] .ie-clinic-gallery-block,
    body[data-variant="b"] .ie-traj-copy { min-width: 0; }

    body[data-variant="b"] .ie-review-list { --ie-rail-card: min(84vw, 330px); }
    body[data-variant="b"] .ie-review-list > .ie-review {
        margin: 0;
        padding: 20px;
        border: 1px solid var(--ie-line);
        border-radius: 18px;
        background: var(--ie-paper);
    }
    /* Flex estica todos os cartoes na altura do maior: uma avaliacao de duas
       linhas passava a ocupar a caixa da mais longa. Limitar o texto resolve o
       vazio e nao perde nada — o relato inteiro esta no link do Google. */
    body[data-variant="b"] .ie-review-list > .ie-review p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
    }

    body[data-variant="b"] .ie-clinic-gallery { --ie-rail-card: min(72vw, 280px); }
    body[data-variant="b"] .ie-clinic-gallery > figure { margin: 0; }
    body[data-variant="b"] .ie-clinic-gallery > figure img,
    body[data-variant="b"] .ie-clinic-gallery > figure:first-child img { aspect-ratio: 4 / 5; }

    body[data-variant="b"] .ie-timeline { --ie-rail-card: min(82vw, 320px); }
    body[data-variant="b"] .ie-timeline > article {
        padding: 22px;
        border: 1px solid var(--ie-line);
        border-radius: 18px;
        background: var(--ie-paper);
    }
    /* O fio vertical entre itens nao existe em trilho horizontal. */
    body[data-variant="b"] .ie-timeline > article::before,
    body[data-variant="b"] .ie-timeline > article::after { display: none; }

    body[data-variant="b"] .ie-prepare-grid { --ie-rail-card: min(76vw, 300px); }
    body[data-variant="b"] .ie-prepare-grid > article {
        padding: 20px;
        border: 1px solid var(--ie-line);
        border-radius: 18px;
        background: var(--ie-paper);
    }

    /* Os 4 passos voltam a ser trilho. Da primeira vez isto era um carrossel cego
       que mostrava 1,2 cartao e escondia 3 dos 4 passos — o motivo de ter virado
       lista vertical. Com marcador e snap o problema deixa de existir: da para ver
       quantos sao, onde se esta e navegar por seta. */
    body[data-variant="b"] .ie-approach-grid {
        --ie-rail-card: min(80vw, 310px);
        display: flex;
    }
    body[data-variant="b"] .ie-approach-grid::before { display: none; }
    body[data-variant="b"] .ie-approach-card {
        display: block;
        padding: 26px 22px;
    }
    body[data-variant="b"] .ie-approach-card span {
        grid-row: auto;
        margin-bottom: 16px;
        background: transparent;
    }
    body[data-variant="b"] .ie-approach-card p { grid-column: auto; margin-top: 0; }

    /* O anel do numero passaria a se ancorar no trilho (que nao rola na vertical) e
       ficaria congelado. `view(inline)` troca o eixo do timeline: agora o anel se
       fecha conforme o cartao DESLIZA para o centro. O gesto lateral vira o
       progresso do passo. */
    @supports (animation-timeline: view(inline)) {
        body[data-variant="b"] .ie-approach-card span::before,
        body[data-variant="b"] .ie-approach-card:nth-child(2) span::before,
        body[data-variant="b"] .ie-approach-card:nth-child(3) span::before,
        body[data-variant="b"] .ie-approach-card:nth-child(4) span::before {
            animation-timeline: view(inline);
            animation-range: entry 30% contain 55%;
        }
    }

    /* Entrada escalonada dos cartoes do trilho, sem --i no HTML. */
    @supports (opacity: calc(sibling-index() * 1)) {
        body[data-variant="b"] .ie-review-list > *,
        body[data-variant="b"] .ie-prepare-grid > *,
        body[data-variant="b"] .ie-timeline > * {
            animation: ie-rail-in 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
            animation-delay: --escalonar(46ms);
        }
    }
}
@keyframes ie-rail-in {
    from { opacity: 0; transform: translateX(18px); }
}

@media (prefers-reduced-motion: reduce) {
    body[data-variant="b"] .ie-review-list > *,
    body[data-variant="b"] .ie-prepare-grid > *,
    body[data-variant="b"] .ie-timeline > * {
        animation: none;
    }
    /* A regua de progresso do trilho para de animar: fica cheia. */
    body[data-variant="b"] .ie-google-card::after,
    body[data-variant="b"] .ie-clinic-gallery-block::after,
    body[data-variant="b"] .ie-trajectory::after,
    body[data-variant="b"] .ie-prepare::after,
    body[data-variant="b"] .ie-approach::after,
    body[data-variant="b"] .ie-ig::after {
        animation: none;
        --ie-rail-pos: 100%;
    }
    /* Rolagem por marcador/seta deixa de ser animada: o salto e instantaneo. */
    body[data-variant="b"] .ie-review-list,
    body[data-variant="b"] .ie-clinic-gallery,
    body[data-variant="b"] .ie-timeline,
    body[data-variant="b"] .ie-prepare-grid,
    body[data-variant="b"] .ie-approach-grid { scroll-behavior: auto; }
}

/* Floating contacts stay available from first paint. Shared attention motion
   lives in public_contact_dock.css and never depends on scroll progress. */
body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-fab,
body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-wa-fab,
body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-ig-fab { corner-shape: squircle; }

/* --- O flutuante do Instagram ---------------------------------------------- */
.ie-ig-fab {
    position: fixed;
    z-index: 110;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    /* Gradiente do Instagram dessaturado o suficiente para conviver com o rose da
       pagina: reconhecivel de relance, sem gritar mais que o botao de agendar. */
    background: linear-gradient(135deg, #b8508a 0%, #d1596a 45%, #d98a4e 100%);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(151, 62, 116, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.ie-ig-fab:visited,
.ie-ig-fab:hover,
.ie-ig-fab:focus { color: #fff !important; }
.ie-ig-fab svg { width: 27px; height: 27px; }
.ie-ig-fab:hover { transform: translateY(-2px); }
/* Enquanto o modal de agendamento esta aberto os flutuantes somem — a mesma regra
   que ja vale para o WhatsApp. */
.ie-booking-lock .ie-ig-fab { display: none; }

/* Desktop: coluna na borda direita, agendar em cima. */
@media (min-width: 621px) {
    .ie-ig-fab {
        right: 22px;
        bottom: 96px;
    }
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-wa-fab { bottom: 22px; }
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-fab { bottom: 170px; }
}

/* Mobile: barra + dois iconefs. 390 - 14 - 150 = 226px de barra, que cabe
   "Agendar" com folga. */
@media (max-width: 620px) {
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-fab {
        right: 150px;
    }
    .ie-ig-fab {
        width: 52px;
        height: 52px;
        right: 78px;
        bottom: max(14px, env(safe-area-inset-bottom));
    }
    .ie-ig-fab svg { width: 23px; height: 23px; }
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-wa-fab {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        height: 52px;
    }
    /* A doca volta a ter animacao (a variante B tinha zerado as duas). */
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-fab,
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-wa-fab { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-fab,
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-wa-fab,
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-ig-fab {
        animation: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    body:is([data-variant="b"], [data-variant="c"], [data-variant="d"]) .ie-fab::after { animation: none; opacity: 0; }
    .ie-ig-fab { transition: none; }
}

/* ===== Variante B — bloco do Instagram ======================================
   Nao e vitrine de rede social colada na pagina: e a segunda saida do funil, para
   quem nao vai marcar hoje. Por isso tem hierarquia propria (CTA de contorno, nao
   preenchido) e nunca compete com o botao de agendar.
   ========================================================================= */
.ie-ig-head { max-width: 720px; }
.ie-ig-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 12px 20px 12px 14px;
    border: 1px solid var(--ie-line-strong);
    border-radius: 999px;
    corner-shape: squircle;
    color: var(--ie-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.96rem;
    background: var(--ie-paper);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 260ms ease, border-color 260ms ease;
}
.ie-ig-cta:hover,
.ie-ig-cta:focus-visible {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: var(--ie-shadow-soft);
}
.ie-ig-cta-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    corner-shape: squircle;
    background: linear-gradient(135deg, #b8508a 0%, #d1596a 45%, #d98a4e 100%);
    color: #fff;
}
.ie-ig-cta-icon svg { width: 19px; height: 19px; }

.ie-ig-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: clamp(26px, 3.4vw, 40px);
}
.ie-ig-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    corner-shape: squircle;
    text-decoration: none;
    background: var(--ie-rose-wash);
}
.ie-ig-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ie-ig-tile:hover img,
.ie-ig-tile:focus-visible img { transform: scale(1.05); }
.ie-ig-tile span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 14px 12px;
    background: linear-gradient(180deg, transparent, rgba(28, 14, 22, 0.72));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
}
.ie-ig-note {
    margin-top: 16px;
    color: var(--ie-muted);
    font-size: 0.84rem;
}

@media (max-width: 620px) {
    /* Mesmo trilho lateral do resto da pagina: 4 tiles empilhados custariam uma
       tela inteira de rolagem por uma amostra visual. */
    body[data-variant="b"] .ie-ig-rail {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        overflow-y: clip;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--ie-pad) * -1);
        padding-inline: var(--ie-pad);
        scroll-timeline: --ie-rail inline;
    }
    body[data-variant="b"] .ie-ig-rail::-webkit-scrollbar { display: none; }
    body[data-variant="b"] .ie-ig-tile {
        flex: 0 0 min(58vw, 240px);
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ie-ig-cta,
    .ie-ig-tile img { transition: none; }
    .ie-ig-cta:hover { transform: none; }
    .ie-ig-tile:hover img { transform: none; }
}