/* =========================================================================
   Variante C — o consultório como página

   Nao e a variante B com outra cor. E outra ideia de pagina.

   A B e uma pagina de conversao bem feita: hierarquia, prova, funil. A C parte de
   uma pergunta diferente — e se a pagina fosse o LUGAR? O consultorio da Dra.
   Ingrid tem lambril ondulado com fita de luz, listras nude, arco-iris pintado,
   cozinha de madeira e sofa rosa. Nada disso e decoracao gratuita — crianca
   avaliada num lugar que a assusta mostra medo, nao mostra quem ela e.

   Entao o desenho todo vem de la:
   - ARCO: a porta que liga as duas salas, e o arco-iris da parede. Toda imagem
     entra por um arco.
   - ARCO-IRIS: quatro meias-voltas nas cores da parede, atras do retrato.
   - ONDA: o lambril iluminado, recortado com `clip-path: shape()`.
   - LISTRAS: a textura das paredes, nos fundos e nas faixas.
   - TRILHOS: revisao da doutora (2026-07-31) — o que puder rolar de lado, rola
     de lado (conquistas, salas, trajetoria, avaliacoes, galeria). A pagina fica
     curta na vertical e cada trilho tem regua de progresso propria.

   Carregada SO na variante C, depois de public_profile.css — que continua
   cuidando da maquinaria (nav, modal de agendamento, flutuantes, FAQ).

   Movimento: `prefers-reduced-motion` desliga tudo no bloco no fim do arquivo.
   (O botao "modo calmo" foi removido a pedido da doutora em 2026-07-31; a
   preferencia do sistema continua valendo, agora como unica fonte.)
   ========================================================================= */

body[data-variant="c"] {
    --iec-cream: #fdf7f2;
    --iec-nude: #f3e6dc;
    --iec-nude-deep: #e6d2c4;
    --iec-stripe: #cbb0a1;
    --iec-rose: #eccfd8;
    --iec-rose-deep: #d9a7b8;
    --iec-wine: #8d5f76;
    --iec-bordo: #402433;
    --iec-gold: #e2b96b;
    --iec-glow: #fbe6c4;
    --iec-sage: #b9c9b4;
    --iec-sky: #adc4dd;
    --iec-ink: #33212b;
    --iec-text: #6a5560;
    /* Escuro o bastante para AA em texto pequeno sobre o creme (o tom antigo,
       #9a8791, dava 3.06:1 — reprovava WCAG 1.4.3; achado do avaliador). */
    --iec-muted: #75606b;
    --iec-line: rgba(64, 36, 51, 0.12);
    --iec-shell: min(1180px, calc(100vw - 44px));
    --iec-pad: max(22px, calc((100vw - 1180px) / 2));

    background:
        radial-gradient(1200px 700px at 82% -6%, rgba(236, 207, 216, 0.5), transparent 66%),
        radial-gradient(900px 600px at 4% 22%, rgba(226, 185, 107, 0.14), transparent 68%),
        linear-gradient(180deg, var(--iec-cream) 0%, #fbf1ea 52%, var(--iec-cream) 100%);
    color: var(--iec-ink);
}

/* ---- Formas ------------------------------------------------------------- */

/* O ARCO. A porta do consultorio e o arco-iris da parede tem a mesma silhueta:
   meia-volta em cima, canto suave embaixo. `border-radius` eliptico faz isso com
   uma linha e, ao contrario de clip-path, nao briga com `object-fit`. */
body[data-variant="c"] .iec-arch {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 50% 50% 20px 20px / 38% 38% 5% 5%;
    background: var(--iec-nude);
    box-shadow: 0 26px 60px rgba(64, 36, 51, 0.16);
}
body[data-variant="c"] .iec-arch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Fio de luz acompanhando a curva do arco, como a fita de LED do lambril. */
body[data-variant="c"] .iec-arch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(251, 230, 196, 0.55);
    pointer-events: none;
}

/* A ONDA do lambril. `clip-path: shape()` e o que torna isto viavel em CSS: ate
   ele, uma borda sinuosa exigia SVG inline ou uma imagem — as duas coisas
   quebram quando a largura muda. Aqui a curva e descrita em porcentagem e
   acompanha qualquer tela.

   Sem suporte a shape() o recorte simplesmente nao se aplica e sobra uma faixa
   listrada de topo reto: continua sendo a parede do consultorio, so que sem a
   onda. Degradacao honesta. */
body[data-variant="c"] .iec-wave {
    position: relative;
    height: clamp(46px, 7vw, 78px);
    margin-top: clamp(28px, 5vw, 60px);
}
body[data-variant="c"] .iec-wave::before,
body[data-variant="c"] .iec-wave::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    clip-path: shape(
        from 0 100%,
        line to 0 46%,
        curve to 25% 46% with 12.5% -14%,
        curve to 50% 46% with 37.5% 106%,
        curve to 75% 46% with 62.5% -14%,
        curve to 100% 46% with 87.5% 106%,
        line to 100% 100%,
        close
    );
}
/* A fita de luz: mesma onda, um fio acima das listras. */
body[data-variant="c"] .iec-wave::before {
    background: linear-gradient(180deg, var(--iec-glow), #e8c9a3);
}
body[data-variant="c"] .iec-wave::after {
    top: 5px;
    background: repeating-linear-gradient(
        90deg,
        var(--iec-nude-deep) 0 22px,
        var(--iec-stripe) 22px 44px
    );
}

/* ---- Tipografia --------------------------------------------------------- */
body[data-variant="c"] .iec-eyebrow {
    margin: 0 0 10px;
    color: var(--iec-text);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
/* A florzinha das almofadas do consultorio, antes de cada olho de secao. */
body[data-variant="c"] .iec-head .iec-eyebrow::before {
    content: "✿ ";
    color: var(--iec-rose-deep);
    letter-spacing: 0;
}
body[data-variant="c"] .iec-name {
    margin: 0 0 14px;
    display: grid;
    font-family: "Avie Fraunces", Georgia, serif;
    /* 5.4vw (e nao 8vw): em janelas medias o 8vw batia no teto e "Dra. Ingrid"
       encostava na largura da coluna, quebrando em tres linhas (achado da
       doutora, 2026-08-01). */
    font-size: clamp(2.5rem, 5.4vw, 4.1rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--iec-bordo);
}
/* Cada metade do nome e uma linha INTEIRA: nunca "Dra." sozinho. */
body[data-variant="c"] .iec-name span { white-space: nowrap; }
body[data-variant="c"] .iec-name span:last-child {
    color: var(--iec-wine);
    font-style: italic;
    font-variation-settings: "SOFT" 60;
}
body[data-variant="c"] .iec-lead {
    margin: 0 0 12px;
    max-width: 44ch;
    color: var(--iec-text);
    font-size: clamp(1.05rem, 2.4vw, 1.2rem);
    line-height: 1.55;
    text-wrap: pretty;
}
body[data-variant="c"] .iec-body {
    margin: 18px 0 0;
    max-width: 46ch;
    color: var(--iec-text);
    font-size: 0.98rem;
    line-height: 1.6;
}
body[data-variant="c"] .iec-section h2 {
    margin: 0 0 14px;
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--iec-bordo);
    text-wrap: balance;
}
@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
    body[data-variant="c"] .iec-name,
    body[data-variant="c"] .iec-section h2 {
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
    }
}

