/* =====================================================================
   Página Invisalign® — componentes só desta página (o resto vem de tema.css + karen.css)
   ===================================================================== */

/* ---------- topo: texto + índice "Nesta página" em vidro ---------- */
.pg-invisalign .pagina-topo { min-height: min(78svh, 720px); }
.pg-invisalign .pagina-topo > .container { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: end; }
.pg-invisalign .pagina-topo .conteudo { max-width: 880px; }
.pg-invisalign .pagina-topo h1 { font-size: clamp(2.3rem, 3.9vw, 3.6rem); line-height: 1.05; }
.pg-invisalign .pagina-topo .lead { color: rgba(246, 244, 242, .9); max-width: 58ch; }
.pg-invisalign .pagina-topo .borb { top: 104px; right: 6%; }
.indice { display: grid; gap: 2px; padding: 16px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(26, 36, 70, .42); }
.indice p { padding: 4px 10px 10px; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--celeste); }
.indice a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; color: #fff; font-weight: 600; font-size: .94rem; line-height: 1.25; transition: background .3s; }
.indice a span { font-family: var(--font-display); font-size: 1rem; color: var(--sol); }
.indice a::after { content: '→'; opacity: .55; transition: transform .35s var(--ease-out), opacity .3s; }
.indice a:hover { background: rgba(255, 255, 255, .1); }
.indice a:hover::after { transform: translateX(3px); opacity: 1; }
@media (max-width: 1080px) {
  .pg-invisalign .pagina-topo > .container { display: block; }
  .indice { display: none; }
}
@media (max-width: 640px) {
  .pg-invisalign .pagina-topo { min-height: 0; }
  .pg-invisalign .pagina-topo h1 { font-size: clamp(1.75rem, 7.6vw, 2.3rem); }
  .pg-invisalign .pagina-topo .row, .pg-invisalign .pagina-topo .row .btn { width: 100%; }
  .pg-invisalign .pagina-topo .row .btn { justify-content: center; white-space: normal; text-align: center; }
}

/* faixa menta: texto e bolinha em índigo */
.faixa.celeste .marquee-item { color: var(--noite); }

/* ---------- o que é ---------- */
.chip-sob-medida { position: absolute; left: -22px; top: 34px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: #fff; color: var(--tinta);
  box-shadow: 0 24px 50px -20px rgba(26, 36, 70, .5); animation: flutua-k 6s ease-in-out infinite; }
.chip-sob-medida svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--sol-claro); fill: none; stroke: var(--sol-tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip-sob-medida span { display: grid; font-size: .8rem; font-weight: 600; color: var(--tinta-2); line-height: 1.25; }
.chip-sob-medida b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--tinta); }
@media (max-width: 640px) { .chip-sob-medida { left: -6px; top: 18px; } }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.trio > div { display: grid; gap: 4px; align-content: start; padding: 18px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--linha-clara); box-shadow: 0 16px 36px -28px rgba(26, 36, 70, .4);
  transition: transform .45s var(--ease-out); }
