/* ═══════════════════════════════════════════════════════════════════════════
   Instituto IBRACEL — sistema visual do site institucional (v2)
   ───────────────────────────────────────────────────────────────────────────
   Direção: corporativo clean, com lógica de arquitetura — grid rígido, muito
   respiro, linhas finas no lugar de sombras, tipografia precisa e fotografia
   grande. A cor aparece pouco e com intenção: verde para ação, dourado para
   destaque, e o resto é tinta e papel.

   Tudo aqui é prefixado com `ib-` de propósito. O main.css continua servindo
   as páginas que ainda não migraram (certificados, credenciamento), e os dois
   precisam conviver sem um reescrever o outro.

   Sumário
     1. Tokens
     2. Base
     3. Layout (container, seções, grid)
     4. Tipografia
     5. Componentes: botão, etiqueta, link com seta
     6. Cabeçalho e menu mobile
     7. Hero com carrossel
     8. Faixa de municípios
     9. Sobre
    10. Serviços
    11. Como trabalhamos
    12. Mapa de atuação
    13. Blog (cartões, índice e artigo)
    14. Depoimentos
    15. Contato
    16. CTA final
    17. Rodapé
    18. Ponte com as páginas antigas
    19. Movimento e acessibilidade
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Tokens ──────────────────────────────────────────────────────────────── */
:root {
    /* cor */
    --ib-ink: #0c1a19;
    --ib-ink-2: #2a3a38;
    --ib-muted: #5d6e6c;
    --ib-subtle: #8a9a98;
    --ib-line: #e3e9e8;
    --ib-line-strong: #cfd9d7;
    --ib-paper: #ffffff;
    --ib-surface: #f5f8f7;
    --ib-surface-2: #eef3f2;

    --ib-green: #0da69c;
    --ib-green-600: #0a8a81;
    --ib-green-700: #076d66;
    --ib-green-800: #05504b;
    --ib-green-900: #042f2c;
    --ib-green-50: #e8f6f4;

    --ib-gold: #c9a23a;
    --ib-gold-soft: #f6efdc;

    --ib-focus: 0 0 0 3px rgba(13, 166, 156, 0.35);

    /* tipografia */
    --ib-font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ib-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --ib-fs-xs: 0.75rem;
    --ib-fs-sm: 0.875rem;
    --ib-fs-base: 1rem;
    --ib-fs-md: 1.125rem;
    --ib-fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    --ib-fs-h4: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
    --ib-fs-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
    --ib-fs-h2: clamp(1.9rem, 1.45rem + 1.9vw, 3rem);
    --ib-fs-h1: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);

    /* espaço (escala de 4px) */
    --ib-s-1: 0.25rem;
    --ib-s-2: 0.5rem;
    --ib-s-3: 0.75rem;
    --ib-s-4: 1rem;
    --ib-s-5: 1.5rem;
    --ib-s-6: 2rem;
    --ib-s-7: 3rem;
    --ib-s-8: 4rem;
    --ib-s-9: 6rem;
    --ib-section: clamp(4.5rem, 3rem + 5vw, 8rem);
    --ib-gutter: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);

    /* forma */
    --ib-radius-sm: 8px;
    --ib-radius: 14px;
    --ib-radius-lg: 22px;
    --ib-shadow-1: 0 1px 2px rgba(12, 26, 25, 0.04);
    --ib-shadow-2: 0 18px 40px -18px rgba(4, 47, 44, 0.28);

    /* movimento */
    --ib-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ib-fast: 160ms;
    --ib-base: 260ms;

    --ib-header-h: 76px;
}