/* ---- Estrutura ---------------------------------------------------------- */
body[data-variant="c"] .iec-section {
    width: var(--iec-shell);
    margin: 0 auto;
    /* Ritmo mais apertado que a B: os trilhos ja encurtaram a pagina; folga
       gigante entre secoes viraria deserto de creme. */
    padding: clamp(48px, 7vw, 88px) 0;
}
body[data-variant="c"] .iec-head {
    max-width: 640px;
    margin-bottom: clamp(30px, 4.5vw, 54px);
}

body[data-variant="c"] .iec-hero {
    width: 100%;
    padding-top: clamp(18px, 3vw, 38px);
}
body[data-variant="c"] .iec-hero-inner {
    width: var(--iec-shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(26px, 5vw, 64px);
}
body[data-variant="c"] .iec-hero-visual {
    position: relative;
    display: grid;
    justify-items: center;
    /* Largura do mural atras do retrato. O arco-iris fica ATRAS da foto
       (revisao da doutora, 2026-08-01): a foto comeca em ~y83 do viewBox de
       640 (fator 0.13) — so a coroa das faixas aparece por cima, e o resto
       desce abracando os lados. */
    --iec-rbw: min(47vw, 640px);
    padding-top: calc(var(--iec-rbw) * 0.13);
}
body[data-variant="c"] .iec-hero-arch {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 5;
    max-width: 460px;
    width: 100%;
}
body[data-variant="c"] .iec-hero-arch img { object-position: 50% 18%; }

/* O mural VIVO atras do retrato, em SVG: seis faixas coloridas (sem cinza),
   flores que balancam, borboletas esvoacando e seis passarinhos cruzando a
   cena. `overflow: hidden` e o que faz o voo funcionar: os passarinhos entram
   e saem pelas bordas do mural em vez de atravessar a pagina inteira. So
   decoracao — aria-hidden no template. */
body[data-variant="c"] .iec-rainbow {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: var(--iec-rbw);
    /* proporcao do viewBox (640x360) */
    height: calc(var(--iec-rbw) * 0.5625);
    overflow: hidden;
    pointer-events: none;
}
body[data-variant="c"] .iec-rainbow svg {
    display: block;
    width: 100%;
    height: auto;
}
/* Experimento (doutora, 2026-08-01): hero SEM o arco-iris — so a paisagem
   (flores, gotas, margaridas) e os bichos. Os arcos continuam no markup;
   para voltar, e apagar esta regra. O mural do convite final nao muda. */
body[data-variant="c"] .iec-rainbow .iec-rb-arc { display: none; }

body[data-variant="c"] .iec-proof {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 9px 16px;
    border-radius: 999px;
    corner-shape: squircle;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 26px rgba(64, 36, 51, 0.08);
    color: var(--iec-text);
    text-decoration: none;
    font-size: 0.9rem;
}
body[data-variant="c"] .iec-proof span:first-child {
    color: var(--iec-gold);
    letter-spacing: 0.08em;
}
body[data-variant="c"] .iec-proof strong { color: var(--iec-ink); }

/* ---- Os tres caminhos do hero -------------------------------------------
   Marque horario / WhatsApp / Instagram, juntos e logo depois do lead: no
   celular eles precisam caber na primeira tela, sem rolar (revisao da doutora,
   2026-07-31). */
body[data-variant="c"] .iec-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
body[data-variant="c"] .iec-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    border-radius: 999px;
    corner-shape: squircle;
    background: linear-gradient(135deg, var(--iec-wine), var(--iec-bordo));
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 18px 40px rgba(64, 36, 51, 0.26);
    overflow: hidden;
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 280ms ease;
}
body[data-variant="c"] .iec-btn:hover { transform: translateY(-2px); }
/* Um brilho que atravessa o botao de tempos em tempos: convite, nao alarme.
   Some no reduced-motion junto com o resto. */
