/* ==========================================================================
   Instituto Bem-Estar — blocos das páginas internas (ibe-paginas.css)
   Depende de ibe.css (tokens e núcleo). Cada bloco abaixo corresponde a um
   marcador <!-- BLOCO: nome --> no HTML e, no futuro, a um include PHP.

   Índice
    1. Trilha (breadcrumb)          9. Resposta em destaque
    2. Abertura (hero interno)     10. Cards de fatores
    3. Placeholder de imagem       11. Cartão de anotação
    4. Corpo com índice lateral    12. Alerta de urgência
    5. Seção                       13. Perguntas frequentes
    6. Texto corrido               14. Conteúdos / especialidades relacionadas
    7. Lista escaneável            15. Conversão
    8. Nota, caixa informativa     16. Localização e atendimento
       e citação em destaque       17. Aviso educativo
                                   18. Etapas visuais (enchimento/esvaziamento)
                                   19. Modo revisão, entrada, responsivo
   ========================================================================== */

:root{ interpolate-size:allow-keywords }

/* Pétalas do logo (utilitário para pontos e marcadores) */
.ibe-pt{display:inline-block;border-radius:50%}
.ibe-pt--green{background:var(--ibe-petal-green)}
.ibe-pt--yellow{background:var(--ibe-petal-yellow)}
.ibe-pt--coral{background:var(--ibe-petal-coral)}
.ibe-pt--blue{background:var(--ibe-petal-blue)}

/* 1. TRILHA ================================================================ */
.ibe-crumbs{padding-top:14px}
.ibe-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:13.5px;color:var(--ibe-muted)}
.ibe-crumbs li{display:inline-flex;align-items:center;gap:6px}
.ibe-crumbs li + li::before{content:"›" / "";color:var(--ibe-faint)}
.ibe-crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ibe-tap);min-width:var(--ibe-tap);text-decoration:underline;text-decoration-color:var(--ibe-line);text-underline-offset:3px}
.ibe-crumbs a:hover{color:var(--ibe-ink);text-decoration-color:currentColor}
.ibe-crumbs [aria-current="page"]{color:var(--ibe-ink)}

/* 2. ABERTURA ============================================================== */
.ibe-phero{padding-bottom:clamp(44px,5vw,80px)}
.ibe-phero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(12px,2vw,28px)}
.ibe-phero .ibe-eyebrow{margin-bottom:22px}
.ibe-phero__title{font-size:clamp(2.35rem,1.3rem + 3vw,3.6rem);font-weight:400;letter-spacing:var(--ibe-track-tight);line-height:1.03;text-wrap:balance;max-width:13em}
.ibe-phero__title .ibe-soft{display:block;color:var(--ibe-faint)}
.ibe-phero__sub{margin-top:16px;font-size:clamp(1.2rem,1rem + .7vw,1.5rem);font-weight:400;letter-spacing:-.025em;line-height:1.28;color:var(--ibe-faint);max-width:22em;text-wrap:balance}
.ibe-phero__text{margin-top:26px;display:grid;gap:16px;max-width:37em}
.ibe-phero__text p{font-size:17px;line-height:1.68;color:var(--ibe-prose)}
.ibe-phero__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.ibe-phero__meta{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ibe-muted)}
.ibe-phero__meta i{width:8px;height:8px;border-radius:50%;background:var(--ibe-petal-green)}
.ibe-phero__media{position:sticky;top:calc(var(--ibe-header-h) + 24px)}

/* 3. PLACEHOLDER DE IMAGEM ================================================= */
.ibe-ph{position:relative;overflow:hidden;border-radius:var(--ibe-radius);background:var(--ibe-surface);aspect-ratio:4/5}
.ibe-ph--wide{aspect-ratio:16/9}
.ibe-ph > img{width:100%;height:100%;object-fit:cover}
.ibe-ph__tag{position:absolute;left:12px;bottom:12px;font-family:var(--ibe-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--ibe-ink);padding:6px 9px;border-radius:var(--ibe-radius-sm)}
.ibe-ph__chip{position:absolute;left:14px;top:14px;right:14px;max-width:300px;background:rgba(255,255,255,.95);border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);padding:12px 14px;box-shadow:0 16px 30px -22px rgba(1,46,95,.5)}
.ibe-ph__chip small{display:block;font-family:var(--ibe-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ibe-muted)}
.ibe-ph__chip b{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ibe-ink)}
.ibe-ph__chip b i{width:8px;height:8px;border-radius:50%;background:var(--ibe-petal-green);box-shadow:0 0 0 3px rgba(158,200,119,.3)}
.ibe-figure{margin-top:32px}

/* 4. CORPO COM ÍNDICE LATERAL ============================================== */
.ibe-body{border-top:1px solid var(--ibe-line-soft)}
.ibe-body__grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.ibe-toc{position:sticky;top:calc(var(--ibe-header-h) + 16px);align-self:start;padding-top:clamp(48px,5.5vw,80px);max-height:calc(100vh - var(--ibe-header-h) - 16px);overflow:auto}
.ibe-toc__label{font-family:var(--ibe-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ibe-muted);margin-bottom:10px}
.ibe-toc ol{border-left:1px solid var(--ibe-line)}
.ibe-toc a{display:grid;grid-template-columns:22px 1fr;gap:6px;align-items:center;min-height:var(--ibe-tap);padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.3;color:var(--ibe-muted);transition:color .2s,border-color .2s}
.ibe-toc a span{font-family:var(--ibe-mono);font-size:11px;color:var(--ibe-muted)}
.ibe-toc a:hover{color:var(--ibe-ink)}
.ibe-toc a[aria-current="true"]{color:var(--ibe-ink);border-left-color:var(--ibe-green-edge)}
.ibe-toc a[aria-current="true"] span{color:var(--ibe-green-text)}
.ibe-article{min-width:0;max-width:780px}