/* 2. Base ───────────────────────────────────────────────────────────────── */
body.ib-site {
    margin: 0;
    font-family: var(--ib-font-body);
    font-size: var(--ib-fs-base);
    line-height: 1.6;
    color: var(--ib-ink);
    background: var(--ib-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.ib-site *,
body.ib-site *::before,
body.ib-site *::after {
    box-sizing: border-box;
}

body.ib-site img {
    max-width: 100%;
    display: block;
}

body.ib-site :focus-visible {
    outline: none;
    box-shadow: var(--ib-focus);
    border-radius: 6px;
}

body.ib-menu-aberto {
    overflow: hidden;
}

.ib-skip {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    border-radius: var(--ib-radius-sm);
    background: var(--ib-ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.ib-skip:focus {
    top: 1rem;
}

/* 3. Layout ─────────────────────────────────────────────────────────────── */
.ib-container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--ib-gutter);
}

.ib-container--narrow {
    max-width: 780px;
}

.ib-section {
    padding-block: var(--ib-section);
    position: relative;
}

.ib-section--muted {
    background: var(--ib-surface);
}

.ib-section--dark {
    background: var(--ib-green-900);
    color: #fff;
}

.ib-section--tight {
    padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

/* Linha fina entre seções da mesma cor: a separação é feita pelo desenho, não
   por bloco colorido. */
.ib-section--ruled {
    border-top: 1px solid var(--ib-line);
}

.ib-grid {
    display: grid;
    gap: var(--ib-s-5);
}

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

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

/* Cabeçalho de seção: etiqueta, título e apoio. Em duas colunas no desktop — o
   título à esquerda e o texto de apoio à direita —, que é o gesto editorial que
   dá a sensação de "arquitetura" sem precisar de ornamento. */
.ib-head {
    display: grid;
    gap: var(--ib-s-4);
    margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
}

@media (min-width: 960px) {
    .ib-head--split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: end;
        gap: var(--ib-s-8);
    }
}

.ib-head--center {
    text-align: center;
    justify-items: center;
    max-width: 760px;
    margin-inline: auto;
}

/* 4. Tipografia ─────────────────────────────────────────────────────────── */
.ib-h1,
.ib-h2,
.ib-h3,
.ib-h4 {
    font-family: var(--ib-font-display);
    font-weight: 600;
    color: inherit;
    margin: 0;
    text-wrap: balance;
}

.ib-h1 {
    font-size: var(--ib-fs-h1);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.ib-h2 {
    font-size: var(--ib-fs-h2);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.ib-h3 {
    font-size: var(--ib-fs-h3);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ib-h4 {
    font-size: var(--ib-fs-h4);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ib-lead {
    margin: 0;
    font-size: var(--ib-fs-lg);
    line-height: 1.65;
    color: var(--ib-muted);
    max-width: 62ch;
    text-wrap: pretty;
}

.ib-text {
    margin: 0;
    color: var(--ib-muted);
    line-height: 1.7;
    text-wrap: pretty;
}

.ib-accent {
    color: var(--ib-green);
}

.ib-section--dark .ib-lead,
.ib-section--dark .ib-text {
    color: rgba(255, 255, 255, 0.72);
}

/* 5. Componentes ────────────────────────────────────────────────────────── */

/* Etiqueta: número de seção + nome, com traço. Sem pílula colorida — a
   hierarquia vem da tipografia. */
.ib-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: var(--ib-fs-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ib-green-700);
}

.ib-eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
}

.ib-section--dark .ib-eyebrow,
.ib-hero .ib-eyebrow,
.ib-cta .ib-eyebrow {
    color: #9ee3dc;
}

.ib-btn {
    --ib-btn-bg: var(--ib-green);
    --ib-btn-fg: #fff;
    --ib-btn-bd: var(--ib-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--ib-btn-bd);
    background: var(--ib-btn-bg);
    color: var(--ib-btn-fg);
    font-family: var(--ib-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ib-fast) var(--ib-ease), color var(--ib-fast) var(--ib-ease),
                border-color var(--ib-fast) var(--ib-ease), transform var(--ib-fast) var(--ib-ease);
}

.ib-btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--ib-fast) var(--ib-ease);
}

.ib-btn:hover {
    --ib-btn-bg: var(--ib-green-700);
    --ib-btn-bd: var(--ib-green-700);
    color: var(--ib-btn-fg);
}

.ib-btn:hover svg {
    transform: translateX(3px);
}

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

.ib-btn--outline {
    --ib-btn-bg: transparent;
    --ib-btn-fg: var(--ib-ink);
    --ib-btn-bd: var(--ib-line-strong);
}

.ib-btn--outline:hover {
    --ib-btn-bg: var(--ib-ink);
    --ib-btn-fg: #fff;
    --ib-btn-bd: var(--ib-ink);
}

/* Sobre foto ou fundo escuro. */
.ib-btn--light {
    --ib-btn-bg: #fff;
    --ib-btn-fg: var(--ib-green-900);
    --ib-btn-bd: #fff;
}

.ib-btn--light:hover {
    --ib-btn-bg: var(--ib-gold-soft);
    --ib-btn-bd: var(--ib-gold-soft);
    --ib-btn-fg: var(--ib-green-900);
}

.ib-btn--ghost {
    --ib-btn-bg: rgba(255, 255, 255, 0.06);
    --ib-btn-fg: #fff;
    --ib-btn-bd: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ib-btn--ghost:hover {
    --ib-btn-bg: rgba(255, 255, 255, 0.16);
    --ib-btn-bd: #fff;
    --ib-btn-fg: #fff;
}

.ib-btn--sm {
    min-height: 40px;
    padding: 0.6rem 1.05rem;
    font-size: 0.875rem;
}

.ib-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ib-s-3);
}

/* Link de texto com seta: a ação secundária de cartões e seções. */
.ib-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--ib-green-700);
    text-decoration: none;
}

.ib-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--ib-fast) var(--ib-ease);
}

.ib-link:hover {
    color: var(--ib-green-800);
}

.ib-link:hover svg {
    transform: translateX(4px);
}

.ib-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--ib-green-50);
    color: var(--ib-green-800);
    font-size: var(--ib-fs-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* 6. Cabeçalho ──────────────────────────────────────────────────────────── */
.ib-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: var(--ib-header-h);
    font-family: var(--ib-font-body);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--ib-line);
    transition: background var(--ib-base) var(--ib-ease), border-color var(--ib-base) var(--ib-ease);
}

/* Sobre o hero o cabeçalho é transparente e o texto claro; ao rolar vira
   branco. A classe é colocada pelo PHP (páginas com hero escuro) e retirada
   pelo JS assim que a página rola. */
.ib-header.is-transparente {
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.ib-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--ib-s-6);
}

.ib-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.ib-brand img {
    height: 38px;
    width: auto;
}

.ib-brand__claro { display: none !important; }
.ib-header.is-transparente .ib-brand__escuro { display: none !important; }
.ib-header.is-transparente .ib-brand__claro { display: block !important; }

.ib-nav {
    display: none;
    margin-inline: auto;
}

.ib-nav__lista {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ib-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    color: var(--ib-ink-2);
    font-size: 0.925rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--ib-fast), background var(--ib-fast);
}

.ib-nav__link:hover,
.ib-nav__link[aria-current="page"] {
    color: var(--ib-ink);
    background: var(--ib-surface-2);
}

.ib-nav__link svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.ib-header.is-transparente .ib-nav__link {
    color: rgba(255, 255, 255, 0.86);
}