body[data-variant="c"] .iec-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%);
    transform: translateX(-120%);
    animation: iec-sheen 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes iec-sheen {
    0%, 74% { transform: translateX(-120%); }
    88%, 100% { transform: translateX(120%); }
}
body[data-variant="c"] .iec-btn-wa,
body[data-variant="c"] .iec-btn-ig {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 999px;
    corner-shape: squircle;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 240ms ease;
}
body[data-variant="c"] .iec-btn-wa {
    background: linear-gradient(135deg, #2bb35e, #128c4e);
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(18, 140, 78, 0.28);
}
body[data-variant="c"] .iec-btn-ig {
    border: 1.5px solid rgba(141, 95, 118, 0.45);
    background: rgba(255, 255, 255, 0.72);
    color: var(--iec-wine) !important;
}
body[data-variant="c"] .iec-btn-wa:hover,
body[data-variant="c"] .iec-btn-ig:hover { transform: translateY(-2px); }
body[data-variant="c"] .iec-btn-wa svg { width: 19px; height: 19px; }
body[data-variant="c"] .iec-btn-ig svg { width: 17px; height: 17px; }
body[data-variant="c"] .iec-hero-more { margin: 16px 0 0; }
body[data-variant="c"] .iec-link {
    color: var(--iec-wine);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 2px;
}

/* ---- Trilhos laterais: SO no celular -------------------------------------
   Revisao da doutora (2026-08-01): "o scroll horizontal apenas existe em
   mobile". No celular, conquistas, salas, trajetoria, avaliacoes e galeria
   rolam de lado com snap e regua de progresso propria. No desktop NADA rola de
   lado: cada grupo vira grade que cabe inteira na tela (blocos min-width: 861px
   logo abaixo) — no notebook o trilho deixava o item 4 de fora.
   As reguas reusam a maquinaria da base (`--ie-rail-pos` + `ie-rail-progress`),
   cada trilho com seu timeline nomeado — na mesma secao da prova ha DOIS
   trilhos, entao nome unico nao e capricho. */
body[data-variant="c"] .iec-bento {
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 860px) {
    body[data-variant="c"] .iec-bento,
    body[data-variant="c"] .iec-rooms,
    body[data-variant="c"] .ie-timeline,
    body[data-variant="c"] .ie-review-list,
    body[data-variant="c"] .ie-clinic-gallery {
        display: flex;
        flex-wrap: nowrap;
        gap: clamp(12px, 1.6vw, 18px);
        /* `clip` no eixo Y e nao `hidden`: com `hidden` o trilho vira scroll
           container tambem na vertical e rouba os view() timelines de dentro. */
        overflow-x: auto;
        overflow-y: clip;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Chegar na ponta do trilho nao pode virar "voltar" do navegador. */
        overscroll-behavior-x: contain;
        padding-bottom: 18px;
    }
    body[data-variant="c"] .iec-bento::-webkit-scrollbar,
    body[data-variant="c"] .iec-rooms::-webkit-scrollbar,
    body[data-variant="c"] .ie-timeline::-webkit-scrollbar,
    body[data-variant="c"] .ie-review-list::-webkit-scrollbar,
    body[data-variant="c"] .ie-clinic-gallery::-webkit-scrollbar { display: none; }

    /* Trilho focado (tabindex=0 no template) rola pelas setas do teclado; o
       anel diz onde o foco esta. */
    body[data-variant="c"] .iec-bento:focus-visible,
    body[data-variant="c"] .iec-rooms:focus-visible,
    body[data-variant="c"] .ie-timeline:focus-visible,
    body[data-variant="c"] .ie-review-list:focus-visible,
    body[data-variant="c"] .ie-clinic-gallery:focus-visible {
        outline: 3px solid var(--iec-wine);
        outline-offset: 4px;
        border-radius: 8px;
    }

    body[data-variant="c"] .iec-bento > *,
    body[data-variant="c"] .iec-rooms > *,
    body[data-variant="c"] .ie-timeline > *,
    body[data-variant="c"] .ie-review-list > *,
    body[data-variant="c"] .ie-clinic-gallery > * {
        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 largura de cada cartao no trilho: menor que a tela, com "peek" real do
       proximo — e o peek que diz "tem mais desse lado". */
    body[data-variant="c"] .iec-cell { flex: 0 0 min(78vw, 330px); }
    body[data-variant="c"] .iec-room { flex: 0 0 min(80vw, 360px); }
    body[data-variant="c"] .ie-timeline > article { flex: 0 0 min(78vw, 320px); }
    body[data-variant="c"] .ie-review-list > .ie-review { flex: 0 0 min(80vw, 340px); }
    body[data-variant="c"] .ie-clinic-gallery > figure { flex: 0 0 min(70vw, 300px); }
    /* No trilho todas as fotos tem o mesmo porte (o span 2x2 da base e coisa de
       grade); no desktop a regra da base volta a valer. */
    body[data-variant="c"] .ie-clinic-gallery > figure img,
    body[data-variant="c"] .ie-clinic-gallery > figure:first-child img {
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 0;
    }
    body[data-variant="c"] .ie-clinic-gallery > figure:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    /* Cada item entra em cena conforme e puxado para dentro do trilho: o
       timeline e o scroll INLINE do proprio trilho (view(inline)), entao quem
       dirige e o dedo de quem le. Cartoes ja visiveis nascem prontos. */
    @supports (animation-timeline: view(inline)) {
        body[data-variant="c"] .iec-cell,
        body[data-variant="c"] .iec-room,
        body[data-variant="c"] .ie-timeline > article,
        body[data-variant="c"] .ie-review-list > .ie-review,
        body[data-variant="c"] .ie-clinic-gallery > figure {
            animation: iec-encaixar linear both;
            animation-timeline: view(inline);
            animation-range: entry 0% entry 85%;
        }
    }

    /* As reguas de progresso. O trilho publica a propria rolagem como timeline
       nomeado; a secao (que fica FORA do scroller) desenha o avanco no ::after.
       Sem scroll-timeline a regua fica inteira acesa: "tem conteudo aqui". */
    body[data-variant="c"] .iec-bento { scroll-timeline: --iec-conq inline; }
    body[data-variant="c"] .iec-rooms { scroll-timeline: --iec-rooms inline; }
    body[data-variant="c"] .ie-timeline { scroll-timeline: --iec-traj inline; }
    body[data-variant="c"] .ie-review-list { scroll-timeline: --iec-rev inline; }
    body[data-variant="c"] .ie-clinic-gallery { scroll-timeline: --iec-gal inline; }

    body[data-variant="c"] .iec-conquistas { timeline-scope: --iec-conq; }
    body[data-variant="c"] .iec-salas { timeline-scope: --iec-rooms; }
    body[data-variant="c"] .ie-trajectory { timeline-scope: --iec-traj; }
    body[data-variant="c"] .ie-google-card { timeline-scope: --iec-rev; }
    body[data-variant="c"] .ie-clinic-gallery-block { timeline-scope: --iec-gal; }

    body[data-variant="c"] .iec-conquistas,
    body[data-variant="c"] .iec-salas,
    body[data-variant="c"] .ie-trajectory,
    body[data-variant="c"] .ie-google-card,
    body[data-variant="c"] .ie-clinic-gallery-block { position: relative; }

    body[data-variant="c"] .iec-conquistas::after,
    body[data-variant="c"] .iec-salas::after,
    body[data-variant="c"] .ie-trajectory::after,
    body[data-variant="c"] .ie-google-card::after,
    body[data-variant="c"] .ie-clinic-gallery-block::after {
        content: "";
        position: absolute;
        left: 2px;
        right: 2px;
        bottom: clamp(40px, 6.5vw, 84px);
        height: 3px;
        border-radius: 99px;
        color: var(--iec-wine);
        background: linear-gradient(
            90deg,
            currentColor 0 var(--ie-rail-pos),
            color-mix(in srgb, currentColor 22%, transparent) var(--ie-rail-pos) 100%
        );
        opacity: 0.45;
        pointer-events: none;
    }
    body[data-variant="c"] .ie-google-card::after,
    body[data-variant="c"] .ie-clinic-gallery-block::after { bottom: -6px; }
    @supports (animation-timeline: scroll()) {
        body[data-variant="c"] .iec-conquistas::after { animation: ie-rail-progress linear both; animation-timeline: --iec-conq; }
        body[data-variant="c"] .iec-salas::after { animation: ie-rail-progress linear both; animation-timeline: --iec-rooms; }
        body[data-variant="c"] .ie-trajectory::after { animation: ie-rail-progress linear both; animation-timeline: --iec-traj; }
        body[data-variant="c"] .ie-google-card::after { animation: ie-rail-progress linear both; animation-timeline: --iec-rev; }
        body[data-variant="c"] .ie-clinic-gallery-block::after { animation: ie-rail-progress linear both; animation-timeline: --iec-gal; }
    }
}
@keyframes iec-encaixar {
    from { transform: translateY(18px) scale(0.97); opacity: 0.25; }
    to { transform: none; opacity: 1; }
}

/* ---- Desktop: cada grupo cabe inteiro na tela ----------------------------
   As quatro etapas lado a lado, as tres salas, formacoes em bento, avaliacoes
   em colunas e a galeria na grade da base (4 colunas, primeira foto 2x2 — com
   9 fotos ela fecha sem buraco). A entrada dos cartoes continua dirigida pela
   rolagem, agora a vertical da pagina. */
@media (min-width: 861px) {
    body[data-variant="c"] .iec-bento {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(14px, 1.8vw, 20px);
    }
    body[data-variant="c"] .iec-rooms {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 2vw, 24px);
    }
    body[data-variant="c"] .ie-review-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        /* stretch (default): todos os cartoes da fileira com a MESMA altura —
           com align start, cada texto de tamanho diferente deixava a grade
           serrilhada (achado da doutora, 2026-08-01). */
    }
    body[data-variant="c"] .ie-timeline {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    body[data-variant="c"] .ie-timeline > article:last-child { grid-column: 1 / -1; }

    @supports (animation-timeline: view()) {
        body[data-variant="c"] .iec-cell,
        body[data-variant="c"] .iec-room,
        body[data-variant="c"] .ie-timeline > article,
        body[data-variant="c"] .ie-review-list > .ie-review,
        body[data-variant="c"] .ie-clinic-gallery > figure {
            animation: iec-encaixar linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}
@media (min-width: 1100px) {
    body[data-variant="c"] .iec-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body[data-variant="c"] .ie-review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Bento de formacoes: 4 cartoes de 3/12 na primeira fileira, 3 de 4/12 na
       segunda — 7 itens fecham a grade sem sobrar celula vazia. */
    body[data-variant="c"] .ie-timeline { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    body[data-variant="c"] .ie-timeline > article { grid-column: span 3; }
    body[data-variant="c"] .ie-timeline > article:nth-child(n + 5) { grid-column: span 4; }
}

/* ---- As quatro conquistas ------------------------------------------------- */
body[data-variant="c"] .iec-cell {
    position: relative;
    padding: clamp(22px, 2.8vw, 34px);
    border-radius: 26px;
    corner-shape: squircle;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 14px 40px rgba(64, 36, 51, 0.07);
    overflow: hidden;
}
/* Listras da parede aparecendo por baixo do primeiro e do ultimo bloco. */
body[data-variant="c"] .iec-cell:nth-child(1),
body[data-variant="c"] .iec-cell:nth-child(4) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9) 55%, rgba(255, 255, 255, 0.62)),
        repeating-linear-gradient(90deg, var(--iec-nude) 0 26px, var(--iec-nude-deep) 26px 52px);
}
body[data-variant="c"] .iec-cell-num {
    display: block;
    margin-bottom: 12px;
    color: var(--iec-rose-deep);
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: clamp(2.2rem, 4.4vw, 3.2rem);
    font-weight: 600;
    line-height: 1;
    font-variation-settings: "SOFT" 100;
}
body[data-variant="c"] .iec-cell h3 {
    margin: 0 0 8px;
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    font-weight: 600;
    color: var(--iec-bordo);
}
body[data-variant="c"] .iec-cell p {
    margin: 0;
    color: var(--iec-text);
    font-size: 0.98rem;
    line-height: 1.58;
    text-wrap: pretty;
}

/* ---- As salas: um passeio de lado ---------------------------------------- */
body[data-variant="c"] .iec-room {
    display: grid;
    gap: 14px;
    align-content: start;
}
body[data-variant="c"] .iec-room .iec-arch {
    aspect-ratio: 4 / 4.6;
    width: 100%;
}
body[data-variant="c"] .iec-room h3 {
    margin: 0 0 8px;
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 600;
    color: var(--iec-bordo);
}
body[data-variant="c"] .iec-room p {
    margin: 0;
    color: var(--iec-text);
    font-size: 0.98rem;
    line-height: 1.6;
    text-wrap: pretty;
}
body[data-variant="c"] .iec-room-copy { padding: 0 6px; }
body[data-variant="c"] .iec-rooms-more {
    margin-top: clamp(20px, 3vw, 32px);
    text-align: center;
}

/* ---- Trajetoria (curriculo), com a cara da C ----------------------------- */
body[data-variant="c"] .ie-trajectory {
    display: block;
}
body[data-variant="c"] .ie-traj-copy {
    position: static;
    max-width: 640px;
    margin-bottom: clamp(26px, 4vw, 44px);
}
/* No desktop a cabeca da secao ocupa a largura inteira: titulo e lead a
   esquerda, a certificacao ao lado e as credenciais numa faixa de quatro por
   baixo — era a parte que ficava "vazia" na revisao da doutora (2026-08-01). */
@media (min-width: 861px) {
    body[data-variant="c"] .ie-traj-copy {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        column-gap: clamp(30px, 4vw, 60px);
        align-items: start;
    }
    body[data-variant="c"] .ie-traj-copy > .ie-script,
    body[data-variant="c"] .ie-traj-copy > h2,
    body[data-variant="c"] .ie-traj-copy > .ie-section-lead { grid-column: 1; }
    body[data-variant="c"] .ie-traj-copy > .ie-cert-card {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        margin-top: 0;
    }
    /* Os dados objetivos fecham a secao (vem DEPOIS da formacao na C): uma
       coluna por credencial, seja la quantas vierem do /clinica. */
    body[data-variant="c"] .ie-trajectory > .ie-credentials {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-template-columns: none;
        margin-top: clamp(22px, 3vw, 36px);
    }
}
body[data-variant="c"] .ie-trajectory .ie-script {
    color: var(--iec-wine);
}
body[data-variant="c"] .ie-trajectory h2 { color: var(--iec-bordo); }
body[data-variant="c"] .ie-trajectory .ie-title-gold { color: var(--iec-wine); }
body[data-variant="c"] .ie-timeline > article {
    padding: 22px;
    border-bottom: 0;
    border-radius: 24px;
    corner-shape: squircle;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 14px 40px rgba(64, 36, 51, 0.07);
}
/* O fio vertical entre itens nao existe em trilho horizontal. */
body[data-variant="c"] .ie-timeline > article::before,
body[data-variant="c"] .ie-timeline > article::after { display: none; }
body[data-variant="c"] .ie-cert-card {
    border: 1px solid var(--iec-line);
    border-radius: 24px;
    corner-shape: squircle;
    background: rgba(255, 255, 255, 0.66);
}
body[data-variant="c"] .ie-credentials {
    border-radius: 20px;
    corner-shape: squircle;
    overflow: hidden;
}
body[data-variant="c"] .ie-credentials > div { background: rgba(255, 255, 255, 0.78); }

/* ---- Prova social: avaliacoes em colunas, fotos sem cartao branco -------- */
body[data-variant="c"] .ie-proof-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 4.5vw, 50px);
}
/* Com a coluna unica, o bloco do endereco precisa se abrir no desktop: texto a
   esquerda, mapa a direita — senao sobra um corredor de creme vazio. */