/* 5. SEÇÃO ================================================================= */
.ibe-sec{padding-block:clamp(48px,5.5vw,80px);border-top:1px solid var(--ibe-line-soft)}
.ibe-article > .ibe-sec:first-child{border-top:0}
.ibe-sec__head{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:baseline;margin-bottom:26px}
.ibe-sec__num{font-family:var(--ibe-mono);font-size:12px;letter-spacing:.06em;color:var(--ibe-green-text)}
.ibe-sec__title{font-size:clamp(1.6rem,1.15rem + 1.3vw,2.15rem);font-weight:400;letter-spacing:var(--ibe-track);line-height:1.14;text-wrap:balance}
.ibe-sec__intro{margin:-10px 0 24px 44px;font-size:16.5px;line-height:1.6;color:var(--ibe-muted);max-width:36em}
.ibe-sec__body{padding-left:44px}
.ibe-sec__cta{margin-top:30px}

/* 6. TEXTO CORRIDO ========================================================= */
.ibe-prose{display:grid;gap:18px}
.ibe-prose p{font-size:17px;line-height:1.7;color:var(--ibe-prose);max-width:38em}
.ibe-prose strong{font-weight:600;color:var(--ibe-ink)}

/* 7. LISTA ESCANEÁVEL ====================================================== */
.ibe-list{display:grid;border-top:1px solid var(--ibe-line)}
.ibe-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--ibe-line);font-size:16.5px;line-height:1.55;color:var(--ibe-prose)}
.ibe-list li::before{content:"";width:12px;height:12px;border-radius:50%;border:2.5px solid var(--ibe-petal-green);margin-top:.38em}
.ibe-list--cards{grid-template-columns:1fr 1fr;gap:8px;border-top:0}
.ibe-list--cards li{grid-template-columns:1fr;gap:14px;align-content:start;background:#fff;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);padding:18px 18px 20px;min-height:120px}

/* 8. NOTA · CAIXA INFORMATIVA · CITAÇÃO ==================================== */
.ibe-note{margin-top:22px;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:16px 18px;background:var(--ibe-surface);border-radius:var(--ibe-radius);font-size:15.5px;line-height:1.6;color:var(--ibe-prose)}
.ibe-note svg{width:18px;height:18px;color:var(--ibe-navy);margin-top:2px}

.ibe-callout{margin-top:30px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:22px 24px;background:#fff;border:1px solid var(--ibe-line);border-left:3px solid var(--ibe-navy);border-radius:var(--ibe-radius)}
.ibe-callout__ico{width:40px;height:40px;border-radius:50%;background:var(--ibe-surface);display:grid;place-items:center;color:var(--ibe-navy)}
.ibe-callout__ico svg{width:18px;height:18px}
.ibe-callout p{font-size:16px;line-height:1.62;color:var(--ibe-prose)}
.ibe-callout strong{font-weight:600;color:var(--ibe-ink)}

.ibe-quote{margin-top:36px;padding-top:28px;border-top:1px solid var(--ibe-line)}
.ibe-quote__petals{display:flex;gap:5px;margin-bottom:18px}
.ibe-quote__petals i{width:9px;height:9px;border-radius:50%}
.ibe-quote p{font-size:clamp(1.3rem,1.05rem + .9vw,1.8rem);line-height:1.3;letter-spacing:-.03em;color:var(--ibe-ink);max-width:25em;text-wrap:pretty}
.ibe-quote strong{font-weight:500;background:linear-gradient(transparent 60%,rgba(158,200,119,.5) 0);box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* 9. RESPOSTA EM DESTAQUE ================================================== */
.ibe-answer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,34px);align-items:start;padding:clamp(24px,3vw,36px);background:#E1EDF6;border-radius:var(--ibe-radius)}
.ibe-answer .ibe-answer__big{font-size:clamp(2.6rem,2rem + 2vw,3.6rem);font-weight:400;letter-spacing:-.05em;line-height:.9;color:var(--ibe-ink)}
.ibe-answer p{font-size:17px;line-height:1.68;color:var(--ibe-prose);max-width:34em}

/* 10. CARDS DE FATORES ===================================================== */
.ibe-factors{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);background:#fff}
.ibe-factor{padding:22px 22px 24px;border:1px solid var(--ibe-line-soft);border-radius:var(--ibe-radius-sm);min-height:190px;display:flex;flex-direction:column}
.ibe-factor svg{width:16px;height:16px}
.ibe-factor h3{margin-top:20px;font-size:18px;font-weight:500;letter-spacing:-.02em}
.ibe-factor p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--ibe-prose)}

