/* VetSist — site institucional. Cores e fontes do Manual da Marca VetSist. */
:root {
    --verde: #2BB39A;
    --azul: #305AA6;
    --verde-clinico: #17796A;
    --verde-clinico-escuro: #12645a;
    --marinho: #132A3A;
    --marinho-2: #1b3a4f;
    --menta: #E7F6F2;
    --nevoa: #F4F7F7;
    --branco: #fff;
    --texto-suave: #4a5d6a;
    --borda: #dce6e6;
    --triagem-vermelho: #D93A3A;
    --triagem-laranja: #F08A24;
    --triagem-amarelo: #F2C230;
    --triagem-verde: #3E9E4F;
    --triagem-azul: #3A7BD5;
    --fonte-titulo: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --raio: 18px;
    --sombra: 0 12px 32px rgba(19, 42, 58, .08);
    --sombra-forte: 0 30px 70px rgba(19, 42, 58, .18);
    --gradiente: linear-gradient(120deg, var(--verde) 0%, var(--azul) 100%);
    --suave: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--fonte-texto); font-size: 1rem; line-height: 1.6; color: var(--marinho); background: var(--branco); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 800; line-height: 1.12; margin: 0 0 .6em; letter-spacing: -.015em; }
h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: 900; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--azul); }
img, svg { display: block; max-width: 100%; }
.icone { width: 1.15em; height: 1.15em; flex: none; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; position: relative; }
@media (min-width: 640px) { .container { padding: 0 24px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; background: var(--marinho); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.pular:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.centro { text-align: center; }
[hidden] { display: none !important; }

/* Revelar ao rolar (só com JS ativo) */
.js [data-revelar] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--suave), transform .8s var(--suave); transition-delay: var(--atraso, 0ms); }
.js [data-revelar].visivel { opacity: 1; transform: none; }
.hero-texto [data-revelar]:nth-child(2) { --atraso: 80ms; }
.hero-texto [data-revelar]:nth-child(3) { --atraso: 160ms; }
.hero-texto [data-revelar]:nth-child(4) { --atraso: 240ms; }
.hero-texto [data-revelar]:nth-child(5) { --atraso: 320ms; }
.hero-visual[data-revelar] { --atraso: 200ms; }

/* Barra de progresso de leitura */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--gradiente); transform-origin: 0 50%; transform: scaleX(0); }

/* Logo */
/* Logo: arquivos do Manual da Marca (assets/img/logo-vetsist*.png) */
.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.logo img { display: block; height: 44px; width: auto; }
.rodape .logo img { height: 48px; }
img.logo-mini { display: block; width: 24px; height: auto; }