@media (min-width: 861px) {
    body[data-variant="c"] .ie-proof-place {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: clamp(20px, 3vw, 40px);
        align-items: center;
    }
}
body[data-variant="c"] .ie-google-card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
}
body[data-variant="c"] .ie-review-list { margin-top: 18px; }
body[data-variant="c"] .ie-review-list > .ie-review {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--iec-line);
    border-radius: 22px;
    corner-shape: squircle;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 12px 30px rgba(64, 36, 51, 0.06);
}
/* Todos os cartoes com o mesmo teto de texto (4 linhas): relatos de tamanhos
   muito diferentes deixavam a grade esquisita (revisao da doutora,
   2026-08-01). O relato inteiro esta no Google, a um clique. */
body[data-variant="c"] .ie-review-list > .ie-review p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* A moldura em arco vale para a galeria tambem — e SEM cartao branco por tras:
   o recorte do arco deixava aparecer o retangulo claro da figure, que briga com
   o fundo creme (revisao da doutora, 2026-07-31). A figure agora E o arco. */
body[data-variant="c"] .ie-clinic-gallery > figure {
    margin: 0;
    border: 0;
    background: var(--iec-nude);
    box-shadow: 0 18px 44px rgba(64, 36, 51, 0.14);
    border-radius: 46% 46% 18px 18px / 30% 30% 5% 5%;
    overflow: hidden;
    cursor: zoom-in;
}
body[data-variant="c"] .ie-clinic-gallery > figure:focus-visible {
    outline: 3px solid var(--iec-wine);
    outline-offset: 3px;
}
body[data-variant="c"] .ie-clinic-gallery > figure img { border-radius: 0; }