/* 11. CARTÃO DE ANOTAÇÃO =================================================== */
.ibe-diary{position:relative;margin-top:34px;padding:clamp(26px,3vw,36px) clamp(22px,3vw,36px);background-color:#FFFCEF;background-image:radial-gradient(rgba(5,39,93,.12) 1px,transparent 1.3px);background-size:18px 18px;background-position:9px 9px;border:1px solid #EDE2B9;border-radius:var(--ibe-radius);box-shadow:0 18px 36px -30px rgba(1,46,95,.45)}
.ibe-diary::before{content:"";position:absolute;top:-9px;left:32px;width:72px;height:18px;background:rgba(252,217,113,.8);border-radius:2px;transform:rotate(-2deg)}
.ibe-diary h3{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:500;letter-spacing:-.025em}
.ibe-diary h3 svg{width:20px;height:20px;color:var(--ibe-ink)}
.ibe-diary p{margin-top:12px;font-size:16px;line-height:1.65;color:var(--ibe-prose)}
.ibe-diary ul{margin-top:8px;display:grid;gap:2px}
.ibe-diary li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;padding:5px 0;font-size:16px;line-height:1.55;color:var(--ibe-prose)}
.ibe-diary li::before{content:"";width:16px;height:16px;margin-top:.2em;border:1.5px solid rgba(5,39,93,.55);border-radius:3px;background:#fff}
.ibe-diary__foot{margin-top:16px!important;padding-top:14px;border-top:1px dashed #E3D59F}

/* 12. ALERTA DE URGÊNCIA (sem vermelho gritante) =========================== */
.ibe-alert{position:relative;padding:clamp(24px,3vw,36px);background:#FFF6F1;border:1px solid #F2D2C4;border-radius:var(--ibe-radius)}
.ibe-alert::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;background:var(--ibe-petal-coral);border-radius:var(--ibe-radius) 0 0 var(--ibe-radius)}
.ibe-alert__head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:20px}
.ibe-alert__ico{width:44px;height:44px;border-radius:50%;background:#FDE3D7;color:#A84523;display:grid;place-items:center}
.ibe-alert__ico svg{width:20px;height:20px}
.ibe-alert .ibe-sec__title{font-size:clamp(1.45rem,1.1rem + 1vw,1.95rem)}
.ibe-alert__body{display:grid;gap:14px}
.ibe-alert p,.ibe-alert li{font-size:16.5px;line-height:1.65;color:var(--ibe-prose)}
.ibe-alert ul{display:grid;gap:4px;margin-top:-4px}
.ibe-alert li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px}
.ibe-alert li > span,.ibe-list li > span{min-width:0}
.ibe-alert li::before{content:"";width:8px;height:2px;margin-top:.8em;background:#A84523}
.ibe-alert strong{font-weight:600;color:var(--ibe-ink)}
.ibe-alert a[href^="tel:"]{font-weight:600;color:var(--ibe-ink);text-decoration:underline;text-underline-offset:3px}
.ibe-alert__foot{margin-top:6px;padding-top:16px;border-top:1px dashed #E9BDAA}

/* 13. PERGUNTAS FREQUENTES ================================================= */
.ibe-faq{border-top:1px solid var(--ibe-line)}
.ibe-faq details{border-bottom:1px solid var(--ibe-line)}
.ibe-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:14px 0;cursor:pointer}
.ibe-faq summary::-webkit-details-marker{display:none}
.ibe-faq summary h3{font-size:17.5px;font-weight:500;letter-spacing:-.015em;line-height:1.35}
.ibe-faq summary:hover h3{text-decoration:underline;text-decoration-color:var(--ibe-line);text-underline-offset:4px}
.ibe-faq__icon{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--ibe-line);background:#fff;display:grid;place-items:center;color:var(--ibe-ink);transition:transform .25s var(--ibe-ease),background .2s,border-color .2s}
.ibe-faq__icon svg{width:12px;height:12px}
.ibe-faq details[open] .ibe-faq__icon{transform:rotate(45deg);background:var(--ibe-green);border-color:var(--ibe-green-edge)}
.ibe-faq__a{padding:0 54px 24px 0}
.ibe-faq__a p{font-size:16.5px;line-height:1.68;color:var(--ibe-prose);max-width:38em}
@supports selector(::details-content){
  .ibe-faq details::details-content{height:0;overflow:clip;transition:height .3s var(--ibe-ease),content-visibility .3s allow-discrete}
  .ibe-faq details[open]::details-content{height:auto}
}

/* 14. CONTEÚDOS E ESPECIALIDADES RELACIONADOS ============================== */
.ibe-rel-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ibe-rel-post{display:flex;flex-direction:column;gap:18px;justify-content:space-between;min-height:210px;padding:20px;background:#fff;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);transition:border-color .2s}
.ibe-rel-post:hover{border-color:var(--ibe-faint)}
.ibe-rel-post small{font-family:var(--ibe-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ibe-muted)}
.ibe-rel-post h3{font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.015em}
.ibe-rel-post span{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ibe-ink)}
.ibe-rel-post span svg{flex:none;width:12px;height:12px;transition:transform .2s}
.ibe-rel-post:hover span svg{transform:translateX(3px)}

.ibe-rel-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ibe-rel-spec{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 16px;background:#fff;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius)}
a.ibe-rel-spec{transition:border-color .2s}
a.ibe-rel-spec:hover{border-color:var(--ibe-faint)}
.ibe-rel-spec__ico{width:44px;height:44px;flex:none;border-radius:var(--ibe-radius-sm);background:var(--ibe-bg);display:grid;place-items:center}
.ibe-rel-spec__ico img{width:28px;height:28px;object-fit:contain}
.ibe-rel-spec__ico svg{width:22px;height:22px;color:var(--ibe-navy)}
.ibe-rel-spec h3{font-size:16.5px;font-weight:500;letter-spacing:-.01em}

/* 15. CONVERSÃO ============================================================ */
.ibe-convert{position:relative;overflow:hidden;padding-block:clamp(56px,6vw,96px)}
.ibe-convert .ibe-wrap{position:relative;z-index:1}
.ibe-convert__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;align-items:end}
.ibe-convert__petals{display:flex;margin-bottom:22px}
.ibe-convert__petals i{width:22px;height:22px;border-radius:50%;border:2px solid var(--ibe-navy-deep);margin-left:-6px}
.ibe-convert__petals i:first-child{margin-left:0}
.ibe-convert__title{font-size:var(--ibe-h2);font-weight:400;letter-spacing:var(--ibe-track);line-height:1.1;max-width:16em;text-wrap:balance}
.ibe-convert p{margin-top:16px;max-width:36em;font-size:17px;line-height:1.62;color:var(--ibe-d-muted)}

/* 16. LOCALIZAÇÃO E ATENDIMENTO ============================================ */
.ibe-local{padding-block:clamp(56px,6vw,96px)}
.ibe-local__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);margin-top:clamp(28px,3vw,40px)}
.ibe-local__list{border-top:1px solid var(--ibe-line)}
.ibe-local__row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--ibe-line)}
.ibe-local__row > dt{font-family:var(--ibe-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ibe-muted);padding-top:13px}
.ibe-local__row > dd{font-size:16px;line-height:1.5;color:var(--ibe-ink);display:grid;align-content:center;min-height:var(--ibe-tap)}
.ibe-local__row > dd > a{display:inline-block;padding-block:10px;text-decoration:underline;text-decoration-color:var(--ibe-faint);text-underline-offset:4px}
.ibe-local__row > dd > a:hover{text-decoration-color:currentColor}
.ibe-hours{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 18px;padding-block:10px;font-size:15.5px}
.ibe-hours dt{color:var(--ibe-muted)}
.ibe-hours dd{color:var(--ibe-ink);font-variant-numeric:tabular-nums}
.ibe-hours__obs{grid-column:1/-1;margin-top:4px;font-size:14px;color:var(--ibe-muted)}
.ibe-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.ibe-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius-sm);font-size:14px;color:var(--ibe-ink)}
.ibe-badge i{width:8px;height:8px;border-radius:50%}
.ibe-local__cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.ibe-map{position:relative;min-height:420px;border-radius:var(--ibe-radius);overflow:hidden;background:var(--ibe-surface);border:1px solid var(--ibe-line)}
.ibe-map iframe{display:block;width:100%;height:100%;min-height:420px;border:0;filter:saturate(.92)}