.ib-header.is-transparente .ib-nav__link:hover,
.ib-header.is-transparente .ib-nav__link[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Submenu */
.ib-nav__item {
    position: relative;
}

.ib-nav__sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    min-width: 260px;
    padding: 0.5rem;
    list-style: none;
    margin: 0;
    border-radius: var(--ib-radius);
    background: #fff;
    border: 1px solid var(--ib-line);
    box-shadow: var(--ib-shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity var(--ib-fast), transform var(--ib-fast), visibility var(--ib-fast);
}

/* Ponte invisível: sem ela o submenu fecha no vão entre o link e a caixa. */
.ib-nav__sub::before {
    content: '';
    position: absolute;
    inset: -12px 0 auto 0;
    height: 12px;
}

.ib-nav__item:hover .ib-nav__sub,
.ib-nav__item:focus-within .ib-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.ib-nav__sub a {
    display: grid;
    gap: 0.1rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--ib-radius-sm);
    text-decoration: none;
    color: var(--ib-ink);
}

.ib-nav__sub a:hover {
    background: var(--ib-surface);
}

.ib-nav__sub strong {
    font-size: 0.9rem;
    font-weight: 600;
}

.ib-nav__sub span {
    font-size: 0.8rem;
    color: var(--ib-muted);
}

.ib-header__acoes {
    display: none;
    align-items: center;
    gap: var(--ib-s-2);
    margin-left: auto;
}

.ib-header__entrar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    color: var(--ib-ink-2);
    font-size: 0.925rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 999px;
}

.ib-header__entrar svg {
    width: 16px;
    height: 16px;
}

.ib-header__entrar:hover {
    background: var(--ib-surface-2);
    color: var(--ib-ink);
}

.ib-header.is-transparente .ib-header__entrar {
    color: #fff;
}

.ib-header.is-transparente .ib-header__entrar:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ib-header.is-transparente .ib-btn--outline {
    --ib-btn-fg: #fff;
    --ib-btn-bd: rgba(255, 255, 255, 0.5);
}

.ib-menu-botao {
    margin-left: auto;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ib-line-strong);
    background: #fff;
    color: var(--ib-ink);
    cursor: pointer;
}

.ib-menu-botao svg {
    width: 20px;
    height: 20px;
}

.ib-header.is-transparente .ib-menu-botao {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

@media (min-width: 1100px) {
    .ib-nav { display: block; }
    .ib-header__acoes { display: flex; margin-left: 0; }
    .ib-menu-botao { display: none; }
}

/* Menu mobile: painel inteiro, com os mesmos destinos do desktop. */
.ib-drawer {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-family: var(--ib-font-body);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--ib-base) var(--ib-ease), visibility var(--ib-base);
}

.ib-drawer.is-aberto {
    transform: translateX(0);
    visibility: visible;
}

.ib-drawer__topo {
    height: var(--ib-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--ib-gutter);
    border-bottom: 1px solid var(--ib-line);
}

.ib-drawer__corpo {
    flex: 1;
    overflow-y: auto;
    padding: var(--ib-s-5) var(--ib-gutter) var(--ib-s-7);
}

.ib-drawer__grupo + .ib-drawer__grupo {
    margin-top: var(--ib-s-6);
}

.ib-drawer__titulo {
    font-size: var(--ib-fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ib-subtle);
    margin: 0 0 var(--ib-s-2);
}

.ib-drawer a.ib-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--ib-line);
    font-family: var(--ib-font-display);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ib-ink);
    text-decoration: none;
}

.ib-drawer a.ib-drawer__link svg {
    width: 18px;
    height: 18px;
    color: var(--ib-subtle);
}

.ib-drawer__rodape {
    padding: var(--ib-s-4) var(--ib-gutter) calc(var(--ib-s-4) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ib-line);
    display: grid;
    gap: var(--ib-s-2);
}

.ib-drawer__rodape .ib-btn {
    width: 100%;
}

/* 7. Hero ───────────────────────────────────────────────────────────────── */
.ib-hero {
    position: relative;
    isolation: isolate;
    min-height: min(100svh, 920px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background: var(--ib-green-900);
    overflow: hidden;
}

.ib-hero__slides {
    position: absolute;
    inset: 0;
    z-index: -2;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ib-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1200ms var(--ib-ease);
}

.ib-hero__slide.is-ativo {
    opacity: 1;
}

.ib-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 8000ms linear;
}

.ib-hero__slide.is-ativo img {
    transform: scale(1);
}

/* Escurece da esquerda para a direita e de baixo para cima: o texto fica
   sempre sobre área escura, seja qual for a foto que o admin subir. */
.ib-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(4, 30, 28, 0.92) 0%, rgba(4, 30, 28, 0.72) 42%, rgba(4, 30, 28, 0.18) 100%),
        linear-gradient(0deg, rgba(4, 30, 28, 0.85) 0%, rgba(4, 30, 28, 0) 45%);
}