/* Botões */
.botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 13px 24px; border-radius: 12px; border: 2px solid var(--verde-clinico); background: var(--verde-clinico); color: #fff; font: 600 1rem var(--fonte-texto); text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: background .2s, border-color .2s, transform .2s var(--suave), box-shadow .2s; }
.botao:hover { background: var(--verde-clinico-escuro); border-color: var(--verde-clinico-escuro); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23, 121, 106, .28); }
.botao:active { transform: translateY(0); }
.botao .icone { transition: transform .2s var(--suave); }
.botao:hover .icone:last-child { transform: translateX(3px); }
.botao-brilho::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-100%); animation: brilho 3.6s ease-in-out infinite; }
@keyframes brilho { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.botao-contorno { background: transparent; color: var(--verde-clinico); }
.botao-contorno:hover { background: var(--menta); color: var(--verde-clinico-escuro); box-shadow: none; }
.botao-claro { background: #fff; border-color: #fff; color: var(--verde-clinico); }
.botao-claro:hover { background: var(--menta); border-color: var(--menta); color: var(--verde-clinico-escuro); }
.botao-contorno-claro { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.botao-contorno-claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; box-shadow: none; }
.botao-pequeno { padding: 9px 16px; font-size: .95rem; border-radius: 10px; }
.botao-largo { width: 100%; }
.botao[hidden] { display: none; }
.link { font-weight: 600; color: var(--verde-clinico); }

/* Selos */
.selo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 5px 13px; border-radius: 999px; background: var(--menta); color: var(--verde-clinico); font-size: .85rem; font-weight: 600; }
.selo-vidro { background: rgba(255, 255, 255, .7); border: 1px solid rgba(23, 121, 106, .18); backdrop-filter: blur(8px); }
.selo-claro { background: rgba(43, 179, 154, .16); color: #7fe0cc; }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(43, 179, 154, .6); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 9px rgba(43, 179, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 179, 154, 0); } }
.texto-gradiente { background: linear-gradient(100deg, var(--verde-clinico), var(--verde), var(--azul), var(--verde-clinico)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: deslizar 8s linear infinite; }
@keyframes deslizar { to { background-position: 300% 0; } }

/* Fundos animados */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: flutuar 18s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { width: 520px; height: 520px; background: #9fe6d6; top: -180px; right: -80px; }
.aurora span:nth-child(2) { width: 420px; height: 420px; background: #b9cdf1; bottom: -200px; left: -120px; animation-delay: -6s; }
.aurora span:nth-child(3) { width: 300px; height: 300px; background: #c9f1e7; top: 30%; left: 40%; animation-delay: -12s; }
.aurora-suave span { opacity: .4; }
@keyframes flutuar { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } 100% { transform: translate(-30px, 50px) scale(.95); } }
.grade-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(19, 42, 58, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 42, 58, .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .72); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s; }
.topo.rolado { background: rgba(255, 255, 255, .9); border-color: var(--borda); box-shadow: 0 6px 24px rgba(19, 42, 58, .06); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; height: 72px; transition: height .3s; }
.topo.rolado .topo-linha { height: 62px; }
.menu { display: flex; align-items: center; gap: 6px; }
.menu a { position: relative; padding: 8px 12px; border-radius: 10px; color: var(--marinho); font-weight: 500; text-decoration: none; transition: color .2s, background .2s; }
.menu a:not(.botao):hover { color: var(--verde-clinico); background: var(--menta); }
.menu a[aria-current="page"]:not(.botao) { color: var(--verde-clinico); }
.menu a[aria-current="page"]:not(.botao)::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gradiente); }
.menu a.botao { color: #fff; margin-left: 8px; padding: 9px 16px; }
.menu-entrar { margin-left: 6px; }
.menu-botao { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; border-radius: 10px; }
.menu-icone, .menu-icone::before, .menu-icone::after { display: block; width: 22px; height: 2px; margin: 0 auto; background: var(--marinho); border-radius: 2px; position: relative; transition: transform .25s var(--suave), background .2s; }
.menu-icone::before, .menu-icone::after { content: ''; position: absolute; left: 0; }
.menu-icone::before { top: -7px; }
.menu-icone::after { top: 7px; }
.menu-botao[aria-expanded="true"] .menu-icone { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-icone::before { transform: translateY(7px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-icone::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 960px) {
    .menu-botao { display: block; }
    .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px; background: #fff; border-bottom: 1px solid var(--borda); box-shadow: var(--sombra); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--suave), visibility .25s; }
    .menu.aberto { opacity: 1; visibility: visible; transform: none; }
    .menu a { padding: 13px 6px; border-radius: 0; border-bottom: 1px solid var(--nevoa); }
    .menu a[aria-current="page"]:not(.botao)::after { left: 0; right: auto; width: 3px; top: 12px; bottom: 12px; height: auto; }
    .menu a.botao { margin: 14px 0 0; border-bottom: 0; border-radius: 12px; padding: 13px; }
    .menu-entrar { margin-left: 0; }
}

/* Hero */
.hero { position: relative; padding: 64px 0 88px; background: linear-gradient(180deg, var(--menta) 0%, #f3fbf9 60%, var(--branco) 100%); overflow: hidden; }
.hero .container { z-index: 1; }
.hero-grade { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .hero-grade { grid-template-columns: 1.02fr .98fr; } .hero { padding: 96px 0 120px; } }
.hero-sub { font-size: 1.15rem; color: var(--texto-suave); max-width: 34em; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-garantias { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--texto-suave); font-size: .92rem; font-weight: 500; }
.hero-garantias li { display: flex; align-items: center; gap: 6px; }
.hero-garantias .icone { color: var(--verde-clinico); }

.hero-visual { position: relative; width: 100%; max-width: 560px; justify-self: center; padding: 10px 0 40px; }
/* Foto dos pets atrás da janela do sistema */
.hero-foto { position: relative; margin: 0 0 0 auto; width: 70%; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; box-shadow: var(--sombra-forte); }
.hero-foto::after { content: ''; position: absolute; right: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 6px rgba(255, 255, 255, .85); }
.hero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-visual .janela { position: relative; width: 86%; margin-top: -34%; }
.janela { background: #fff; border-radius: 18px; border: 1px solid var(--borda); box-shadow: var(--sombra-forte); overflow: hidden; transition: transform .4s var(--suave); transform-style: preserve-3d; }
.janela-barra { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--nevoa); border-bottom: 1px solid var(--borda); }
.janela-barra i { width: 10px; height: 10px; border-radius: 50%; background: #d4dede; }
.janela-barra i:nth-child(1) { background: #f0a39f; } .janela-barra i:nth-child(2) { background: #f5d48a; } .janela-barra i:nth-child(3) { background: #9fd8b0; }
.janela-barra span { margin-left: 12px; padding: 3px 12px; border-radius: 6px; background: #fff; font-size: .75rem; color: var(--texto-suave); }
.janela-corpo { display: grid; grid-template-columns: 52px 1fr; min-height: 340px; }
.janela-menu { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; background: var(--marinho); }
.janela-menu em { width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .12); }
.janela-menu em.ativo { background: var(--verde); }
.janela-conteudo { padding: 18px; min-width: 0; }
.painel-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.painel-titulo { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.1rem; }
.painel-hora { font-size: .85rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fila li { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--nevoa); transition: transform .2s; }
.fila li:hover { transform: translateX(3px); }
.fila li div { min-width: 0; }
.fila strong { display: block; font-size: .95rem; }
.fila small, .cores small, .flutuante small { display: block; color: var(--texto-suave); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .cor { height: 34px; }
.tempo { font-size: .82rem; font-weight: 600; color: var(--texto-suave); font-variant-numeric: tabular-nums; transition: color .3s; }
.tempo.pulsar { color: var(--verde-clinico); }
.tempo-alerta { color: var(--triagem-vermelho); animation: piscar 1.6s ease-in-out infinite; }
@keyframes piscar { 50% { opacity: .45; } }
.flutuante { position: absolute; display: flex; gap: 10px; align-items: center; max-width: 280px; padding: 12px 14px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-radius: 14px; box-shadow: var(--sombra-forte); border: 1px solid var(--borda); animation: boiar 6s ease-in-out infinite; }
.flutuante strong { display: block; font-size: .88rem; }
.flutuante-1 { left: -28px; bottom: 0; }
.flutuante-2 { right: -22px; top: 36%; animation-delay: -3s; }
.flutuante-icone { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--menta); color: var(--verde-clinico); }
.flutuante-icone .icone { width: 18px; height: 18px; }
.flutuante-laranja { background: #fdeedd; color: #b85f0c; }
@keyframes boiar { 50% { transform: translateY(-10px); } }
@media (max-width: 640px) {
    .hero-visual { padding-bottom: 0; }
    .hero-foto { width: 100%; aspect-ratio: 5 / 4; }
    .hero-visual .janela { width: 100%; margin-top: -22%; }
    .flutuante { position: static; max-width: none; margin-top: 12px; animation: none; }
    .flutuante-2 { display: none; }
    .janela-corpo { grid-template-columns: 1fr; }
    .janela-menu { display: none; }
}

/* Cores de triagem (uso exclusivo para urgência) */
.cor { display: block; width: 8px; border-radius: 6px; }
.cor-vermelho { background: var(--triagem-vermelho); }
.cor-laranja { background: var(--triagem-laranja); }
.cor-amarelo { background: var(--triagem-amarelo); }
.cor-verde { background: var(--triagem-verde); }
.cor-azul { background: var(--triagem-azul); }

/* Faixa de módulos (letreiro) */
.faixa { overflow: hidden; padding: 18px 0; background: var(--marinho); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.faixa-trilho { display: flex; width: max-content; animation: letreiro 40s linear infinite; }
.faixa span { display: flex; align-items: center; gap: 28px; padding-right: 28px; color: #d6e2e8; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.faixa span::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
@keyframes letreiro { to { transform: translateX(-50%); } }

/* Seções */
.secao { position: relative; padding: 84px 0; }
@media (min-width: 1000px) { .secao { padding: 112px 0; } }
.secao-colada { padding-top: 56px; }
.secao-menta { background: var(--menta); }
.secao-nevoa { background: var(--nevoa); }
.secao-marinho { background: var(--marinho); color: #d6e2e8; overflow: hidden; }
.secao-marinho h2, .secao-marinho h3 { color: #fff; }
.secao-cabeca { max-width: 660px; margin-bottom: 52px; }
.secao-cabeca p:last-child { color: var(--texto-suave); font-size: 1.1rem; }
.secao-cabeca-centro { margin-left: auto; margin-right: auto; text-align: center; }
.secao-marinho .secao-cabeca p:last-child { color: #b8c9d2; }

/* Cartões com luz que segue o mouse */
.grade-cartoes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.cartao { position: relative; padding: 30px; border-radius: var(--raio); background: var(--nevoa); border: 1px solid transparent; overflow: hidden; transition: border-color .3s, transform .4s var(--suave), background .3s, box-shadow .3s; }
.cartao-luz::before, .opcao-download::before, .modulo::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 179, 154, .16), transparent 60%); }
.cartao-luz:hover::before, .opcao-download:hover::before, .modulo:hover::before { opacity: 1; }
.cartao:hover { background: #fff; border-color: var(--borda); transform: translateY(-6px); box-shadow: var(--sombra-forte); }
.js .cartao[data-revelar].visivel:hover { transform: translateY(-6px); }
.cartao p { position: relative; color: var(--texto-suave); margin: 0; }
.cartao h3 { position: relative; }
.cartao-icone { position: relative; display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 14px; background: linear-gradient(135deg, var(--menta), #d5efe9); color: var(--verde-clinico); transition: transform .4s var(--suave), background .3s, color .3s; flex: none; }
.cartao-icone .icone { width: 24px; height: 24px; }
.cartao:hover .cartao-icone { transform: rotate(-6deg) scale(1.08); background: var(--gradiente); color: #fff; }

/* Triagem */
.triagem-grade { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .triagem-grade { grid-template-columns: 1fr 1fr; gap: 80px; } }
.triagem-grade > div > p { color: var(--texto-suave); font-size: 1.05rem; }
.etapas { position: relative; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: etapa; display: grid; gap: 14px; }
.etapas li { counter-increment: etapa; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: center; opacity: .45; transition: opacity .5s; }
.etapas li::before { content: counter(etapa); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--verde-clinico); color: var(--verde-clinico); font-size: .85rem; font-weight: 700; transition: background .4s, color .4s, transform .4s var(--suave); }
.etapas li.ativa, html:not(.js) .etapas li { opacity: 1; }
.etapas li.ativa::before { background: var(--verde-clinico); color: #fff; transform: scale(1.1); }
.cores { list-style: none; margin: 0; padding: 20px; display: grid; gap: 10px; background: #fff; border-radius: 22px; box-shadow: var(--sombra-forte); }
.cores li { display: grid; grid-template-columns: 8px 1fr; gap: 14px; align-items: center; padding: 13px 15px; border-radius: 12px; background: var(--nevoa); transition: transform .3s var(--suave); }
.js .cores.visivel li:not(.cores-nota) { animation: entrarLado .6s var(--suave) both; animation-delay: var(--atraso); }
@keyframes entrarLado { from { opacity: 0; transform: translateX(20px); } }
.cores li:hover { transform: translateX(-4px); }
.cores .cor { height: 40px; }
.cores strong { display: block; }
.cores li.cores-nota { display: block; background: none; padding: 4px 4px 0; font-size: .85rem; color: var(--texto-suave); }

/* Destaque: timesheet */
.destaque-grade { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .destaque-grade { grid-template-columns: 1fr 1fr; gap: 80px; } }
.destaque-grade > div > p { color: var(--texto-suave); font-size: 1.05rem; }
.timesheet { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-forte); }
.timesheet-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.timesheet-topo strong { display: block; font-family: var(--fonte-titulo); font-size: 1.15rem; }
.timesheet-topo small { color: var(--texto-suave); }
.timesheet-total { font-family: var(--fonte-titulo); font-weight: 900; font-size: 2.2rem; background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.timesheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.timesheet li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .92rem; }
.timesheet li b { font-variant-numeric: tabular-nums; }
.timesheet li::after { content: ''; grid-column: 1 / -1; height: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--verde) var(--largura), var(--nevoa) var(--largura)); }
.js .timesheet li::after { background: var(--nevoa); background-image: linear-gradient(90deg, var(--verde), var(--azul)); background-repeat: no-repeat; background-size: 0 100%; transition: background-size 1.2s var(--suave); }
.js .visivel .timesheet li::after { background-size: var(--largura) 100%; }
.js .visivel .timesheet li:nth-child(2)::after { transition-delay: .1s; } .js .visivel .timesheet li:nth-child(3)::after { transition-delay: .2s; }
.js .visivel .timesheet li:nth-child(4)::after { transition-delay: .3s; } .js .visivel .timesheet li:nth-child(5)::after { transition-delay: .4s; }
.lista-check { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.lista-check .icone { margin-top: 3px; color: #fff; background: var(--verde-clinico); border-radius: 50%; padding: 3px; width: 20px; height: 20px; }

/* Abas */
.abas { max-width: 760px; margin: 0 auto; }
.abas-lista { display: flex; gap: 6px; padding: 6px; margin: 0 auto 24px; width: fit-content; max-width: 100%; overflow-x: auto; border-radius: 16px; background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra); }
.abas-lista button { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 11px; background: transparent; color: var(--texto-suave); font: 600 .95rem var(--fonte-texto); cursor: pointer; white-space: nowrap; transition: background .25s, color .25s; }
.abas-lista button[aria-selected="true"] { background: var(--verde-clinico); color: #fff; }
.abas-lista button:not([aria-selected="true"]):hover { background: var(--menta); color: var(--verde-clinico); }
.abas-painel { padding: 30px; border-radius: 20px; background: #fff; border: 1px solid var(--borda); animation: aparecer .45s var(--suave); }
.abas-painel .lista-check { margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 28px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }
.abas-lista-pequena { margin: 0 0 14px; box-shadow: none; }
.abas-lista-pequena button { padding: 8px 14px; font-size: .88rem; }

/* Módulos */
.grade-modulos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.modulo { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: var(--raio); border: 1px solid var(--borda); background: #fff; overflow: hidden; transition: border-color .3s, transform .4s var(--suave), box-shadow .3s; }
.modulo:hover { border-color: rgba(43, 179, 154, .5); transform: translateY(-4px); box-shadow: var(--sombra); }
.js .modulo[data-revelar].visivel:hover { transform: translateY(-4px); }
.modulo > .icone { position: relative; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--menta); color: var(--verde-clinico); }
.modulo h3 { position: relative; margin-bottom: .3em; }
.modulo p { position: relative; margin: 0; color: var(--texto-suave); font-size: .95rem; }

/* Segurança */
.brilho-fundo { position: absolute; width: 700px; height: 700px; right: -200px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 179, 154, .25), transparent 65%); animation: flutuar 20s ease-in-out infinite alternate; pointer-events: none; }
.grade-seguranca { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grade-seguranca > div { position: relative; padding: 28px; border-radius: var(--raio); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: background .3s, border-color .3s, transform .4s var(--suave); }
.grade-seguranca > div:hover { background: rgba(255, 255, 255, .07); border-color: rgba(43, 179, 154, .5); }
.grade-seguranca .icone { width: 42px; height: 42px; padding: 9px; margin-bottom: 18px; border-radius: 12px; color: #7fe0cc; background: rgba(43, 179, 154, .14); }
.grade-seguranca p { margin: 0; color: #b8c9d2; }

/* Chamada final */
.chamada { position: relative; display: grid; gap: 28px; align-items: center; padding: 56px 40px; border-radius: 28px; background: linear-gradient(125deg, var(--verde-clinico) 0%, #1c8f7d 45%, var(--azul) 100%); color: #e9f7f4; overflow: hidden; isolation: isolate; }
.chamada .aurora { z-index: -1; }
.chamada .aurora span { opacity: .3; background: #fff; }
.chamada h2 { color: #fff; }
.chamada p { margin: 0; font-size: 1.08rem; }
.chamada-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .chamada { grid-template-columns: 1.3fr auto; padding: 64px; } }
@media (max-width: 520px) { .chamada { padding: 40px 22px; } }
.chamada-compacta { margin-top: 32px; padding: 36px; grid-template-columns: 1fr; }
.chamada-compacta h2 { font-size: 1.5rem; }
@media (min-width: 900px) { .chamada-compacta { grid-template-columns: 1fr auto; } }

/* Hero das páginas internas */
.hero-interno { position: relative; padding: 72px 0 64px; background: linear-gradient(180deg, var(--menta) 0%, var(--branco) 100%); overflow: hidden; }
.hero-interno .container { z-index: 1; }
.hero-interno h1 { max-width: 15em; }
.hero-interno-curto { padding: 56px 0 24px; }
@media (min-width: 1000px) { .hero-interno { padding: 96px 0 72px; } }

/* Formulários */
.formulario { position: relative; display: grid; gap: 18px; padding: 32px; border-radius: 24px; background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-forte); }
@media (max-width: 480px) { .formulario { padding: 22px 18px; } }
.formulario-titulo { font-size: 1.5rem; margin: 0; }
.formulario label { display: grid; gap: 6px; font-weight: 500; font-size: .95rem; }
.rotulo { font-weight: 500; font-size: .95rem; }
.rotulo b { color: var(--verde-clinico); }
.formulario input[type=text], .formulario input[type=email], .formulario input[type=tel], .formulario select, .formulario textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #cfdcdc; border-radius: 12px; background: var(--nevoa); color: var(--marinho); font: 400 1rem var(--fonte-texto); transition: border-color .2s, box-shadow .2s, background .2s; }
.formulario select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132A3A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
.formulario input:hover, .formulario select:hover, .formulario textarea:hover { border-color: #b4c8c8; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; background: #fff; border-color: var(--verde-clinico); box-shadow: 0 0 0 4px rgba(23, 121, 106, .15); }
.formulario textarea { resize: vertical; }
.linha-dupla, .linha-tripla { display: grid; gap: 18px; }
@media (min-width: 560px) { .linha-dupla { grid-template-columns: 1fr 1fr; } .linha-tripla { grid-template-columns: 1fr 1.6fr .7fr; } }
.formulario label.aceite { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .9rem; color: var(--texto-suave); }
.aceite input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--verde-clinico); flex: none; }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.opcoes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes legend { margin-bottom: 8px; padding: 0; }
.formulario label.pilula { display: inline-flex; position: relative; cursor: pointer; }
.pilula input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pilula span { padding: 8px 15px; border-radius: 999px; border: 1.5px solid #cfdcdc; background: var(--nevoa); font-size: .9rem; font-weight: 500; transition: background .2s, border-color .2s, color .2s, transform .2s var(--suave); }
.pilula:hover span { border-color: var(--verde); }
.pilula input:checked + span { background: var(--verde-clinico); border-color: var(--verde-clinico); color: #fff; }
.pilula input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.pilula input:active + span { transform: scale(.96); }
.aviso { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: .95rem; }
.aviso-ok { background: var(--menta); color: var(--verde-clinico-escuro); border: 1px solid #b5e3d8; }
.aviso-erro { background: #fdeceb; color: #a12a2a; border: 1px solid #f5c6c4; }

/* Contato */
.contato-grade { display: grid; gap: 32px; }
@media (min-width: 1000px) { .contato-grade { grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; } }
.canais { display: grid; gap: 14px; align-content: start; }
.canal { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); color: var(--marinho); text-decoration: none; transition: transform .35s var(--suave), border-color .3s, box-shadow .3s; }
a.canal:hover { transform: translateX(6px); border-color: rgba(43, 179, 154, .6); box-shadow: var(--sombra); }
.js a.canal[data-revelar].visivel:hover { transform: translateX(6px); }
.canal strong { display: block; }
.canal small { color: var(--texto-suave); word-break: break-word; }
.canal-icone { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gradiente); color: #fff; }
.canal-icone .icone { width: 22px; height: 22px; }

/* Cadastro */
.cadastro-grade { display: grid; gap: 32px; }
@media (min-width: 1000px) { .cadastro-grade { grid-template-columns: .75fr 1.25fr; gap: 56px; align-items: start; } .cadastro-lado { position: sticky; top: 96px; } }
.cadastro-lado h2 { font-size: 1.4rem; }
.passos { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 4px; }
.passos li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.passos li:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 36px; bottom: 0; width: 2px; background: linear-gradient(var(--verde), var(--borda)); }
.passos span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--menta); color: var(--verde-clinico); font-weight: 700; border: 2px solid var(--verde); }
.passos strong { display: block; }
.passos small { color: var(--texto-suave); }
.cadastro-selo { display: flex; gap: 12px; padding: 16px; border-radius: 14px; background: var(--menta); color: var(--verde-clinico-escuro); font-size: .9rem; }
.cadastro-selo .icone { width: 24px; height: 24px; }
.cadastro-selo p { margin: 0; }
.etapas-barra { display: none; position: relative; grid-template-columns: repeat(3, 1fr); padding-bottom: 14px; font-size: .85rem; font-weight: 600; color: #93a5ae; }
.em-etapas .etapas-barra { display: grid; }
.etapas-barra span { text-align: center; transition: color .3s; }
.etapas-barra span.ativa { color: var(--verde-clinico); }
.etapas-barra::before, .etapas-barra i { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 4px; }
.etapas-barra::before { right: 0; background: var(--nevoa); }
.etapas-barra i { width: calc((var(--etapa) + 1) * 33.333%); background: var(--gradiente); transition: width .5s var(--suave); }
.etapa { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; min-width: 0; }
.em-etapas .etapa:not([hidden]) { animation: aparecer .45s var(--suave); }
.etapa > legend { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem; padding: 0; margin-bottom: 4px; }
.etapa-dica { margin: -8px 0 0; color: var(--texto-suave); font-size: .92rem; }
html:not(.js) .etapa + .etapa { padding-top: 18px; border-top: 1px solid var(--borda); }
.etapas-acoes { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.etapas-acoes .botao { flex: 1 1 160px; }
.formulario-sucesso { text-align: center; justify-items: center; padding: 56px 32px; }
.sucesso-icone { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--gradiente); color: #fff; animation: estourar .7s var(--suave); }
.sucesso-icone .icone { width: 36px; height: 36px; }
@keyframes estourar { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Treinamento */
.busca { display: flex; align-items: center; gap: 10px; max-width: 560px; margin-top: 28px; padding: 6px 6px 6px 18px; border-radius: 16px; background: #fff; border: 1.5px solid var(--borda); box-shadow: var(--sombra); transition: border-color .2s, box-shadow .2s; }
.busca:focus-within { border-color: var(--verde-clinico); box-shadow: 0 0 0 4px rgba(23, 121, 106, .15), var(--sombra); }
.busca .icone { color: var(--texto-suave); width: 20px; height: 20px; }
.busca input { flex: 1; min-width: 0; padding: 12px 6px; border: 0; background: transparent; font: 400 1rem var(--fonte-texto); color: var(--marinho); outline: none; }
.treino-grade { display: grid; gap: 32px; }
@media (min-width: 1000px) { .treino-grade { grid-template-columns: 290px 1fr; gap: 48px; align-items: start; } .treino-trilhas { position: sticky; top: 96px; } }
.treino-trilhas { display: grid; gap: 8px; }
@media (max-width: 999px) { .treino-trilhas { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; padding-bottom: 6px; } }
.treino-trilhas a { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--borda); background: #fff; color: var(--marinho); text-decoration: none; transition: border-color .25s, background .25s, transform .3s var(--suave); }
.treino-trilhas a:hover { border-color: var(--verde); background: var(--menta); }
.treino-trilhas .icone { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--menta); color: var(--verde-clinico); }
.treino-trilhas strong { display: block; font-size: .95rem; }
.treino-trilhas small { color: var(--texto-suave); font-size: .8rem; }
.treino-conteudo { display: grid; gap: 28px; min-width: 0; }
.trilha { scroll-margin-top: 96px; }
.trilha[hidden] { display: none; }
.trilha-cabeca { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.trilha-cabeca .cartao-icone { margin: 0; }
.trilha-cabeca h2 { font-size: 1.5rem; margin: 0; }
.trilha-cabeca p { margin: 0; color: var(--texto-suave); font-size: .92rem; }
.aula { margin-bottom: 10px; border-radius: 16px; border: 1px solid var(--borda); background: #fff; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.aula[hidden] { display: none; }
.aula[open] { border-color: rgba(43, 179, 154, .6); box-shadow: var(--sombra); }
.aula summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.aula summary::-webkit-details-marker { display: none; }
.aula summary::after { content: ''; width: 10px; height: 10px; margin-left: 4px; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--suave); flex: none; }
.aula[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.aula summary:hover .aula-titulo { color: var(--verde-clinico); }
.aula-numero { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--nevoa); font-weight: 700; font-size: .85rem; color: var(--verde-clinico); }
.aula[open] .aula-numero { background: var(--verde-clinico); color: #fff; }
.aula-titulo { flex: 1; font-weight: 600; transition: color .2s; }
.aula-tempo { display: flex; align-items: center; gap: 5px; color: var(--texto-suave); font-size: .82rem; white-space: nowrap; }
.aula-corpo { display: grid; gap: 18px; padding: 0 18px 20px 62px; animation: aparecer .4s var(--suave); }
@media (min-width: 760px) { .aula-corpo { grid-template-columns: 220px 1fr; align-items: start; } }
@media (max-width: 520px) { .aula-corpo { padding-left: 18px; } .aula-tempo { display: none; } }
.aula-corpo ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--texto-suave); }
.aula-corpo li::marker { color: var(--verde-clinico); font-weight: 700; }
.video-vazio { display: grid; place-items: center; gap: 6px; align-content: center; aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(135deg, var(--marinho), var(--marinho-2)); color: #b8c9d2; font-size: .8rem; }
.video-vazio .icone { width: 34px; height: 34px; color: var(--verde); }
.busca-vazia { padding: 20px; border-radius: 14px; background: var(--nevoa); }

/* Download */
.download-hero { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .download-hero { grid-template-columns: 1.2fr .8fr; } }
.lojas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.loja { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 16px; border-radius: 14px; background: var(--marinho); color: #fff; text-decoration: none; transition: transform .3s var(--suave), box-shadow .3s; }
a.loja:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.loja svg { width: 26px; height: 26px; }
.loja small { display: block; font-size: .7rem; opacity: .75; line-height: 1.2; }
.loja strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.loja-breve { opacity: .85; cursor: default; }
.loja em { position: absolute; top: -11px; right: -10px; padding: 2px 8px; border-radius: 999px; background: var(--verde); color: var(--marinho); font-size: .7rem; font-style: normal; font-weight: 700; }
.celular { justify-self: center; width: 260px; padding: 12px; border-radius: 42px; background: var(--marinho); box-shadow: var(--sombra-forte); animation: boiar 7s ease-in-out infinite; }
.celular-tela { display: grid; gap: 10px; align-content: start; min-height: 470px; padding: 18px 14px; border-radius: 32px; background: var(--nevoa); }
.celular-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.celular-topo .logo-mini { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--verde); }
.celular-topo .logo-mini img { width: 18px; height: auto; }
.celular-cartao { display: grid; grid-template-columns: 7px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: #fff; font-size: .85rem; }
.celular-cartao .cor { height: 30px; width: 7px; }
.celular-cartao strong { display: block; }
.celular-cartao small { color: var(--texto-suave); }
.celular-cartao-destaque { display: block; padding: 16px; background: var(--gradiente); color: #fff; }
.celular-cartao-destaque small { color: rgba(255, 255, 255, .85); }
.celular-cartao-destaque strong { font-family: var(--fonte-titulo); font-size: 1.2rem; }
.js .celular.visivel .celular-cartao { animation: aparecer .6s var(--suave) both; }
.js .celular.visivel .celular-cartao:nth-child(3) { animation-delay: .15s; } .js .celular.visivel .celular-cartao:nth-child(4) { animation-delay: .3s; } .js .celular.visivel .celular-cartao:nth-child(5) { animation-delay: .45s; }
@media (max-width: 999px) { .celular { display: none; } }
.grade-download { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.opcao-download { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 32px; border-radius: 24px; border: 1px solid var(--borda); background: #fff; overflow: hidden; transition: transform .4s var(--suave), box-shadow .3s, border-color .3s; }
.opcao-download:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); }
.js .opcao-download[data-revelar].visivel:hover { transform: translateY(-6px); }
.opcao-download > * { position: relative; }
.opcao-download h2 { font-size: 1.35rem; }
.opcao-download > p { color: var(--texto-suave); }
.opcao-download .lista-check { margin: 4px 0 24px; flex: 1; align-content: start; font-size: .95rem; }
.opcao-download .botao { align-self: flex-start; }
.opcao-destaque { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gradiente) border-box; }
.instrucoes ol { margin: 0; padding: 18px 18px 18px 36px; display: grid; gap: 8px; color: var(--texto-suave); font-size: .95rem; }
.materiais { margin-top: 48px; padding: 32px; border-radius: 24px; background: var(--nevoa); }
.materiais h2 { font-size: 1.4rem; }
.materiais ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.materiais li { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; background: #fff; }
.materiais li > .icone { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--menta); color: var(--verde-clinico); }
.materiais li div { flex: 1; min-width: 0; }
.materiais strong { display: block; }
.materiais small { color: var(--texto-suave); }
.etiqueta { padding: 3px 10px; border-radius: 999px; background: var(--menta); color: var(--verde-clinico); font-size: .75rem; font-weight: 700; white-space: nowrap; }

/* Páginas de texto e 404 */
.texto-legal { max-width: 780px; }
.texto-legal h2 { font-size: 1.35rem; margin-top: 1.8em; }
.texto-legal p { color: var(--texto-suave); }
.hero-404 { min-height: 70vh; display: grid; align-items: center; }
.numero-404 { margin: 0; font-family: var(--fonte-titulo); font-weight: 900; font-size: clamp(6rem, 20vw, 11rem); line-height: 1; background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; animation: boiar 5s ease-in-out infinite; }
.hero-404 .hero-sub { margin: 0 auto 1.5em; }

/* Rodapé */
.rodape { position: relative; background: var(--marinho); color: #b8c9d2; padding: 72px 0 28px; overflow: hidden; }
.rodape::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gradiente); }
.rodape-grade { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
@media (min-width: 900px) { .rodape-grade { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.rodape-marca p { margin: 12px 0 20px; max-width: 26em; }
.rodape h2 { margin: 0 0 14px; color: #fff; font-family: var(--fonte-texto); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rodape nav, .rodape-grade > div:last-child { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rodape a:not(.logo):not(.botao) { color: #d6e2e8; text-decoration: none; transition: color .2s; word-break: break-word; }
.rodape a:not(.logo):not(.botao):hover { color: var(--verde); }
.rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .875rem; }
.rodape-base p { margin: 0; }

/* WhatsApp flutuante */
.whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); transition: transform .3s var(--suave); }
.whatsapp:hover { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js [data-revelar] { opacity: 1; transform: none; }
}

/* ---------- 2.2: localizador e blog ---------- */
.hero-localizador { padding-bottom: 40px; }
.busca-local { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .85); border: 1px solid var(--borda); box-shadow: var(--sombra); backdrop-filter: blur(8px); }
.busca-local input, .busca-local select { padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; font: inherit; background: #fff; min-width: 0; }
.busca-local input { width: 150px; }
.busca-ou { color: var(--texto-suave); font-weight: 600; }
.busca-status { margin-top: 12px; color: var(--texto-suave); font-weight: 500; min-height: 1.5em; }
.localizador-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.localizador-mapa { height: 600px; border-radius: 20px; border: 1px solid var(--borda); box-shadow: var(--sombra); z-index: 0; position: sticky; top: 90px; }
.localizador-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-height: 600px; overflow: auto; padding-right: 4px; }
.localizador-vazio { padding: 24px; border-radius: 16px; background: var(--nevoa); color: var(--texto-suave); text-align: center; }
.local-item { display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--borda); cursor: pointer; transition: border-color .2s, transform .2s var(--suave); }
.local-item:hover { border-color: var(--verde); transform: translateY(-2px); }
.local-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.local-topo strong { font-family: var(--fonte-titulo); font-size: 1.1rem; }
.local-dist { font-weight: 700; color: var(--verde-clinico); white-space: nowrap; }
.local-item small { color: var(--texto-suave); }
.local-servicos { display: flex; flex-wrap: wrap; gap: 6px; }
.local-servicos span { padding: 3px 10px; border-radius: 999px; background: var(--menta); color: var(--verde-clinico); font-size: .8rem; font-weight: 600; }
.local-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.estrelas { color: #f2b01e; letter-spacing: 1px; }
.estrelas span { color: #d5dcdc; }
.centro-bloco { margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .localizador-grade { grid-template-columns: 1fr; } .localizador-mapa { position: static; height: 380px; } .localizador-lista { max-height: none; } }
.blog-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.blog-cartao { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); text-decoration: none; color: var(--marinho); transition: transform .3s var(--suave), box-shadow .3s; overflow: hidden; }
.blog-cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.blog-cartao img { width: calc(100% + 44px); margin: -22px -22px 6px; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-cartao strong { font-family: var(--fonte-titulo); font-size: 1.25rem; line-height: 1.25; }
.blog-cartao span:last-child { color: var(--texto-suave); }
.blog-data { color: var(--texto-suave); font-size: .9rem; font-weight: 600; }
.artigo-container { max-width: 780px; }
.artigo h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.artigo-capa { width: 100%; border-radius: var(--raio); margin: 16px 0 28px; }
.artigo-texto { font-size: 1.1rem; line-height: 1.8; }
.artigo-texto h2 { margin-top: 1.6em; }
.artigo-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; padding: 20px 22px; border-radius: var(--raio); background: var(--menta); }

/* ---------- Pets ---------- */
.secao-pets { padding-top: 72px; }
.pets-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .pets-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .pets-grade { gap: 12px; } }
.pet-cartao { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--menta); box-shadow: var(--sombra); }
.pet-cartao:nth-child(even) { transform: translateY(28px); }
.js .pet-cartao[data-revelar].visivel:nth-child(even) { transform: translateY(28px); }
@media (max-width: 960px) { .pet-cartao:nth-child(even), .js .pet-cartao[data-revelar].visivel:nth-child(even) { transform: none; } }
.pet-cartao img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--suave); }
.pet-cartao:hover img { transform: scale(1.04); }
.pet-legenda { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); }
.pet-legenda strong { font: 900 1.05rem/1.2 var(--fonte-titulo); color: var(--marinho); }
.pet-legenda span { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--texto-suave); }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ponto-verde { background: var(--verde); }
.ponto-azul { background: var(--azul); }
@media (prefers-reduced-motion: reduce) { .pet-cartao img { transition: none; } }