/* ---- Herdados da base, adaptados ---------------------------------------- */
/* A faixa vinho escura da B nao cabe aqui: a C nao tem contraste duro em lugar
   nenhum. Vira a parede listrada com a onda em cima. */
body[data-variant="c"] .ie-band {
    background: linear-gradient(180deg, var(--iec-nude) 0%, #f7ece4 100%);
    color: var(--iec-ink);
}
body[data-variant="c"] .ie-band h2,
body[data-variant="c"] .ie-band h3 { color: var(--iec-bordo); }
body[data-variant="c"] .ie-band p { color: var(--iec-text); }
body[data-variant="c"] .ie-band .ie-script { color: var(--iec-wine); }
body[data-variant="c"] .ie-approach::before { border-color: rgba(141, 95, 118, 0.18); }
body[data-variant="c"] .ie-approach-card {
    border-color: var(--iec-line);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    corner-shape: squircle;
}
body[data-variant="c"] .ie-approach-card span {
    border-color: rgba(141, 95, 118, 0.3);
    color: var(--iec-wine);
}
body[data-variant="c"] .ie-approach-card h3 { color: var(--iec-bordo); }
body[data-variant="c"] .ie-approach-card p { color: var(--iec-text); }

/* O convite final e o momento do arco-iris: o mural da sala infantil (o mesmo
   das fotos do Google) se monta na frente da pessoa — cada arco se desenha um
   por vez, depois brotam as flores e as borboletas. A onda listrada que abria
   esta secao saiu (revisao da doutora, 2026-08-01: "ficou esquisita"). */
body[data-variant="c"] .ie-final {
    position: relative;
    padding-top: clamp(48px, 6vw, 80px);
}
/* O circulo dourado decorativo da base competiria com o mural. */
body[data-variant="c"] .ie-final::before { content: none; }
/* O titulo do convite vinha com entrelinha de paragrafo (linhas soltas, quase
   flutuando). Titulo grande pede entrelinha de titulo. */
body[data-variant="c"] .ie-final h2 {
    max-width: 18ch;
    line-height: 1.1;
    text-wrap: balance;
}
/* flex-basis 100%: o .ie-final e flex com wrap; o mural ocupa a fileira de
   cima inteira, centrado, e o convite continua embaixo. */
body[data-variant="c"] .iec-rb {
    flex: 1 1 100%;
    width: min(560px, 88vw);
    margin: 0 auto clamp(8px, 2vw, 20px);
}
body[data-variant="c"] .iec-rb svg {
    display: block;
    width: 100%;
    height: auto;
}

/* A montagem — vale para as DUAS cenas (hero e convite final): `iec-anima` =
   JS vivo (sem JS a cena nasce pronta); `iec-visto` = hora de montar (no hero,
   no load; no final, quando a secao entra na tela). Os delays vem do template
   em `--iec-d`, arco por arco, flor por flor. */
body[data-variant="c"] .iec-anima .iec-rb-arc {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
body[data-variant="c"] .iec-anima.iec-visto .iec-rb-arc {
    animation: iec-rb-riscar 1050ms cubic-bezier(0.33, 0, 0.2, 1) both;
    animation-delay: var(--iec-d, 0ms);
}
body[data-variant="c"] .iec-anima .iec-rb-pop {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: 50% 80%;
}
body[data-variant="c"] .iec-anima.iec-visto .iec-rb-pop {
    animation: iec-rb-brotar 720ms cubic-bezier(0.34, 1.45, 0.5, 1) both;
    animation-delay: var(--iec-d, 0ms);
}
/* Depois de chegar, borboletas e passarinhos ficam balancando de leve.
   `translate` (a propriedade individual) compoe com o transform de ATRIBUTO
   que os posiciona — animar `transform` aqui apagaria a posicao. */
body[data-variant="c"] .iec-visto .iec-rb-flutua {
    transform-box: fill-box;
    animation: iec-rb-flutuar 5.5s ease-in-out 3400ms infinite alternate;
}
/* As asas dos passarinhos batem: cada asa gira em torno da propria raiz (a
   borda que encosta no corpo). As asas nao tem transform de atributo — o corpo
   inteiro e quem carrega o translate/scale — entao aqui pode animar transform. */
body[data-variant="c"] .iec-visto .iec-rb-asa {
    transform-box: fill-box;
    transform-origin: 100% 55%;
    animation: iec-rb-bater 460ms ease-in-out var(--iec-dw, 3s) infinite alternate;
}
/* Flores balancam depois de brotar. UMA declaracao `animation` com as duas
   (brotar + balancar): em regras separadas a segunda clobberaria a primeira.
   Elas nao brigam entre si porque animam propriedades distintas (transform e
   rotate). Origem na base do caule: brota do chao e balanca como planta. */
body[data-variant="c"] .iec-anima .iec-rb-pop.iec-rb-flor { transform-origin: 50% 97%; }
body[data-variant="c"] .iec-anima.iec-visto .iec-rb-pop.iec-rb-flor {
    animation:
        iec-rb-brotar 720ms cubic-bezier(0.34, 1.45, 0.5, 1) var(--iec-d, 0ms) both,
        iec-rb-balancar 4.6s ease-in-out calc(var(--iec-d, 0ms) + 1000ms) infinite alternate;
}
/* Borboletas esvoacam num circuito curto; `translate` compoe com o transform
   de ATRIBUTO que as posiciona. */
body[data-variant="c"] .iec-visto .iec-rb-borbo {
    transform-box: fill-box;
    animation: iec-rb-esvoacar 9s ease-in-out var(--iec-db, 800ms) infinite;
}
/* Os passarinhos que cruzam a cena: o translate SOMA com a posicao de pouso
   (transform de atributo do g interno), entao --iec-vfrom/--iec-vto de cada um
   sao relativos a ela. Delays negativos poem varios em pleno voo desde o
   inicio; o fade-in proprio evita pipocar no meio do caminho. Sem JS ou em
   reduced-motion nada disto roda e cada passarinho fica pousado no seu lugar. */
body[data-variant="c"] .iec-anima .iec-rb-voo { opacity: 0; }
body[data-variant="c"] .iec-anima.iec-visto .iec-rb-voo {
    opacity: 1;
    transition: opacity 900ms ease var(--iec-do, 300ms);
    animation: iec-rb-voar var(--iec-vd, 26s) linear var(--iec-vdl, 0s) infinite;
}
@keyframes iec-rb-riscar {
    to { stroke-dashoffset: 0; }
}
@keyframes iec-rb-brotar {
    from { opacity: 0; transform: scale(0); }
    62% { opacity: 1; transform: scale(1.08); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes iec-rb-flutuar {
    from { translate: 0 0; }
    to { translate: 0 -7px; }
}
@keyframes iec-rb-bater {
    from { transform: rotate(14deg); }
    to { transform: rotate(-24deg); }
}
@keyframes iec-rb-balancar {
    from { rotate: -2.4deg; }
    to { rotate: 2.4deg; }
}
@keyframes iec-rb-esvoacar {
    0% { translate: 0 0; }
    28% { translate: 9px -11px; }
    55% { translate: -7px -18px; }
    80% { translate: 5px -6px; }
    100% { translate: 0 0; }
}
@keyframes iec-rb-voar {
    from { translate: var(--iec-vfrom, -120px) 0; }
    50% { translate: calc((var(--iec-vfrom, -120px) + var(--iec-vto, 760px)) / 2) var(--iec-vym, -14px); }
    to { translate: var(--iec-vto, 760px) 0; }
}

/* ---- Movimento vertical --------------------------------------------------
   As cabecas de secao sobem suavemente quando entram; quem dirige e a rolagem
   da propria leitora. */
@supports (animation-timeline: view()) {
    body[data-variant="c"] .iec-head > *,
    body[data-variant="c"] .iec-share-wrap,
    body[data-variant="c"] .iec-ig-card {
        animation: iec-subir linear both;
        animation-timeline: view();
        animation-range: entry 6% cover 34%;
    }
}
@keyframes iec-subir {
    from { transform: translateY(26px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Entrada do hero, uma vez, no load. O nome ENTRA EM FOCO pelos eixos do
   Fraunces: comeca leve e de terminacao arredondada e assenta no peso final. */
@supports (font-variation-settings: "wght" 400) {
    body[data-variant="c"] .iec-name span {
        animation: iec-focar 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
        font-variation-settings: "wght" var(--iec-wght, 600), "SOFT" var(--iec-soft, 0);
    }
    body[data-variant="c"] .iec-name span:last-child {
        animation-delay: 150ms;
        font-variation-settings: "wght" var(--iec-wght, 600), "SOFT" var(--iec-soft, 60);
    }
}
@property --iec-wght {
    syntax: "<number>";
    inherits: false;
    initial-value: 600;
}
@property --iec-soft {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
@keyframes iec-focar {
    from { --iec-wght: 320; --iec-soft: 100; }
    to { --iec-wght: 600; --iec-soft: 0; }
}

/* ---- Cartao de perfil do Instagram --------------------------------------- */
/* Instagram + consultorio (endereco/mapa) na mesma fileira do desktop: cada um
   sozinho ocupava meia tela vazia (revisao da doutora, 2026-08-01). */
body[data-variant="c"] .iec-ig-duo {
    display: grid;
    gap: clamp(18px, 2.5vw, 30px);
    align-items: start;
}
@media (min-width: 861px) {
    body[data-variant="c"] .iec-ig-duo {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
    body[data-variant="c"] .iec-ig-duo .iec-ig-card { max-width: none; }
    /* Dentro do duo o bloco do consultorio empilha (a fileira ja esta
       dividida); a regra de 2 colunas vale so quando ele mora na prova. */
    body[data-variant="c"] .iec-ig-duo .ie-proof-place {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}
body[data-variant="c"] .iec-ig-card {
    display: block;
    max-width: 560px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 30px;
    corner-shape: squircle;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 20px 50px rgba(64, 36, 51, 0.1);
    color: inherit;
    text-decoration: none;
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 260ms ease;
}
body[data-variant="c"] .iec-ig-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 60px rgba(64, 36, 51, 0.14);
}
body[data-variant="c"] .iec-ig-top {
    display: flex;
    align-items: center;
    gap: 16px;
}
/* O aro do avatar e o gradiente de story do proprio Instagram: quem usa o app
   reconhece na hora que ali mora um perfil. */
body[data-variant="c"] .iec-ig-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34);
    padding: 3px;
}
body[data-variant="c"] .iec-ig-avatar img {
    /* aspect-ratio em vez de height 100%: quando o height percentual nao
       resolve, a foto fica com a altura intrinseca e o border-radius de 50%
       vira um OVAL (achado da doutora, 2026-08-01). Com aspect-ratio o circulo
       e garantido pela propria caixa. */
    display: block;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
}
body[data-variant="c"] .iec-ig-id { display: grid; gap: 2px; min-width: 0; }
body[data-variant="c"] .iec-ig-id strong {
    color: var(--iec-bordo);
    font-size: 1.06rem;
    overflow-wrap: anywhere;
}
body[data-variant="c"] .iec-ig-id > span {
    color: var(--iec-text);
    font-size: 0.88rem;
}
body[data-variant="c"] .iec-ig-id em {
    color: var(--iec-wine);
    font-style: normal;
    font-weight: 700;
    font-size: 0.88rem;
}
body[data-variant="c"] .iec-ig-bio {
    display: grid;
    gap: 3px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--iec-line);
    color: var(--iec-text);
    font-size: 0.94rem;
    line-height: 1.5;
}
body[data-variant="c"] .iec-ig-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
}
body[data-variant="c"] .iec-ig-highlight {
    display: grid;
    justify-items: center;
    gap: 5px;
    width: 64px;
}
body[data-variant="c"] .iec-ig-highlight i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--iec-rose-deep);
    background: var(--iec-cream);
    font-style: normal;
    font-size: 1.3rem;
}
body[data-variant="c"] .iec-ig-highlight small {
    color: var(--iec-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}
body[data-variant="c"] .iec-ig-follow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 22px;
    border-radius: 999px;
    corner-shape: squircle;
    background: linear-gradient(135deg, var(--iec-wine), var(--iec-bordo));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}
body[data-variant="c"] .iec-ig-follow svg { width: 17px; height: 17px; }
body[data-variant="c"] .iec-ig-note {
    margin: 14px 0 0;
    color: var(--iec-muted);
    font-size: 0.8rem;
}

/* ---- Ver a foto inteira --------------------------------------------------
   O arco vira botao e se transforma na foto aberta. A transicao e feita pelo
   navegador: mesmo `view-transition-name` no arco (estado antigo) e na imagem
   aberta (estado novo), e ele interpola posicao, tamanho e recorte. */
body[data-variant="c"] .iec-room-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--iec-nude);
    cursor: zoom-in;
    appearance: none;
}
body[data-variant="c"] .iec-room-zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--iec-bordo);
    box-shadow: 0 8px 20px rgba(64, 36, 51, 0.18);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body[data-variant="c"] .iec-room-zoom svg { width: 19px; height: 19px; }