.ib-hero__conteudo {
    padding-top: calc(var(--ib-header-h) + clamp(4rem, 3rem + 6vw, 9rem));
    padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.ib-hero__texto {
    max-width: 760px;
    display: grid;
    gap: var(--ib-s-5);
}

.ib-hero .ib-lead {
    color: rgba(255, 255, 255, 0.82);
    max-width: 56ch;
}

.ib-hero .ib-actions {
    margin-top: var(--ib-s-2);
}

/* Barra inferior: indicadores à esquerda, controles do carrossel à direita. */
.ib-hero__base {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ib-hero__base-inner {
    display: grid;
    gap: var(--ib-s-5);
    padding-block: var(--ib-s-5);
}

@media (min-width: 960px) {
    .ib-hero__base-inner {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

.ib-numeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ib-s-5) var(--ib-s-6);
    margin: 0;
}

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

.ib-numeros div {
    display: grid;
    gap: 0.2rem;
}

.ib-numeros dt {
    order: 2;
    font-size: var(--ib-fs-sm);
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.35;
}

.ib-numeros dd {
    order: 1;
    margin: 0;
    font-family: var(--ib-font-display);
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ib-carrossel__controles {
    display: flex;
    align-items: center;
    gap: var(--ib-s-3);
}

.ib-carrossel__pontos {
    display: flex;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada ponto é também uma barra de progresso do slide atual. */
.ib-carrossel__ponto {
    position: relative;
    width: 34px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ib-carrossel__ponto::before,
.ib-carrossel__ponto::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    border-radius: 2px;
    transform: translateY(-50%);
}

.ib-carrossel__ponto::before {
    width: 100%;
    background: rgba(255, 255, 255, 0.28);
}

.ib-carrossel__ponto::after {
    width: 0;
    background: #fff;
}

.ib-carrossel__ponto.is-ativo::after {
    animation: ib-progresso var(--ib-carrossel-tempo, 6s) linear forwards;
}

.ib-hero.is-pausado .ib-carrossel__ponto.is-ativo::after {
    animation-play-state: paused;
}

@keyframes ib-progresso {
    from { width: 0; }
    to { width: 100%; }
}

.ib-carrossel__seta {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background var(--ib-fast), border-color var(--ib-fast);
}

.ib-carrossel__seta:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
}

.ib-carrossel__seta svg {
    width: 18px;
    height: 18px;
}

.ib-carrossel__legenda {
    min-width: 3.2rem;
    font-size: var(--ib-fs-sm);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.7);
}

/* 8. Faixa de municípios ────────────────────────────────────────────────── */
.ib-faixa {
    border-bottom: 1px solid var(--ib-line);
    padding-block: var(--ib-s-5);
    overflow: hidden;
}

.ib-faixa__inner {
    display: flex;
    align-items: center;
    gap: var(--ib-s-6);
}

.ib-faixa__rotulo {
    flex-shrink: 0;
    font-size: var(--ib-fs-sm);
    color: var(--ib-muted);
    max-width: 14rem;
    line-height: 1.4;
}

.ib-faixa__trilho {
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ib-faixa__lista {
    display: flex;
    gap: var(--ib-s-7);
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: ib-rolar 40s linear infinite;
}

.ib-faixa__trilho:hover .ib-faixa__lista {
    animation-play-state: paused;
}

.ib-faixa__lista li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
    font-family: var(--ib-font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ib-ink-2);
}

.ib-faixa__lista li svg {
    width: 16px;
    height: 16px;
    color: var(--ib-green);
}

@keyframes ib-rolar {
    to { transform: translateX(-50%); }
}

@media (max-width: 719px) {
    .ib-faixa__inner { flex-direction: column; align-items: flex-start; gap: var(--ib-s-3); }
    .ib-faixa__rotulo { max-width: none; }
    .ib-faixa__trilho { width: 100%; }
}

/* 9. Sobre ─────────────────────────────────────────────────────────────── */
.ib-sobre {
    display: grid;
    gap: var(--ib-s-7);
    align-items: center;
}

@media (min-width: 1024px) {
    .ib-sobre {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--ib-s-9);
    }
}

.ib-sobre__midia {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.62fr;
    grid-template-rows: auto auto;
    gap: var(--ib-s-4);
}

.ib-sobre__midia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ib-radius);
}

.ib-sobre__foto-principal {
    grid-row: span 2;
    aspect-ratio: 4 / 5;
}

.ib-sobre__foto-secundaria {
    aspect-ratio: 1;
}

/* Selo de anos/experiência: bloco sólido que ancora a composição. */
.ib-sobre__selo {
    display: grid;
    align-content: end;
    gap: 0.35rem;
    padding: var(--ib-s-5);
    border-radius: var(--ib-radius);
    background: var(--ib-green-900);
    color: #fff;
}

.ib-sobre__selo strong {
    font-family: var(--ib-font-display);
    font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
}

.ib-sobre__selo span {
    font-size: var(--ib-fs-sm);
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.35;
}

.ib-sobre__texto {
    display: grid;
    gap: var(--ib-s-5);
}

.ib-checklist {
    display: grid;
    gap: 0;
    margin: var(--ib-s-2) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ib-line);
}

.ib-checklist li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--ib-s-3);
    align-items: start;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--ib-line);
    color: var(--ib-ink-2);
}

.ib-checklist svg {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--ib-green);
}

/* 10. Serviços ─────────────────────────────────────────────────────────── */
/* Grade de cartões separados por linhas, sem sombra: o desenho lembra uma
   planta, e o hover acende só a borda superior. */
.ib-servicos {
    display: grid;
    border-top: 1px solid var(--ib-line-strong);
    border-left: 1px solid var(--ib-line-strong);
}

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

@media (min-width: 1024px) {
    .ib-servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ib-servico {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ib-s-4);
    min-height: 100%;
    padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    border-right: 1px solid var(--ib-line-strong);
    border-bottom: 1px solid var(--ib-line-strong);
    background: var(--ib-paper);
    color: inherit;
    text-decoration: none;
    transition: background var(--ib-base) var(--ib-ease);
}

.ib-servico::before {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 2px;
    background: var(--ib-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ib-base) var(--ib-ease);
}

.ib-servico:hover {
    background: var(--ib-surface);
}

.ib-servico:hover::before {
    transform: scaleX(1);
}

