/* Yuplan — protótipo v2 (26/10/2026). Marca: verde-água #02BABA + azul #314C7D. */
:root {
  --teal: #02BABA;
  --teal-600: #019A9A;
  --teal-700: #017878;
  --teal-claro: #E6F8F8;
  --navy: #314C7D;
  --noite: #0B1F3A;
  --noite-2: #12294A;
  --tinta: #0C1A2B;
  --texto: #3A475A;
  --suave: #667386;
  --linha: #E3E8EF;
  --fundo: #FFFFFF;
  --fundo-2: #F5F8FA;
  --whats: #1FAF54;
  --erro: #C2410C;
  --r: 14px;
  --r-lg: 22px;
  --sombra: 0 24px 60px -24px rgba(11, 31, 58, .35), 0 8px 24px -12px rgba(11, 31, 58, .18);
  --f-titulo: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 16px/1.6 var(--f-texto); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); color: var(--tinta); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .6em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 28px; } }
.centro { text-align: center; }
.eyebrow { font: 700 .78rem/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 14px; }
.eyebrow--claro { color: var(--teal); }
.eyebrow--centro { text-align: center; }
section { padding: 72px 0; }
@media (min-width: 900px) { section { padding: 104px 0; } }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 12px; border: 0; font: 700 1rem/1 var(--f-texto); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--teal); color: #fff; box-shadow: 0 10px 24px -10px rgba(2, 186, 186, .8); }
.btn--primario:hover { background: var(--teal-600); }
.btn--contorno { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
.btn--contorno:hover { border-color: #fff; }
.btn--whats { background: var(--whats); color: #fff; }
.btn--bloco { width: 100%; }
:focus-visible { outline: 3px solid rgba(2, 186, 186, .55); outline-offset: 2px; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(11, 31, 58, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.topo__in { display: flex; align-items: center; gap: 24px; height: 64px; }
.topo__logo img { height: 34px; width: auto; }
.topo__nav { display: none; margin-left: auto; gap: 28px; }
.topo__nav a { color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 500; font-size: .95rem; }
.topo__nav a:hover { color: #fff; }
.topo__tel { display: none; color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.topo__cta { margin-left: auto; background: var(--teal); color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; padding: 10px 16px; border-radius: 10px; }
@media (min-width: 1024px) { .topo__nav { display: flex; } .topo__cta { margin-left: 8px; } }
@media (min-width: 1100px) { .topo__tel { display: inline; } }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 40px 0 56px; background:
  radial-gradient(900px 500px at 85% 10%, rgba(2, 186, 186, .22), transparent 60%),
  radial-gradient(700px 500px at 0% 100%, rgba(49, 76, 125, .55), transparent 60%),
  var(--noite); color: rgba(255, 255, 255, .82); }
.hero__grid { display: grid; gap: 32px; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 5.6vw, 3.6rem); font-weight: 800; margin-bottom: 18px; }
.destaque { color: var(--teal); }
.hero__sub { font-size: 1.1rem; max-width: 34em; }
.hero__sub strong { color: #fff; }
.hero__lista { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 10px; }
.hero__lista li { padding-left: 30px; position: relative; color: #fff; font-weight: 500; }
.hero__lista li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(2, 186, 186, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302BABA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.assinatura { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); max-width: 380px; }
.assinatura img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--teal); }
.assinatura p { margin: 0; font-size: .92rem; line-height: 1.4; }
.assinatura strong { color: #fff; }
.assinatura span { color: rgba(255, 255, 255, .7); font-style: italic; }
.hero__foto { display: none; margin: 0; }
@media (min-width: 900px) {
  .hero { padding: 64px 0 80px; }
  .hero__grid { grid-template-columns: 1.1fr .9fr; gap: 48px; }
}
@media (min-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr 300px 400px; gap: 0; }
  .hero__texto { padding-right: 32px; }
  .hero__foto { display: block; align-self: end; margin-bottom: -80px; position: relative; z-index: 1; }
  .hero__foto img { width: 100%; height: 540px; object-fit: cover; object-position: 50% 0; border-radius: 26px 26px 0 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
  .assinatura { display: none; }
  .sim { position: relative; z-index: 2; margin-left: -40px; }
}

/* Simulador */
.sim { position: relative; background: #fff; color: var(--texto); border-radius: var(--r-lg); padding: 26px 22px 24px; box-shadow: var(--sombra); min-height: 360px; scroll-margin-top: 80px; }
@media (min-width: 640px) { .sim { padding: 30px 28px 28px; } }
.sim__passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 22px; }
.sim__passos span { height: 4px; border-radius: 4px; background: var(--linha); transition: background .3s; }
.sim__passos span.on { background: var(--teal); }
.sim__titulo { font-size: 1.35rem; font-weight: 800; margin-bottom: 18px; }
.sim__texto { color: var(--suave); }
.sim__opcoes { display: grid; gap: 12px; }
.opcao { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border-radius: var(--r); border: 1.5px solid var(--linha); background: #fff; cursor: pointer; font: inherit; color: var(--tinta); transition: border-color .15s, box-shadow .15s, transform .15s; }
.opcao:hover { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(2, 186, 186, .12); }
.opcao strong { display: block; font-size: 1.02rem; }
.opcao small { display: block; color: var(--suave); font-size: .86rem; margin-top: 2px; }
.opcao__icone { flex: 0 0 46px; height: 46px; border-radius: 12px; background: var(--teal-claro); display: grid; place-items: center; }
.opcao__icone svg { width: 24px; height: 24px; fill: none; stroke: var(--teal-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sim__link { display: block; margin: 18px auto 0; background: none; border: 0; color: var(--navy); font: 600 .9rem var(--f-texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
.sim__voltar { background: none; border: 0; color: var(--suave); font: 600 .88rem var(--f-texto); cursor: pointer; padding: 4px 0; margin: -6px 0 8px; }
.rotulo { display: block; font-weight: 600; font-size: .88rem; color: var(--tinta); margin-bottom: 6px; }
.rotulo em { font-weight: 400; color: var(--suave); font-style: normal; }
.campo { display: block; margin-bottom: 14px; }
.campo small { display: block; color: var(--suave); font-size: .8rem; margin-top: 6px; }
input[type=text], input[type=tel], input[type=number] { width: 100%; height: 48px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--linha); font: 500 1rem var(--f-texto); color: var(--tinta); background: #fff; transition: border-color .15s, box-shadow .15s; }
input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(2, 186, 186, .14); }
.porte { margin-bottom: 16px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fundo-2); border-radius: 10px; padding: 4px; gap: 4px; }
.seg button { height: 40px; border: 0; border-radius: 8px; background: transparent; font: 600 .95rem var(--f-texto); color: var(--suave); cursor: pointer; }
.seg button[aria-checked=true] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(12, 26, 43, .12); }
.idades { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-bottom: 10px; }
.idade { position: relative; }
.idade label { display: block; font-size: .76rem; color: var(--suave); margin-bottom: 4px; font-weight: 500; }
.idade input { text-align: center; padding: 0 30px 0 10px; }
.idade__tirar { position: absolute; right: 6px; bottom: 12px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--fundo-2); color: var(--suave); cursor: pointer; font-size: 15px; line-height: 1; }
.sim__mais { background: none; border: 1.5px dashed var(--linha); border-radius: 10px; width: 100%; height: 44px; color: var(--teal-700); font: 600 .92rem var(--f-texto); cursor: pointer; margin-bottom: 18px; }
.sim__mais:hover { border-color: var(--teal); }
.sim__erro { color: var(--erro); font-size: .9rem; font-weight: 500; margin: -4px 0 12px; }
.sim__carregando { position: absolute; inset: 0; border-radius: var(--r-lg); background: rgba(255, 255, 255, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-weight: 600; color: var(--tinta); }
.sim__carregando[hidden] { display: none; }
.sim__carregando span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--teal-claro); border-top-color: var(--teal); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Resultado */
.res { text-align: center; margin-bottom: 20px; }
.res__rotulo { font-size: .85rem; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.res__valor { font: 800 clamp(2.3rem, 9vw, 2.9rem)/1.1 var(--f-titulo); color: var(--tinta); margin: 4px 0 4px; letter-spacing: -.03em; }
.res__valor small { font-size: 1rem; font-weight: 600; color: var(--suave); margin-left: 4px; }
.res__sub { color: var(--suave); font-size: .92rem; margin-bottom: 16px; }
.res__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.res__duo div { background: var(--fundo-2); border-radius: 10px; padding: 10px 8px; }
.res__duo span { display: block; font-size: .78rem; color: var(--suave); }
.res__duo strong { font-family: var(--f-titulo); color: var(--tinta); font-size: 1.05rem; }
.res__ops { list-style: none; padding: 0; margin: 0; text-align: left; border-top: 1px solid var(--linha); }
.res__ops li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--linha); font-size: .92rem; }
.res__ops li span { color: var(--suave); }
.res__ops li strong { color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.res__consulta { font-size: .82rem; color: var(--suave); text-align: left; margin: 10px 0 0; }
.lead { border-top: 1px solid var(--linha); padding-top: 18px; }
.lead__titulo { font: 700 1.05rem/1.35 var(--f-titulo); color: var(--tinta); margin-bottom: 14px; }
.lead__nota { font-size: .76rem; color: var(--suave); margin: 12px 0 0; line-height: 1.45; }
.ok { text-align: center; padding-top: 20px; }
.ok__icone { width: 64px; height: 64px; border-radius: 50%; background: var(--teal-claro); display: grid; place-items: center; margin: 0 auto 18px; }
.ok__icone svg { width: 32px; height: 32px; fill: none; stroke: var(--teal-700); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Faixa de confiança */
.faixa { padding: 56px 0 48px; background: var(--fundo); }
@media (min-width: 1100px) { .faixa { padding-top: 120px; } }
.faixa__titulo { text-align: center; font-weight: 600; color: var(--suave); font-size: .92rem; margin-bottom: 22px; }
.logos { list-style: none; padding: 0; margin: 0 0 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; align-items: center; }
.logos img { max-height: 38px; width: auto; max-width: 100%; margin: 0 auto; filter: grayscale(1); opacity: .7; }
@media (min-width: 900px) { .logos { grid-template-columns: repeat(8, 1fr); } }
.selos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin: -16px 0 36px; color: var(--suave); font-size: .85rem; }
.selos img { height: 40px; width: auto; border-radius: 6px; }
.lead__nota a { color: inherit; }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--linha); }
.numeros div { background: #fff; padding: 22px 16px; text-align: center; }
.numeros strong { display: block; font: 800 clamp(1.9rem, 5vw, 2.6rem)/1 var(--f-titulo); color: var(--navy); letter-spacing: -.03em; }
.numeros span { display: block; margin-top: 8px; font-size: .88rem; color: var(--suave); }
@media (min-width: 900px) { .numeros { grid-template-columns: repeat(4, 1fr); } }

/* Quem cuida */
.quem { background: var(--fundo-2); }
.quem__grid { display: grid; gap: 40px; align-items: center; }
.quem__foto { margin: 0; position: relative; }
.quem__foto img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4/4.4; object-fit: cover; object-position: 50% 10%; box-shadow: var(--sombra); }
.quem__foto figcaption { position: absolute; left: 16px; bottom: 16px; background: rgba(11, 31, 58, .82); backdrop-filter: blur(6px); color: #fff; padding: 10px 14px; border-radius: 12px; line-height: 1.3; }
.quem__foto figcaption strong { display: block; }
.quem__foto figcaption span { font-size: .85rem; color: rgba(255, 255, 255, .75); }
.quem__texto p { font-size: 1.05rem; }
.equipe { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.equipe li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--linha); border-radius: var(--r); padding: 12px 14px; }
.equipe strong { display: block; color: var(--tinta); }
.equipe small { color: var(--suave); }
.avatar { flex: 0 0 46px; height: 46px; border-radius: 50%; background: var(--teal-claro); color: var(--teal-700); display: grid; place-items: center; font: 800 1.1rem var(--f-titulo); }
@media (min-width: 640px) { .equipe { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .quem__grid { grid-template-columns: 440px 1fr; gap: 72px; } }

/* Como funciona */
.como__grid { display: grid; gap: 48px; align-items: center; }
.passos { list-style: none; padding: 0; margin: 8px 0 32px; display: grid; gap: 22px; }
.passos li { display: flex; gap: 16px; }
.passos li > span { flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--noite); color: var(--teal); display: grid; place-items: center; font: 800 1.05rem var(--f-titulo); }
.passos strong { display: block; color: var(--tinta); font-size: 1.08rem; margin-bottom: 2px; }
.passos p { margin: 0; color: var(--suave); }
.fone { justify-self: center; width: 100%; max-width: 360px; }
.fone__tela { border-radius: 34px; background: #0f1b2b; padding: 10px; box-shadow: var(--sombra); }
.fone__topo { display: flex; align-items: center; gap: 10px; background: #12294A; color: #fff; padding: 12px 14px; border-radius: 26px 26px 0 0; }
.fone__topo img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.fone__topo span { line-height: 1.2; }
.fone__topo small { display: block; color: rgba(255, 255, 255, .6); font-size: .75rem; }
.fone__msgs { background: #EDE7DE; padding: 16px 12px 20px; border-radius: 0 0 26px 26px; display: grid; gap: 8px; }
.msg { margin: 0; max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: .9rem; line-height: 1.4; color: #1f2a37; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.msg--eles { background: #fff; justify-self: start; border-top-left-radius: 4px; }
.msg--nos { background: #D6F6C9; justify-self: end; border-top-right-radius: 4px; }
.msg--pdf { display: flex; align-items: center; gap: 10px; }
.msg--pdf strong { display: block; font-size: .84rem; }
.msg--pdf small { color: var(--suave); font-size: .76rem; }
.pdf { flex: 0 0 38px; height: 44px; border-radius: 6px; background: #E5484D; color: #fff; display: grid; place-items: center; font: 800 .7rem var(--f-texto); }
.fone__legenda { text-align: center; font-size: .78rem; color: var(--suave); margin-top: 10px; }
@media (min-width: 900px) { .como__grid { grid-template-columns: 1.1fr .9fr; gap: 80px; } }

/* Planos */
.planos { background: var(--fundo-2); }
.cards { display: grid; gap: 18px; margin-top: 40px; }
.card { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.card p { color: var(--suave); }
.card ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.card li { padding-left: 24px; position: relative; font-size: .95rem; color: var(--tinta); }
.card li::before { content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 7px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.card__link { margin-top: auto; color: var(--teal-700); font-weight: 700; text-decoration: none; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* O que traduzimos */
.traduz { background: var(--noite); color: rgba(255, 255, 255, .78); }
.traduz h2 { color: #fff; }
.traduz__grid { display: grid; gap: 36px; }
.traduz__sub { font-size: 1.05rem; }
.traduz__itens { margin: 0; display: grid; gap: 1px; background: rgba(255, 255, 255, .1); border-radius: var(--r-lg); overflow: hidden; }
.traduz__itens div { background: var(--noite-2); padding: 22px 22px; }
.traduz__itens dt { font: 800 1.15rem var(--f-titulo); color: var(--teal); margin-bottom: 6px; }
.traduz__itens dd { margin: 0; }
@media (min-width: 640px) { .traduz__itens { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .traduz__grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; } }

/* Depoimentos (protótipo) e marcas do protótipo */
.proto-caixa { max-width: 720px; margin: 32px auto 0; border: 2px dashed #F0B429; background: #FFFBEB; color: #7A5B00; border-radius: var(--r); padding: 22px; text-align: center; }
.proto-nota { margin-top: 14px; font-size: .85rem; color: #8A6A00; background: #FFFBEB; border: 1px dashed #F0B429; border-radius: 10px; padding: 8px 12px; }
.proto-badge { background: #F0B429; color: #3D2E00; font: 700 .78rem/1.3 var(--f-texto); padding: 7px 16px; text-align: center; }

/* Dúvidas */
.duvidas__grid { display: grid; gap: 32px; }
.whats-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; text-decoration: none; color: var(--suave); }
.whats-link strong { color: var(--teal-700); }
.faq details { border: 1px solid var(--linha); border-radius: var(--r); background: #fff; margin-bottom: 10px; transition: border-color .15s; }
.faq details[open] { border-color: var(--teal); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; color: var(--tinta); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--teal-claro); color: var(--teal-700); display: grid; place-items: center; font-weight: 700; }
.faq details[open] summary::after { content: '−'; background: var(--teal); color: #fff; }
.faq details p { padding: 0 20px 18px; margin: 0; color: var(--suave); }
@media (min-width: 900px) { .duvidas__grid { grid-template-columns: 340px 1fr; gap: 64px; } }

/* Fechamento */
.final { position: relative; overflow: hidden; padding-bottom: 0; background: radial-gradient(700px 400px at 90% 0%, rgba(2, 186, 186, .3), transparent 60%), var(--navy); color: rgba(255, 255, 255, .85); }
.final__grid { display: grid; gap: 24px; align-items: end; }
.final h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.1rem); }
.final__texto { padding-bottom: 72px; }
.final__texto p { font-size: 1.1rem; }
.final__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.final__foto { display: none; margin: 0; }
@media (min-width: 900px) {
  .final__grid { grid-template-columns: 1fr 300px; }
  .final__texto { padding-bottom: 104px; }
  .final__foto { display: block; }
  .final__foto img { height: 440px; width: 100%; object-fit: cover; object-position: 50% 0; border-radius: 24px 24px 0 0; }
}

/* Rodapé */
.rodape { background: #081629; color: rgba(255, 255, 255, .65); padding: 56px 0 24px; font-size: .92rem; }
.rodape__grid { display: grid; gap: 28px; }
.rodape img { height: 32px; width: auto; margin-bottom: 14px; }
.rodape__titulo { color: #fff; font-weight: 700; margin-bottom: 8px; }
.rodape a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 36px; padding-top: 20px; font-size: .8rem; }
@media (min-width: 900px) { .rodape__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } }

/* Botão flutuante */
.flutua { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: var(--whats); display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(31, 175, 84, .7); }
.flutua svg { width: 30px; height: 30px; fill: #fff; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* ===== v4 (copy do site atual + dor, comparação, razões, depoimentos, 3 capitais) ===== */
.intro { max-width: 46em; margin: 0 auto 8px; font-size: 1.05rem; color: var(--suave); }
.destaque-escuro { color: var(--teal-700); }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); }
.hero__lista li { font-weight: 400; color: rgba(255, 255, 255, .82); }
.hero__lista li strong { color: #fff; font-weight: 600; }
.hero__lema { margin: 0; padding-left: 14px; border-left: 3px solid var(--teal); color: #fff; font-weight: 600; max-width: 30em; }
.hero__foto figcaption { position: absolute; left: 14px; bottom: 120px; background: rgba(11, 31, 58, .82); backdrop-filter: blur(6px); color: #fff; padding: 8px 12px; border-radius: 10px; line-height: 1.25; font-size: .9rem; }
.hero__foto figcaption strong { display: block; }
.hero__foto figcaption span { font-size: .8rem; color: rgba(255, 255, 255, .75); }
.sim__texto--curto { margin: -10px 0 18px; font-size: .95rem; }
.seg--cidades { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.seg--cidades button { font-size: .88rem; padding: 0 2px; }

/* A dor */
.dor__itens { display: grid; gap: 16px; margin-top: 40px; }
.dor__itens article { background: #fff; border: 1px solid var(--linha); border-left: 4px solid #E5484D; border-radius: var(--r); padding: 22px 22px 20px; }
.dor__itens h3 { margin-bottom: 8px; }
.dor__itens p { margin: 0; color: var(--suave); }
.dor__n { display: block; font: 800 .85rem var(--f-titulo); color: #E5484D; margin-bottom: 8px; letter-spacing: .06em; }
.dor { background: var(--fundo-2); }
@media (min-width: 900px) { .dor__itens { grid-template-columns: repeat(4, 1fr); } }

/* Por que Yuplan */
.grade3 { display: grid; gap: 16px; margin-top: 40px; }
.mini { border: 1px solid var(--linha); border-radius: var(--r); padding: 24px 22px; background: #fff; position: relative; }
.mini::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--teal); margin-bottom: 16px; }
.mini p { margin: 0; color: var(--suave); }
@media (min-width: 640px) { .grade3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grade3 { grid-template-columns: repeat(3, 1fr); } }

/* Modalidades em 4 */
@media (min-width: 640px) { .cards--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* Como funciona em 4 + comparação */
.como { background: var(--fundo); }
.passos4 { list-style: none; padding: 0; margin: 40px 0; display: grid; gap: 24px; counter-reset: none; }
.passos4 li > span { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--teal); color: #fff; font: 800 1rem var(--f-titulo); margin-bottom: 14px; }
.passos4 p { margin: 0; color: var(--suave); }
@media (min-width: 640px) { .passos4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .passos4 { grid-template-columns: repeat(4, 1fr); } }
.versus { display: grid; gap: 16px; margin: 8px 0 36px; }
.versus__lado { border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 26px 24px; background: var(--fundo-2); }
.versus__lado--sim { background: #fff; border-color: rgba(2, 186, 186, .5); box-shadow: 0 20px 44px -26px rgba(2, 186, 186, .7); }
.versus__tag { display: inline-block; font: 700 .72rem var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); background: #E9EDF2; padding: 5px 10px; border-radius: 999px; margin-bottom: 12px; }
.versus__tag--sim { color: var(--teal-700); background: var(--teal-claro); }
.versus ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.versus li { padding-left: 30px; position: relative; font-size: .97rem; }
.versus li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
.nao li::before { content: '✕'; background: #FDECEC; color: #C93A3F; }
.sim-lista li::before { content: '✓'; background: var(--teal-claro); color: var(--teal-700); }
@media (min-width: 900px) { .versus { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* 10 razões */
.razoes { background: var(--teal-claro); }
.razoes__lista { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.razoes__lista li { background: #fff; border-radius: var(--r); padding: 16px; }
.razoes__lista strong { display: block; font-family: var(--f-titulo); color: var(--tinta); margin-bottom: 4px; }
.razoes__lista span { font-size: .9rem; color: var(--suave); line-height: 1.45; display: block; }
@media (min-width: 900px) { .razoes__lista { grid-template-columns: repeat(5, 1fr); } }

/* Depoimentos */
.depo__cards { display: grid; gap: 16px; margin-top: 28px; }
.depo__cards figure { margin: 0; background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; }
.depo__cards blockquote { margin: 0 0 18px; color: var(--tinta); font-size: 1rem; line-height: 1.55; }
.depo__cards figcaption { margin-top: auto; border-top: 1px solid var(--linha); padding-top: 14px; }
.depo__cards strong { display: block; color: var(--tinta); }
.depo__cards figcaption span { font-size: .85rem; color: var(--suave); }
.centro-bloco { max-width: 720px; margin: 18px auto 0; text-align: center; }
@media (min-width: 900px) { .depo__cards { grid-template-columns: repeat(3, 1fr); } }

/* Atributo hidden sempre vence (.campo e .porte têm display próprio) */
[hidden] { display: none !important; }
@media (min-width: 1100px) {
  .hero__grid { align-items: start; }
  .hero h1 { font-size: 2.75rem; }
  .sim { margin-top: 24px; }
  .hero__foto { align-self: end; }
}

/* Equipe: três especialistas lado a lado no computador */
@media (min-width: 1100px) { .equipe { grid-template-columns: repeat(3, 1fr); } .equipe li { flex-direction: column; align-items: flex-start; } }

/* v7: slogan no banner + história do fundador e endereço */
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); margin-bottom: 12px; }
@media (min-width: 1100px) { .hero h1 { font-size: 4.2rem; } }
.hero__proposta { font: 700 clamp(1.15rem, 2.2vw, 1.4rem)/1.35 var(--f-titulo); color: #fff; margin-bottom: 14px; max-width: 26em; }
.assina { font: 700 1.05rem var(--f-titulo); color: var(--tinta); margin: 18px 0 22px; }
.assina span { display: block; font: 400 .88rem var(--f-texto); color: var(--suave); }
.endereco { display: flex; gap: 14px; background: #fff; border: 1px solid var(--linha); border-radius: var(--r); padding: 18px; margin-bottom: 28px; }
.endereco__icone { flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--teal-claro); display: grid; place-items: center; }
.endereco__icone svg { width: 22px; height: 22px; fill: none; stroke: var(--teal-700); stroke-width: 1.8; }
.endereco strong { display: block; color: var(--tinta); margin-bottom: 4px; }
.endereco p { margin: 0 0 6px; font-size: .95rem !important; color: var(--suave); }
.endereco__linha { font-size: .88rem !important; }
.endereco__linha a { color: var(--teal-700); font-weight: 600; }
.equipe__titulo { font-weight: 700; color: var(--tinta); margin: 0 0 -14px; }

/* v8: slogan em duas linhas, simulador logo após o slogan no celular, avatares e foto do fundador */
.destaque--linha { display: block; }
@media (max-width: 899px) {
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__texto { display: contents; }
  .hero__texto > .eyebrow { order: 1; }
  .hero h1 { order: 2; }
  .hero__proposta { order: 3; margin-bottom: 22px; }
  .sim { order: 4; margin-bottom: 30px; }
  .hero__sub { order: 5; }
  .hero__lista { order: 6; margin-top: 4px; }
  .hero__lema { order: 7; }
}
.equipe .avatar { width: 46px; height: 46px; flex: 0 0 auto; }
@media (min-width: 900px) {
  .quem__grid { align-items: start; }
  .quem__foto { position: sticky; top: 96px; }
}

/* v10: logo maior no menu */
.topo__in { height: 72px; }
.topo__logo img { height: 44px; }
@media (min-width: 900px) { .topo__in { height: 84px; } .topo__logo img { height: 54px; } }

/* v11: ícone de calculadora no "Cotar agora" */
.topo__cta { display: inline-flex; align-items: center; gap: 8px; }
.topo__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* v12: topo em duas colunas limpas — texto | simulador. A foto vira assinatura do lema. */
.hero { padding: 48px 0 56px; }
.hero__foto { display: none !important; }
.hero h1 { font-size: clamp(2.8rem, 8vw, 4.6rem); line-height: 1.02; margin-bottom: 16px; }
.hero__proposta { font-size: clamp(1.15rem, 2.4vw, 1.5rem); max-width: 22em; margin-bottom: 26px; }
.hero__lista { margin: 0 0 30px; gap: 12px; }
.lema { display: flex; align-items: center; gap: 16px; margin: 0; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); max-width: 34em; }
.lema img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 2px solid var(--teal); }
.lema__frase { display: block; color: #fff; font-weight: 600; line-height: 1.45; }
.lema__quem { display: block; margin-top: 6px; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.lema__quem strong { color: #fff; }
@media (min-width: 900px) {
  .hero { padding: 72px 0 88px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: center; }
  .hero__texto { padding-right: 0; }
  .sim { margin: 0; }
}
@media (min-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 88px; }
  .hero h1 { font-size: 4.6rem; }
}
@media (max-width: 899px) {
  .lema { order: 7; }
}
@media (min-width: 1100px) { .faixa { padding-top: 64px; } }

/* v13 — menu no celular, foto no fundo do banner, prova no topo */
.topo { background: rgba(7, 19, 36, .96); box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px -16px rgba(0, 0, 0, .6); }
.topo__menu { display: inline-grid; gap: 5px; place-content: center; width: 46px; height: 46px; margin-left: 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: transparent; cursor: pointer; order: 3; }
.topo__menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.topo__menu[aria-expanded=true] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo__menu[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.topo__menu[aria-expanded=true] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1023px) {
  .topo__in { position: relative; }
  .topo__nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px 16px; background: #071324; border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6); }
  .topo__nav.aberto { display: flex; }
  .topo__nav a { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 1.05rem; color: #fff; }
  .topo__nav a:last-child { border-bottom: 0; }
}
@media (min-width: 1024px) { .topo__menu { display: none; } }

.hero__fundo { display: none; }
@media (min-width: 1100px) {
  .hero { position: relative; overflow: hidden; }
  .hero__fundo { display: block; position: absolute; right: 0; bottom: 0; height: 100%; width: 40vw; max-width: 620px; object-fit: cover; object-position: 50% 8%; opacity: .5; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to top, transparent 0%, #000 35%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to top, transparent 0%, #000 35%); mask-composite: intersect; }
  .hero__grid { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; padding-right: clamp(0px, calc(14vw - 70px), 150px); }
  .hero h1 { font-size: 4.3rem; }
}

.prova { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.prova li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .75); font-size: .88rem; font-weight: 500; }
.prova svg { width: 18px; height: 18px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) { .prova { order: 8; } }

/* v14 — o rosto do Yuri fica sempre à direita do simulador (a coluna do texto encolhe
   o necessário); abaixo de 1240px não há espaço e a foto de fundo some */
@media (min-width: 1100px) and (max-width: 1239px) {
  .hero__fundo { display: none; }
  .hero__grid { padding-right: 0; }
}
@media (min-width: 1240px) {
  .hero__fundo { width: 34vw; max-width: none; object-position: 52% 8%; opacity: .55; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; padding-right: max(28px, calc(662px - 33vw)); }
  .hero h1 { font-size: clamp(3.6rem, 4.6vw, 4.6rem); }
}

/* v15 — cabeçalho do celular numa linha só */
.topo__cta { white-space: nowrap; }
@media (max-width: 899px) {
  .topo__in { gap: 10px; }
  .topo__logo img { height: 38px; }
  .topo__cta { padding: 10px 14px; font-size: .88rem; }
  .topo__menu { margin-left: 0; width: 44px; height: 44px; flex: 0 0 44px; }
}

/* v16 — faixa só de operadoras; selos no rodapé */
.operadoras { padding: 72px 0; background: #fff; }
@media (min-width: 900px) { .operadoras { padding: 96px 0; } }
.logos--grade { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 40px 0 24px; }
.logos--grade li { background: #fff; border: 1px solid var(--linha); border-radius: var(--r); height: 84px; display: grid; place-items: center; padding: 14px 16px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.logos--grade img { max-height: 44px; max-width: 100%; }
.logos--grade li:hover { border-color: rgba(2, 186, 186, .45); transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(11, 31, 58, .35); }
.logos--grade li:hover img { filter: none; opacity: 1; }
@media (min-width: 640px) { .logos--grade { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .logos--grade { grid-template-columns: repeat(5, 1fr); gap: 14px; } .logos--grade li { height: 108px; } .logos--grade img { max-height: 56px; } }
.operadoras__nota { max-width: 42em; margin: 0 auto; font-size: .9rem; color: var(--suave); }
.rodape__selos { display: flex; gap: 10px; margin-top: 14px; }
.rodape__selos img { height: 36px; width: auto; border-radius: 6px; }

/* v17 — o Yuri aparece UMA vez no banner: onde a foto grande de fundo aparece (≥1240px),
   o cartão do lema fica sem a foto pequena */
@media (min-width: 1240px) {
  .lema img { display: none; }
  .lema { padding: 16px 20px; border-left: 3px solid var(--teal); }
}

/* v18 — foto de fundo escura (IMG_4494): some no azul, então pode aparecer mais */
@media (min-width: 1240px) { .hero__fundo { opacity: .75; } }

/* v19 — dor com solução, ícones e chamada */
.dor__itens article { display: flex; flex-direction: column; border-left: 1px solid var(--linha); border-top: 4px solid #E5484D; padding: 24px 22px 22px; }
.dor__icone { width: 46px; height: 46px; border-radius: 12px; background: #FDECEC; display: grid; place-items: center; margin-bottom: 16px; }
.dor__icone svg { width: 24px; height: 24px; fill: none; stroke: #D33D43; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dor__itens article > p:not(.dor__solucao) { margin-bottom: 18px; }
.dor__solucao { margin-top: auto !important; padding-top: 16px; border-top: 1px dashed var(--linha); color: var(--texto) !important; font-size: .95rem; }
.dor__solucao strong { color: var(--teal-700); }
.dor__cta { margin: 40px 0 0; }

/* v20: fotos novas (26/10/2026) — avatar da equipe com foto */
img.avatar, .equipe img.avatar { width: 64px; height: 64px; flex: 0 0 64px; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--teal-claro); }

/* v22: "Por que Yuplan" vira comparação Corretora tradicional × Yuplan */
.versus2 { list-style: none; padding: 0; margin: 36px auto 0; max-width: 980px; display: grid; gap: 12px; }
.versus2__cab { display: none; }
.versus2__linha { background: #fff; border: 1px solid var(--linha); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; }
.versus2__tema { font: 800 1.05rem var(--f-titulo); color: var(--tinta); }
.versus2__antes, .versus2__yuplan { display: block; padding: 10px 12px 10px 38px; border-radius: 10px; position: relative; line-height: 1.45; }
.versus2__antes small, .versus2__yuplan small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.versus2__antes { background: #F5F6F8; color: var(--suave); }
.versus2__antes small { color: #9AA3B0; }
.versus2__yuplan { background: var(--teal-claro); color: var(--tinta); font-weight: 600; }
.versus2__yuplan small { color: var(--teal-700); }
.versus2__antes::before, .versus2__yuplan::before { position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; }
.versus2__antes::before { content: '✕'; background: #E3E6EB; color: #8A93A0; }
.versus2__yuplan::before { content: '✓'; background: var(--teal); color: #fff; }
.versus2__cta { margin-top: 32px; }
@media (min-width: 760px) {
  .versus2 { gap: 0; border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
  .versus2__cab, .versus2__linha { display: grid; grid-template-columns: 1.1fr 1.4fr 1.6fr; align-items: center; gap: 0; }
  .versus2__cab span { padding: 14px 20px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9AA3B0; }
  .versus2__cab span:last-child { color: var(--teal-700); background: var(--teal-claro); }
  .versus2__linha { border: 0; border-top: 1px solid var(--linha); border-radius: 0; padding: 0; }
  .versus2__tema { padding: 18px 20px; font-size: 1rem; }
  .versus2__antes, .versus2__yuplan { border-radius: 0; padding: 18px 20px 18px 50px; height: 100%; display: flex; align-items: center; }
  .versus2__antes { background: none; }
  .versus2__antes small, .versus2__yuplan small { display: none; }
  .versus2__antes::before, .versus2__yuplan::before { left: 20px; top: 50%; transform: translateY(-50%); }
}

/* v24: foto do fechamento recortada (PNG sem fundo) — a pessoa "pisa" na base da seção */
@media (min-width: 900px) {
  .final__foto { align-self: end; }
  .final__foto img { border-radius: 0; height: 500px; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; display: block; margin: 0 auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .25)); }
}

/* v25: Modalidades vira "Qual é o seu caso?" (3 situações) */
.caso { position: relative; }
.caso__icone { width: 48px; height: 48px; border-radius: 12px; background: var(--teal-claro); display: grid; place-items: center; margin-bottom: 16px; }
.caso__icone svg { width: 26px; height: 26px; fill: none; stroke: var(--teal-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.caso h3 { margin-bottom: 6px; }
.caso__quem { margin-bottom: 18px; }
.caso--destaque { border: 2px solid var(--teal); }
.caso__tag { position: absolute; top: -13px; left: 22px; background: var(--teal); color: #fff; font-size: .74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.casos { margin-top: 48px; row-gap: 30px; }

/* v26: Como funciona do ponto de vista do cliente, com o tempo de cada passo; sem a caixa versus (a tabela do "Por que Yuplan" já compara) */
.passo__tempo { display: inline-block; font-style: normal; font-size: .76rem; font-weight: 700; color: var(--teal-700); background: var(--teal-claro); padding: 3px 10px; border-radius: 999px; margin: 2px 0 10px; }
.como .passos4 + .centro { margin-top: 40px; }

/* v27: "10 razões" vira o manifesto (faixa escura, ícone por palavra, rima "-idade" em destaque), depois dos depoimentos */
.manifesto { background: radial-gradient(800px 420px at 10% 0%, rgba(2, 186, 186, .18), transparent 60%), #0B1F3A; color: rgba(255, 255, 255, .8); }
.manifesto h2 { color: #fff; }
.manifesto .eyebrow { color: var(--teal); }
.manifesto__lista { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; }
.manifesto__lista li { display: flex; flex-direction: column; gap: 6px; }
.manifesto__icone { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(2, 186, 186, .45); display: grid; place-items: center; margin-bottom: 6px; }
.manifesto__icone svg { width: 20px; height: 20px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.manifesto__lista strong { font: 800 1.2rem/1.1 var(--f-titulo); color: #fff; letter-spacing: -.01em; }
.manifesto__lista em { font-style: normal; color: var(--teal); }
.manifesto__frase { font-size: .86rem; line-height: 1.45; color: rgba(255, 255, 255, .68); }
@media (min-width: 760px) { .manifesto__lista { grid-template-columns: repeat(3, 1fr); gap: 34px 28px; } .manifesto__lista strong { font-size: 1.4rem; } .manifesto__frase { font-size: .92rem; } }
@media (min-width: 1100px) { .manifesto__lista { grid-template-columns: repeat(5, 1fr); } }

/* v28: depoimentos com aspas grandes, borda verde-água no topo e inicial do cliente */
.depo { background: var(--teal-claro); }
.depo__cards figure { position: relative; border: 0; border-top: 3px solid var(--teal); box-shadow: 0 10px 30px rgba(12, 26, 43, .06); padding-top: 52px; }
.depo__cards figure::before { content: '“'; position: absolute; top: 6px; left: 22px; font: 800 4.2rem/1 var(--f-titulo); color: var(--teal); opacity: .35; }
.depo__cards figcaption { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; }
.depo__cards figcaption .depo__ini { grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; background: var(--teal-claro); color: var(--teal-700); display: grid; place-items: center; font: 800 1rem var(--f-titulo); }

/* v29: fotos e estrelas dos depoimentos (vindas do site antigo) */
.depo__cards figcaption .depo__foto { grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--teal-claro); }
.depo__estrelas { color: #F5B301; font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 10px; }
.depo__cards figure { padding-top: 24px; }
.depo__cards figure::before { content: none; }

/* v30: cartão "Prefere perguntar para uma pessoa?" na coluna das perguntas */
.faq-pessoa { margin-top: 28px; background: var(--teal-claro); border-radius: var(--r-lg); padding: 22px; }
.faq-pessoa__fotos { display: flex; margin-bottom: 12px; }
.faq-pessoa__fotos img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.faq-pessoa__fotos img + img { margin-left: -12px; }
.faq-pessoa strong { display: block; color: var(--tinta); font-size: 1.05rem; }
.faq-pessoa p { color: var(--suave); margin: 4px 0 16px; font-size: .95rem; }
@media (min-width: 900px) { .duvidas__grid > div:first-child { position: sticky; top: 100px; align-self: start; } }

/* v31: fechamento com as duas promessas + garantia; rodapé com ícones, navegação e legenda dos selos */
.final__garantia { margin-top: 14px; font-size: .88rem !important; color: rgba(255, 255, 255, .7); }
.rodape__ico { display: inline-flex; align-items: center; gap: 8px; }
.rodape__ico svg { width: 16px; height: 16px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.rodape__nav { display: grid; gap: 6px; }
.rodape__selos-nota { font-size: .76rem; margin-top: 8px; color: rgba(255, 255, 255, .55); }
@media (min-width: 900px) { .rodape__grid { grid-template-columns: 1.4fr 1fr .8fr 1fr; gap: 40px; } }
@media (max-width: 899px) { .rodape__nav { grid-template-columns: 1fr 1fr; } }

/* v32: rodapé — botão de WhatsApp, itens com ícone (e-mail, horário, endereço) e link do mapa */
.rodape__whats { display: inline-flex; align-items: center; gap: 12px; background: rgba(37, 211, 102, .1); border: 1px solid rgba(37, 211, 102, .35); border-radius: 12px; padding: 10px 16px 10px 12px; margin-bottom: 16px; transition: background .15s; }
.rodape__whats:hover { background: rgba(37, 211, 102, .18); }
.rodape__whats svg { width: 28px; height: 28px; fill: #25D366; flex: 0 0 auto; }
.rodape__whats strong { display: block; color: #fff; font-size: .95rem; }
.rodape__whats small { color: rgba(255, 255, 255, .65); font-size: .82rem; }
.rodape__item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; line-height: 1.5; }
.rodape__item svg { width: 17px; height: 17px; margin-top: 3px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.rodape a.rodape__mapa { color: var(--teal); font-weight: 600; display: inline-block; margin-top: 4px; }
@media (min-width: 900px) { .rodape__grid { grid-template-columns: 1.25fr 1fr .7fr 1.2fr; gap: 36px; } }

/* v34: item do menu da seção visível */
.topo__nav a.ativo { color: #fff; box-shadow: inset 0 -2px 0 var(--teal); }
@media (max-width: 1023px) { .topo__nav a.ativo { box-shadow: none; color: var(--teal); } }

/* v35/37: menu por extenso só a partir de 1024px (abaixo, hambúrguer) — entre 900 e 1100 os itens quebravam em duas linhas */
.topo__nav a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) { .topo__nav { gap: 20px; } .topo__logo img { height: 46px; } .topo__in { gap: 20px; } }
@media (min-width: 640px) and (max-width: 1023px) { .topo__nav { left: auto; width: 320px; border-radius: 0 0 0 14px; } }
/* v35: "Quem somos" vazava 17px em 900px — a foto encolhe em telas médias */
@media (min-width: 900px) { .quem__grid { grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); } }

/* ===== v38: ícones, imagens e animações sobre o conteúdo aprovado (27/10/2026) =====
   Tudo que esconde algo para animar depende de html.anima, que o v2.js só põe quando há
   IntersectionObserver e o visitante não pediu "reduzir movimento". Sem JS, nada some. */

/* ícones no menu */
.topo__nav a { display: inline-flex; align-items: center; gap: 7px; }
.topo__nav .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: opacity .15s, color .15s; flex: 0 0 auto; }
.topo__nav a:hover .ic, .topo__nav a.ativo .ic { opacity: 1; color: var(--teal); }
@media (max-width: 1023px) { .topo__nav a { gap: 12px; } .topo__nav .ic { width: 18px; height: 18px; color: var(--teal); opacity: 1; } }

/* ícones dos passos */
.passos4 h3 { display: flex; align-items: center; gap: 8px; }
.passo__ic { width: 20px; height: 20px; fill: none; stroke: var(--teal-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* entrada suave ao rolar */
html.anima .rv { opacity: 0; transform: translateY(22px); }
html.anima .rv.visivel { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--atraso, 0s); }

/* tabela tradicional × Yuplan: primeiro o ✕, depois o ✓ */
html.anima .versus2__linha .versus2__antes, html.anima .versus2__linha .versus2__yuplan { opacity: 0; transform: translateX(-8px); }
html.anima .versus2__linha.visivel .versus2__antes { opacity: 1; transform: none; transition: opacity .5s, transform .5s; transition-delay: calc(var(--atraso, 0s) + .15s); }
html.anima .versus2__linha.visivel .versus2__yuplan { opacity: 1; transform: none; transition: opacity .5s, transform .5s; transition-delay: calc(var(--atraso, 0s) + .55s); }

/* planos: ícone ganha vida ao passar o mouse */
.caso__icone { transition: transform .25s, background .25s; }
.caso:hover .caso__icone { transform: translateY(-2px) rotate(-6deg); background: var(--teal); }
.caso:hover .caso__icone svg { stroke: #fff; }

/* como funciona: linha que liga os números e se enche */
@media (min-width: 900px) {
  .passos4 { position: relative; }
  .passos4::before { content: ''; position: absolute; top: 23px; left: 46px; right: calc(25% - 41px); height: 2px; background: linear-gradient(var(--teal), var(--teal)) 0 0 / 0% 100% no-repeat, var(--linha); }
  .passos4 li > span { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--fundo); }
  html:not(.anima) .passos4::before, .passos4.visivel::before { background-size: 100% 100%, auto; }
  html.anima .passos4.visivel::before { transition: background-size 1.6s cubic-bezier(.4, 0, .2, 1) .3s; }
}

/* depoimentos: estrelas se acendem uma a uma */
.depo__estrelas i { font-style: normal; display: inline-block; }
html.anima .depo__estrelas i { color: #DDE3EA; transform: scale(.6); }
html.anima .visivel .depo__estrelas i { color: #F5B301; transform: none; transition: color .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
html.anima .visivel .depo__estrelas i:nth-child(1) { transition-delay: .35s; }
html.anima .visivel .depo__estrelas i:nth-child(2) { transition-delay: .45s; }
html.anima .visivel .depo__estrelas i:nth-child(3) { transition-delay: .55s; }
html.anima .visivel .depo__estrelas i:nth-child(4) { transition-delay: .65s; }
html.anima .visivel .depo__estrelas i:nth-child(5) { transition-delay: .75s; }

/* manifesto: ícones se desenham */
html.anima .manifesto__icone path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.anima .manifesto__lista li.visivel .manifesto__icone path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; transition-delay: calc(var(--atraso, 0s) + .2s); }

/* perguntas: a resposta abre deslizando */
.faq details[open] p { animation: faqAbre .35s ease; }
@keyframes faqAbre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* como funciona: título ao lado do celular */
.como__topo { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .como__topo { grid-template-columns: 1fr 320px; gap: 64px; }
  .como__texto .eyebrow, .como__texto .centro { text-align: left; }
  .como__texto .intro { margin-left: 0; }
}

/* celular com a conversa no WhatsApp */
.cel { width: min(300px, 86%); margin: 0 auto; }
.cel__tela { aspect-ratio: 9 / 16.5; border-radius: 38px; border: 9px solid #0E1B2E; background: #EFEAE2; box-shadow: var(--sombra), 0 0 0 1px rgba(11, 31, 58, .12); overflow: hidden; display: flex; flex-direction: column; }
.cel__topo { display: flex; align-items: center; gap: 10px; background: #0B1F3A; color: #fff; padding: 16px 14px 10px; }
.cel__topo strong { display: block; font-size: .9rem; line-height: 1.1; }
.cel__topo small { font-size: .72rem; color: rgba(255, 255, 255, .65); }
.cel__av { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; font: 800 .95rem var(--f-titulo); flex: 0 0 auto; }
.cel__chat { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 10px; }
.cel__msg { position: relative; max-width: 84%; background: #fff; color: #111B21; font-size: .8rem; line-height: 1.38; padding: 7px 10px 16px; border-radius: 4px 12px 12px 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.cel__msg small { position: absolute; right: 8px; bottom: 3px; font-size: .62rem; color: #8696A0; }
.cel__msg--eu { align-self: flex-end; background: #D9FDD3; border-radius: 12px 4px 12px 12px; }
.cel__doc { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; }
.cel__doc strong { display: block; font-size: .78rem; }
.cel__doc small { position: static; font-size: .68rem; }
.cel__pdf { width: 30px; height: 36px; border-radius: 4px; background: #E5484D; color: #fff; font: 800 .58rem var(--f-titulo); display: grid; place-items: center; flex: 0 0 auto; }
.cel__selo { align-self: center; background: var(--teal); color: #fff; font-size: .74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.cel__dia { align-self: center; background: #fff; color: #54656F; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 8px; }
.cel__digita { align-self: flex-start; background: #fff; border-radius: 12px; padding: 9px 12px; display: none; gap: 4px; }
.cel__digita i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: celPonto 1s infinite; }
.cel__digita i:nth-child(2) { animation-delay: .15s; } .cel__digita i:nth-child(3) { animation-delay: .3s; }
@keyframes celPonto { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.cel__barra { display: flex; align-items: center; gap: 8px; padding: 8px 10px 14px; }
.cel__barra span { flex: 1; background: #fff; border-radius: 999px; padding: 7px 12px; font-size: .74rem; color: #8696A0; }
.cel__barra i { width: 30px; height: 30px; border-radius: 50%; background: var(--whats); }
/* sem animação, o celular mostra a conversa inteira parada (flex-end mantém o fim à vista) */
html.anima .cel [data-p] { display: none; }
html.anima .cel [data-p].on { display: flex; animation: celEntra .35s cubic-bezier(.2, .7, .2, 1); }
html.anima .cel .cel__msg.on:not(.cel__doc) { display: block; }
@keyframes celEntra { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) { .cel { width: min(270px, 78%); } }

/* v39: fechamento em verde-água escuro (o #314C7D parecia desbotado entre o branco das perguntas e o rodapé),
   botão principal branco e ícones nos botões */
.final { background: radial-gradient(700px 420px at 85% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(135deg, #018A8A 0%, #015F63 100%); }
.final .btn--primario { background: #fff; color: #015F63; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45); }
.final .btn--primario:hover { background: #F0FBFB; }
.final .btn--contorno { border-color: rgba(255, 255, 255, .7); color: #fff; }
.final__garantia { color: rgba(255, 255, 255, .85) !important; }
.final__botoes .btn { display: inline-flex; align-items: center; gap: 9px; }
.btn__ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.btn__ic--wa { fill: currentColor; stroke: none; }

/* ===== v41: Cotador rápido — cara de ferramenta, etapas com nome, altura contida (27/10/2026) ===== */
.cot { padding: 0 !important; overflow: hidden; min-height: 0; }
.cot__cab { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, #0B1F3A 0%, #12325A 100%); color: #fff; }
.cot__marca { width: 44px; height: 44px; border-radius: 12px; background: var(--teal); display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 8px 18px -8px rgba(2, 186, 186, .8); }
.cot__marca svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cot__nome { flex: 1; min-width: 0; }
.cot__titulo { font: 800 1.15rem/1.15 var(--f-titulo); color: #fff; margin: 0; letter-spacing: -.01em; text-transform: none; }
.cot__sub { margin: 2px 0 0; font-size: .82rem; color: rgba(255, 255, 255, .72); }
.cot__online { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: #7EF0C6; background: rgba(126, 240, 198, .12); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.cot__online i { width: 7px; height: 7px; border-radius: 50%; background: #3BE29E; box-shadow: 0 0 0 0 rgba(59, 226, 158, .6); animation: cotPulso 1.8s infinite; }
@keyframes cotPulso { 70% { box-shadow: 0 0 0 7px rgba(59, 226, 158, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 226, 158, 0); } }

/* etapas com nome */
.cot__passos { list-style: none; margin: 0; padding: 12px 20px; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--linha); background: #F7F9FB; }
.cot__passos li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: #98A2B0; }
.cot__passos li::before { content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--linha); z-index: 0; }
.cot__passos li:first-child::before { display: none; }
.cot__passos li.on::before, .cot__passos li.feito::before { background: var(--teal); }
.cot__passos b { position: relative; z-index: 1; width: 25px; height: 25px; border-radius: 50%; background: #fff; border: 2px solid var(--linha); display: grid; place-items: center; font: 800 .72rem var(--f-titulo); color: #98A2B0; transition: all .25s; }
.cot__passos li.on { color: var(--tinta); }
.cot__passos li.on b { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 0 0 4px rgba(2, 186, 186, .18); }
.cot__passos li.feito { color: var(--teal-700); cursor: pointer; }
.cot__passos li.feito b { background: var(--teal-claro); border-color: var(--teal); color: transparent; }
.cot__passos li.feito b::after { content: '✓'; position: absolute; color: var(--teal-700); font-size: .8rem; }

/* corpo com altura estável: as etapas trocam no mesmo espaço */
.cot__corpo { padding: 18px 20px 20px; min-height: 340px; }
@media (min-width: 640px) { .cot__corpo { padding: 20px 24px 22px; } }
.cot__perg { font: 800 1.12rem/1.25 var(--f-titulo); color: var(--tinta); margin: 0 0 14px; }
.cot .sim__etapa:not([hidden]) { animation: cotEntra .3s ease; }
@keyframes cotEntra { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cot .sim__etapa:not([hidden]) { animation: none; } .cot__online i { animation: none; } }

/* etapa 1 */
.cot .opcao { position: relative; padding-right: 40px; }
.opcao__seta { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--teal); transition: transform .2s; }
.opcao:hover .opcao__seta { transform: translate(3px, -50%); }
.cot__nota { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; font-size: .82rem; color: var(--suave); line-height: 1.45; }
.cot__nota svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: var(--teal-700); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* etapa 2: cidades em blocos */
.cot__cidades { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.cot__cidades button { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; font: 600 .9rem var(--f-texto); color: var(--tinta); transition: border-color .15s, box-shadow .15s, background .15s; }
.cot__cidades button span { line-height: 1.15; }
.cot__cidades button small { display: block; font-size: .72rem; font-weight: 500; color: var(--suave); }
.cot__cidades svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: #98A2B0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cot__cidades button:hover { border-color: rgba(2, 186, 186, .5); }
.cot__cidades button[aria-checked=true] { border-color: var(--teal); background: var(--teal-claro); box-shadow: 0 0 0 3px rgba(2, 186, 186, .14); }
.cot__cidades button[aria-checked=true] svg { stroke: var(--teal-700); }
.cot .porte, .cot .campo { margin-bottom: 16px; }
.cot [data-acao="pessoas"] .btn__ic { order: 2; }

/* etapa 3: pessoas */
.cot__add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cot__add button { border: 1px solid rgba(2, 186, 186, .45); background: #fff; color: var(--teal-700); border-radius: 999px; padding: 6px 11px; font: 600 .8rem var(--f-texto); cursor: pointer; transition: background .15s; }
.cot__add button:hover { background: var(--teal-claro); }
.cot .idades { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 150px; overflow-y: auto; margin-bottom: 12px; padding: 2px; }
.pes { position: relative; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--linha); border-radius: 12px; padding: 6px 8px 6px 10px; background: #fff; transition: border-color .15s; }
.pes:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(2, 186, 186, .14); }
.pes__ic { width: 26px; height: 26px; border-radius: 50%; background: var(--teal-claro); display: grid; place-items: center; flex: 0 0 auto; }
.pes__ic svg { width: 15px; height: 15px; fill: none; stroke: var(--teal-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pes label { flex: 1; min-width: 0; font-size: .74rem; font-weight: 600; color: var(--suave); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pes input { width: 46px; height: 32px; border: 0; background: var(--fundo-2); border-radius: 8px; text-align: center; font: 800 1rem var(--f-titulo); color: var(--tinta); padding: 0; -moz-appearance: textfield; }
.pes input::-webkit-outer-spin-button, .pes input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pes input:focus { outline: none; background: #fff; }
.pes .idade__tirar { position: static; width: 20px; height: 20px; flex: 0 0 auto; font-size: .9rem; line-height: 1; }
.cot__vivo { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #0B1F3A; color: #fff; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.cot__vivo-rot { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.cot__vivo-rot i { width: 7px; height: 7px; border-radius: 50%; background: #3BE29E; }
.cot__vivo strong { font: 800 1.05rem var(--f-titulo); text-align: right; font-variant-numeric: tabular-nums; }
.cot__vivo strong small { font-size: .72rem; font-weight: 600; color: rgba(255, 255, 255, .65); margin-left: 2px; }
.cot__vivo.calc strong { opacity: .5; }

/* etapa 4: resultado em ranking */
.cot .res { margin-bottom: 12px; }
.cot .res__valor { font-size: 2.4rem; }
.cot .res__sub { margin-bottom: 10px; font-size: .85rem; }
.cot .res__duo { margin-bottom: 0; }
.rank { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; }
.rank li { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.rank li.top { border-color: var(--teal); background: linear-gradient(90deg, rgba(2, 186, 186, .07), #fff 70%); }
.rank__logo { height: 26px; display: flex; align-items: center; }
.rank__logo img { max-height: 26px; max-width: 74px; object-fit: contain; }
.rank__logo b { font: 800 .7rem/1.1 var(--f-titulo); color: var(--teal-700); }
.rank__barra { height: 6px; border-radius: 6px; background: var(--fundo-2); overflow: hidden; }
.rank__barra i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--teal), #5ED6D6); width: 0; transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.rank__preco { text-align: right; font: 800 .92rem var(--f-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank__preco small { display: block; font: 600 .66rem var(--f-texto); color: var(--suave); }
.rank__tag { display: inline-block; margin-left: 4px; font: 700 .6rem var(--f-texto); color: #fff; background: var(--teal); padding: 1px 6px; border-radius: 999px; vertical-align: 1px; }
.rank__mais { background: none; border: 0; color: var(--teal-700); font: 600 .82rem var(--f-texto); cursor: pointer; padding: 4px 0; margin-bottom: 4px; }
.cot .res__consulta { margin: 2px 0 10px; font-size: .78rem; }
.cot__desbloq { margin-top: 8px; }

/* envio */
.cot__resumo { display: flex; align-items: center; gap: 8px; background: var(--teal-claro); color: var(--teal-700); font-size: .82rem; font-weight: 600; border-radius: 10px; padding: 8px 12px; margin: 0 0 14px; }
.cot .lead { border-top: 0; padding-top: 0; }
.cot .lead__titulo { font-size: 1rem; }
.tel { display: flex; align-items: stretch; }
.tel__ddi { display: grid; place-items: center; padding: 0 10px; border: 1.5px solid var(--linha); border-right: 0; border-radius: 10px 0 0 10px; background: var(--fundo-2); font-size: .85rem; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.tel input { border-radius: 0 10px 10px 0 !important; flex: 1; min-width: 0; }

/* pronto: foto da Yara com check */
.ok__foto { position: relative; display: inline-block; margin: 6px auto 14px; }
.ok__foto img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--teal); }
.ok__foto i { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; border: 3px solid #fff; }
.ok__foto svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* carregando: logos acendem */
.cot .sim__carregando { background: rgba(255, 255, 255, .96); gap: 16px; }
.cot .sim__carregando p { font-weight: 600; color: var(--tinta); font-size: .92rem; margin: 0; }
.cot__logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 78px); gap: 10px; }
.cot__logos li { height: 44px; border: 1px solid var(--linha); border-radius: 10px; display: grid; place-items: center; background: #fff; }
.cot__logos img { max-height: 24px; max-width: 62px; filter: grayscale(1); opacity: .35; animation: cotLogo 1.2s infinite; }
.cot__logos li:nth-child(2) img { animation-delay: .2s; } .cot__logos li:nth-child(3) img { animation-delay: .4s; }
.cot__logos li:nth-child(4) img { animation-delay: .6s; } .cot__logos li:nth-child(5) img { animation-delay: .8s; } .cot__logos li:nth-child(6) img { animation-delay: 1s; }
@keyframes cotLogo { 0%, 100% { filter: grayscale(1); opacity: .35; } 40% { filter: none; opacity: 1; } }
/* cotador no celular: opções e cabeçalho compactos */
@media (max-width: 639px) {
  .cot__cab { padding: 14px 16px; gap: 10px; }
  .cot__marca { width: 40px; height: 40px; }
  .cot__titulo { font-size: 1.05rem; }
  .cot__sub { font-size: .76rem; }
  .cot__passos { padding: 10px 12px; }
  .cot__corpo { padding: 16px 16px 18px; min-height: 0; }
  .cot .opcao { padding: 12px 34px 12px 12px; gap: 12px; }
  .cot .opcao__icone { flex-basis: 40px; height: 40px; }
  .cot .opcao strong { font-size: .95rem; }
  .cot .opcao small { font-size: .8rem; }
  .opcao__seta { right: 12px; }
  .cot__cidades button { padding: 9px 10px; font-size: .86rem; }
  .rank li { grid-template-columns: 64px 1fr auto; gap: 8px; padding: 7px 9px; }
  .rank__logo img { max-width: 64px; }
}
/* v43: grade de pessoas sem estourar, botão de desbloquear em uma linha */
.cot .idades { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: hidden; }
.pes { min-width: 0; }
.cot__desbloq { font-size: .95rem; padding: 0 16px; }
@media (max-width: 380px) { .cot .idades { grid-template-columns: 1fr; } }
/* v44: uma pessoa por linha (nomes inteiros), barra ao vivo e botão em uma linha no celular */
.cot .idades { grid-template-columns: 1fr; gap: 6px; max-height: 156px; }
@media (min-width: 380px) { .cot .idades { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pes label { white-space: normal; } }
.pes { padding: 5px 6px 5px 8px; gap: 6px; }
.pes__ic { width: 24px; height: 24px; }
.pes label { font-size: .76rem; overflow: visible; text-overflow: clip; }
.pes input { width: 42px; }
.cot__vivo strong { white-space: nowrap; }
@media (max-width: 639px) { .cot__desbloq { font-size: .86rem; gap: 6px; padding: 0 12px; } .cot__vivo strong { font-size: .98rem; } }

/* v45: Preços como isca — um preço aberto, os outros borrados, exclusivas por cotação e o contato logo abaixo */
.cot .res { margin-bottom: 10px; }
.cot .res__sub { margin-bottom: 0; }
.rank li.fechado { background: #FAFBFC; }
.rank__preco--fechado { display: inline-flex; align-items: center; gap: 6px; }
.rank__borrado { filter: blur(5px); user-select: none; color: var(--tinta); }
.rank__preco--fechado svg { width: 15px; height: 15px; fill: none; stroke: var(--teal-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rank li.fechado .rank__barra i { background: linear-gradient(90deg, #C9D3DD, #E3E8EF); }
.rank__resto { font-size: .8rem; font-weight: 600; color: var(--teal-700); margin: 2px 0 12px; }
.cot__exclusivo { border: 1.5px dashed #E9B949; background: #FFFBEF; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.cot__exclusivo-tit { display: flex; align-items: center; gap: 6px; font: 800 .8rem var(--f-titulo); color: #8A5A00; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.cot__exclusivo-tit svg { width: 15px; height: 15px; fill: #E9B949; stroke: none; }
.cot__exclusivo-logos { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.cot__exclusivo-logos li { height: 30px; min-width: 54px; padding: 0 8px; background: #fff; border: 1px solid #F1E2B8; border-radius: 8px; display: grid; place-items: center; }
.cot__exclusivo-logos img { max-height: 18px; max-width: 64px; object-fit: contain; }
.cot__exclusivo-logos b { font: 800 .62rem var(--f-titulo); color: #8A5A00; }
.cot__exclusivo-txt { font-size: .78rem; color: #6B5320; margin: 0; line-height: 1.4; }
.lead--isca { border-top: 1px solid var(--linha); padding-top: 14px !important; }
.lead--isca .lead__titulo { margin-bottom: 8px; }
.lead__ganhos { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.lead__ganhos li { position: relative; padding-left: 22px; font-size: .82rem; color: var(--tinta); }
.lead__ganhos li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--teal-claro); color: var(--teal-700); font-size: .66rem; font-weight: 800; display: grid; place-items: center; }
.lead__campos { display: grid; gap: 0 10px; }
@media (min-width: 420px) { .lead__campos { grid-template-columns: 1fr 1fr; } }
.lead--isca .campo { margin-bottom: 10px; }
.lead--isca input { height: 44px; }
.lead--isca .tel__ddi { padding: 0 8px; font-size: .8rem; }
/* v46: etapa de preços mais enxuta */
.cot .res__rotulo { font-size: .74rem; }
.cot .res__valor { font-size: 2.1rem; margin: 2px 0; }
.rank li { padding: 6px 10px; }
.rank__resto { margin: 0 0 10px; }
.cot__exclusivo { padding: 8px 10px; margin-bottom: 12px; }
.cot__exclusivo-tit { margin-bottom: 6px; font-size: .74rem; }
.cot__exclusivo-logos li { height: 26px; min-width: 48px; padding: 0 6px; }
.cot__exclusivo-logos img { max-height: 16px; max-width: 56px; }
.cot__exclusivo-txt { font-size: .76rem; }
.lead--isca { padding-top: 12px !important; }
.lead--isca .lead__titulo { font-size: .98rem; margin-bottom: 2px; }
.lead__ganho { font-size: .8rem; color: var(--suave); margin: 0 0 10px; line-height: 1.4; }
@media (min-width: 420px) { .lead__campos { grid-template-columns: 1fr 1.25fr; } }
.lead--isca .campo .rotulo { font-size: .8rem; margin-bottom: 4px; }
.lead--isca .lead__nota { font-size: .7rem; margin-top: 8px; }
.flutua { transition: opacity .25s, transform .25s; }
.flutua--oculto { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ===== v48: auditoria UX/CRO/WCAG do Cotador rápido (27/10/2026, docs/ux-form-audit.md) ===== */
/* contraste: texto azul-marinho sobre o verde-água da marca (6,9:1; branco dava 2,4:1) — vale para todo botão principal */
.btn--primario, .topo__cta { color: #0B1F3A; }
.btn--primario:hover, .topo__cta:hover { color: #0B1F3A; }
.rank__tag { color: #0B1F3A; }
.cot__passos li { color: #5D6979; }
.cot__passos b { color: #5D6979; border-color: #C5CDD7; }
.cot__cidades button small { color: #56606F; }
/* foco visível em tudo que é clicável no cotador */
.cot__passos li[role=button]:focus-visible { outline: 3px solid rgba(2, 186, 186, .55); outline-offset: 3px; border-radius: 8px; }
.cot__perg:focus, .res:focus, .sim__titulo:focus { outline: none; }
.cot .opcao:focus-visible, .cot__cidades button:focus-visible, .cot__add button:focus-visible, .seg button:focus-visible { outline: 3px solid rgba(2, 186, 186, .55); outline-offset: 2px; }
/* alvos de toque (Fitts / WCAG 2.5.8) */
.cot__add button { min-height: 36px; padding: 6px 12px; }
.pes { min-height: 48px; }
.pes input { height: 36px; }
.pes .idade__tirar { width: 28px; height: 28px; font-size: 1rem; }
.cot__passos li[role=button] { cursor: pointer; }
/* erro aparece no próprio campo, não só na mensagem */
.cot input[aria-invalid=true] { border-color: var(--erro) !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, .14); }
.pes:has(input[aria-invalid=true]) { border-color: var(--erro); }
.pes input[aria-invalid=true] { box-shadow: none; background: #FDECEE; }
.cot .sim__erro { margin: 0 0 10px; }
.lead--isca .lead__nota { font-size: .74rem; }

/* v49: Enfermaria | Quarto privativo troca o "a partir de" e o ranking */
.cot__acomod { grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
.cot__acomod button { height: 36px; font-size: .85rem; }

/* v50: cabeçalho do cotador sem "Online", título maior, centralizado e em caixa alta */
.cot__cab { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 18px 20px 16px; }
.cot__marca { width: 42px; height: 42px; }
.cot__nome { flex: none; }
.cot__titulo { font-size: 1.55rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }
.cot__sub { font-size: .86rem; margin-top: 4px; }
@media (min-width: 640px) { .cot__titulo { font-size: 1.7rem; } }
@media (max-width: 639px) { .cot__cab { padding: 16px 16px 14px; } .cot__titulo { font-size: 1.4rem; } .cot__sub { font-size: .8rem; } }
.cot__vivo-rot { font-size: .78rem; color: rgba(255, 255, 255, .75); }
/* v51: ícone na mesma linha do título (economiza altura) */
.cot__cab { gap: 0; padding: 16px 20px 14px; }
.cot__titulo { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.cot__titulo .cot__marca { width: 38px; height: 38px; border-radius: 10px; }
.cot__titulo .cot__marca svg { width: 21px; height: 21px; }
@media (max-width: 639px) { .cot__titulo { gap: 10px; } .cot__titulo .cot__marca { width: 34px; height: 34px; } }

/* v52: sem fio branco na curva de cima (o fundo do cartão era branco sob a faixa azul) e ícone sem caixa */
.cot { background: linear-gradient(to bottom, #0B1F3A 0, #0B1F3A 60px, #fff 60px); }
.cot__cab { background: linear-gradient(135deg, #0B1F3A 0%, #12325A 100%); }
.cot__titulo .cot__marca { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
.cot__titulo .cot__marca svg { width: 28px; height: 28px; stroke: var(--teal); stroke-width: 2; }
.cot__titulo { gap: 10px; }
@media (max-width: 639px) { .cot__titulo .cot__marca { width: auto; height: auto; } .cot__titulo .cot__marca svg { width: 25px; height: 25px; } }
/* v53: "COTADOR" branco e "RÁPIDO" verde-água, como o "é você." do banner; ícone branco */
.cot__titulo .cot__marca svg { stroke: #fff; }
.cot__destaque { color: var(--teal); }
/* v55: a pedido do Yuri, ícone e título inteiros em verde-água */
.cot__titulo { color: var(--teal); }
.cot__titulo .cot__marca svg { stroke: var(--teal); }
/* v56: a pedido do Yuri, ícone e título inteiros em branco */
.cot__titulo, .cot__destaque { color: #fff; }
.cot__titulo .cot__marca svg { stroke: #fff; }

/* v57: pessoas em lista de uma coluna, com colunas fixas (ícone | nome | idade | ×) — nome nunca é comido */
.cot .idades { grid-template-columns: 1fr !important; gap: 6px; max-height: 196px; overflow-y: auto; overflow-x: hidden; padding: 2px 4px 2px 2px; }
.pes { display: grid; grid-template-columns: 26px minmax(0, 1fr) 56px 30px; align-items: center; gap: 10px; min-height: 46px; padding: 5px 8px 5px 10px; }
.pes__ic { width: 26px; height: 26px; }
.pes label { font-size: .9rem; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pes input { width: 56px; height: 36px; font-size: 1.05rem; }
.pes .idade__tirar { justify-self: end; }
/* v58: revisão completa — campos do contato empilhados (número inteiro), placeholder de idade discreto, botão em uma linha no 360 */
.lead--isca .lead__campos { grid-template-columns: 1fr !important; }
.pes input::placeholder { font: 500 .78rem var(--f-texto); color: #8A94A3; }
@media (max-width: 380px) { .cot .btn--bloco { font-size: .9rem; gap: 6px; padding: 0 12px; } }
.cot__dica { margin: -8px 0 12px; font-size: .82rem; color: var(--suave); }

/* v60: revisão geral — contraste mínimo 4,5:1 nos pontos que o axe apontou na página inteira */
.versus2__antes, .versus2__antes small { color: #5D6979; }
.caso__tag, .cel__selo, .passos4 li > span { color: #0B1F3A; }
.cel__msg small, .cel__doc small, .cel__barra span { color: #5E6E77; }
.cel__pdf { background: #C9353B; }
.faq-pessoa p { color: #56606F; }
/* v61: ícone de cada cidade (Congresso, MASP, Cristo, mapa do Brasil) */
.cot__cidades svg { width: 26px; height: 26px; stroke-width: 1.6; }
/* v62: tipo de empresa — MEI · Empresa · Terceiro setor, com ajuda curta */
.seg--porte button { font-size: .86rem; padding: 0 4px; }
.porte__ajuda { display: block; font-size: .78rem; color: var(--suave); margin-top: 6px; }
.seg--porte button { height: auto; min-height: 42px; line-height: 1.15; padding: 4px; }

/* v64: páginas legais (política, termos) no visual novo */
.legal { padding: 48px 0 72px; }
@media (min-width: 900px) { .legal { padding: 72px 0 96px; } }
.legal__wrap { max-width: 780px; }
.legal-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--linha); }
.legal-head h1 { font: 800 clamp(2rem, 5vw, 2.8rem)/1.1 var(--f-titulo); color: var(--tinta); margin: 6px 0 8px; }
.legal-meta { color: var(--suave); font-size: .9rem; margin: 0; }
.legal-content { color: var(--texto); line-height: 1.7; }
.legal-content h2 { font: 800 1.3rem/1.3 var(--f-titulo); color: var(--tinta); margin: 36px 0 10px; }
.legal-content h3 { font: 700 1.05rem/1.3 var(--f-titulo); color: var(--tinta); margin: 22px 0 8px; }
.legal-content ul { padding-left: 20px; margin: 0 0 14px; }
.legal-content li { margin-bottom: 4px; }
.legal-content a, .legal-back { color: var(--teal-700); font-weight: 600; }
.legal-intro { font-size: 1.05rem; color: var(--tinta); }
.legal-back { display: inline-block; margin-top: 32px; }
/* v65: foto do fechamento sem a sombra projetada (formava um halo nas costas) */
.final__foto img { filter: none; }