/* 17. AVISO EDUCATIVO ====================================================== */
.ibe-edu{padding-block:28px 40px;border-top:1px solid var(--ibe-line-soft)}
.ibe-edu__box{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;max-width:900px}
.ibe-edu__box svg{width:18px;height:18px;margin-top:2px;color:var(--ibe-muted)}
.ibe-edu p{font-size:14px;line-height:1.62;color:var(--ibe-muted)}
.ibe-edu p + p{margin-top:8px}
.ibe-edu a{text-decoration:underline;text-underline-offset:3px}

/* 18. ETAPAS VISUAIS (enchimento → esvaziamento) =========================== */
.ibe-phases{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);padding:3px;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);background:#fff}
.ibe-phase{padding:18px 18px 16px;border:1px solid var(--ibe-line-soft);border-radius:var(--ibe-radius-sm);display:flex;flex-direction:column;gap:14px}
.ibe-phase svg{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto}
.ibe-phase__cap{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:500;letter-spacing:-.01em}
.ibe-phase__cap span{font-family:var(--ibe-mono);font-size:11.5px;font-weight:400;color:var(--ibe-green-text)}
.ibe-phases__arrow{display:grid;place-items:center;color:var(--ibe-muted)}
.ibe-phases__arrow svg{width:18px;height:18px}
.ibe-phases__foot{grid-column:1/-1;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;padding:12px 12px 9px;font-family:var(--ibe-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ibe-muted)}
.ibe-phases__foot span{display:inline-flex;align-items:center;gap:7px}
.ibe-phases__foot i{width:7px;height:7px;border-radius:50%;background:var(--ibe-petal-blue)}
.ibe-level{animation:ibe-fill 5s var(--ibe-ease) infinite alternate}
.ibe-level--out{animation-name:ibe-empty}
.ibe-stream{stroke-dasharray:4 7;animation:ibe-flow 1.4s linear infinite}
@keyframes ibe-fill{from{transform:translateY(34px)}to{transform:translateY(0)}}
@keyframes ibe-empty{from{transform:translateY(0)}to{transform:translateY(40px)}}
@keyframes ibe-flow{to{stroke-dashoffset:-22}}