.ib-servico__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ib-servico__icone {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--ib-green-50);
    color: var(--ib-green-700);
}

.ib-servico__icone svg {
    width: 24px;
    height: 24px;
}

.ib-servico__numero {
    font-family: var(--ib-font-display);
    font-size: var(--ib-fs-sm);
    font-weight: 500;
    color: var(--ib-subtle);
    font-variant-numeric: tabular-nums;
}

.ib-servico .ib-text {
    flex: 1;
}

.ib-servico__seta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ib-green-700);
}

.ib-servico__seta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--ib-fast) var(--ib-ease);
}

.ib-servico:hover .ib-servico__seta svg {
    transform: translateX(4px);
}

/* 11. Como trabalhamos ─────────────────────────────────────────────────── */
.ib-etapas {
    display: grid;
    gap: var(--ib-s-6);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etapa;
}

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

@media (min-width: 1024px) {
    .ib-etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ib-s-5); }
}

.ib-etapa {
    position: relative;
    display: grid;
    gap: var(--ib-s-3);
    padding-top: var(--ib-s-6);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    counter-increment: etapa;
}

/* Marcador sobre a linha: a sequência lê como um cronograma. */
.ib-etapa::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ib-gold);
    box-shadow: 0 0 0 4px var(--ib-green-900);
}

.ib-etapa__numero {
    font-family: var(--ib-font-display);
    font-size: var(--ib-fs-sm);
    font-weight: 500;
    color: var(--ib-gold);
    letter-spacing: 0.08em;
}

.ib-etapa__numero::before {
    content: '0' counter(etapa);
}

/* 12. Mapa ──────────────────────────────────────────────────────────────── */
.ib-mapa {
    display: grid;
    gap: var(--ib-s-6);
    align-items: stretch;
}

@media (min-width: 1024px) {
    .ib-mapa { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--ib-s-8); }
}

.ib-mapa__lista {
    display: grid;
    gap: 0;
    margin: var(--ib-s-5) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ib-line);
    max-height: 22rem;
    overflow-y: auto;
}

.ib-mapa__lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ib-s-3);
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--ib-line);
    font-size: 0.95rem;
}

.ib-mapa__lista button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ib-ink);
    cursor: pointer;
    text-align: left;
}

.ib-mapa__lista button:hover {
    color: var(--ib-green-700);
}

.ib-mapa__lista button::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ib-green);
}

.ib-mapa__tela {
    position: relative;
    min-height: 460px;
    border-radius: var(--ib-radius-lg);
    border: 1px solid var(--ib-line);
    background: var(--ib-surface);
    overflow: hidden;
}

.ib-mapa__tela .ibracel-map {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.ib-mapa__legenda {
    position: absolute;
    left: var(--ib-s-4);
    bottom: var(--ib-s-4);
    z-index: 500;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ib-s-4);
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--ib-line);
    font-size: var(--ib-fs-xs);
    color: var(--ib-ink-2);
}

.ib-mapa__legenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ib-mapa__legenda i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* 13. Blog ──────────────────────────────────────────────────────────────── */
.ib-card-post {
    display: flex;
    flex-direction: column;
    gap: var(--ib-s-4);
    color: inherit;
    text-decoration: none;
}

.ib-card-post__imagem {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--ib-radius);
    overflow: hidden;
    background: var(--ib-surface-2);
}

.ib-card-post__imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--ib-ease);
}

.ib-card-post:hover .ib-card-post__imagem img {
    transform: scale(1.04);
}

/* Sem capa: o cartão ainda tem forma, com a marca no lugar da foto. */
.ib-card-post__imagem--vazia {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(13, 166, 156, 0.18), transparent 55%),
        var(--ib-green-900);
}

.ib-card-post__imagem--vazia img {
    width: 42%;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
}

.ib-card-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    font-size: var(--ib-fs-sm);
    color: var(--ib-muted);
}

.ib-card-post__meta span + span::before {
    content: '·';
    margin-right: 0.75rem;
    color: var(--ib-line-strong);
}

.ib-card-post .ib-h4 {
    transition: color var(--ib-fast);
}

.ib-card-post:hover .ib-h4 {
    color: var(--ib-green-700);
}

.ib-card-post .ib-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Destaque do índice: imagem grande à esquerda, texto à direita. */
.ib-destaque {
    display: grid;
    gap: var(--ib-s-6);
    align-items: center;
    padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
    margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
    border-bottom: 1px solid var(--ib-line);
    color: inherit;
    text-decoration: none;
}

@media (min-width: 960px) {
    .ib-destaque {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: var(--ib-s-8);
    }
}

.ib-destaque .ib-card-post__imagem {
    aspect-ratio: 16 / 11;
    border-radius: var(--ib-radius-lg);
}

.ib-destaque:hover .ib-card-post__imagem img {
    transform: scale(1.03);
}

.ib-destaque__texto {
    display: grid;
    gap: var(--ib-s-4);
}

.ib-destaque:hover .ib-h2 {
    color: var(--ib-green-700);
}

.ib-destaque .ib-h2 {
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
    transition: color var(--ib-fast);
}

/* Cabeçalho de página interna (blog, artigo). */
.ib-pagina-topo {
    padding-top: calc(var(--ib-header-h) + clamp(3rem, 2rem + 4vw, 6rem));
    padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
    border-bottom: 1px solid var(--ib-line);
    background:
        linear-gradient(180deg, var(--ib-surface) 0%, var(--ib-paper) 100%);
}

.ib-pagina-topo .ib-head {
    margin-bottom: 0;
}

