/* Ajustes visuais do clone, carregados depois do CSS original. */

/* Paginas legais (DPA, privacidade): URLs e termos longos estouravam a largura no mobile */
.container-lg > .min-w-0.flex-1 :is(p, li, a, td, th) {
  overflow-wrap: anywhere;
}

/* Tema Floresta e Menta */

/* Acao principal na cor da marca (no original, botoes bg-slate-950 quase pretos) */
.group\/button[class~="bg-slate-950"] { background-color: #12705F !important; border-color: #12705F !important; }
.group\/button[class~="bg-slate-950"]:hover { background-color: #0E5C4E !important; border-color: #0E5C4E !important; }
/* No mobile o original usa !important dentro de @layer utilities; !important em camada anterior (base) vence */
@layer base {
  @media not all and (width>=64rem) {
    .nav-mobile\:bg-slate-950\! { background-color: #12705F !important; border-color: #12705F !important; }
    .nav-mobile\:hover\:bg-slate-800\!:hover { background-color: #0E5C4E !important; border-color: #0E5C4E !important; }
  }
}

/* Selos de destaque ("Popular", "Vagas limitadas") em damasco */
.rounded-\[8px\].bg-brand-blue.uppercase { background-color: #FFD3A6 !important; color: #16332E !important; }

/* Formularios HubSpot chegam de fora ja estilizados com a cor da conta original */
.hsfc-Button { background-color: #12705F !important; border-color: #12705F !important; }
.hsfc-Button:hover { background-color: #0E5C4E !important; border-color: #0E5C4E !important; }

/* Fonte da marca (self-hosted; o CSS original passa a apontar para ela no lugar da Roboto) */
@font-face { font-family: "Onest"; src: url(/_brand/fonts/onest-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url(/_brand/fonts/onest-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Link "Entrar" para a area do cliente. Em @layer base para o nav-mobile:hidden (utilities) continuar vencendo */
@layer base {
  .alozi-login { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 10px;
    font-size: 14px; color: #16332E; text-decoration: none; white-space: nowrap; transition: background-color .15s; }
  .alozi-login:hover { background-color: #F3F7F4; }
}
.alozi-mobile-ctas { gap: 12px; }
.alozi-login-mobile { display: flex; align-items: center; justify-content: center; height: 44px;
  font-size: 16px; font-weight: 500; color: #16332E; text-decoration: none; }

/* Selecao de texto na paleta */
::selection { background-color: #B5F5DC; color: #16332E; }

/* Acessibilidade (problemas herdados do original) */
/* Subtitulos brancos translucidos sobre a pilula verde dos videos: 70% dava 3,8:1, 88% da 5:1 */
.text-white\/70, .text-white\/60 { color: rgb(255 255 255 / .88); }
/* Texto de 10px (aviso legal do formulario de ligacao) sobe para 12px; selos em caixa alta para 11px */
.text-\[10px\] { font-size: 12px; }
.text-\[10px\].uppercase { font-size: 11px; }
/* Etiquetas do changelog (texto -700 sobre fundo -500/20) ficavam entre 4,3 e 4,45:1 */
.text-brand-blue.bg-brand-blue\/20 { color: #0E5C4E; }
.text-amber-700.bg-amber-500\/20 { color: #8A4D0E; }
.text-emerald-700.bg-emerald-500\/20 { color: #05603F; }

/* Conteudo do original oculto: prova social, depoimentos, logos de clientes, equipe, contatos */
div:has(> div > img[src*="clients-badge-avatar"]),
div:has(> div.overflow-hidden > .animate-marquee),
section[data-ph-capture="section-customer-reviews"],
section:has(.swiper figure figcaption),
section:has(a[href^="/pt-br/casos-de-sucesso/"]),
span:has(> span > svg.lucide-star),
.trustpilot-widget,
img[src*="popup-avatar"],
img[src*="/images/experts/"],
img[src*="/images/team/"],
img[src$="/images/steve.webp"],
img[src$="/images/max.webp"],
img[src$="/images/cri.webp"],
a[href^="tel:"],
a[href*="instagram.com/fonio"],
a[href*="linkedin.com/company/fonio"],
a[href*="youtube.com/@fonio"],
a[href*="trustpilot.com"],
a[href*="g.page/"],
span:has(> span[class*="leaves_left"]),
a[href*="fonio.info"],
a[href*="fonio.ai"],
footer div:has(> h3 + ul > li:only-child > a[href*="fonio"]),
div:has(> a[href$="/careers"] > img),
a[href$="/careers"],
footer div:has(> h3 + ul):not(:has(li > a[href^="/pt-br/"]:not([href^="/pt-br/news-cool-stuff"]):not([href^="/pt-br/casos-de-sucesso"]):not([href^="/pt-br/careers"]):not([href^="/pt-br/press"]):not([href^="/pt-br/webinars"]):not([href^="/pt-br/changelog"]):not([href^="/pt-br/blog-tags"]))),
img[src*="steve.webp"],
img[src*="max.webp"],
img[src*="cri.webp"],
span:has(> img[src*="/images/experts/"]) > span[aria-hidden="true"] { display: none !important; }
/* Links para paginas removidas */
a[href^="/pt-br/news-cool-stuff"],
a[href^="/pt-br/casos-de-sucesso"],
a[href^="/pt-br/press"],
a[href^="/pt-br/careers"],
a[href^="/pt-br/sales-academy"],
a[href^="/pt-br/webinars"],
a[href^="/pt-br/changelog"],
a[href^="/pt-br/campaign"],
a[href^="/pt-br/blog-tags"],
a[href^="/pt-br/international-calling-rates"],
a[href^="/pt-br/scale-calculator"],
a[href^="/pt-br/seja-parceiro"],
a[href^="/pt-br/dpa"],
a[href^="/pt-br/imprint"],
a[href^="/pt-br/confidentiality-at"],
a[href^="/pt-br/confidentiality-de"],
a[href^="/pt-br/swiss-addendum"],
a[href^="/pt-br/datenschutzerklarung-app"],
li:has(> a[href^="/pt-br/news-cool-stuff"]),
li:has(> a[href^="/pt-br/casos-de-sucesso"]),
li:has(> a[href^="/pt-br/press"]),
li:has(> a[href^="/pt-br/careers"]),
li:has(> a[href^="/pt-br/sales-academy"]),
li:has(> a[href^="/pt-br/webinars"]),
li:has(> a[href^="/pt-br/changelog"]),
li:has(> a[href^="/pt-br/campaign"]),
li:has(> a[href^="/pt-br/blog-tags"]),
li:has(> a[href^="/pt-br/international-calling-rates"]),
li:has(> a[href^="/pt-br/scale-calculator"]),
li:has(> a[href^="/pt-br/seja-parceiro"]),
li:has(> a[href^="/pt-br/dpa"]),
li:has(> a[href^="/pt-br/imprint"]),
li:has(> a[href^="/pt-br/confidentiality-at"]),
li:has(> a[href^="/pt-br/confidentiality-de"]),
li:has(> a[href^="/pt-br/swiss-addendum"]),
li:has(> a[href^="/pt-br/datenschutzerklarung-app"]) { display: none !important; }
/* Substitutos do que foi oculto (ex.: CTA do hero mobile no lugar do telefone do original) */
a[script-data="create-ai-button"] { display: inline-flex !important; }

/* Condicao de estreia: preco cheio riscado, preco com desconto e o que vale depois */
[data-price-group] .alozi-y { display: none; }
[data-price-group][data-period="yearly"] .alozi-y { display: inline; }
[data-price-group][data-period="yearly"] .alozi-m { display: none; }
.alozi-estreia-tag { order: -1; flex-basis: 100%; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #12705F; }
.alozi-estreia-de { align-self: baseline; font-size: 18px; color: #5F6E68; text-decoration-thickness: 1.5px; }
.alozi-estreia-nota { margin: -20px auto 24px; max-width: 46rem; text-align: center; font-size: 14px; color: #4C5D58; text-wrap: pretty; }
.alozi-estreia-faixa { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; margin: 4px 0 0;
  padding: 8px 16px; border-radius: 999px; background: #B5F5DC; color: #16332E; font-size: 14px; line-height: 1.4; }
.alozi-estreia-faixa b { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #12705F; }
th .alozi-estreia-de, [role="columnheader"] .alozi-estreia-de { font-size: inherit; margin-right: 4px; }

/* Bloco "A conta do atendimento" */
.eloisa-custo .ec-wrap { max-width: 960px; margin: 0 auto; display: grid; gap: 20px; }
.eloisa-custo .ec-title { margin: 0; text-align: center; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: #16332E; text-wrap: balance; }
.eloisa-custo .ec-lead { margin: 0 auto 8px; max-width: 40rem; text-align: center; font-size: 18px; line-height: 1.5; color: #4C5D58; text-wrap: pretty; }
.eloisa-custo .ec-table { border: 1px solid #D5DFD8; border-radius: 16px; overflow: hidden; background: #fff; }
.eloisa-custo .ec-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-top: 1px solid #E4ECE6; }
.eloisa-custo .ec-row:first-child { border-top: 0; }
.eloisa-custo .ec-row > span { padding: 14px 18px; font-size: 15px; line-height: 1.45; color: #16332E; }
.eloisa-custo .ec-k { font-weight: 500; }
.eloisa-custo .ec-p { color: #4C5D58; }
.eloisa-custo .ec-e { background: #F1FBF6; font-weight: 500; }
.eloisa-custo .ec-head > span { font-size: 14px; font-weight: 600; padding-block: 12px; color: #4C5D58; }
.eloisa-custo .ec-head .ec-e { color: #12705F; }
.eloisa-custo small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: #5F6E68; }
.eloisa-custo .ec-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px;
  border-radius: 16px; background: #16332E; color: #EAF3EE; }
.eloisa-custo .ec-save p { margin: 0; display: grid; gap: 2px; }
.eloisa-custo .ec-save strong { font-size: 24px; font-weight: 600; color: #B5F5DC; letter-spacing: -0.01em; }
.eloisa-custo .ec-save span { font-size: 14px; color: #C4D8CF; }
.eloisa-custo .ec-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 10px; background: #B5F5DC;
  color: #16332E; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.eloisa-custo .ec-cta:hover { background: #FFFFFF; }
.eloisa-custo .ec-cta:focus-visible { outline: 2px solid #B5F5DC; outline-offset: 3px; }
.eloisa-custo .ec-note { margin: 0; font-size: 12px; line-height: 1.5; color: #5F6E68; max-width: 60rem; }
@media (max-width: 640px) {
  .eloisa-custo .ec-head { display: none; }
  .eloisa-custo .ec-row { grid-template-columns: 1fr 1fr; }
  .eloisa-custo .ec-k { grid-column: 1 / -1; padding-bottom: 0 !important; }
  .eloisa-custo .ec-p::before, .eloisa-custo .ec-e::before { content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 600; color: #5F6E68; }
  .eloisa-custo .ec-e::before { color: #12705F; }
}

/* ---------- Acabamento visual (nov. 2026) ---------- */
:root { --hi-brand: #12705F; --hi-brand-hover: #0E5C4E; --hi-ink: #16332E; --hi-mint: #B5F5DC; --hi-warm: #FFD3A6;
  --hi-line: #E4ECE6; --hi-line-strong: #D5DFD8; --hi-ink-2: #4C5D58; --hi-ink-3: #5F6E68;
  --hi-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hi-shadow-raise: 0 2px 4px rgba(22, 51, 46, .04), 0 12px 28px -14px rgba(22, 51, 46, .22);
  --hi-shadow-pop: 0 4px 10px -4px rgba(22, 51, 46, .1), 0 24px 52px -22px rgba(22, 51, 46, .34); }

/* Superficies do navegador na paleta: cursor de texto, foco, barras de rolagem, controles nativos */
html { scrollbar-color: var(--hi-line-strong) transparent; accent-color: var(--hi-brand); }
body { caret-color: var(--hi-brand); text-rendering: optimizeLegibility; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: var(--hi-line-strong) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--hi-ink-3); }
::-webkit-scrollbar-track { background: transparent; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--hi-brand); outline-offset: 2px; }
a { text-underline-offset: 3px; }

/* Cabecalho: vidro claro sobre o conteudo que passa por baixo */
header.sticky.top-0 { background-color: rgb(255 255 255 / .8) !important; backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); }

/* Botoes: resposta ao toque, relevo no principal e foco visivel */
.group\/button { transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s, transform .2s var(--hi-ease) !important; }
.group\/button:active { transform: scale(.975); }
.group\/button[class~="bg-slate-950"], .nav-mobile\:bg-slate-950\!, .hsfc-Button { box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgba(22, 51, 46, .2); }
.group\/button[class~="bg-slate-950"]:hover, .hsfc-Button:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 6px 16px -6px rgba(18, 112, 95, .55); }
.group\/button[class*="border-border"]:hover, .group\/button[class~="bg-white"]:hover { border-color: var(--hi-line-strong) !important; box-shadow: 0 1px 2px rgba(22, 51, 46, .06); }
.group\/button svg { transition: transform .25s var(--hi-ease); }
.group\/button:hover svg[class*="arrow"], .group\/button:hover svg.lucide-arrow-right, .group\/button:hover svg.lucide-arrow-up-right { transform: translateX(2px); }

/* Titulos: mais presenca no topo e espacamento entre letras mais justo nos grandes */
header.min-h-\[95vh\] h2.font-heading, main header > .container-md h2.font-heading { max-width: 15em !important; font-size: clamp(38px, 4.4vw, 62px) !important; line-height: 1.05 !important; letter-spacing: -0.035em !important; }
h2.font-heading { letter-spacing: -0.025em; }
h2.font-heading, h3.font-heading { text-wrap: balance; }

/* Cartoes que sao links ganham relevo ao passar o mouse; os estaticos ficam parados */
a[class*="rounded"][class*="border"] { transition: border-color .2s, box-shadow .3s, transform .3s var(--hi-ease); }
a[class*="rounded"][class*="border"]:hover { border-color: var(--hi-line-strong); box-shadow: var(--hi-shadow-raise); transform: translateY(-2px); }

/* Duvidas comuns: a linha inteira reage */
[data-slot="accordion-trigger"] { transition: background-color .15s, color .15s; }
[data-slot="accordion-trigger"]:hover { background-color: #F3F7F4; text-decoration: none !important; }
[data-slot="accordion-trigger"] svg { transition: transform .3s var(--hi-ease); }

/* Toque: links do rodape e "Mostrar mais" com area confortavel */
@media (pointer: coarse) {
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
  button[class*="underline"], a[class*="underline"] { min-height: 44px; }
}

/* Secoes entram ao rolar (navegadores com animacao por rolagem; nos outros, ficam paradas e visiveis) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main section > div, .eloisa-custo .ec-wrap { animation: hi-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
    @keyframes hi-reveal { from { opacity: .3; transform: translateY(28px); } }
  }
}

/* Exemplo de atendimento no topo */
/* o topo deixa de empurrar o exemplo para o fim da tela (os itens ocultos da referencia tambem contavam no espacamento) */
header.min-h-\[95vh\]:has(.hero-call) { gap: 0; justify-content: center; }
.hero-call { position: relative; z-index: 1; width: 100%; max-width: 560px; margin: 56px auto 0; }
@media (max-width: 639px) { .hero-call { margin-top: 40px; } }
.hc-card { padding: 16px 18px 14px; border: 1px solid var(--hi-line); border-radius: 20px; background: rgb(255 255 255 / .78);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--hi-shadow-pop); text-align: left;
  animation: hc-in .8s var(--hi-ease) both .2s; }
.hc-head { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--hi-ink); }
.hc-head b { font-weight: 500; }
.hc-ic { width: 28px; height: 28px; flex: none; padding: 6px; border-radius: 50%; background: var(--hi-brand); color: #fff; }
.hc-time { margin-left: auto; font-size: 13px; color: var(--hi-ink-3); font-variant-numeric: tabular-nums; }
.hc-wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.hc-wave i { display: block; width: 3px; height: 100%; border-radius: 3px; background: var(--hi-brand); transform-origin: center; animation: hc-wave 1s ease-in-out infinite alternate; }
.hc-wave i:nth-child(2) { animation-delay: -.6s; background: #2E9C84; }
.hc-wave i:nth-child(3) { animation-delay: -.3s; background: #E08A3C; }
.hc-wave i:nth-child(4) { animation-delay: -.8s; }
.hc-wave i:nth-child(5) { animation-delay: -.45s; background: #2E9C84; }
.hc-lines { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.hc-line { justify-self: start; max-width: 86%; padding: 9px 13px; border-radius: 4px 14px 14px 14px; background: #F1F5F2; font-size: 15px; line-height: 1.45; color: var(--hi-ink);
  animation: hc-line .6s var(--hi-ease) both calc(.9s + var(--i) * 1.1s); }
.hc-line.hc-ai { justify-self: end; border-radius: 14px 4px 14px 14px; background: #E2F7EE; }
.hc-who { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 500; color: var(--hi-ink-3); }
.hc-ai .hc-who { color: var(--hi-brand); }
.hc-done { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--hi-line); font-size: 13px; color: var(--hi-ink-2);
  animation: hc-line .6s var(--hi-ease) both calc(.9s + var(--i) * 1.1s); }
.hc-ok { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; background: var(--hi-mint); color: var(--hi-brand); }
.hc-note { margin-top: 8px; font-size: 12px; color: var(--hi-ink-3); text-align: center; }
@keyframes hc-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes hc-line { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
@keyframes hc-wave { from { transform: scaleY(.3); } }
@media (max-width: 639px) { .hc-line { font-size: 14px; } .hc-card { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .hc-card, .hc-line, .hc-done { animation: none; } .hc-wave i { animation: none; transform: scaleY(.6); } }