/* 19. MODO REVISÃO (?revisao=1) =========================================== */
.is-revisao [data-validar]{outline:2px dashed #B4461B;outline-offset:6px;position:relative}
.is-revisao [data-validar]::after{content:"Validar " attr(data-validar);position:absolute;top:-14px;right:0;z-index:5;background:#B4461B;color:#fff;font:600 10.5px/1 var(--ibe-mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border-radius:2px}
.is-revisao .ibe-ph__tag{background:#B4461B;color:#fff}

/* Entrada das seções: só deslocamento sutil. O texto nunca fica invisível
   (sem opacity:0), então nada depende da animação para ser lido. */
.js .ibe-reveal{transform:translateY(12px);transition:transform .6s var(--ibe-ease)}
.js .ibe-reveal.is-in{transform:none}
.ibe-phero__grid > *{animation:ibe-in .8s var(--ibe-ease) both}
.ibe-phero__grid > *:nth-child(2){animation-delay:.12s}
@keyframes ibe-in{from{opacity:0;transform:translateY(10px)}}

/* RESPONSIVO =============================================================== */
@media (max-width:1080px){
  .ibe-body__grid{grid-template-columns:minmax(0,1fr)}
  .ibe-toc{position:static;max-height:none;overflow:visible;padding-top:28px}
  .ibe-toc ol{display:flex;gap:6px;overflow-x:auto;border-left:0;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .ibe-toc li{flex:none;scroll-snap-align:start}
  .ibe-toc a{display:inline-flex;gap:8px;margin:0;padding:8px 12px;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius-sm);background:#fff;white-space:nowrap}
  .ibe-toc a[aria-current="true"]{border-color:var(--ibe-green-edge)}
  .ibe-article{max-width:none}
  .ibe-article > .ibe-sec:first-child{padding-top:36px}
}
@media (max-width:960px){
  .ibe-phero__grid{grid-template-columns:minmax(0,1fr)}
  .ibe-phero__media{position:static}
  .ibe-ph{aspect-ratio:16/11}
  .ibe-convert__grid{grid-template-columns:minmax(0,1fr);align-items:start}
  .ibe-local__grid{grid-template-columns:minmax(0,1fr)}
  .ibe-map{min-height:320px}
  .ibe-rel-posts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .ibe-phero__text p,.ibe-prose p{font-size:16.5px}
  .ibe-phero__cta .ibe-btn{flex:1 1 100%}
  .ibe-sec__head{grid-template-columns:minmax(0,1fr);gap:6px}
  .ibe-sec__intro{margin-left:0}
  .ibe-sec__body{padding-left:0}
  .ibe-list--cards,.ibe-factors,.ibe-rel-specs{grid-template-columns:minmax(0,1fr)}
  .ibe-factor{min-height:0}
  .ibe-answer{grid-template-columns:minmax(0,1fr);gap:10px}
  .ibe-phases{grid-template-columns:minmax(0,1fr)}
  .ibe-phases__arrow{padding:8px 0}
  .ibe-phases__arrow svg{transform:rotate(90deg)}
  .ibe-faq__a{padding-right:0}
  .ibe-local__row{grid-template-columns:minmax(0,1fr);gap:2px}
  .ibe-local__row > dt{padding-top:0}
  .ibe-local__cta .ibe-btn,.ibe-convert .ibe-btn{flex:1 1 100%;width:100%}
  .ibe-map__cap{flex-direction:column;align-items:flex-start}
  .ibe-callout,.ibe-note{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .js .ibe-reveal{transform:none}
  .ibe-level,.ibe-stream,.ibe-map__pin::after{animation:none}
}


/* 20. COMPONENTES DA FASE 2 ============================================== */
/* Menu de especialidades em duas colunas */
.ibe-nav__menu--cols{min-width:460px;padding:10px}
.ibe-nav__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ibe-nav__grid a{font-size:13.5px;padding:9px 10px}
.ibe-nav__all{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:10px 12px!important;border-top:1px solid var(--ibe-line-soft);color:var(--ibe-navy);font-weight:500}
.ibe-nav__all svg{width:11px;height:11px}

/* Temas da especialidade */
.ibe-temas{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);background:#fff}
.ibe-tema{padding:20px;border:1px solid var(--ibe-line-soft);border-radius:var(--ibe-radius-sm)}
.ibe-tema h3{font-size:17px;font-weight:500;letter-spacing:-.02em}
.ibe-tema p{margin-top:7px;font-size:15.5px;line-height:1.6;color:var(--ibe-prose)}

/* Diferenciais */
.ibe-vantagens{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.ibe-vantagens li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--ibe-line-soft);font-size:16px;color:var(--ibe-prose)}
.ibe-vantagens svg{width:18px;height:18px;margin-top:2px;color:var(--ibe-green-text)}

/* Dois blocos lado a lado (exames + convênios) */
.ibe-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ibe-duo__item{padding:22px;background:#fff;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius)}
.ibe-duo__item h3{font-size:17px;font-weight:500;letter-spacing:-.02em}
.ibe-duo__item p{margin-top:8px;font-size:15.5px;line-height:1.62;color:var(--ibe-prose)}
.ibe-link{display:inline-flex;align-items:center;gap:7px;min-height:var(--ibe-tap);color:var(--ibe-navy);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ibe-line)}
.ibe-link:hover{text-decoration-color:currentColor}
.ibe-link svg{width:11px;height:11px}

/* Listagens (especialidades, serviços, conteúdos) */
.ibe-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(24px,3vw,36px)}
.ibe-card2{display:flex;flex-direction:column;gap:12px;min-height:180px;padding:22px;background:#fff;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);transition:border-color .2s,transform .2s}
a.ibe-card2:hover{border-color:var(--ibe-faint);transform:translateY(-2px)}
.ibe-card2__ico{width:46px;height:46px;border-radius:var(--ibe-radius-sm);background:var(--ibe-bg);display:grid;place-items:center}
.ibe-card2__ico img{width:28px;height:28px;object-fit:contain}
.ibe-card2__ico svg{width:24px;height:24px;color:var(--ibe-navy)}
.ibe-card2 h3{font-size:18px;font-weight:500;letter-spacing:-.02em}
.ibe-card2 p{font-size:15px;line-height:1.55;color:var(--ibe-muted)}
.ibe-card2__go{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ibe-ink)}
.ibe-card2__go svg{width:11px;height:11px;transition:transform .2s}
a.ibe-card2:hover .ibe-card2__go svg{transform:translateX(3px)}
.ibe-card2--sm{min-height:0}
.ibe-secao{padding-block:clamp(44px,5vw,76px)}
.ibe-secao__head{max-width:46em}
.ibe-secao__head p{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--ibe-muted)}

/* Navegação por sintoma */
.ibe-sintomas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ibe-sintoma{display:inline-flex;align-items:center;gap:9px;min-height:var(--ibe-tap);padding:10px 16px;background:#fff;border:1px solid var(--ibe-line);border-radius:999px;font-size:15px;color:var(--ibe-ink);transition:border-color .2s,background .2s}
.ibe-sintoma:hover{border-color:var(--ibe-green-edge);background:#fff}
.ibe-sintoma i{width:8px;height:8px;border-radius:50%;background:var(--ibe-petal-green);flex:none}

/* Formulários (vitrine: sem envio) */
.ibe-form{display:grid;gap:18px;max-width:640px;margin-top:clamp(24px,3vw,32px)}
.ibe-field{display:grid;gap:7px}
.ibe-field label{font-size:14.5px;font-weight:500;color:var(--ibe-ink)}
.ibe-field label .ibe-opt{font-weight:400;color:var(--ibe-muted)}
.ibe-field input,.ibe-field select,.ibe-field textarea{
  width:100%;min-height:var(--ibe-tap);padding:11px 13px;font:inherit;font-size:16px;color:var(--ibe-ink);
  background:#fff;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius-sm);transition:border-color .2s,box-shadow .2s}
.ibe-field textarea{min-height:120px;resize:vertical}
.ibe-field input:focus,.ibe-field select:focus,.ibe-field textarea:focus{border-color:var(--ibe-navy);box-shadow:0 0 0 3px rgba(0,56,118,.12)}
.ibe-field__hint{font-size:13.5px;color:var(--ibe-muted)}
.ibe-consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:16px 18px;background:var(--ibe-surface);border-radius:var(--ibe-radius)}
.ibe-consent{grid-template-columns:28px 1fr}
.ibe-consent input{width:24px;height:24px;margin-top:0;accent-color:var(--ibe-navy)}
.ibe-consent label{font-size:15px;line-height:1.55;color:var(--ibe-prose)}
.ibe-form__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ibe-form__aviso{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:14px 16px;border:1px dashed var(--ibe-line);border-radius:var(--ibe-radius);font-size:14.5px;color:var(--ibe-muted)}
.ibe-form__aviso svg{width:18px;height:18px;margin-top:1px}

/* Políticas */
.ibe-politica__meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;padding:14px 0;border-block:1px solid var(--ibe-line);font-size:14px;color:var(--ibe-muted)}
.ibe-politica__meta b{font-weight:500;color:var(--ibe-ink)}
.ibe-prose h3{margin-top:14px;font-size:18px;font-weight:500;letter-spacing:-.02em}
.ibe-prose ul{display:grid;gap:8px;margin-top:-4px}
.ibe-prose ul li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:16.5px;line-height:1.6;color:var(--ibe-prose)}
.ibe-prose ul li::before{content:"";width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--ibe-petal-green)}

/* Banner de cookies */
.ibe-cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;background:#fff;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);box-shadow:0 24px 50px -24px rgba(1,46,95,.45)}
.ibe-cookies__in{display:flex;align-items:center;gap:20px;max-width:var(--ibe-frame);margin-inline:auto;padding:16px 18px;flex-wrap:wrap}
.ibe-cookies__t{font-size:15.5px;font-weight:500}
.ibe-cookies__d{margin-top:4px;font-size:14px;line-height:1.55;color:var(--ibe-muted);max-width:62em}
.ibe-cookies__d a{text-decoration:underline;text-underline-offset:3px}
.ibe-cookies__btns{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.ibe-cookies__btns .ibe-btn{min-height:40px;font-size:13.5px;padding:0 14px}

/* Rodapé: segundo título de coluna */
.ibe-footer__h2b{margin-top:22px}
.ibe-footer__rt{margin-top:14px}

.ibe-convert__btns{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.ibe-phero--solo .ibe-phero__grid{grid-template-columns:minmax(0,1fr)}
.ibe-phero--solo .ibe-phero__text{max-width:42em}

@media (max-width:1080px){
  .ibe-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .ibe-nav__menu--cols{min-width:0}
}
@media (max-width:720px){
  .ibe-temas,.ibe-vantagens,.ibe-duo,.ibe-cards{grid-template-columns:minmax(0,1fr)}
  .ibe-vantagens li{border-bottom:1px solid var(--ibe-line-soft)}
  .ibe-map,.ibe-map iframe{min-height:320px}
  .ibe-cookies{left:8px;right:8px;bottom:8px}
  .ibe-cookies__btns{margin-left:0;width:100%}
  .ibe-cookies__btns .ibe-btn{flex:1 1 auto}
  .ibe-convert__btns{width:100%}
}

/* ==========================================================================
   21. GRADE ANIMADA DE FUNDO  (tradução do componente AnimatedGrid para CSS puro)
   Duas grades sobrepostas (fina + 4x) que derivam devagar, mais um brilho
   radial pulsante. Sem canvas, sem JS: só gradientes e duas keyframes.
   Uso: <div class="ibe-grade" aria-hidden="true"><span></span></div>
        dentro de um elemento com position:relative.
   Variáveis: --ibe-grade-cell, --ibe-grade-cor, --ibe-grade-acento, --ibe-grade-op
   ========================================================================== */
.ibe-grade{
  --ibe-grade-cell:36px;
  --ibe-grade-major:144px;                 /* 4x a célula */
  --ibe-grade-cor:var(--ibe-line);
  --ibe-grade-acento:var(--ibe-petal-green);
  --ibe-grade-op:.7;
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 38%,transparent 80%);
          mask-image:radial-gradient(ellipse at center,#000 38%,transparent 80%);
}
.ibe-grade::before,.ibe-grade::after{content:"";position:absolute;inset:calc(var(--ibe-grade-major) * -1)}
.ibe-grade::before{
  background-image:
    linear-gradient(to right,var(--ibe-grade-cor) 1px,transparent 1px),
    linear-gradient(to bottom,var(--ibe-grade-cor) 1px,transparent 1px);
  background-size:var(--ibe-grade-cell) var(--ibe-grade-cell);
  opacity:calc(var(--ibe-grade-op) * .6);
  animation:ibe-grade-drift 26s linear infinite;
  will-change:background-position;
}
.ibe-grade::after{
  background-image:
    linear-gradient(to right,var(--ibe-grade-acento) 1.2px,transparent 1.2px),
    linear-gradient(to bottom,var(--ibe-grade-acento) 1.2px,transparent 1.2px);
  background-size:var(--ibe-grade-major) var(--ibe-grade-major);
  opacity:calc(var(--ibe-grade-op) * .38);
  animation:ibe-grade-drift 26s linear infinite;
  will-change:background-position;
}
.ibe-grade > span{
  position:absolute;inset:0;
  background:radial-gradient(45% 45% at 50% 42%,color-mix(in oklab,var(--ibe-grade-acento) 22%,transparent),transparent 70%);
  animation:ibe-grade-pulse 9s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes ibe-grade-drift{
  from{background-position:0 0,0 0}
  to{background-position:var(--ibe-grade-major) var(--ibe-grade-major),var(--ibe-grade-major) var(--ibe-grade-major)}
}
@keyframes ibe-grade-pulse{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.12);opacity:1}
}
/* Sobre fundo escuro */
.ibe-dark .ibe-grade,.ibe-grade--escura{--ibe-grade-cor:rgba(255,255,255,.10);--ibe-grade-acento:var(--ibe-lime);--ibe-grade-op:.32}
/* O conteúdo da seção fica acima da grade */
.ibe-grade ~ *{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .ibe-grade::before,.ibe-grade::after,.ibe-grade > span{animation:none}
}
/* Alto contraste do Windows: gradientes somem, então desenha uma grade estática */
@media (forced-colors:active){
  .ibe-grade::before,.ibe-grade > span{display:none}
  .ibe-grade::after{
    forced-color-adjust:none;animation:none;opacity:.3;
    background-image:
      linear-gradient(to right,CanvasText 1px,transparent 1px),
      linear-gradient(to bottom,CanvasText 1px,transparent 1px);
  }
}

/* ==========================================================================
   22. DEPOIMENTOS  (tradução do componente TestimonialsColumn para CSS puro)
   Três colunas que sobem em loop contínuo, com máscara nas pontas.
   WCAG 2.2.2: o movimento para no hover, no foco e no botão "Pausar".
   ========================================================================== */
.ibe-depo{position:relative;z-index:2;background:var(--ibe-bg);padding-block:clamp(56px,6vw,96px);overflow:hidden}
.ibe-depo__head{max-width:640px;margin-inline:auto;text-align:center}
.ibe-depo__tag{display:inline-block;padding:5px 14px;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);background:#fff;font-size:13px;color:var(--ibe-muted)}
.ibe-depo__head h2{margin-top:18px;font-size:var(--ibe-h2);font-weight:400;letter-spacing:var(--ibe-track);line-height:1.12;text-wrap:balance}
.ibe-depo__head > p{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--ibe-muted)}
.ibe-depo__aviso{display:inline-grid;grid-template-columns:20px 1fr;gap:10px;margin-top:18px;padding:12px 16px;text-align:left;
  background:var(--ibe-surface);border-radius:var(--ibe-radius);font-size:14.5px;line-height:1.5;color:var(--ibe-prose)}
.ibe-depo__aviso svg{width:18px;height:18px;margin-top:2px;color:var(--ibe-navy)}

.ibe-depo__cols{display:flex;justify-content:center;gap:22px;margin-top:clamp(28px,3vw,44px);max-height:720px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.ibe-depo__col{flex:0 0 clamp(280px,30%,340px)}
.ibe-depo__track{display:flex;flex-direction:column;gap:22px;animation:ibe-depo-sobe var(--ibe-depo-dur,26s) linear infinite}
.ibe-depo__cols:hover .ibe-depo__track,
.ibe-depo__cols:focus-within .ibe-depo__track,
.ibe-depo.is-pausado .ibe-depo__track{animation-play-state:paused}
@keyframes ibe-depo-sobe{to{transform:translateY(-50%)}}

.ibe-card-depo{padding:28px;background:#fff;border:1px solid var(--ibe-line);border-radius:14px;box-shadow:0 18px 40px -30px rgba(1,46,95,.5)}
.ibe-card-depo p{font-size:16px;line-height:1.62;color:var(--ibe-prose)}
.ibe-card-depo__quem{display:flex;align-items:center;gap:12px;margin-top:20px}
.ibe-card-depo__av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ibe-bg);border:1px solid var(--ibe-line)}
.ibe-card-depo__av img{width:24px;height:24px}
.ibe-card-depo__quem b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em}
.ibe-card-depo__quem small{display:block;font-size:13.5px;color:var(--ibe-muted)}
.ibe-depo__ctrl{display:flex;justify-content:center;margin-top:26px}