.ib-trilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 var(--ib-s-5);
    padding: 0;
    list-style: none;
    font-size: var(--ib-fs-sm);
    color: var(--ib-muted);
}

.ib-trilha a {
    color: var(--ib-muted);
    text-decoration: none;
}

.ib-trilha a:hover {
    color: var(--ib-green-700);
}

.ib-trilha li + li::before {
    content: '/';
    margin-right: 0.4rem;
    color: var(--ib-line-strong);
}

/* Busca do blog */
.ib-busca {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.ib-busca svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 18px;
    height: 18px;
    color: var(--ib-subtle);
    transform: translateY(-50%);
    pointer-events: none;
}

.ib-busca input {
    width: 100%;
    min-height: 50px;
    padding: 0.8rem 1rem 0.8rem 2.75rem;
    border: 1px solid var(--ib-line-strong);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    color: var(--ib-ink);
}

.ib-busca input:focus {
    outline: none;
    border-color: var(--ib-green);
    box-shadow: var(--ib-focus);
}

.ib-posts {
    display: grid;
    gap: var(--ib-s-7) var(--ib-s-6);
}

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

@media (min-width: 1024px) {
    .ib-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ib-paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--ib-s-2);
    margin-top: var(--ib-s-8);
}

.ib-paginacao a,
.ib-paginacao span {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding-inline: 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--ib-line-strong);
    color: var(--ib-ink);
    font-weight: 500;
    text-decoration: none;
}

.ib-paginacao a:hover {
    border-color: var(--ib-ink);
}

.ib-paginacao [aria-current="page"] {
    background: var(--ib-ink);
    border-color: var(--ib-ink);
    color: #fff;
}

.ib-vazio {
    display: grid;
    justify-items: center;
    gap: var(--ib-s-3);
    padding: clamp(3rem, 2rem + 4vw, 5rem) var(--ib-s-5);
    border: 1px dashed var(--ib-line-strong);
    border-radius: var(--ib-radius-lg);
    text-align: center;
}

.ib-vazio svg {
    width: 36px;
    height: 36px;
    color: var(--ib-green);
}

.ib-vazio .ib-text {
    max-width: 44ch;
}

/* Artigo */
.ib-artigo__topo {
    padding-top: calc(var(--ib-header-h) + clamp(2.5rem, 2rem + 3vw, 5rem));
}

.ib-artigo__topo .ib-h1 {
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
}

.ib-artigo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ib-s-4);
    margin-top: var(--ib-s-5);
    padding-top: var(--ib-s-5);
    border-top: 1px solid var(--ib-line);
    font-size: var(--ib-fs-sm);
    color: var(--ib-muted);
}

.ib-artigo__autor {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ib-ink);
    font-weight: 600;
}

.ib-artigo__autor img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--ib-green-900);
    padding: 6px;
}

.ib-artigo__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ib-artigo__meta svg {
    width: 16px;
    height: 16px;
}

.ib-artigo__capa {
    margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) auto 0;
    max-width: 1100px;
    padding-inline: var(--ib-gutter);
}

.ib-artigo__capa img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-radius: var(--ib-radius-lg);
}

/* Texto longo: medida de leitura, ritmo vertical e títulos com respiro. */
.ib-prosa {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--ib-ink-2);
}

.ib-prosa > * + * {
    margin-top: 1.4em;
}

.ib-prosa p {
    margin-bottom: 0;
}

.ib-prosa > p:first-child {
    font-size: 1.28rem;
    line-height: 1.7;
    color: var(--ib-ink);
}

.ib-prosa h2 {
    margin-top: 2.2em;
    font-family: var(--ib-font-display);
    font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--ib-ink);
}

.ib-prosa ul {
    padding-left: 1.2em;
}

.ib-prosa li + li {
    margin-top: 0.5em;
}

.ib-prosa li::marker {
    color: var(--ib-green);
}

.ib-prosa blockquote {
    margin-inline: 0;
    padding: 0.2em 0 0.2em 1.2em;
    border-left: 3px solid var(--ib-gold);
    font-family: var(--ib-font-display);
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--ib-ink);
}

.ib-compartilhar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ib-s-3);
    margin-top: var(--ib-s-7);
    padding-top: var(--ib-s-5);
    border-top: 1px solid var(--ib-line);
}

.ib-compartilhar__rotulo {
    font-size: var(--ib-fs-sm);
    font-weight: 600;
    color: var(--ib-muted);
    margin-right: var(--ib-s-2);
}

.ib-compartilhar a,
.ib-compartilhar button {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--ib-line-strong);
    background: #fff;
    color: var(--ib-ink);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--ib-fast), color var(--ib-fast);
}

.ib-compartilhar a:hover,
.ib-compartilhar button:hover {
    border-color: var(--ib-green);
    color: var(--ib-green-700);
}

.ib-compartilhar svg {
    width: 18px;
    height: 18px;
}

.ib-compartilhar__aviso {
    font-size: var(--ib-fs-sm);
    color: var(--ib-green-700);
}

/* 14. Depoimentos ──────────────────────────────────────────────────────── */
.ib-depoimentos {
    display: grid;
    gap: var(--ib-s-5);
}

@media (min-width: 960px) {
    .ib-depoimentos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ib-depoimento {
    display: flex;
    flex-direction: column;
    gap: var(--ib-s-5);
    margin: 0;
    padding: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    border-radius: var(--ib-radius);
    background: #fff;
    border: 1px solid var(--ib-line);
}

.ib-depoimento__aspas {
    width: 30px;
    height: 30px;
    color: var(--ib-gold);
}

.ib-depoimento blockquote {
    flex: 1;
    margin: 0;
    font-family: var(--ib-font-display);
    font-size: 1.15rem;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--ib-ink);
}

