/* ==========================================================================
   Dra. Danielle Lima · CRM-CE 27891
   Folha de estilos do site

   Parte 1: estilos próprios do site (cores da marca, seções, componentes)
   Parte 2: utilitários de layout (gerados a partir do Tailwind CSS v3.4.17,
            só com as classes usadas no index.html; não precisa de CDN)
   ========================================================================== */

/* ---------- Parte 1: estilos próprios ---------- */

:root {
  --branco: #FFFFFF;
  --creme: #F8F5F1;
  --off-white: #F2EDE7;
  --bege: #E9E1D7;
  --marrom: #3D2D21;
  --ouro: #624F29;
  --terracota: #8F3819;
  --ambar: #955802;
  --borda: rgba(98, 79, 41, 0.16);
  --sombra: 0 18px 44px rgba(61, 45, 33, 0.08);
  --btn-grad: linear-gradient(100deg, #A04A26 0%, #8F3819 45%, #5C220F 100%);
  --header-h: 76px;
  --hero-bg: #D2D0D1;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body { background: var(--branco); color: var(--marrom); font-family: Montserrat, system-ui, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
@media (min-width: 1024px) { body { font-size: 16.5px; } }

.serif { font-family: "Kalnia", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; }
.h2 { font-family: "Kalnia", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; color: var(--ouro); font-size: clamp(28px, 3.4vw, 40px); }
/* Kalnia não tem itálico: palavras em itálico usam Cormorant Infant (itálico caligráfico, como nas artes da Dra.) */
.serif .italic, .h2 em, .h2 i { font-family: "Cormorant Infant", Georgia, serif; font-style: italic; }
.txt { color: rgba(61, 45, 33, 0.86); font-size: 15.5px; }
.container-p { max-width: 1160px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 1024px) { .container-p { padding-inline: 40px; } }
.section { padding-block: 72px; position: relative; }
@media (min-width: 1024px) { .section { padding-block: 112px; } }
.bg-branco { background: var(--branco); }
.bg-creme { background: var(--creme); }
.bg-offwhite { background: var(--off-white); }
.bg-bege { background: var(--bege); }

:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; border-radius: 6px; }
.a-preencher { text-decoration: underline dashed var(--ambar); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Tag em pílula (padrão da inspiração) */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px; background: var(--branco); border: 1px solid var(--borda); box-shadow: 0 6px 16px rgba(61, 45, 33, 0.06); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ouro); line-height: 1.2; }
.tag b { font-weight: 600; color: var(--marrom); }

/* Botão pílula com ícone do WhatsApp em círculo (sem seta) */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 8px 8px 30px; min-height: 56px; border-radius: 999px; background: var(--btn-grad); color: var(--off-white); font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; box-shadow: 0 12px 28px rgba(143, 56, 25, 0.24); transition: transform .25s var(--ease), box-shadow .25s ease, filter .25s ease; }
@media (max-width: 639px) { .btn:not(.btn-sm) { font-size: 11px; letter-spacing: 0.06em; padding-left: 22px; gap: 12px; } }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(143, 56, 25, 0.3); filter: brightness(1.06); }
.btn .ic { width: 40px; height: 40px; border-radius: 999px; background: var(--off-white); color: var(--terracota); display: grid; place-items: center; flex: none; }
.btn .ic svg { width: 19px; height: 19px; }
.btn-sm { min-height: 44px; padding: 6px 6px 6px 18px; gap: 12px; font-size: 11.5px; }
.btn-sm .ic { width: 32px; height: 32px; }
.btn-sm .ic svg { width: 16px; height: 16px; }
@media (max-width: 419px) { .site-header .btn-sm { padding: 6px 16px; } .site-header .btn-sm .ic { display: none; } }
.link-u { color: var(--marrom); font-weight: 500; font-size: 14px; text-decoration: underline; text-decoration-color: rgba(149, 88, 2, 0.5); text-underline-offset: 5px; transition: text-decoration-color .2s; }
.link-u:hover { text-decoration-color: var(--ambar); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); background: var(--hero-bg); transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { background: #FFFFFF; box-shadow: 0 1px 0 var(--borda); }
.site-header .serif { font-size: 16px; }
@media (min-width: 640px) { .site-header .serif { font-size: 20px; } }
@media (max-width: 419px) { .site-header .serif { font-size: 15px; } .site-header a[href="#inicio"] > img { display: none; } }
.nav-link { font-size: 13.5px; color: var(--marrom); position: relative; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ambar); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-link:hover::after { transform: scaleX(1); }
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }

/* ═══════════ HERO (fundo branco): logo PULSAR atrás, foto na frente ═══════════ */
/* Fundo do hero: cinza do ensaio da Dra., com luz suave atrás dela e um toque quente no canto (como nas artes) */
.hero { position: relative; overflow: hidden; padding-top: var(--header-h);
  background:
    radial-gradient(ellipse 55% 50% at 50% 42%, rgba(232, 230, 231, 0.9) 0%, rgba(232, 230, 231, 0) 70%),
    radial-gradient(ellipse 40% 35% at 100% 100%, rgba(184, 140, 122, 0.45) 0%, rgba(184, 140, 122, 0) 70%),
    linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-bg) 70%, #DDDBDC 100%); }
.hero-stage { position: relative; height: min(138vw, 760px); overflow: hidden; }
.hero-word { position: absolute; z-index: 1; left: 50%; top: 5%; width: min(90vw, 700px); transform: translateX(-50%); animation: wordIn 1.4s var(--ease) both; }
@media (orientation: landscape) and (max-width: 1279px) {
  .hero-stage { height: min(138vw, 760px, calc(100svh - var(--header-h))); }
  .hero-word { width: min(90vw, 700px, calc((100svh - var(--header-h)) * 1.05)); }
}
.hero-word img { width: 100%; height: auto; display: block; }
.hero-floor { position: absolute; z-index: 1; left: 50%; bottom: -3%; width: 165vw; transform: translateX(-50%); opacity: .85; pointer-events: none; animation: floorIn 1.6s .3s ease both; }
@keyframes floorIn { from { opacity: 0; } }
.hero-floor img { width: 100%; height: auto; display: block; }
.hero-photo { position: absolute; z-index: 2; left: 50%; bottom: 0; height: 83%; aspect-ratio: 1098 / 1381; transform: translateX(-50%); animation: photoIn 1.2s .15s var(--ease) both; }
.hero-photo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; }
/* Brilho entre a Dra. e a logo: silhueta da própria foto em branco, desfocada, por trás dela (como no ensaio) */
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/fotos/dra-danielle-hero.png") bottom center / contain no-repeat;
  background: image-set(url("../assets/fotos/dra-danielle-hero.webp") type("image/webp"), url("../assets/fotos/dra-danielle-hero.png") type("image/png")) bottom center / contain no-repeat;
  filter: brightness(0) invert(1) blur(26px); opacity: .95; transform: scale(1.08); transform-origin: 50% 100%; }