@media (max-width:960px){ .ibe-depo__col:nth-child(3){display:none} }
@media (max-width:720px){
  .ibe-depo__col:nth-child(2){display:none}
  .ibe-depo__col{flex:1 1 100%}
  .ibe-depo__cols{max-height:560px}
}
@media (prefers-reduced-motion:reduce){
  .ibe-depo__track{animation:none}
  .ibe-depo__cols{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ibe-depo__track > *:nth-child(n+4){display:none}   /* sem loop, mostra só o primeiro conjunto */
}

/* ==========================================================================
   23. GALERIA DE CAMINHOS  (cuidado integrado e blocos que levam a outras páginas)
   ========================================================================== */
.ibe-galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ibe-galeria--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ibe-gal{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;padding:20px;
  border:1px solid var(--ibe-line);border-radius:var(--ibe-radius);overflow:hidden;background:var(--ibe-surface);isolation:isolate;
  transition:border-color .25s,transform .25s var(--ibe-ease),box-shadow .25s}
.ibe-gal::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(145deg,var(--ibe-gal-a,#E6F1F8),var(--ibe-gal-b,#FBF3E4));transition:transform .5s var(--ibe-ease)}
.ibe-gal::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(255,255,255,.96) 32%,rgba(255,255,255,.55) 62%,rgba(255,255,255,.1) 100%)}
a.ibe-gal:hover{border-color:var(--ibe-green-edge);transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(1,46,95,.55)}
a.ibe-gal:hover::before{transform:scale(1.08)}
.ibe-gal__ico{position:absolute;top:18px;left:20px;width:46px;height:46px;border-radius:var(--ibe-radius-sm);background:#fff;
  border:1px solid var(--ibe-line);display:grid;place-items:center}
.ibe-gal__ico img{width:28px;height:28px;object-fit:contain}
.ibe-gal__ico svg{width:24px;height:24px;color:var(--ibe-navy)}
.ibe-gal__tipo{position:absolute;top:26px;right:20px;font-family:var(--ibe-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ibe-muted)}
.ibe-gal h3{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.ibe-gal p{margin-top:7px;font-size:15px;line-height:1.5;color:var(--ibe-muted)}
.ibe-gal__go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:14.5px;font-weight:500;color:var(--ibe-ink)}
.ibe-gal__go svg{width:11px;height:11px;transition:transform .2s}
a.ibe-gal:hover .ibe-gal__go svg{transform:translateX(3px)}
.ibe-gal--off{opacity:.92}
.ibe-gal--off .ibe-gal__go{color:var(--ibe-muted)}
@media (max-width:960px){ .ibe-galeria{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:720px){ .ibe-galeria,.ibe-galeria--2{grid-template-columns:minmax(0,1fr)} }

/* ==========================================================================
   24. VITRINE DE CAMINHOS (carrossel de cards altos)
   Referência enviada pelo cliente: cards com imagem, rótulo em cima, título
   grande e seta no canto. Mesma mecânica do carrossel da Home.
   ========================================================================== */
.ibe-vitrine{position:relative}
.ibe-vitrine__rail{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-block:4px;margin-inline:-4px;padding-inline:4px;
}
.ibe-vitrine__rail::-webkit-scrollbar{display:none}
.ibe-vcard{
  position:relative;flex:0 0 clamp(240px,74vw,272px);scroll-snap-align:start;
  min-height:390px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  border-radius:14px;border:1px solid var(--ibe-line);background:var(--ibe-surface);
  padding:22px 22px 24px;color:#fff;
  transition:transform .3s var(--ibe-ease),box-shadow .3s var(--ibe-ease),border-color .2s;
}
.ibe-vcard__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ibe-ease)}
.ibe-vcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(1,26,58,.88) 0%,rgba(1,26,58,.62) 38%,rgba(1,26,58,.32) 70%,rgba(1,26,58,.5) 100%)}
a.ibe-vcard:hover{transform:translateY(-4px);box-shadow:0 26px 46px -30px rgba(1,46,95,.6);border-color:var(--ibe-green-edge)}
a.ibe-vcard:hover .ibe-vcard__bg{transform:scale(1.06)}
.ibe-vcard__tag{font-size:13px;color:rgba(255,255,255,.88)}
.ibe-vcard h3{margin-top:12px;font-size:25px;font-weight:500;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.ibe-vcard p{margin-top:10px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.88);max-width:20em}
.ibe-vcard__seta{margin-top:auto;align-self:flex-end;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ibe-ink);
  display:grid;place-items:center;transition:transform .2s var(--ibe-ease)}