.trio > div:hover { transform: translateY(-4px); }
.trio .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--celeste-claro); color: var(--azul); margin-bottom: 8px; }
.trio .ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trio b { font-weight: 800; color: var(--tinta); line-height: 1.25; }
.trio span:last-child { font-size: .92rem; color: var(--tinta-2); }
@media (max-width: 600px) {
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio > div { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .trio .ic { grid-row: span 2; margin-bottom: 0; }
}

/* ---------- como funciona: 5 etapas ligadas por uma linha ---------- */
.como-topo { margin-bottom: clamp(40px, 5vw, 64px); }
.como-topo .foto { box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .8); }
.etapas { position: relative; list-style: none; margin: 0; padding: 0; counter-reset: e; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.etapas::before { content: ''; position: absolute; left: 10%; right: 10%; top: 52px; height: 2px; background: linear-gradient(90deg, var(--sol), var(--celeste)); opacity: .7; }
.etapa { position: relative; counter-increment: e; display: flex; flex-direction: column; gap: 8px; padding: 24px 20px 26px; border-radius: 22px; background: var(--noite-2); border: 1px solid var(--line);
  transition: transform .45s var(--ease-out), border-color .3s; }
.etapa:hover { transform: translateY(-5px); border-color: rgba(224, 123, 111, .55); }
.etapa::before { content: counter(e); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; background: var(--sol); color: var(--noite);
  font-family: var(--font-display); font-size: 1.5rem; box-shadow: 0 0 0 7px var(--noite-2); }
.etapa h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.22rem; line-height: 1.2; color: #fff; }
.etapa p { color: var(--muted); font-size: .97rem; }
@media (max-width: 1100px) { .etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .etapas::before { display: none; } }
@media (max-width: 760px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .etapas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .etapa { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .etapa::before { grid-row: span 2; width: 52px; height: 52px; margin-bottom: 0; }
}

/* ---------- rotina: anel das horas de uso ---------- */
@media (min-width: 861px) { .rotina-foto { max-width: 520px; } }
.relogio { position: absolute; right: -34px; bottom: 46px; z-index: 3; width: 156px; height: 156px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 26px 50px -22px rgba(26, 36, 70, .55); }
.relogio svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); transform: rotate(-90deg); }
.relogio circle { fill: none; stroke-width: 7; }
.relogio .anel-fundo { stroke: var(--celeste-claro); }
.relogio .anel-prog { stroke: var(--sol); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 8.3; }
.relogio span { position: relative; display: grid; justify-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); line-height: 1.2; }
.relogio b { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; letter-spacing: 0; text-transform: none; color: var(--tinta); }
@supports (animation-timeline: view()) {
  .relogio .anel-prog { animation: anel-k linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes anel-k { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 8.3; } }
@media (max-width: 860px) { .relogio { right: 4px; bottom: 30px; width: 132px; height: 132px; } .relogio b { font-size: 1.3rem; } }
.habitos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.habito { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; align-content: start; padding: 18px; border-radius: 20px; background: var(--creme); border: 1px solid var(--linha-clara);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.habito:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -30px rgba(26, 36, 70, .5); }
.habito .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--celeste-claro); color: var(--azul); }
.habito .ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.habito h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; color: var(--tinta); margin-bottom: 4px; }
.habito p { color: var(--tinta-2); font-size: .94rem; }
@media (max-width: 600px) { .habitos { grid-template-columns: minmax(0, 1fr); } .habito { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; } }

/* ---------- alinhador × aparelho fixo ---------- */
.comparar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.comp { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: var(--noite-2); border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8); }
.comp header { display: grid; gap: 12px; justify-items: start; }
.comp .tag { padding: 7px 12px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--noite); background: var(--celeste); }
.comp:last-of-type .tag { background: var(--sol); }
.comp h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; color: #fff; }
.comp dl { margin: 0; display: grid; }
.comp dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.comp dt { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--celeste); padding-top: 3px; }
.comp dd { margin: 0; color: var(--fg); }
.comp .fim { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: var(--muted); font-weight: 600; font-size: .95rem; }
.comp .fim::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sol); }
.comparar .ou { align-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--sol); color: var(--noite); font-family: var(--font-display); font-size: 1.5rem;
  box-shadow: 0 0 0 8px rgba(224, 123, 111, .18); }
.centro-row { justify-content: center; margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 900px) {
  .comparar { grid-template-columns: minmax(0, 1fr); }
  .comparar .ou { justify-self: center; width: 54px; height: 54px; font-size: 1.3rem; }
}
@media (max-width: 480px) { .comp dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ---------- para quem ---------- */
.link { color: var(--azul); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--tinta); }
.nota-aval { padding: 16px 20px; border-left: 4px solid var(--azul); border-radius: 0 16px 16px 0; background: var(--celeste-claro); color: var(--tinta); font-weight: 600; max-width: 60ch; }

/* movimento reduzido */
@media (prefers-reduced-motion: reduce) { .chip-sob-medida, .relogio .anel-prog { animation: none !important; } }

/* ---------- revisão final: quebra de linha e respiro no celular ---------- */
.pg-invisalign main h1, .pg-invisalign main h2, .pg-invisalign main h3 { text-wrap: balance; }
.pg-invisalign main p, .pg-invisalign main li, .pg-invisalign main dd, .pg-invisalign .faq-body { text-wrap: pretty; }
@media (max-width: 860px) { .pg-invisalign .grade-2 > .moldura:not(:last-child) { margin-bottom: 18px; } }
@media (min-width: 561px) and (max-width: 860px) { .pg-invisalign .grade-2 > .moldura .foto.r-4x5 { aspect-ratio: 4 / 3; } }