@media (min-width: 1280px) { .hero-photo::before { background-position: top center; transform-origin: 50% 30%; transform: scale(1.1); filter: brightness(0) invert(1) blur(30px) drop-shadow(0 0 30px #fff); opacity: 1; } }
.hero-copy { position: relative; z-index: 3; }
/* Frases do hero discretas (o destaque é a logo): mesmo tamanho dos dois lados */
.hero-h1 { font-size: 17px; line-height: 1.3; color: var(--ambar); }
.hero .hero-copy { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.hero-col-left, .hero-col-right { max-width: 220px; }
.hero-col-right { text-align: right; flex: none; }
.hero-col-left { min-width: 0; }
/* Celular: as duas frases sempre em duas linhas; o tamanho acompanha a largura da tela */
@media (max-width: 639px) {
  .hero .hero-copy { padding-inline: 20px; gap: 16px; }
  .hero-h1 { font-size: min(17px, calc((100vw - 56px) / 26.5)); letter-spacing: -0.015em; }
  .hero-col-left, .hero-col-right { max-width: none; }
}
@keyframes wordIn { from { opacity: 0; transform: translateX(-50%) scale(1.06); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes photoIn { from { opacity: 0; transform: translateX(-50%) translateY(40px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
/* Desktop: nome e foto saem da MESMA medida (--W), então a proporção entre os dois
   é igual em qualquer tela ou zoom. --W é limitado pela largura e pela altura da janela,
   para o hero caber na tela (altura do hero = header + 24px + 0,8 × --W). */
@media (min-width: 1280px) {
  .hero {
    --W: min(86vw, 1300px, calc((100svh - var(--header-h) - 24px) / 0.8));
    height: calc(var(--header-h) + 24px + var(--W) * 0.8); padding-top: 0;
  }
  .hero-stage { position: absolute; inset: 0; height: auto; overflow: visible; }
  .hero-word { top: calc(var(--header-h) + 12px); width: calc(var(--W) * 0.84); }
  .hero-floor { bottom: calc(var(--W) * -0.07); width: calc(var(--W) * 1.15); opacity: .7; }
  /* halo na cor do fundo: o arabesco some atrás das letras e o texto continua legível */
  .hero-col { text-shadow: 0 0 4px var(--hero-bg), 0 0 10px var(--hero-bg), 0 0 18px var(--hero-bg); }
  .hero-col .btn, .hero-col .tag { text-shadow: none; }
  /* Foto ancorada pelo topo (cabeça sobre a parte de baixo das letras) e 1,1 × --W de altura:
     fica grande e o hero corta na altura do colo, em qualquer tela */
  .hero-photo { top: calc(var(--header-h) + 12px + var(--W) * 0.15); bottom: auto; height: calc(var(--W) * 1.1); }
  .hero .hero-copy { position: absolute; inset: auto 0 0 0; padding-bottom: calc(var(--W) * 0.14); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
  .hero-col { width: calc((100vw - var(--W) * 1.1 * 0.42) / 2 - 56px); max-width: 480px; }
  .hero-col-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
  .hero-h1 { font-size: clamp(18px, 1.35vw, 24px); }
  .hero-col-left, .hero-col-right { max-width: 320px; }
}
.hero-col > * { animation: fadeUp .9s var(--ease) both; }
.hero-col > *:nth-child(1) { animation-delay: .3s; }
.hero-col-right > *:nth-child(1) { animation-delay: .45s; }
.hero-col > *:nth-child(2) { animation-delay: .45s; }
.hero-col > *:nth-child(3) { animation-delay: .6s; }
.hero-col > *:nth-child(4) { animation-delay: .75s; }

/* Faixa rolante */
.marquee { background: var(--marrom); color: var(--off-white); overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; will-change: transform; backface-visibility: hidden; }
.marquee-track span { display: inline-flex; align-items: center; gap: 28px; padding: 15px 14px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.marquee-track img { width: 14px; height: 14px; opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Divisor com aba (notch) */
.notch { position: absolute; left: 50%; top: 0; transform: translate(-50%, -1px); width: 64px; height: 28px; border-radius: 0 0 32px 32px; display: grid; place-items: center; }
.notch img { width: 15px; height: 15px; margin-top: -2px; }

/* Cápsulas */
.capsule { border-radius: 999px; overflow: hidden; aspect-ratio: 1 / 2.35; background: var(--bege); box-shadow: var(--sombra); }
.capsule img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lista li { display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; font-size: 15px; }
.lista .ck { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--terracota); color: var(--off-white); display: grid; place-items: center; margin-top: 1px; }
.lista .ck svg { width: 12px; height: 12px; }
.lista-x .ck { background: transparent; color: var(--ouro); border: 1px solid var(--borda); }

/* Carrossel de atendimentos */
/* Carrossel contínuo, de ponta a ponta da tela: cards cortados nas bordas mostram que há mais passando */
.carrossel { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; padding: 18px 0 40px; }
.carrossel-track { display: flex; width: max-content; animation: carrossel 60s linear infinite; will-change: transform; }
.carrossel:hover .carrossel-track, .carrossel:active .carrossel-track { animation-play-state: paused; }
.carrossel-track .card-s { flex: none; width: 64vw; margin-right: 14px; padding: 32px 22px 28px; }
@media (min-width: 640px) { .carrossel-track .card-s { width: 340px; margin-right: 20px; } }
@keyframes carrossel { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .carrossel { overflow-x: auto; } .carrossel-track { animation: none; } }
.card-s { position: relative; background: linear-gradient(180deg, #FFFFFF 0%, var(--creme) 100%); border: 1px solid rgba(98, 79, 41, 0.1); border-radius: 14px; padding: 40px 30px 34px; box-shadow: var(--sombra); transition: transform .35s var(--ease); }
.card-s:hover { transform: translateY(-4px); }
.card-s::before { content: ""; position: absolute; top: -1px; left: 30px; width: 64px; height: 6px; border-radius: 0 0 6px 6px; background: var(--terracota); }
.ico-c { width: 54px; height: 54px; border-radius: 999px; border: 1px solid rgba(143, 56, 25, 0.35); display: grid; place-items: center; }
.ico-c span { width: 42px; height: 42px; border-radius: 999px; background: var(--terracota); color: var(--off-white); display: grid; place-items: center; }
.ico-c svg { width: 21px; height: 21px; }
.card-s h3 { font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ouro); margin: 26px 0 14px; }
.card-s p { font-size: 14.5px; line-height: 1.65; color: rgba(61, 45, 33, 0.82); }

/* Faixa do nome */

/* Fotos com fundo de cor (PNG recortado) */
.foto-bg { position: relative; border-radius: 18px; overflow: hidden; }
.foto-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.foto-pb img { filter: grayscale(1) contrast(1.05); }
.script { font-family: "Cormorant Infant", Georgia, serif; font-style: italic; font-weight: 500; line-height: .9; color: var(--off-white); }

/* Selo circular */
.seal { width: 128px; height: 128px; position: absolute; z-index: 4; border-radius: 999px; box-shadow: 0 10px 22px rgba(61, 45, 33, 0.14); }
.seal svg.seal-ring { width: 100%; height: 100%; display: block; animation: spin 40s linear infinite; will-change: transform; }
.seal .core { position: absolute; inset: 22%; border-radius: 999px; background: var(--ouro); display: grid; place-items: center; }
.seal .core img { width: 54%; height: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 639px) { .seal { width: 96px; height: 96px; } }

/* ═══════════ CONHEÇA A DRA. (estrutura da inspiração) ═══════════ */
.sec-conheca { background: linear-gradient(120deg, #F3ECE3 0%, #EEE5DA 55%, #F2EBE2 100%); border-block: 1px solid rgba(98, 79, 41, 0.35); padding-block: 56px; }
.conheca-grid { display: grid; gap: 44px; align-items: center; }
.conheca-p { font-size: 16.5px; line-height: 1.55; color: var(--marrom); max-width: 410px; }
.conheca-fotos { display: grid; grid-template-columns: 275fr 352fr; gap: 14px; }
.conheca-foto { position: relative; border-radius: 14px; }
.conheca-foto picture { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.conheca-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.conheca-foto-1 { aspect-ratio: 275 / 505; border-top-left-radius: 64px; background: linear-gradient(180deg, #6E604F 0%, #857560 100%); }
.conheca-foto-2 { aspect-ratio: 352 / 505; background: linear-gradient(180deg, #A39D96 0%, #8B847C 100%); overflow: hidden; }
/* Ao passar o mouse: o card fica parado e a Dra. cresce para cima, saindo pela borda de cima (a foto tem fundo transparente).
   O recorte (clip-path) segura as laterais e a base; em cima ele se abre. */
.conheca-foto picture { overflow: visible; clip-path: inset(0 round 14px); transition: clip-path .7s var(--ease); }
.conheca-foto-1 picture { clip-path: inset(0 round 64px 14px 14px 14px); }
.conheca-foto-2 { overflow: visible; }
.conheca-foto { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.conheca-foto img { transform-origin: 50% 100%; transition: transform .7s var(--ease); }
.conheca-foto.ativa { z-index: 2; }
.conheca-foto.ativa picture { clip-path: inset(-30% 0 0 0 round 14px); }
.conheca-foto-1.ativa picture { clip-path: inset(-30% 0 0 0 round 64px 14px 14px 14px); }
.conheca-foto.ativa img { transform: scale(1.12); }
@media (hover: hover) {
  .conheca-foto:hover { z-index: 2; }
  .conheca-foto:hover picture { clip-path: inset(-30% 0 0 0 round 14px); }
  .conheca-foto-1:hover picture { clip-path: inset(-30% 0 0 0 round 64px 14px 14px 14px); }
  .conheca-foto:hover img { transform: scale(1.12); }
}
.conheca-crm { position: absolute; z-index: 3; left: 10px; top: 57%; white-space: nowrap; box-shadow: 0 10px 24px rgba(61, 45, 33, 0.14); }
.conheca-script { position: absolute; z-index: 2; left: 7%; bottom: 6%; font-size: clamp(38px, 5.4vw, 80px); text-shadow: 0 2px 18px rgba(46, 34, 25, 0.35); }
/* Degradê marrom na base da foto de jaleco, entre a foto e a assinatura, para o texto branco aparecer sobre o jaleco branco */
.conheca-foto-2::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 58%; border-radius: 0 0 14px 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(46, 34, 25, 0) 0%, rgba(46, 34, 25, 0.35) 35%, rgba(46, 34, 25, 0.78) 75%, rgba(46, 34, 25, 0.88) 100%); }
.btn-lg { min-height: 64px; padding: 10px 12px 10px 40px; gap: 22px; font-size: 13px; }
@media (min-width: 1024px) {
  .sec-conheca { padding-block: 42px; }
  .conheca-grid { grid-template-columns: 430fr 643fr; gap: 96px; }
  .conheca-crm { left: 0; transform: translateX(-50%); }
  .sec-conheca .btn-lg { min-width: 420px; justify-content: center; padding-left: 52px; }
}

/* ═══════════ COMO FUNCIONA (estrutura da inspiração) ═══════════ */
.sec-como { background: #F8F4EE; border-top: 1px solid rgba(98, 79, 41, 0.3); padding-block: 72px; }
.como-grid { display: grid; gap: 48px; align-items: center; max-width: 1080px; }
.como-colagem { position: relative; aspect-ratio: 422 / 526; width: 100%; max-width: 460px; margin-inline: auto; }
.como-foto { position: absolute; inset: 0; clip-path: url(#clipComo); background: linear-gradient(180deg, #E8DFD4 0%, #D9CCBC 100%); }
.como-foto picture, .como-foto img { width: 100%; height: 100%; display: block; }
.como-foto img { object-fit: cover; object-position: 50% 6%; }
.como-bloco { position: absolute; left: 0; bottom: 0; width: 30.3%; height: 19%; border-radius: 14px; background: #B99B78; }
.seal.como-seal { width: 27.5%; height: auto; aspect-ratio: 1; right: -1%; top: -1%; }
.como-h2 { font-size: clamp(26px, 2.9vw, 34px); }
.como-intro { font-size: 15px; color: var(--marrom); }
.como-lista li { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; }
.como-lista li + li { border-top: 1px solid rgba(98, 79, 41, 0.22); }
.como-lista .nb { flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--terracota); color: var(--off-white); display: grid; place-items: center; font-family: Montserrat, system-ui, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; }
.como-lista p { font-size: 14.5px; line-height: 1.5; color: var(--marrom); padding-top: 2px; }
.sec-como .btn-lg { width: 100%; max-width: 330px; justify-content: center; padding-left: 36px; }
@media (min-width: 1024px) {
  .sec-como { padding-block: 84px; }
  .como-grid { grid-template-columns: 420fr 560fr; gap: 64px; }
  .como-colagem { max-width: none; }
}

/* Lista numerada */
.num-list li { display: flex; gap: 18px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--borda); }
.num-list .nb { flex: none; width: 38px; height: 38px; border-radius: 999px; background: var(--terracota); color: var(--off-white); display: grid; place-items: center; font-family: Montserrat, system-ui, sans-serif; font-size: 13px; font-weight: 600; }

/* Cartão grande */
.card-l { background: var(--branco); border-radius: 18px; box-shadow: var(--sombra); border: 1px solid rgba(98, 79, 41, 0.08); position: relative; }

/* Linhas das clínicas */
.cl-row { display: flex; flex-direction: column; gap: 3px; padding: 16px 0; border-bottom: 1px solid var(--borda); }
.cl-row:last-child { border-bottom: 0; }
.cl-row h4 { font-family: "Kalnia", Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--marrom); }

/* FAQ */
/* Perguntas em pílula; aberta, a pílula cresce com cantos bem redondos para caber a resposta */
.faq details { background: linear-gradient(180deg, #FFFFFF 0%, var(--creme) 100%); border: 1px solid rgba(98, 79, 41, 0.1); border-radius: 999px; box-shadow: 0 10px 26px rgba(61, 45, 33, 0.06); transition: border-radius .35s var(--ease); }
.faq details[open] { border-radius: 32px; }
.faq details + details { margin-top: 12px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 18px 20px 18px 30px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq .n { font-family: Montserrat, system-ui, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--ouro); flex: none; }
.faq .n::after { content: "|"; margin-left: 10px; color: rgba(98, 79, 41, 0.3); }
.faq .q { flex: 1; }
.faq .ico { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--off-white); position: relative; transition: background-color .3s; }
.faq .ico::before, .faq .ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--marrom); transform: translate(-50%, -50%); }
.faq .ico::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.faq details[open] .ico { background: var(--bege); }
.faq details[open] .ico::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .resp { padding: 0 30px 24px 30px; font-size: 14.5px; color: rgba(61, 45, 33, 0.82); }
@media (min-width: 640px) { .faq .resp { padding-left: 76px; padding-right: 60px; } }

/* Formulário */
.campo { width: 100%; border-radius: 999px; border: 1px solid var(--borda); background-color: var(--branco); padding: 15px 22px; font-size: 14.5px; color: var(--marrom); box-shadow: inset 0 1px 2px rgba(61, 45, 33, 0.04); appearance: none; }
.campo::placeholder { color: rgba(98, 79, 41, 0.6); }
select.campo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23624F29' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 22px center; }

.avatar { width: 52px; height: 52px; border-radius: 999px; overflow: hidden; background: var(--bege); flex: none; border: 2px solid var(--branco); box-shadow: 0 4px 12px rgba(61, 45, 33, 0.12); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; transform: scale(1.9); transform-origin: 50% 12%; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease-out, transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

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

/* Antes eram estilos inline no HTML */
.notch-bege { background: #EFE6DB; }

/* Atendimentos: estampa PULSAR em parallax (camada fixa recortada pelo clip-path da seção; funciona também no iPhone) */
.sec-atend { clip-path: inset(0); overflow-x: clip; isolation: isolate; color: var(--off-white); }
.atend-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background:
    linear-gradient(180deg, rgba(61, 45, 33, 0.94) 0%, rgba(61, 45, 33, 0.82) 45%, rgba(61, 45, 33, 0.94) 100%),
    url("../assets/img/estamparia-pulsar-04.jpg") center top / 670px auto repeat;
  background:
    linear-gradient(180deg, rgba(61, 45, 33, 0.94) 0%, rgba(61, 45, 33, 0.82) 45%, rgba(61, 45, 33, 0.94) 100%),
    image-set(url("../assets/img/estamparia-pulsar-04.webp") type("image/webp"), url("../assets/img/estamparia-pulsar-04.jpg") type("image/jpeg")) center top / 670px auto repeat; }
@media (max-width: 767px) { .atend-bg { background-size: auto, 460px auto; } }
.sec-atend .h2 { color: var(--off-white); }
.sec-atend .notch { z-index: 2; }
.atend-nota { color: rgba(242, 237, 231, 0.82); }
.sec-atend .btn { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
.sec-atend .faq { color: var(--marrom); }
.form-titulo { font-size: clamp(28px, 3vw, 36px); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ═══════════ SEÇÕES NOVAS (doc da Dra., 22/10/2026) — só com os componentes que o site já usa:
   .tag, .card-l, .card-s, .como-lista/.nb, .lista/.ck, .faq, .conheca-foto, .seal ═══════════ */

/* Header: 6 links cabem a partir de 1024px */
.nav-main { gap: 22px; }
@media (min-width: 1200px) { .nav-main { gap: 30px; } }

/* Conheça: frase de abertura e dois fatos */
/* Montagem de fotos do "Conheça a Dra." (igual à do Instituto AMA) */
.sec-conheca { overflow-x: clip; }
.conheca-montagem { position: relative; height: clamp(440px, 80vw, 560px); }
/* Cada foto tem a proporção fixa da imagem (sem esticar no Safari/iPhone) */
.conheca-montagem picture { position: absolute; display: block; }
.conheca-montagem img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.mont-esq, .mont-dir { aspect-ratio: 733 / 1100; }
.mont-centro { aspect-ratio: 733 / 1100; }
/* Fotos de trás: mais baixas, mostrando mais do corpo; somem suavemente embaixo */
.mont-fantasma { top: 10%; height: 90%; opacity: .3;
  --m: linear-gradient(180deg, #000 0%, #000 80%, rgba(0, 0, 0, .55) 92%, transparent 100%);
  -webkit-mask-image: var(--m); mask-image: var(--m); }
.mont-esq { left: -4%; }
.mont-dir { right: -4%; }
.mont-centro { z-index: 2; bottom: 0; left: 50%; height: 92%; transform: translateX(-50%); }
/* Degradê na base das três fotos (máscara na própria foto, sem caixa por cima do fundo) */
.mont-centro img { -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, .55) 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, .55) 86%, transparent 100%); }
.mont-crm { position: absolute; z-index: 4; left: 4%; bottom: 16%; box-shadow: 0 10px 24px rgba(61, 45, 33, 0.14); }
/* Afastamento fixo das fotos de trás (o mesmo que antes só aparecia ao passar o mouse) */
.mont-esq { transform: translateX(-10px); }
.mont-dir { transform: translateX(10px); }
/* Lado direito: fala no topo + montagem que estica até a base da seção */
.conheca-lado { display: flex; flex-direction: column; gap: 8px; }
.conheca-lado .conheca-fala { max-width: 560px; margin-inline: auto; text-align: center; padding-top: 30px; }
.conheca-lado .conheca-fala::before { left: 50%; transform: translateX(-50%); top: -14px; }
@media (min-width: 1024px) {
  .sec-conheca:not(.sec-tele) { padding-top: 64px; padding-bottom: 0; }
  .sec-conheca .conheca-texto { padding-bottom: 64px; align-self: start; }
  .conheca-grid { align-items: stretch; }
  /* a fala começa na mesma linha do primeiro parágrafo da esquerda (abaixo da etiqueta "Conheça a Dra.") */
  .conheca-lado { padding-top: 24px; }
  .conheca-lado .conheca-montagem { flex: 1; height: auto; min-height: 430px; }
  .mont-crm { left: 0; }
}
/* Celular: montagem encostada na base, fotos de trás com respiro das bordas da tela */
@media (max-width: 1023px) {
  .sec-conheca:not(.sec-tele) { padding-bottom: 0; }
  .conheca-montagem { height: min(118vw, 600px); }
  .mont-centro { height: 92%; }
  .mont-fantasma { height: 86%; top: 14%; opacity: .26; }
  .mont-esq { left: -18%; }
  .mont-dir { right: -18%; }
  .mont-crm { left: 0; bottom: 18%; }
}

/* Fala da Dra. (palavras dela): mesma cursiva da assinatura "Dra. Danielle", com aspas */
.conheca-fala { position: relative; max-width: 430px; padding-top: 26px; }
.conheca-fala::before { content: "\201C"; position: absolute; left: -4px; top: -18px; font-family: "Cormorant Infant", Georgia, serif; font-style: italic; font-size: 72px; line-height: 1; color: var(--terracota); opacity: .55; }
.conheca-fala p { font-family: "Cormorant Infant", Georgia, serif; font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.35; color: var(--ouro); }
@media (min-width: 1024px) { .conheca-fala p { font-size: 25px; } }
.conheca-fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 410px; }
.conheca-fatos p { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(98, 79, 41, 0.35); }
.conheca-fatos b { font-weight: 600; font-size: 26px; line-height: 1; color: var(--ouro); }
.conheca-fatos span { font-size: 12.5px; line-height: 1.4; color: rgba(61, 45, 33, 0.85); }

/* Pílula .tag virando botão (sinais, abas de estado e de exame) */
button.tag { cursor: pointer; font-family: inherit; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease); }
button.tag:hover { transform: translateY(-2px); border-color: rgba(143, 56, 25, 0.4); }
button.tag[aria-pressed="true"], button.tag[aria-selected="true"] { background: var(--btn-grad); border-color: transparent; color: var(--off-white); box-shadow: 0 10px 22px rgba(143, 56, 25, 0.24); }

.sec-tele, .sec-como, #onde-atendo { overflow-x: clip; }
/* Cartão grande do "Onde atendo" */
.onde-card { display: grid; gap: 40px; padding: 48px 24px; }
@media (min-width: 640px) { .onde-card { padding: 56px 48px; } }

/* ═══════════ MOTIVOS DE CONSULTA: fundo escuro da paleta, coração pulsando no centro e 4 sinais de cada lado ═══════════ */
.sec-sinais { overflow-x: clip; color: var(--off-white);
  background: radial-gradient(ellipse 45% 50% at 50% 55%, rgba(143, 56, 25, 0.34) 0%, rgba(143, 56, 25, 0) 70%), linear-gradient(180deg, #2E2219 0%, var(--marrom) 100%); }
.sec-sinais .h2 { color: var(--off-white); }
.sinais-mapa { position: relative; display: grid; gap: 22px; margin-top: 40px; }
.sinais-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.sinais-linhas path { fill: none; stroke: #FFF0DC; stroke-width: 1.4; stroke-linecap: round; opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease), opacity .3s ease, stroke-width .3s ease; }
.sinais-mapa.visible .sinais-linhas path { stroke-dashoffset: 0; }
.sinais-linhas path.ativo { opacity: 1; stroke: #FFFFFF; stroke-width: 2; }
.sinais-linhas .ponta { fill: #FFE6C8; }
.sinais-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.sinal-item { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 1px solid rgba(242, 237, 231, 0.22); transition: border-color .3s ease; }
.sinal-item b { font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--off-white); }
.sinal-item span { font-size: 13px; line-height: 1.45; color: rgba(242, 237, 231, 0.62); }
/* Coração: batida dupla (tum-tum) e brilho terracota no mesmo ritmo */
.coracao { position: relative; z-index: 1; width: min(62vw, 250px); margin-inline: auto; order: -1; }
.coracao picture, .coracao picture img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.coracao picture img { transform-origin: 50% 58%; animation: batida 1.2s ease-in-out infinite; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45)); }
.coracao-marca { position: absolute; z-index: 0; left: 50%; top: 52%; width: min(92vw, 170%); max-width: none; height: auto; transform: translate(-50%, -50%); pointer-events: none;
  filter: brightness(0) invert(1) sepia(.35); opacity: .03; }
@media (min-width: 1024px) { .coracao-marca { width: 290%; top: 50%; } }
.coracao-brilho { position: absolute; inset: 12% 6% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(201, 92, 44, 0.75) 0%, rgba(143, 56, 25, 0.35) 45%, rgba(143, 56, 25, 0) 72%); filter: blur(18px); animation: brilho 1.2s ease-in-out infinite; }
@keyframes batida { 0%, 45%, 100% { transform: scale(1); } 10% { transform: scale(1.07); } 20% { transform: scale(0.99); } 30% { transform: scale(1.045); } }
@keyframes brilho { 0%, 45%, 100% { opacity: .45; transform: scale(.95); } 10% { opacity: 1; transform: scale(1.08); } 30% { opacity: .85; transform: scale(1.03); } }
.sinais-fim { max-width: 640px; margin: 48px auto 0; text-align: center; }
.sinais-fecho { font-size: 15px; line-height: 1.65; color: rgba(242, 237, 231, 0.82); }
.sinais-alerta { display: inline-block; text-align: left; padding: 12px 16px; border-left: 2px solid #C95C2C; background: rgba(242, 237, 231, 0.06); border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.55; color: rgba(242, 237, 231, 0.78); }
.sinais-alerta b { color: var(--off-white); }
.sec-sinais .btn { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }
@media (min-width: 1024px) {
  .sinais-mapa { grid-template-columns: 1fr minmax(280px, 340px) 1fr; align-items: center; gap: 72px; margin-top: 56px; }
  .sinais-linhas { display: block; }
  .coracao { width: 100%; order: 0; }
  .sinais-col { grid-template-columns: 1fr; gap: 0; }
  .sinal-item { padding: 18px 0; border-left: 0; cursor: default; }
  .sinais-esq .sinal-item { text-align: right; }
  .sinal-item:hover b { color: #F2C9A8; }
  .sinais-esq .sinal-item:nth-child(2), .sinais-esq .sinal-item:nth-child(3) { margin-right: -28px; }
  .sinais-dir .sinal-item:nth-child(2), .sinais-dir .sinal-item:nth-child(3) { margin-left: -28px; }
}

/* ═══════════ ATENDIMENTOS: cards minimalistas. Fechado: número, ícone de traço fino e título na base.
   Ao passar o mouse/tocar, a própria superfície vira marrom (abre de baixo para cima) e o conteúdo entra em sequência. ═══════════ */
.atend-dica { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 237, 231, 0.75); }
.carrossel.pausado .carrossel-track { animation-play-state: paused; }
.card-x { --cx-rodape: 68px; position: relative; flex: none; width: min(80vw, 320px); height: 340px; margin-right: 14px; padding: 26px 26px 24px; border-radius: 20px; overflow: hidden; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; color: var(--marrom);
  background: linear-gradient(165deg, #FFFFFF 0%, var(--creme) 55%, var(--off-white) 100%); box-shadow: 0 24px 50px rgba(20, 14, 10, 0.22); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
@media (min-width: 640px) { .card-x { margin-right: 20px; height: 335px; } }
.card-x:focus-visible { box-shadow: 0 0 0 2px var(--off-white), 0 24px 50px rgba(20, 14, 10, 0.22); }
.cx-topo { display: flex; align-items: center; justify-content: space-between; }
.cx-ico svg { width: 30px; height: 30px; color: var(--terracota); display: block; }
.cx-topo small { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ambar); line-height: 1.4; padding-right: 12px; }
.cx-base { margin-top: 26px; }
.cx-base h3 { min-height: 2.4em; font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; color: var(--marrom); margin: 0 0 12px; }
.cx-base p { font-size: 14px; line-height: 1.6; color: rgba(61, 45, 33, 0.72); }
.cx-mais { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(98, 79, 41, 0.14); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--marrom); }
.cx-mais i { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(98, 79, 41, 0.25); display: grid; place-items: center; transition: transform .5s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease; }
.cx-mais svg { width: 15px; height: 15px; }
.cx-mais { cursor: pointer; position: relative; z-index: 3; }
.cx-fechar { display: none; }
.card-x.ativa .cx-ver { display: none; }
.card-x.ativa .cx-fechar { display: inline; }
.card-x.ativa .cx-mais i { transform: rotate(180deg); background: var(--marrom); border-color: var(--marrom); color: var(--off-white); }
@media (hover: hover) {
  .card-x:hover { transform: translateY(-6px); }
  .cx-mais:hover i { transform: rotate(45deg); background: var(--terracota); border-color: var(--terracota); color: var(--off-white); }
}
/* Painel: mesma superfície, invertida */
.card-glass { position: absolute; inset: 0 0 var(--cx-rodape) 0; z-index: 2; display: flex; flex-direction: column; padding: 22px 26px 14px; overflow-y: auto; scrollbar-width: none; color: var(--off-white);
  background: radial-gradient(120% 70% at 100% 0%, rgba(149, 88, 2, 0.3) 0%, transparent 60%), linear-gradient(165deg, #5C220F 0%, var(--marrom) 75%); box-shadow: inset 0 0 0 1px rgba(242, 237, 231, 0.16);
  clip-path: inset(100% 0 0 0 round 20px 20px 0 0); pointer-events: none; transition: clip-path .7s var(--ease); }
.card-glass::-webkit-scrollbar { display: none; }
.card-glass > * { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .6s var(--ease); }
.card-x.ativa .card-glass, .card-x:focus-visible .card-glass { clip-path: inset(0 0 0 0 round 20px 20px 0 0); pointer-events: auto; }
.card-x.ativa .card-glass > *, .card-x:focus-visible .card-glass > * { opacity: 1; transform: none; }
.card-glass > :nth-child(1) { transition-delay: .12s; }
.card-glass > :nth-child(2) { transition-delay: .18s; }
.card-glass > :nth-child(3) { transition-delay: .24s; }
.card-glass > :nth-child(4) { transition-delay: .3s; }
.card-glass > :nth-child(5) { transition-delay: .36s; }
.card-glass small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242, 237, 231, 0.55); }
.card-glass h4 { font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; color: var(--off-white); margin: 0 0 8px; }
.card-glass p { font-size: 13.5px; line-height: 1.55; color: rgba(242, 237, 231, 0.82); }
.cx-lista { margin-top: 10px; }
.cx-duas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.cx-lista li { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 12.5px; line-height: 1.35; color: var(--off-white); border-top: 1px solid rgba(242, 237, 231, 0.14); }
.cx-lista li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 999px; background: rgba(242, 237, 231, 0.55); }
.passos-mini { counter-reset: p; margin-top: 12px; }
.passos-mini li { counter-increment: p; display: flex; gap: 12px; align-items: center; padding: 6px 0; font-size: 13px; line-height: 1.4; color: var(--off-white); border-top: 1px solid rgba(242, 237, 231, 0.14); }
.passos-mini li::before { content: "0" counter(p); flex: none; width: 26px; height: 26px; border-radius: 999px; border: 1px solid rgba(242, 237, 231, 0.35); display: grid; place-items: center; font-size: 10.5px; font-weight: 600; }
.card-prep { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--off-white); }
.card-prep svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.card-prep:hover svg { transform: translate(2px, -2px); }

/* ═══════════ ONDE ATENDO: estados lado a lado, já abertos (cards brancos no estilo do site) ═══════════ */
.onde-topo { display: grid; gap: 32px; align-items: start; }
.onde-topo .h2 { max-width: 560px; }
.onde-info { display: grid; gap: 22px; }
.onde-info li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
.onde-info-ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(143, 56, 25, 0.3); color: var(--terracota); display: grid; place-items: center; }
.onde-info-ic svg { width: 19px; height: 19px; }
.onde-info b { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--marrom); padding-top: 1px; }
.onde-info p { margin-top: 3px; font-size: 13px; line-height: 1.5; color: rgba(61, 45, 33, 0.75); }
@media (min-width: 1024px) {
  .onde-info { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .onde-info li { display: flex; flex-direction: column; padding: 0 22px; border-left: 1px solid var(--borda); }
  .onde-info li:first-child { padding-left: 0; border-left: 0; }
  .onde-info-ic { margin-bottom: 14px; }
}
@media (min-width: 1024px) { .onde-topo { grid-template-columns: 5fr 6fr; gap: 56px; } }
.onde-estados { display: grid; gap: 24px; margin-top: 48px; align-items: start; }
@media (min-width: 900px) { .onde-estados { grid-template-columns: 1fr 1fr; } }
.onde-estado { padding: 26px 24px 18px; border-radius: 24px; background: var(--branco); border: 1px solid rgba(98, 79, 41, 0.08); box-shadow: var(--sombra); }
.onde-estado-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--borda); }
.onde-estado-topo h3 { font-family: "Kalnia", Georgia, serif; font-weight: 400; font-size: 24px; color: var(--ouro); }
.onde-estado-topo span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ambar); white-space: nowrap; }
.cl-linha { display: flex; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--borda); }
.onde-lista .cl-linha:last-child { border-bottom: 0; }
.cl-mini { position: relative; flex: none; width: 112px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--bege); border: 1px solid rgba(98, 79, 41, 0.12); }
.cl-mini iframe { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; border: 0; transform: translate(-50%, -50%) scale(.75); pointer-events: none; transition: transform .7s var(--ease); }
.cl-mini:hover iframe { transform: translate(-50%, -50%) scale(.85); }
.cl-mini-pin { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 999px; background: var(--branco); color: var(--terracota); display: grid; place-items: center; box-shadow: 0 6px 14px rgba(61, 45, 33, 0.2); transition: background-color .25s ease, color .25s ease; }
.cl-mini:hover .cl-mini-pin { background: var(--terracota); color: var(--off-white); }
.cl-mini-pin svg { width: 15px; height: 15px; }
.cl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-cidade { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ambar); }
.cl-info h4 { font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--marrom); }
.cl-end { font-size: 13px; line-height: 1.45; color: rgba(61, 45, 33, 0.72); }
.cl-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cl-acoes a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda); font-size: 12px; font-weight: 500; color: var(--marrom); transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.cl-acoes a:hover { background: var(--btn-grad); border-color: transparent; color: var(--off-white); }
.cl-acoes svg { width: 13px; height: 13px; }
.onde-tele { display: flex; align-items: center; gap: 14px; margin: 6px -8px 0; padding: 14px 16px; border-radius: 18px; background: var(--off-white); color: var(--marrom); transition: background-color .25s ease; }
.onde-tele:hover { background: var(--bege); }
.onde-tele-ic { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--btn-grad); color: var(--off-white); display: grid; place-items: center; }
.onde-tele-ic svg { width: 19px; height: 19px; }
.onde-tele b { display: block; font-size: 14px; font-weight: 600; }
.onde-tele span:nth-child(2) { flex: 1; font-size: 13px; color: rgba(61, 45, 33, 0.75); }
.onde-tele i { font-style: normal; font-size: 18px; color: var(--terracota); transition: transform .3s var(--ease); }
.onde-tele:hover i { transform: translateX(4px); }
@media (max-width: 479px) { .cl-mini { width: 88px; } .onde-estado { padding: 22px 18px 14px; } }

/* ═══════════ PREPARO PARA EXAMES (lógica do Portfólio do Status Brand: filtros em cima, card grande com foto + dois cards de texto) ═══════════ */
.sec-preparo { overflow-x: clip; color: var(--off-white);
  background: radial-gradient(ellipse 50% 40% at 50% 30%, rgba(143, 56, 25, 0.26) 0%, rgba(143, 56, 25, 0) 70%), linear-gradient(180deg, var(--marrom) 0%, #2E2219 100%); }
.prep-kicker { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid rgba(242, 237, 231, 0.18); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242, 237, 231, 0.6); }
.prep-kicker span:last-child { text-align: right; }
.prep-titulo { color: var(--off-white); text-align: center; max-width: 720px; margin: 44px auto 0; }
.prep-filtros { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 32px 0 40px; }
.prep-tab { padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(242, 237, 231, 0.25); color: rgba(242, 237, 231, 0.72); font-size: 13px; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.prep-tab:hover { border-color: rgba(242, 237, 231, 0.6); color: var(--off-white); }
.prep-tab[aria-selected="true"] { background: var(--off-white); border-color: var(--off-white); color: var(--marrom); font-weight: 600; }
.prep-painel.ativo { animation: fadeUp .6s var(--ease) both; }
.prep-card { display: flex; flex-direction: column; min-width: 0; }
.prep-img { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 2 / 1; background: var(--marrom); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7); }
.prep-img picture, .prep-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
#prep-mapa .prep-img img { object-position: 50% 18%; }
#prep-espirometria .prep-img img { object-position: 30% 50%; }
#prep-holter .prep-img img { object-position: 40% 50%; }
.prep-principal:hover .prep-img img { transform: scale(1.035); }
.prep-label { position: absolute; left: 22px; top: 22px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--marrom); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.prep-caption { margin-top: 18px; }
.prep-caption h3 { font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--off-white); }
.prep-caption p { margin-top: 5px; font-size: 12.5px; color: rgba(242, 237, 231, 0.55); }
.prep-dupla { display: grid; gap: 36px 24px; margin-top: 40px; }
@media (min-width: 768px) { .prep-dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prep-tipo { flex: 1; display: flex; flex-direction: column; padding: 32px 30px 28px; border-radius: 18px; border: 1px solid rgba(242, 237, 231, 0.1); color: var(--off-white);
  background: radial-gradient(120% 70% at 100% 0%, rgba(149, 88, 2, 0.28) 0%, transparent 60%), linear-gradient(150deg, #5C220F 0%, #33251B 75%); transition: border-color .3s ease, transform .5s var(--ease); }
.prep-card:hover .prep-tipo { border-color: rgba(242, 237, 231, 0.32); transform: translateY(-4px); }
.prep-tipo.claro { background: var(--off-white); color: var(--marrom); border-color: transparent; }
.prep-eb { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242, 237, 231, 0.65); }
.prep-tipo.claro .prep-eb { color: var(--ambar); }
.prep-tipo strong { display: block; font-family: "Kalnia", Georgia, serif; font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.01em; margin: 22px 0 22px; }
.prep-tipo.claro strong { color: var(--ouro); }
.prep-tipo ul { margin-bottom: 22px; }
.prep-tipo li { padding: 10px 0; border-top: 1px solid rgba(242, 237, 231, 0.14); font-size: 14px; line-height: 1.55; color: rgba(242, 237, 231, 0.82); }
.prep-tipo li b { font-weight: 600; color: var(--off-white); }
.prep-tipo.claro li { border-color: rgba(98, 79, 41, 0.14); color: rgba(61, 45, 33, 0.82); }
.prep-tipo.claro li b { color: var(--marrom); }
.prep-nota { margin-bottom: 22px; padding: 12px 14px; border-radius: 10px; background: rgba(143, 56, 25, 0.08); font-size: 13px; line-height: 1.5; color: var(--marrom); }
.prep-foot { margin-top: auto; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242, 237, 231, 0.45); }
.prep-tipo.claro .prep-foot { color: rgba(98, 79, 41, 0.6); }
.prep-rodape { margin-top: 44px; text-align: center; font-size: 13.5px; line-height: 1.8; color: rgba(242, 237, 231, 0.7); }
.prep-rodape .link-u { color: var(--off-white); font-size: 13.5px; margin-left: 6px; text-decoration-color: rgba(242, 237, 231, 0.45); }
.sec-preparo { position: relative; }
.sec-preparo > .container-p { position: relative; z-index: 1; }
.prep-fundo { display: none; }
/* Celular: sem o card do mockup; o mockup troca no fundo da seção, bem apagado, e as instruções aparecem logo abaixo dos botões */
@media (max-width: 899px) {
  .prep-fundo { display: block; position: absolute; inset: 0 0 auto 0; height: min(760px, 100%); z-index: 0; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
  .prep-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .9s ease, transform 4s var(--ease); }
  .prep-fundo img.ativo { opacity: .3; transform: scale(1); }
  .prep-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(61, 45, 33, 0.5) 0%, rgba(61, 45, 33, 0.75) 60%, rgba(61, 45, 33, 0.85) 100%); }
  .prep-principal { display: none; }
  .prep-dupla { margin-top: 0; }
  .prep-dupla .prep-caption { display: none; }
}
/* Desktop: card do mockup na vertical à esquerda; os dois cards de instrução empilhados à direita */
@media (min-width: 900px) {
  .prep-painel:not([hidden]) { display: grid; grid-template-columns: 5fr 6fr; gap: 24px; align-items: stretch; }
  /* a legenda entra dentro do card do mockup, para ele terminar na mesma linha dos cards da direita */
  .prep-principal { position: relative; }
  .prep-principal .prep-img { aspect-ratio: auto; flex: 1; min-height: 460px; }
  .prep-principal .prep-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 28px 26px; border-radius: 0 0 18px 18px; pointer-events: none;
    background: linear-gradient(180deg, rgba(46, 34, 25, 0) 0%, rgba(46, 34, 25, 0.78) 55%, rgba(46, 34, 25, 0.92) 100%); }
  .prep-principal .prep-caption p { color: rgba(242, 237, 231, 0.75); }
  .prep-dupla { grid-template-columns: 1fr; gap: 24px; margin-top: 0; }
  .prep-dupla .prep-caption { display: none; }
  .prep-tipo { padding: 26px 28px 22px; }
  .prep-tipo strong { font-size: clamp(24px, 2.2vw, 30px); margin: 12px 0 14px; }
  .prep-tipo ul { margin-bottom: 14px; }
  .prep-tipo li { padding: 8px 0; font-size: 13.5px; }
  .prep-nota { margin-bottom: 14px; }
}
@media (max-width: 639px) {
  .prep-kicker { font-size: 9px; letter-spacing: 0.1em; }
  .prep-kicker span:last-child { max-width: 140px; }
  .prep-tab { padding: 8px 14px; font-size: 12px; }
  .prep-img { aspect-ratio: 1.3; }
  .prep-tipo { padding: 26px 22px 22px; }
}

/* ═══════════ AGENDE SUA CONSULTA: foto da Dra. atendendo no fundo, sombreada à esquerda ═══════════ */
.sec-agendar { position: relative; overflow: hidden; isolation: isolate; }
.sec-agendar > .container-p { position: relative; z-index: 1; }
.agendar-foto { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 78%;
  --fade: linear-gradient(90deg, #000 0%, #000 38%, rgba(0, 0, 0, .9) 48%, rgba(0, 0, 0, .7) 58%, rgba(0, 0, 0, .45) 68%, rgba(0, 0, 0, .22) 78%, rgba(0, 0, 0, .08) 88%, transparent 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.agendar-foto picture, .agendar-foto img { display: block; width: 100%; height: 100%; }
.agendar-foto img { object-fit: cover; object-position: 42% 35%; filter: saturate(.55) sepia(.3); }
.agendar-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(46, 34, 25, 0.84) 0%, rgba(46, 34, 25, 0.74) 45%, rgba(70, 54, 42, 0.5) 75%, rgba(233, 225, 215, 0.6) 100%); }
.agendar-texto .h2, .agendar-texto .txt { color: var(--off-white); }
.agendar-texto .txt { color: rgba(242, 237, 231, 0.88); }
.agendar-texto .text-ouro, .agendar-texto p[class*="text-ouro"] { color: rgba(242, 237, 231, 0.75); }
.agendar-texto .avatar { border-color: rgba(242, 237, 231, 0.6); }
@media (max-width: 1023px) {
  .agendar-foto { inset: 0 0 auto 0; width: 100%; height: 560px;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .agendar-foto img { object-position: 45% 30%; }
  .agendar-foto::after { background: linear-gradient(180deg, rgba(46, 34, 25, 0.8) 0%, rgba(46, 34, 25, 0.72) 70%, rgba(46, 34, 25, 0.4) 100%); }
}

/* ═══════════ RODAPÉ: escuro, com marca, botões, navegação e informações ═══════════ */
.rodape { background: #2E2219; color: rgba(242, 237, 231, 0.72); padding: 64px 0 28px; }
.rodape-topo { display: grid; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(242, 237, 231, 0.12); }
.rodape-marca img { width: 150px; height: auto; }
.rodape-marca > p { margin-top: 18px; max-width: 340px; font-size: 14px; line-height: 1.65; }
.rodape-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.rodape-botoes .btn { white-space: nowrap; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }
.rodape-insta { text-transform: none !important; letter-spacing: 0.02em !important; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(242, 237, 231, 0.3); color: var(--off-white); font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; transition: background-color .25s ease, border-color .25s ease; }
.rodape-insta:hover { background: rgba(242, 237, 231, 0.08); border-color: rgba(242, 237, 231, 0.6); }
.rodape-insta svg { width: 18px; height: 18px; }
.rodape-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.rodape-tit { margin-bottom: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242, 237, 231, 0.45); }
.rodape-col a { align-self: flex-start; color: rgba(242, 237, 231, 0.82); transition: color .2s ease; }
.rodape-col a:hover { color: var(--off-white); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(242, 237, 231, 0.4); }
.rodape-col b { display: block; font-weight: 600; color: var(--off-white); margin-bottom: 2px; }
.rodape-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 24px; font-size: 12px; color: rgba(242, 237, 231, 0.5); }
.rodape-topo-link { color: rgba(242, 237, 231, 0.6); transition: color .2s ease; }
.rodape-topo-link:hover { color: var(--off-white); }
/* Crédito: bem discreto; só sublinha ao passar o mouse */
.rodape-credito { color: rgba(242, 237, 231, 0.38); font-size: 11.5px; transition: color .2s ease; }
.rodape-credito:hover { color: rgba(242, 237, 231, 0.75); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) { .rodape-topo { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rodape-marca { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .rodape-topo { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; } .rodape-marca { grid-column: auto; } }
@media (max-width: 639px) { .rodape-base { flex-direction: column; align-items: flex-start; } }

/* ═══════════ ACOMPANHAMENTO (inspiração: card grande com etapas numeradas à esquerda e foto à direita) ═══════════ */
.sec-como { background: radial-gradient(ellipse 50% 60% at 85% 40%, rgba(143, 56, 25, 0.22) 0%, rgba(143, 56, 25, 0) 70%), #2E2219; color: var(--off-white); padding-bottom: 88px; overflow: hidden; }
.sec-como > .container-p { position: relative; z-index: 1; }
/* Símbolo Pulsar ao fundo: do meio para a direita, saindo da seção */
.ac-marca { position: absolute; z-index: 0; right: -9%; top: -4%; width: min(70vw, 640px); transform: rotate(-8deg); opacity: .1; filter: brightness(0) invert(1); pointer-events: none; }
@media (max-width: 1023px) { .ac-marca { right: -40%; top: 18%; width: 120vw; } }
.ac-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.ac-topo .h2 { color: var(--off-white); max-width: 560px; }
/* Destaques numa pílula branca só, com os três itens dentro (não parece botão) */
.ac-info { display: inline-flex; flex-wrap: nowrap; align-items: center; max-width: 100%; padding: 10px 22px; border-radius: 999px; background: var(--off-white); white-space: nowrap; }
.ac-info li { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--marrom); }
.ac-info li + li::before { content: ""; width: 4px; height: 4px; margin: 0 14px; border-radius: 999px; background: var(--terracota); opacity: .7; }
@media (max-width: 639px) {
  .ac-info { padding: 9px 12px; }
  .ac-info li { font-size: clamp(8.5px, 2.5vw, 11px); font-weight: 600; letter-spacing: -0.015em; }
  .ac-info li + li::before { margin: 0 6px; width: 3px; height: 3px; }
}
.ac-card { display: grid; gap: 28px; margin-top: 36px; padding: 28px 22px; border-radius: 24px; background: linear-gradient(150deg, #5C2A17 0%, #4A2D20 60%, #432B1F 100%); border: 1px solid rgba(242, 237, 231, 0.08); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.ac-lista li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(242, 237, 231, 0.12); }
.ac-lista li:first-child { border-top: 0; padding-top: 4px; }
.ac-n { flex: none; width: 30px; padding-top: 4px; font-size: 14px; letter-spacing: 0.04em; color: rgba(242, 237, 231, 0.45); }
.ac-lista h3 { font-family: "Kalnia", Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--off-white); }
.ac-lista p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: rgba(242, 237, 231, 0.68); }
.ac-lista li:hover .ac-n { color: #F2C9A8; }
.ac-foto { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; min-height: 0; border: 1px solid rgba(242, 237, 231, 0.25); background: linear-gradient(180deg, #E8DFD4 0%, #CDB9A2 100%); }
.ac-foto picture { position: absolute; inset: 0; }
.ac-foto picture, .ac-foto img { display: block; width: 100%; height: 100%; }
.ac-foto img { object-fit: cover; object-position: 50% 6%; transform-origin: 50% 20%; transition: transform .8s var(--ease); }
.ac-card:hover .ac-foto img { transform: scale(1.02); }
@media (min-width: 1024px) {
  .ac-card { grid-template-columns: 1.35fr 1fr; gap: 44px; padding: 36px 36px 36px 44px; align-items: stretch; }
  .ac-foto { aspect-ratio: auto; min-height: 460px; }
}

/* ═══════════ TELECONSULTA (inspiração: celular com chamada de vídeo à esquerda, texto à direita, símbolo Pulsar claro no fundo) ═══════════ */
.sec-tele { position: relative; overflow: hidden; isolation: isolate; background: var(--bege); }
.tl-marca { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(130vw, 1100px); transform: translate(-50%, -50%); opacity: .5; filter: brightness(0) invert(1); pointer-events: none; }
.tl-grid { position: relative; z-index: 1; display: grid; gap: 56px; align-items: center; }
/* Degradê bege atrás do texto: o símbolo continua ao fundo, mas sem atrapalhar a leitura */
.sec-tele::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 42% 62% at 70% 50%, rgba(233, 225, 215, 0.96) 0%, rgba(233, 225, 215, 0.88) 45%, rgba(233, 225, 215, 0) 78%); }
@media (max-width: 1023px) { .sec-tele::before { background: linear-gradient(180deg, rgba(233, 225, 215, 0) 0%, rgba(233, 225, 215, 0) 42%, rgba(233, 225, 215, 0.92) 55%, rgba(233, 225, 215, 0.96) 100%); } }
.tl-celular { position: relative; width: min(78vw, 300px); margin-inline: auto; padding: 10px; border-radius: 46px; background: linear-gradient(160deg, #4A2D20, #2E2219); box-shadow: 0 50px 90px -30px rgba(46, 34, 25, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tl-tela { position: relative; aspect-ratio: 9 / 19; border-radius: 37px; overflow: hidden; background: radial-gradient(ellipse 90% 60% at 50% 40%, #7A6A5B 0%, #4A3B2F 70%, #33271E 100%); }
.tl-tela picture, .tl-tela img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-tela img { object-fit: cover; object-position: 50% 0%; transform: scale(1.12); transform-origin: 50% 0%; }
.tl-tela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 10, 0.5) 0%, transparent 22%, transparent 62%, rgba(20, 14, 10, 0.55) 100%); pointer-events: none; }
.tl-tela > *:not(picture) { position: absolute; z-index: 2; }
.tl-ilha { top: 12px; left: 50%; width: 88px; height: 26px; border-radius: 999px; background: #120d0a; transform: translateX(-50%); }
.tl-quem { top: 52px; left: 18px; color: var(--off-white); }
.tl-quem b { display: block; font-size: 14px; font-weight: 600; }
.tl-quem span { font-size: 11px; color: rgba(242, 237, 231, 0.75); }
.tl-voce { top: 50px; right: 14px; width: 26%; aspect-ratio: 3 / 4; border-radius: 12px; background: var(--off-white); display: grid; place-items: center; font-size: 11px; color: var(--ouro); }
.tl-aviso { position: absolute; z-index: 3; left: -34px; right: 28px; bottom: 110px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 16px; background: rgba(242, 237, 231, 0.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(242, 237, 231, 0.35); color: var(--off-white); box-shadow: 0 18px 40px rgba(20, 14, 10, 0.3); }
.tl-aviso-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--off-white); color: var(--terracota); display: grid; place-items: center; }
.tl-aviso-ic svg { width: 17px; height: 17px; }
.tl-aviso b { display: block; font-size: 14px; font-weight: 600; }
.tl-aviso span:last-child { font-size: 11px; line-height: 1.35; color: rgba(242, 237, 231, 0.85); }
.tl-botoes { left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; gap: 14px; }
.tl-botoes span { width: 44px; height: 44px; border-radius: 50%; background: var(--off-white); color: var(--marrom); display: grid; place-items: center; }
.tl-botoes span.fim { background: var(--btn-grad); color: var(--off-white); }
.tl-botoes svg { width: 19px; height: 19px; }
.tl-texto .h2 { color: var(--ouro); font-size: clamp(28px, 3.2vw, 42px); max-width: 560px; }
.tl-lead { margin-top: 22px; max-width: 520px; font-size: 15px; line-height: 1.7; color: rgba(61, 45, 33, 0.86); }
.tl-itens { margin-top: 26px; display: grid; gap: 20px; max-width: 520px; }
.tl-itens li { display: flex; gap: 14px; align-items: flex-start; }
.tl-ck { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--btn-grad); color: var(--off-white); display: grid; place-items: center; margin-top: 1px; }
.tl-ck svg { width: 12px; height: 12px; }
.tl-itens b { display: block; font-size: 15px; font-weight: 600; color: var(--marrom); }
.tl-itens p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: rgba(61, 45, 33, 0.8); }
@media (min-width: 1024px) {
  .tl-grid { grid-template-columns: 420fr 600fr; gap: 72px; max-width: 1080px; }
  .tl-celular { width: 320px; }
  .tl-marca { left: 58%; }
}

/* ═══════════ CANTOS ARREDONDADOS EM VOLTA DAS SEÇÕES COM PARALLAX (Atendimentos e Dúvidas), como no site Status Brand:
   a seção de cima termina com os cantos de baixo redondos e a de baixo começa com os de cima redondos,
   as duas sobrepostas à seção com parallax, que aparece por trás dos cantos ═══════════ */
:root { --r-sec: clamp(28px, 4vw, 56px); }
.sec-sinais, .sec-preparo { position: relative; z-index: 2; border-radius: 0 0 var(--r-sec) var(--r-sec); box-shadow: 0 30px 60px rgba(20, 14, 10, 0.35); }
.sec-como, .sec-agendar { position: relative; z-index: 2; margin-top: calc(var(--r-sec) * -1); border-radius: var(--r-sec) var(--r-sec) 0 0; box-shadow: 0 -30px 60px rgba(20, 14, 10, 0.3); }
.sec-atend { margin-top: calc(var(--r-sec) * -1); padding-top: calc(72px + var(--r-sec)); padding-bottom: calc(72px + var(--r-sec)); }
@media (min-width: 1024px) { .sec-atend { padding-top: calc(112px + var(--r-sec)); padding-bottom: calc(112px + var(--r-sec)); } }
.sec-atend .notch { display: none; }
.sec-como { border-top: 0; padding-top: calc(72px + var(--r-sec) * .4); }
@media (min-width: 1024px) { .sec-como { padding-top: calc(84px + var(--r-sec) * .4); } }

/* ---------- Parte 2: utilitários de layout ---------- */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Montserrat, system-ui, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.-right-8 {
  right: -2rem;
}

.-top-12 {
  top: -3rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-mr-2 {
  margin-right: -0.5rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-11 {
  height: 2.75rem;
}

.h-\[22px\] {
  height: 22px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.w-11 {
  width: 2.75rem;
}

.w-\[120px\] {
  width: 120px;
}

.w-\[22px\] {
  width: 22px;
}

.w-full {
  width: 100%;
}

.max-w-\[380px\] {
  max-width: 380px;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[460px\] {
  max-width: 460px;
}

.max-w-\[620px\] {
  max-width: 620px;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[880px\] {
  max-width: 880px;
}

.resize {
  resize: both;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

.self-start {
  align-self: flex-start;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-\[rgba\(98\2c 79\2c 41\2c 0\.16\)\] {
  border-color: rgba(98,79,41,0.16);
}

.bg-bege {
  --tw-bg-opacity: 1;
  background-color: rgb(233 225 215 / var(--tw-bg-opacity, 1));
}

.bg-offwhite {
  --tw-bg-opacity: 1;
  background-color: rgb(242 237 231 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-center {
  text-align: center;
}

.text-\[10\.5px\] {
  font-size: 10.5px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13\.5px\] {
  font-size: 13.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[18px\] {
  font-size: 18px;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.text-ambar {
  --tw-text-opacity: 1;
  color: rgb(149 88 2 / var(--tw-text-opacity, 1));
}

.text-marrom {
  --tw-text-opacity: 1;
  color: rgb(61 45 33 / var(--tw-text-opacity, 1));
}

.text-marrom\/90 {
  color: rgb(61 45 33 / 0.9);
}

.text-ouro {
  --tw-text-opacity: 1;
  color: rgb(98 79 41 / var(--tw-text-opacity, 1));
}

.text-ouro\/80 {
  color: rgb(98 79 41 / 0.8);
}

.text-ouro\/90 {
  color: rgb(98 79 41 / 0.9);
}

.underline {
  text-decoration-line: underline;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:fixed:focus {
  position: fixed;
}

.focus\:left-3:focus {
  left: 0.75rem;
}

.focus\:top-3:focus {
  top: 0.75rem;
}

.focus\:z-\[60\]:focus {
  z-index: 60;
}

.focus\:bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}

.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:text-\[11px\] {
    font-size: 11px;
  }

  .sm\:text-\[22px\] {
    font-size: 22px;
  }
}

@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:text-left {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:ml-auto {
    margin-left: auto;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
}

@media (min-width: 1280px) {
  .xl\:mt-0 {
    margin-top: 0px;
  }

  .xl\:max-w-none {
    max-width: none;
  }

  .xl\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .xl\:pt-0 {
    padding-top: 0px;
  }
}

/* Aberta dentro do painel de métricas (mapa de calor): tudo visível e parado */
.embed .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.embed .carrossel-track, .embed .marquee-track { animation: none !important; }