.ibe-vcard__seta svg{width:14px;height:14px}
a.ibe-vcard:hover .ibe-vcard__seta{transform:translate(2px,-2px)}
.ibe-vcard--off{color:var(--ibe-ink);border-style:dashed}
.ibe-vcard--off::after{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.8) 60%,rgba(255,255,255,.92) 100%)}
.ibe-vcard--off .ibe-vcard__tag,.ibe-vcard--off p{color:var(--ibe-muted)}
.ibe-vcard--off .ibe-vcard__seta{background:var(--ibe-surface);color:var(--ibe-muted);font-size:12.5px;width:auto;height:36px;border-radius:18px;padding:0 14px}

.ibe-vitrine__ctrl{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.ibe-vitrine__ctrl button{width:var(--ibe-tap);height:var(--ibe-tap);border-radius:50%;border:1px solid var(--ibe-line);background:#fff;
  color:var(--ibe-ink);display:grid;place-items:center;transition:border-color .2s,background .2s}
.ibe-vitrine__ctrl button:hover:not(:disabled){border-color:var(--ibe-faint)}
.ibe-vitrine__ctrl button:disabled{opacity:.4;cursor:default}
.ibe-vitrine__ctrl svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){
  .ibe-vitrine__rail{scroll-behavior:auto}
  .ibe-vcard,.ibe-vcard__bg{transition:none}
}