.ib-depoimento figcaption {
    display: flex;
    align-items: center;
    gap: var(--ib-s-3);
    padding-top: var(--ib-s-4);
    border-top: 1px solid var(--ib-line);
}

.ib-depoimento figcaption img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.ib-depoimento figcaption strong {
    display: block;
    font-size: 0.95rem;
}

.ib-depoimento figcaption span {
    display: block;
    font-size: var(--ib-fs-sm);
    color: var(--ib-muted);
}

/* 15. Contato ──────────────────────────────────────────────────────────── */
.ib-contato {
    display: grid;
    gap: var(--ib-s-7);
}

@media (min-width: 1024px) {
    .ib-contato { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--ib-s-9); }
}

.ib-canais {
    display: grid;
    gap: 0;
    margin: var(--ib-s-6) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ib-line);
}

.ib-canais li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--ib-s-4);
    align-items: center;
    padding: var(--ib-s-4) 0;
    border-bottom: 1px solid var(--ib-line);
}

.ib-canais__icone {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ib-green-50);
    color: var(--ib-green-700);
}

.ib-canais__icone svg {
    width: 20px;
    height: 20px;
}

.ib-canais small {
    display: block;
    font-size: var(--ib-fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ib-subtle);
}

.ib-canais a,
.ib-canais strong {
    font-weight: 600;
    color: var(--ib-ink);
    text-decoration: none;
}

.ib-canais a:hover {
    color: var(--ib-green-700);
}

.ib-form {
    display: grid;
    gap: var(--ib-s-4);
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
    border-radius: var(--ib-radius-lg);
    border: 1px solid var(--ib-line);
    background: #fff;
}

@media (min-width: 720px) {
    .ib-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ib-form__cheio { grid-column: 1 / -1; }
}

.ib-campo {
    display: grid;
    gap: 0.4rem;
}

.ib-campo label {
    font-size: var(--ib-fs-sm);
    font-weight: 600;
    color: var(--ib-ink-2);
}

.ib-campo input,
.ib-campo select,
.ib-campo textarea {
    width: 100%;
    min-height: 50px;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--ib-line-strong);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    color: var(--ib-ink);
    transition: border-color var(--ib-fast), box-shadow var(--ib-fast);
}

.ib-campo textarea {
    min-height: 140px;
    resize: vertical;
}

.ib-campo input:focus,
.ib-campo select:focus,
.ib-campo textarea:focus {
    outline: none;
    border-color: var(--ib-green);
    box-shadow: var(--ib-focus);
}

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

.ib-form__nota {
    margin: 0;
    font-size: var(--ib-fs-sm);
    color: var(--ib-muted);
}

.ib-aviso {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
}

.ib-aviso--ok {
    background: var(--ib-green-50);
    color: var(--ib-green-800);
    border: 1px solid #bfe9e4;
}

.ib-aviso--erro {
    background: #fdf1f1;
    color: #9b1c1c;
    border: 1px solid #f5c9c9;
}

/* 16. CTA final ────────────────────────────────────────────────────────── */
.ib-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--ib-radius-lg);
    color: #fff;
    background: var(--ib-green-900);
}

.ib-cta__foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ib-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(4, 30, 28, 0.95) 0%, rgba(4, 30, 28, 0.82) 48%, rgba(5, 80, 75, 0.55) 100%);
}

.ib-cta__inner {
    display: grid;
    gap: var(--ib-s-6);
    padding: clamp(2.5rem, 1.8rem + 4vw, 6rem);
}

@media (min-width: 960px) {
    .ib-cta__inner {
        grid-template-columns: minmax(0, 1.3fr) auto;
        align-items: end;
    }
}

.ib-cta .ib-lead {
    color: rgba(255, 255, 255, 0.78);
}

/* 17. Rodapé ───────────────────────────────────────────────────────────── */
.ib-footer {
    background: var(--ib-green-900);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--ib-font-body);
    font-size: 0.95rem;
}

.ib-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color var(--ib-fast);
}

.ib-footer a:hover {
    color: #fff;
}

.ib-footer__topo {
    display: grid;
    gap: var(--ib-s-7);
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

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

@media (min-width: 1100px) {
    .ib-footer__topo { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--ib-s-8); }
}

.ib-footer__marca {
    display: grid;
    gap: var(--ib-s-5);
    align-content: start;
    max-width: 380px;
}

.ib-footer__marca img {
    height: 44px;
    width: auto;
}

.ib-footer__marca p {
    margin: 0;
    line-height: 1.7;
}

.ib-footer h2 {
    margin: 0 0 var(--ib-s-4);
    font-family: var(--ib-font-body);
    font-size: var(--ib-fs-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

.ib-footer ul {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ib-footer__contato li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.6rem;
    align-items: start;
}

.ib-footer__contato svg {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--ib-gold);
}

.ib-footer__base {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ib-footer__base-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ib-s-3);
    padding-block: var(--ib-s-5);
    font-size: var(--ib-fs-sm);
    color: rgba(255, 255, 255, 0.55);
}

.ib-footer__base nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ib-s-5);
}

.ib-topo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}

.ib-topo:hover {
    color: #fff;
}

.ib-topo svg {
    width: 16px;
    height: 16px;
}

/* 18. Ponte com as páginas antigas ─────────────────────────────────────── */
/* As páginas internas (quem somos, cursos, projetos, parceiros, prefeituras,
   alunos, trabalhe conosco) ainda usam as classes do main.css. Aqui elas
   herdam a tipografia, as cores e o ritmo do sistema novo, sem precisar
   reescrever cada uma. */