body[data-variant="c"] .iec-room-open:hover .iec-room-zoom { transform: scale(1.08); }

body[data-variant="c"] .iec-room-view {
    /* fit-content: o dialog abraca a foto (retrato ou paisagem) em vez de abrir
       uma caixa de 900px com a legenda e o X boiando longe da imagem. */
    width: fit-content;
    max-width: min(94vw, 900px);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 26px;
    corner-shape: squircle;
    background: transparent;
    overflow: visible;
}
body[data-variant="c"] .iec-room-view::backdrop {
    background: rgba(41, 22, 32, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body[data-variant="c"] .iec-room-view img {
    display: block;
    max-width: min(90vw, 860px);
    max-height: 78vh;
    object-fit: contain;
    border-radius: 22px;
    corner-shape: squircle;
}
body[data-variant="c"] .iec-room-view p {
    margin: 14px 2px 0;
    color: #fff;
    font-family: "Avie Fraunces", Georgia, serif;
    font-size: 1.05rem;
    text-align: center;
    text-wrap: balance;
}
body[data-variant="c"] .iec-room-close {
    position: absolute;
    top: -14px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--iec-bordo);
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
body[data-variant="c"] .iec-room-close svg { width: 20px; height: 20px; }

/* A transicao entre o arco e a foto: curva longa, sem quique. */
::view-transition-group(iec-room-morph) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Compartilhe com outra pessoa ---------------------------------------- */
body[data-variant="c"] .iec-share-wrap {
    margin-top: clamp(22px, 3vw, 34px);
    text-align: center;
}
body[data-variant="c"] .iec-share {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px 11px 16px;
    border: 1px solid var(--iec-line);
    border-radius: 999px;
    corner-shape: squircle;
    background: rgba(255, 255, 255, 0.7);
    color: var(--iec-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 240ms ease, background 240ms ease;
}
body[data-variant="c"] .iec-share:hover,
body[data-variant="c"] .iec-share:focus-visible {
    border-color: var(--iec-rose-deep);
    background: #fff;
}
body[data-variant="c"] .iec-share svg { width: 18px; height: 18px; }

/* ---- A doca ---------------------------------------------------------------
   Quem cumpre o "os tres botoes aparecem logo que abre" e o HERO, que tem
   Marque horario + WhatsApp + Instagram na primeira tela em qualquer viewport.
   A doca mantem o comportamento da base (chega quando a pessoa deixa o hero e
   recua no CTA final): imediata, ela duplicava os tres botoes na primeira tela
   e cobria os cartoes cortados dos trilhos (achado do avaliador, 2026-08-01). */

/* O menu aberto no celular fica 100% opaco na C: com translucidez, o titulo do
   hero vazava atras dos links — ruido para sensibilidade sensorial. E o botao
   "Menu" sobe para 44px de alvo de toque (AAA). */
@media (max-width: 700px) {
    body[data-variant="c"] .ie-nav.is-open .ie-nav-links {
        background: #fffdf9;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body[data-variant="c"] .ie-nav-toggle { min-height: 44px; }
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 860px) {
    body[data-variant="c"] .iec-hero-inner { grid-template-columns: 1fr; }
    body[data-variant="c"] .iec-hero-visual { order: -1; }
    body[data-variant="c"] .iec-hero-arch {
        /* A doutora achou a foto pequena (2026-08-01): o arco cresce para
           ~76vw. O equilibrio e fino: foto + arco-iris + nome + os tres
           botoes ainda precisam caber na primeira tela de um celular alto. */
        max-width: min(76vw, 300px);
        margin: 0 auto;
        aspect-ratio: 4 / 4.35;
    }
    body[data-variant="c"] .iec-hero-visual { --iec-rbw: min(96vw, 400px); }
    /* Os tres caminhos SEMPRE lado a lado (revisao da doutora, 2026-08-01):
       nada de quebrar linha — os botoes encolhem junto com a tela (fonte e
       espacamentos em vw) ate os tres caberem em qualquer celular. */
    body[data-variant="c"] .iec-actions {
        flex-wrap: nowrap;
        gap: clamp(6px, 1.6vw, 10px);
    }
    body[data-variant="c"] .iec-btn {
        padding: clamp(10px, 2.6vw, 13px) clamp(11px, 3vw, 18px);
        font-size: clamp(0.72rem, 3.1vw, 0.92rem);
        white-space: nowrap;
        min-height: 40px;
    }
    body[data-variant="c"] .iec-btn-wa,
    body[data-variant="c"] .iec-btn-ig {
        padding: clamp(9px, 2.4vw, 12px) clamp(9px, 2.4vw, 14px);
        gap: clamp(4px, 1.2vw, 7px);
        font-size: clamp(0.7rem, 3vw, 0.88rem);
        white-space: nowrap;
        min-height: 40px;
    }
    body[data-variant="c"] .iec-btn-wa svg { width: clamp(14px, 3.8vw, 18px); height: clamp(14px, 3.8vw, 18px); }
    body[data-variant="c"] .iec-btn-ig svg { width: clamp(13px, 3.5vw, 16px); height: clamp(13px, 3.5vw, 16px); }

    /* O nome inteiro numa linha SO, com fonte fluida: empilhado, dependendo da
       largura ele quebrava feio (revisao da doutora, 2026-08-01). 7.5vw ~=
       largura da tela dividida pelos ~11.4em do nome. */
    body[data-variant="c"] .iec-name {
        display: block;
        white-space: nowrap;
        font-size: min(2.4rem, 7.5vw);
    }
    body[data-variant="c"] .iec-name span { display: inline; }

    /* O lead "feito para estar la": linhas equilibradas (balance) e quebra com
       hifen para palavras compridas como "neurodesenvolvimento" — sem buraco
       nem palavra sozinha na linha. */
    body[data-variant="c"] .iec-lead {
        font-size: clamp(0.98rem, 4.2vw, 1.12rem);
        text-wrap: balance;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    /* Titulos de secao ocupavam 4+ linhas no celular e ficavam esquisitos:
       fonte fluida um degrau menor, sempre equilibrada. */
    body[data-variant="c"] .iec-section h2,
    body[data-variant="c"] .ie-section h2,
    body[data-variant="c"] .ie-final h2 {
        font-size: clamp(1.5rem, 6.6vw, 2.1rem);
        text-wrap: balance;
    }
    /* No celular os tres caminhos sobem para logo abaixo do nome: com a foto
       maior, deixa-los depois do lead os empurrava para fora da primeira tela.
       So ordem VISUAL (flex order) — o DOM e a ordem de tab nao mudam. */
    body[data-variant="c"] .iec-hero-copy { display: flex; flex-direction: column; }
    body[data-variant="c"] .iec-hero-copy > .iec-eyebrow { order: 0; }
    body[data-variant="c"] .iec-hero-copy > .iec-name { order: 1; }
    body[data-variant="c"] .iec-hero-copy > .iec-actions { order: 2; margin-top: 16px; }
    body[data-variant="c"] .iec-hero-copy > .iec-lead { order: 3; margin: 16px 0 0; }
    body[data-variant="c"] .iec-hero-copy > .iec-body { order: 4; }
    body[data-variant="c"] .iec-hero-copy > .iec-proof { order: 5; align-self: flex-start; }
    body[data-variant="c"] .iec-hero-copy > .iec-hero-more { order: 6; }
}

/* ---- O contrato de movimento ---------------------------------------------
   `prefers-reduced-motion` desliga tudo que se move nesta folha. Para este
   publico isso nao e cortesia: e requisito. */
@media (prefers-reduced-motion: reduce) {
    body[data-variant="c"] .iec-cell,
    body[data-variant="c"] .iec-room,
    body[data-variant="c"] .ie-timeline > article,
    body[data-variant="c"] .ie-review-list > .ie-review,
    body[data-variant="c"] .ie-clinic-gallery > figure,
    body[data-variant="c"] .iec-head > *,
    body[data-variant="c"] .iec-share-wrap,
    body[data-variant="c"] .iec-ig-card,
    body[data-variant="c"] .iec-name span,
    body[data-variant="c"] .iec-btn::after {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    body[data-variant="c"] .iec-btn,
    body[data-variant="c"] .iec-btn-wa,
    body[data-variant="c"] .iec-btn-ig,
    body[data-variant="c"] .iec-ig-card,
    body[data-variant="c"] .iec-room-zoom,
    body[data-variant="c"] .iec-share,
    body[data-variant="c"] .iec-arch img { transition: none !important; }
    /* O mural do convite final nasce montado. Atencao: nada de `transform:
       none` na borboleta (.iec-rb-flutua) — o transform de ATRIBUTO que a
       posiciona seria apagado junto. */
    body[data-variant="c"] .iec-rb-arc {
        animation: none !important;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }
    body[data-variant="c"] .iec-rb-pop {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    body[data-variant="c"] .iec-rb-flutua { animation: none !important; }
    body[data-variant="c"] .iec-rb-asa {
        animation: none !important;
        transform: none !important;
    }
    body[data-variant="c"] .iec-rb-voo {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
    }
    body[data-variant="c"] .iec-rb-borbo { animation: none !important; }
    ::view-transition-group(iec-room-morph),
    ::view-transition-old(iec-room-morph),
    ::view-transition-new(iec-room-morph) { animation: none !important; }
}