/* ==========================================================================
   25. ARTIGO DO BLOG e listagem por categoria
   ========================================================================== */
.ibe-artigo{padding-bottom:clamp(40px,5vw,72px)}
.ibe-artigo__wrap{max-width:760px}
.ibe-artigo__head{margin-top:8px}
.ibe-artigo .ibe-eyebrow a{display:inline-flex;align-items:center;min-height:24px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ibe-line)}
.ibe-artigo .ibe-eyebrow a:hover{color:var(--ibe-ink);text-decoration-color:currentColor}
.ibe-artigo__titulo{margin-top:6px;font-size:clamp(2rem,1.3rem + 2.2vw,2.9rem);font-weight:400;
  letter-spacing:var(--ibe-track-tight);line-height:1.08;text-wrap:balance}
.ibe-artigo__meta{margin-top:14px;font-size:14.5px;color:var(--ibe-muted)}
.ibe-artigo__exemplo{display:grid;grid-template-columns:20px 1fr;gap:12px;margin-top:20px;padding:14px 16px;
  background:#FFFCEF;border:1px solid #EDE2B9;border-radius:var(--ibe-radius);font-size:14.5px;line-height:1.55;color:var(--ibe-prose)}
.ibe-artigo__exemplo svg{width:18px;height:18px;margin-top:2px;color:var(--ibe-ink)}
.ibe-artigo .ibe-figure{margin-top:28px}
.ibe-artigo__corpo{display:grid;gap:22px;margin-top:32px}
.ibe-artigo__lead{font-size:19px;line-height:1.6;color:var(--ibe-ink)}
.ibe-artigo__h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem);font-weight:400;letter-spacing:var(--ibe-track);
  line-height:1.15;margin-top:10px}
.ibe-artigo__nota{display:grid;grid-template-columns:20px 1fr;gap:12px;margin-top:34px;padding-top:20px;
  border-top:1px solid var(--ibe-line);font-size:14.5px;line-height:1.6;color:var(--ibe-muted)}
.ibe-artigo__nota svg{width:18px;height:18px;margin-top:2px}
.ibe-artigo__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

.ibe-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ibe-cat{padding:22px;background:#fff;border:1px solid var(--ibe-line);border-radius:var(--ibe-radius)}
.ibe-cat h3{font-size:17px;font-weight:500;letter-spacing:-.02em;padding-bottom:12px;border-bottom:1px solid var(--ibe-line-soft)}
.ibe-cat h3 a{display:inline-flex;align-items:center;min-height:24px}
.ibe-cat h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.ibe-cat__lista{margin-top:10px;display:grid}
.ibe-cat__lista a{display:flex;align-items:center;min-height:var(--ibe-tap);padding:6px 0;font-size:15px;
  line-height:1.4;color:var(--ibe-prose);border-bottom:1px solid var(--ibe-line-soft)}
.ibe-cat__lista li:last-child a{border-bottom:0}
.ibe-cat__lista a:hover{color:var(--ibe-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1080px){ .ibe-cats{grid-template-columns:1fr 1fr} }
@media (max-width:720px){
  .ibe-cats{grid-template-columns:minmax(0,1fr)}
  .ibe-artigo__cta .ibe-btn{flex:1 1 100%}
}