body.ib-site .site-main {
    font-family: var(--ib-font-body);
}

body.ib-site .hero.section-alt,
body.ib-site .hero.hero-primary {
    padding-top: calc(var(--ib-header-h) + clamp(3rem, 2rem + 4vw, 6rem));
}

body.ib-site .hero.section-alt {
    background: linear-gradient(180deg, var(--ib-surface) 0%, var(--ib-paper) 100%);
    border-bottom: 1px solid var(--ib-line);
}

body.ib-site .hero-title,
body.ib-site .section-title,
body.ib-site .card-title,
body.ib-site .timeline-card-title,
body.ib-site .cta-block h2 {
    font-family: var(--ib-font-display);
    font-weight: 600;
    letter-spacing: -0.025em;
}

body.ib-site .hero.section-alt .hero-title {
    font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem);
    line-height: 1.04;
    color: var(--ib-ink);
}

body.ib-site .hero-subtitle,
body.ib-site .section-description {
    color: var(--ib-muted);
}

/* Etiquetas antigas no desenho novo: traço + caixa-alta, sem pílula. */
body.ib-site .section-kicker,
body.ib-site .badge {
    padding: 0;
    background: none;
    color: var(--ib-green-700);
    font-size: var(--ib-fs-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.ib-site .badge-dot {
    width: 1.75rem;
    height: 1px;
    border-radius: 0;
    background: currentColor;
}

body.ib-site .card {
    border-radius: var(--ib-radius);
    border-color: var(--ib-line);
    box-shadow: none;
}

body.ib-site .card:hover {
    box-shadow: var(--ib-shadow-2);
}

body.ib-site .card::after {
    background: var(--ib-green);
}

body.ib-site .card-title-row > .card-icon {
    background: var(--ib-green-50);
    color: var(--ib-green-700);
}

body.ib-site .btn {
    font-family: var(--ib-font-body);
    font-weight: 600;
    min-height: 48px;
}

body.ib-site .btn-primary {
    background: var(--ib-green);
    box-shadow: none;
}

body.ib-site .btn-primary:hover {
    background: var(--ib-green-700);
    box-shadow: none;
}

body.ib-site .section-green,
body.ib-site .cta-block--green {
    background: var(--ib-green-900);
}

body.ib-site .form-control,
body.ib-site .form-select,
body.ib-site .form-textarea {
    border-radius: 12px;
    border-color: var(--ib-line-strong);
    font-family: var(--ib-font-body);
}

/* 19. Movimento e acessibilidade ──────────────────────────────────────── */
.ib-revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms var(--ib-ease), transform 700ms var(--ib-ease);
}

.ib-revelar.is-visivel {
    opacity: 1;
    transform: none;
}

/* Sem JS o conteúdo precisa aparecer: a classe .ib-js só existe quando o
   script rodou. */
html:not(.ib-js) .ib-revelar {
    opacity: 1;
    transform: none;
}

.ib-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ib-revelar,
    .ib-hero__slide,
    .ib-hero__slide img,
    .ib-servico,
    .ib-card-post__imagem img {
        transition: none !important;
        transform: none !important;
    }

    .ib-faixa__lista {
        animation: none;
        flex-wrap: wrap;
        width: auto;
    }

    .ib-carrossel__ponto.is-ativo::after {
        animation: none;
        width: 100%;
    }
}

/* O widget do VLibras fica acima do conteúdo, mas não do menu mobile aberto. */
body.ib-menu-aberto [vw] {
    display: none !important;
}

/* 20. Complementos ─────────────────────────────────────────────────────── */
/* main.css dá padding a todo <section>; o hero controla o próprio respiro. */
body.ib-site section.ib-hero {
    padding: 0;
}

/* Destaque do título sobre fundo escuro: o verde some na foto, o dourado não. */
.ib-hero .ib-accent,
.ib-section--dark .ib-accent,
.ib-cta .ib-accent {
    color: #e3c56e;
}

.ib-depoimento__inicial {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ib-green-50);
    color: var(--ib-green-700);
    font-family: var(--ib-font-display);
    font-weight: 600;
}

.ib-mapa__lista .ib-tag {
    flex-shrink: 0;
}

.ib-section--dark .ib-etapa .ib-h4 {
    color: #fff;
}

/* Botão dentro do rodapé: a cor dos links do rodapé não pode vencer a do botão. */
.ib-footer .ib-btn,
.ib-footer .ib-btn:hover {
    color: var(--ib-btn-fg);
}

.ib-footer__marca .ib-btn {
    justify-self: start;
}

.ib-depoimento figcaption .ib-depoimento__inicial {
    display: inline-grid;
    font-size: 1.05rem;
    color: var(--ib-green-700);
}

/* Linhas da grade com alturas diferentes não podem espalhar o conteúdo. */
.ib-etapa {
    align-content: start;
}

/* Páginas antigas no mesmo alinhamento do cabeçalho novo. */
body.ib-site .site-main .container {
    max-width: 1240px;
    padding-inline: var(--ib-gutter);
}

.ib-destaque__texto .ib-tag {
    justify-self: start;
}

/* Celular: a foto principal ocupa a largura toda e o selo vai ao lado da
   secundária, sem espremer o texto numa coluna estreita. */
@media (max-width: 559px) {
    .ib-sobre__midia {
        grid-template-columns: 1fr 1fr;
    }

    .ib-sobre__foto-principal {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }

    .ib-sobre__selo {
        padding: var(--ib-s-4);
    }
}