/* Dr. Pedro Firpo · site.css · rodada 11 (05/11/2026). Base da rodada 7 (marca Bastão) e acabamento da rodada 9.
   Pedido do Pedro: "repetitivo, meio morto, sem alma, só com muita foto dele. Mudar por completo."
   Uma foto dele só (capa). Vida: datas de verdade, mensagem que se escreve, a luz do dia em Canguçu, a voz dele. */

@font-face { font-family: "Hanken Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 98%; }

:root {
  --areia: #F3EFE8;
  --palco: #FAF8F4;
  --areia-2: #E9E2D7;
  --petroleo: #1F3F4A;
  --petroleo-2: #163039;
  --grafite: #1E2A2E;        /* texto corrido */
  --meio: #4A5F66;           /* apoio na areia (5,9:1) */
  --claro: #E8E4DC;          /* texto corrido no petróleo */
  --claro-2: #B9C7C9;        /* apoio no petróleo (7:1) */
  --cobre: #B0603A;          /* só título grande, número grande e desenho */
  --cobre-texto: #9A4F2C;    /* cobre em texto abaixo de 24 px */
  --cobre-claro: #E3A27F;    /* cobre sobre petróleo */
  --balao: #D9FDD3;
  --pend: #FBE7A1;

  --fonte: "Hanken Grotesk", "Hanken Fallback", "Helvetica Neue", Arial, sans-serif;
  --corpo: 18px;
  --t-h1: clamp(46px, 5.8vw, 88px);
  --t-h2: clamp(36px, 4.5vw, 68px);
  --t-frase: clamp(24px, 2.5vw, 36px);
  --gut: 20px;
  --sec: 96px;
  --max: 1280px;
  --raio: 4px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --seguro: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) { :root { --gut: 48px; --sec: 128px; } }
@media (min-width: 1024px) { :root { --corpo: 19px; --gut: 72px; --sec: 168px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--areia); color: var(--grafite); font: 400 var(--corpo)/1.55 var(--fonte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
img { max-width: 100%; height: auto; display: block; }
b, strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--cobre-texto); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--cobre-claro); color: var(--petroleo); }
a, button, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nw { white-space: nowrap; }
.pend { background: var(--pend); color: var(--petroleo); padding: 0 .25em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--petroleo); color: var(--areia); padding: 10px 14px; border-radius: var(--raio); }
.pular:focus { top: 12px; }

/* ---------- Títulos: grandes, leves, com as linhas mascaradas pra entrada ---------- */
h1, h2 { font-weight: 400; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
.lin { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.lin > span { display: block; }
h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border: 0; border-radius: var(--raio); font: 600 17px/1.2 var(--fonte); text-decoration: none; cursor: pointer; transition: background-color .25s var(--curva), transform .2s var(--curva); }
.btn svg { font-size: 22px; transition: transform .3s var(--curva); }
.btn:hover svg[aria-hidden] { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-pri { background: var(--petroleo); color: var(--areia); }
.btn-pri:hover { background: var(--petroleo-2); }
.btn-claro { background: var(--areia); color: var(--petroleo); }
.btn-claro:hover { background: var(--palco); }
.btn-sec { background: var(--areia-2); color: var(--petroleo); }
.btn-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-underline-offset .25s var(--curva); }
.btn-link svg { font-size: 19px; }
.btn-link:hover { text-underline-offset: 8px; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.capa :focus-visible, .agenda :focus-visible, .lugar-cartao :focus-visible, .fecho :focus-visible, .rodape :focus-visible, .barra :focus-visible { outline-color: var(--cobre-claro); }

/* ---------- Barra: transparente sobre a foto, petróleo depois ---------- */
.barra { position: fixed; z-index: 40; inset: 0 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gut); color: var(--areia); transition: background-color .35s var(--curva); }
.barra.solida { background: var(--petroleo); }
.ident { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ident-sb { width: 18px; height: 36px; color: var(--cobre-claro); }
.ident-txt { display: grid; line-height: 1.15; }
.ident-nome { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ident-crm { font-size: 13px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.so-largo { display: none; }
@media (min-width: 480px) { .so-largo { display: inline; } .ident-crm { letter-spacing: .16em; } }
.barra-nav { display: none; }
.barra-wa { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--raio); background: var(--areia); color: var(--petroleo); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .25s; }
.barra-wa:hover { background: var(--palco); }
@media (min-width: 1024px) {
  .barra { height: 76px; }
  .barra-nav { display: flex; gap: 32px; margin-left: auto; margin-right: 16px; }
  .barra-nav a { position: relative; font-size: 15px; font-weight: 500; text-decoration: none; padding: 8px 0; }
  .barra-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--curva); } /* taste-skill-ignore: sublinhado de hover, não é divisor */
  .barra-nav a:hover::after, .barra-nav a:focus-visible::after { transform: scaleX(1); }
}

/* ---------- 1. Capa ---------- */
.capa { position: relative; height: 100svh; min-height: 640px; max-height: 960px; color: var(--areia); background: var(--petroleo-2); overflow: hidden; }
.capa-fotos { position: absolute; inset: 0; }
.capa-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.capa-fotos::before, .capa-fotos::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.capa-fotos::before { background: linear-gradient(to bottom, rgba(10, 18, 21, .55), rgba(10, 18, 21, 0) 22%); } /* taste-skill-ignore: véu neutro sob texto em foto */
.capa-fotos::after { background: linear-gradient(to top, rgba(10, 18, 21, .92) 0%, rgba(10, 18, 21, .7) 34%, rgba(10, 18, 21, 0) 64%); } /* taste-skill-ignore: véu neutro sob texto em foto */
.capa-txt { position: absolute; z-index: 2; inset: auto 0 0; padding: 0 var(--gut) calc(28px + var(--seguro)); }
.capa h1 { margin-bottom: 16px; }
.apoio { font-size: 19px; line-height: 1.45; color: var(--claro); max-width: 30ch; }
.acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 24px; }
.acoes .btn { width: 100%; }
html.mov .capa-a { animation: aproxima 18s ease-out infinite alternate; }
@keyframes aproxima { from { transform: scale(1.08); } to { transform: scale(1); } }

@media (min-width: 1024px) {
  .capa { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); height: 100svh; min-height: 720px; max-height: 1000px; background: var(--petroleo); }
  .capa-fotos { position: relative; grid-column: 2; }
  .capa-fotos::after { display: none; }
  .capa-txt { position: relative; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--gut) 72px; }
  .capa h1 { margin-bottom: 28px; }
  .apoio { font-size: 22px; max-width: 26ch; }
  .acoes { flex-direction: row; align-items: center; gap: 28px; margin-top: 40px; }
  .acoes .btn { width: auto; }
}


/* ---------- 2. Agenda: escolhas (o resto da agenda está no bloco da rodada 11, no fim) ---------- */
.agenda { background: var(--petroleo); color: var(--areia); padding: var(--sec) var(--gut); }
.escolhas { display: grid; gap: 26px; margin-top: 40px; }
.passo { border: 0; margin: 0; padding: 0; min-width: 0; transition: opacity .3s; }
.passo legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--cobre-claro); }
.ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ops-3 { grid-template-columns: repeat(3, 1fr); }
.op { position: relative; cursor: pointer; }
.op input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.op span { display: flex; flex-direction: column; justify-content: center; min-height: 60px; padding: 12px 16px; border-radius: var(--raio); background: rgba(243, 239, 232, .08); font-size: 15px; line-height: 1.25; color: var(--claro-2); transition: background-color .25s var(--curva), color .25s var(--curva), transform .2s var(--curva); }
.op span b { font-size: 17px; color: var(--areia); }
.op:hover span { background: rgba(243, 239, 232, .14); }
.op input:checked + span { background: var(--areia); color: var(--meio); }
.op input:checked + span b { color: var(--petroleo); }
.op input:active + span { transform: scale(.97); }
.op input:focus-visible + span { outline: 3px solid var(--cobre-claro); outline-offset: 2px; }
.passo:disabled { opacity: .35; }
.passo:disabled .op { cursor: not-allowed; }

/* ---------- 9. Dúvidas ---------- */
.duvidas { background: var(--areia-2); padding: var(--sec) var(--gut); }
.leve { display: grid; gap: 12px; margin-top: 36px; }
.leve div { padding: 16px 18px; background: var(--palco); border-radius: var(--raio); }
.leve dt { font-size: 15px; font-weight: 600; color: var(--cobre-texto); }
.leve dd { font-size: 19px; line-height: 1.4; }
.leve a { font-weight: 600; }
.faq { display: grid; gap: 8px; margin: 40px 0 36px; }
.faq details { background: var(--palco); border-radius: var(--raio); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 18px; font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--petroleo); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 400; line-height: 1; color: var(--cobre); transition: transform .3s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 18px 20px; color: var(--grafite); }
@media (min-width: 1024px) {
  .duvidas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; }
  .duv-lado { position: sticky; top: 140px; }
  .duv-txt .faq { margin-top: 0; }
  .duv-txt { max-width: 760px; }
}

/* ---------- 10. Convite ---------- */
.fecho { background: var(--petroleo); color: var(--areia); }
.fecho { position: relative; overflow: hidden; display: grid; align-items: end; min-height: 88svh; isolation: isolate; }
.fecho-luz { position: absolute; inset: 0; z-index: -1; background: var(--petroleo-2); }
.fecho-luz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-fecho { position: absolute; right: -6%; top: 6%; height: 54%; width: auto; color: var(--cobre-claro); opacity: .5; }
.fecho h2 { font-size: var(--t-h1); }
.fecho-txt { padding: 56px var(--gut) var(--sec); }
.fecho-txt > p:first-of-type:not(.bilhete) { margin: 20px 0 32px; color: var(--claro); max-width: 30ch; }
.fecho .btn { width: 100%; }
@media (min-width: 1024px) {
  .fecho { min-height: 96vh; align-items: center; }
  .sb-fecho { right: 8%; top: 14%; height: 72%; }
  .fecho-txt { padding: var(--sec) var(--gut); }
  .fecho-txt > p:first-of-type:not(.bilhete) { font-size: 22px; }
  .fecho .btn { width: auto; }
}

/* ---------- Rodapé: o cartão do consultório ---------- */
.rodape { background: var(--petroleo-2); color: var(--claro-2); padding: 72px var(--gut) calc(112px + var(--seguro)); font-size: 17px; }
.rodape a { color: var(--claro); }
.selo-rod { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.selo-rod svg { width: 24px; height: 48px; color: var(--cobre-claro); }
.selo-rod > span { display: grid; line-height: 1.3; font-size: 15px; font-weight: 400; color: var(--claro); }
.selo-rod b { font-size: 26px; letter-spacing: -.02em; color: var(--areia); }
.rod-grade { display: grid; gap: 24px; margin-top: 40px; }
.rod-grade b { display: block; font-size: 15px; color: var(--cobre-claro); margin-bottom: 4px; }
.rod-aviso { margin-top: 36px; max-width: 60ch; }
.rod-links { margin-top: 20px; }
.sep-cookies:has(button[hidden]) { display: none; }
.rod-credito { margin-top: 28px; font-size: 13px; }
@media (min-width: 1024px) {
  .rodape { padding: 96px var(--gut) 72px; }
  .rod-grade { grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: var(--max); }
}

/* ---------- Botão fixo e cookies (kit) ---------- */
.wa-fixo { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + var(--seguro)); min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--cobre-texto); color: var(--areia); font-weight: 600; text-decoration: none; border-radius: var(--raio); transform: translateY(calc(100% + 24px + var(--seguro))); transition: transform .35s var(--curva), background-color .25s; }
.wa-fixo:hover { background: #874426; }
.wa-fixo svg { font-size: 22px; }
.wa-fixo.mostra { transform: none; }
@media (min-width: 600px) { .wa-fixo { left: auto; right: 24px; bottom: 24px; padding: 0 24px; } }
.cookies[hidden] { display: none; }
.cookies { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + var(--seguro)); max-width: 520px; margin-inline: auto; background: var(--palco); color: var(--petroleo); border-radius: var(--raio); padding: 16px; display: grid; gap: 12px; font-size: 15px; outline: 1px solid rgba(31, 63, 74, .2); }
.cookies-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookies .btn { min-height: 48px; }

/* ---------- Movimento: estados iniciais só com html.mov (o JS tira a classe se o GSAP não vier) ---------- */
html.mov .capa h1 .lin > span { transform: translateY(105%); }
html.mov .capa .apoio, html.mov .capa .acoes, html.mov .capa .bilhete { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Rodada 9 (03/11/2026) · acabamento premium. Pedido do Pedro: "duro, quadradão, cores muito duras;
   deixar um pouquinho mais premium, mais agradável". Mesma estrutura, mesmas cores. Muda o detalhe:
   cantos macios, seções em folha arredondada, fotos emolduradas, petróleo com profundidade (luz cobre
   e grão), barra flutuante, botões em pílula. As sombras e degradês abaixo são escolha dele (o gosto
   do Pedro vale mais que o jurado) e ficam marcados com taste-skill-ignore.
   ===================================================================== */
:root {
  --raio: 14px;            /* campos e chips */
  --raio-c: 22px;          /* cartões */
  --raio-g: 28px;          /* folhas e fotos */
  --folha: 8px;            /* respiro da folha até a borda da tela */
  --pend: #F6E7B8;
  --grao-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .18 .06 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* petróleo com luz: um calor cobre no canto e um respiro claro no canto oposto, por cima do grão */
  --petro-luz: radial-gradient(120% 85% at 0% 0%, rgba(227, 162, 127, .13), rgba(227, 162, 127, 0) 58%), radial-gradient(90% 70% at 100% 100%, rgba(185, 199, 201, .08), rgba(185, 199, 201, 0) 62%); /* taste-skill-ignore: profundidade no petróleo, pedido do Pedro */
}
@media (min-width: 768px) { :root { --folha: 12px; --raio-g: 36px; } }
@media (min-width: 1024px) { :root { --raio-g: 40px; } html { scroll-padding-top: 96px; } }

body { background-image: var(--grao-escuro); }
.pend { border-radius: 6px; }

/* Botões: pílula, entrada macia */
.btn, .barra-wa { border-radius: 999px; }
.btn { padding: 0 30px; transition: background-color .3s var(--curva), transform .3s var(--curva); }
@media (hover: hover) { .btn:hover, .barra-wa:hover { transform: translateY(-1px); } }
.barra-wa { transition: background-color .25s, transform .3s var(--curva); }

/* Barra: cápsula flutuante, vidro de petróleo depois da capa */
.barra { inset: var(--folha) var(--folha) auto; height: 58px; padding: 0 10px 0 16px; border-radius: 20px; transition: background-color .4s var(--curva); }
.barra.solida { background: rgba(22, 48, 57, .84); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 10px 30px -14px rgba(10, 18, 21, .45); } /* taste-skill-ignore: barra fixa é sobreposição real */
@media (min-width: 1024px) {
  .barra { height: 64px; padding: 0 10px 0 28px; border-radius: 999px; max-width: calc(var(--max) + 120px); margin-inline: auto; }
}

/* Capa: base arredondada; no PC a foto vira um quadro dentro do petróleo */
.capa { border-radius: 0 0 var(--raio-g) var(--raio-g); background-color: var(--petroleo-2); }
@media (min-width: 1024px) {
  .capa { background: var(--petro-luz), var(--grao-claro), var(--petroleo); }
  .capa-fotos { margin: var(--folha) var(--folha) var(--folha) 0; border-radius: calc(var(--raio-g) - 8px); overflow: hidden; }
}

/* Folhas: a agenda e as dúvidas descolam da borda, com canto macio */
.agenda, .duvidas { margin-inline: var(--folha); border-radius: var(--raio-g); overflow: clip; }
.agenda { background: var(--petro-luz), var(--grao-claro), var(--petroleo); }
.duvidas { background: var(--grao-escuro), var(--areia-2); }
.fecho { margin-top: var(--folha); border-radius: var(--raio-g) var(--raio-g) 0 0; }
.rodape { background: var(--grao-claro), var(--petroleo-2); }

.op span { border-radius: 16px; outline: 1px solid rgba(243, 239, 232, .07); outline-offset: -1px; }
.op input:checked + span { outline-color: transparent; }
.leve div { border-radius: 18px; }
.faq details { border-radius: 18px; transition: background-color .3s var(--curva); }
@media (hover: hover) { .faq details:not([open]):hover { background: var(--areia); } }
.cookies { border-radius: 20px; }

/* Botão fixo: pílula com sombra de sobreposição */
.wa-fixo { border-radius: 999px; box-shadow: 0 14px 34px -14px rgba(90, 44, 22, .55); } /* taste-skill-ignore: botão fixo é sobreposição real */

/* =====================================================================
   Rodada 11 (05/11/2026)
   ===================================================================== */

[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Capa: o bilhete da próxima quarta, calculado no dia */
.bilhete { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(243, 239, 232, .12); font-size: 15px; line-height: 1.3; color: var(--areia); }
.bilhete svg { font-size: 20px; color: var(--cobre-claro); }
.bilhete b { font-weight: 600; }
.bilhete-falta { color: var(--claro-2); }
.bilhete-falta:not(:empty)::before { content: " · "; }

/* =====================================================================
   2. Agenda: as datas de verdade e a mensagem que se escreve no celular
   ===================================================================== */
.agenda-cab p { margin-top: 18px; color: var(--claro); max-width: 38ch; }
.agenda-palco { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; }
.aparelho { display: contents; }
.escolhas { order: 1; margin: 0; gap: 28px; }
.fone { order: 2; position: relative; z-index: 1; width: 100%; margin: 0; padding: 10px 12px 14px; border-radius: 24px; background: var(--grao-claro), var(--petroleo-2); color: var(--areia); box-shadow: 0 18px 40px -22px rgba(8, 16, 19, .8); } /* taste-skill-ignore: aparelho desenhado (data-ui); no celular vem logo antes do Enviar */
.fone-topo { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; border-bottom: 1px solid rgba(243, 239, 232, .12); } /* taste-skill-ignore: barra de app de mensagens (data-ui) */
.fone-topo svg { width: 16px; height: 32px; color: var(--cobre-claro); flex: none; }
.fone-topo b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.fone-topo small { font-size: 12px; letter-spacing: .08em; color: var(--claro-2); }
.fone-conversa { display: flex; flex-direction: column; gap: 10px; padding: 12px 2px 0; }
.fone-dia { display: none; }
.msg.eu { align-self: flex-end; max-width: 94%; padding: 9px 12px 7px; border-radius: 16px 16px 5px 16px; background: var(--balao); color: var(--grafite); font-size: 15px; line-height: 1.42; }
.msg-hora { display: inline-flex; align-items: center; gap: 4px; float: right; margin: 6px 0 -2px 10px; font-size: 12px; color: #5d7366; }
.msg-hora svg { width: 17px; height: 11px; color: #8aa093; transition: color .4s; }
.msg.lida .msg-hora svg { color: #3b97d3; }
.cursor { display: none; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.16em; background: var(--petroleo); animation: cursor 1s steps(1) infinite; }
.msg.digita .cursor { display: inline-block; }
@keyframes cursor { 50% { opacity: 0; } }
#enviar { order: 3; width: 100%; }
.aparelho-nota { order: 4; margin-top: -14px; font-size: 15px; color: var(--claro-2); text-align: center; }
.btn-wa .ic-ok { display: none; }
.btn-wa.enviando, .btn-wa.enviado { background: var(--cobre-claro); color: var(--petroleo-2); }
.btn-wa.enviado .ic-wa { display: none; }
.btn-wa.enviado .ic-ok { display: block; }

/* As datas: 4 folhinhas de calendário */
.datas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.datas .op span { align-items: center; min-height: 92px; padding: 10px 4px; text-align: center; gap: 2px; }
.datas small { font-size: 13px; line-height: 1.2; color: var(--claro-2); }
.datas b { font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.datas .op input:checked + span small { color: var(--meio); }
.datas.troca .op span { animation: folha .5s var(--curva) both; }
.datas.troca .op:nth-child(2) span { animation-delay: .05s; } .datas.troca .op:nth-child(3) span { animation-delay: .1s; } .datas.troca .op:nth-child(4) span { animation-delay: .15s; }
@keyframes folha { from { opacity: 0; transform: translateY(10px) rotateX(40deg); } }

/* Depois do pedido: 3 passos curtos */
.segue { display: grid; gap: 18px; margin-top: 64px; }
.segue li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; color: var(--claro); }
.segue b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(243, 239, 232, .09); color: var(--cobre-claro); font-size: 17px; font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
  .agenda-cab { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 96px; align-items: end; }
  .agenda-cab p { margin: 0 0 8px; font-size: 21px; }
  .agenda-palco { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 96px; align-items: start; margin-top: 72px; }
  .escolhas { grid-column: 1; grid-row: 1; gap: 36px; }
  .aparelho { display: flex; flex-direction: column; gap: 16px; grid-column: 2; grid-row: 1; position: sticky; top: 112px; }
  .fone { position: relative; top: auto; padding: 16px 14px 22px; border-radius: 40px; outline: 7px solid var(--petroleo-2); outline-offset: -1px; background: var(--grao-claro), linear-gradient(180deg, #1B3843, #142C35); box-shadow: 0 50px 90px -40px rgba(8, 16, 19, .7); } /* taste-skill-ignore: aparelho desenhado (data-ui) */
  .fone-topo { padding: 8px 10px 16px; }
  .fone-topo svg { width: 22px; height: 44px; }
  .fone-topo b { font-size: 17px; }
  .fone-conversa { min-height: 340px; padding: 18px 6px 4px; }
  .fone-dia { display: block; align-self: center; padding: 4px 12px; border-radius: 999px; background: rgba(243, 239, 232, .1); font-size: 12px; color: var(--claro-2); }
  .msg.eu { max-width: 88%; font-size: 16px; }
  .aparelho-nota { margin-top: 0; }
  .op span { min-height: 68px; }
  .datas .op span { min-height: 116px; }
  .datas b { font-size: 44px; }
  .segue { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 112px; }
  .segue li { grid-template-columns: 48px 1fr; align-items: start; font-size: 19px; }
  .segue b { width: 48px; height: 48px; }
}

/* =====================================================================
   3. Canguçu: a foto da cidade com a luz do dia, da manhã à tarde
   ===================================================================== */
.lugar { padding: var(--sec) 0; }
.lugar-quadro { position: relative; }
.lugar-palco { position: relative; margin: 0 var(--folha); aspect-ratio: 4 / 5; border-radius: var(--raio-g); overflow: hidden; background: var(--petroleo-2); isolation: isolate; }
.lugar-palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.luz { position: absolute; inset: 0; pointer-events: none; }
.luz-manha { background: linear-gradient(180deg, rgba(206, 226, 236, .75), rgba(206, 226, 236, .1) 60%); mix-blend-mode: soft-light; opacity: calc(1 - var(--dia, .15)); } /* taste-skill-ignore: luz da manhã sobre a foto */
.luz-tarde { background: radial-gradient(110% 80% at 90% 4%, rgba(255, 178, 110, .95), rgba(227, 140, 90, .45) 42%, rgba(176, 96, 58, .15) 80%); mix-blend-mode: soft-light; opacity: var(--dia, .15); } /* taste-skill-ignore: luz da tarde sobre a foto */
.lugar-palco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 18, 21, .5), rgba(10, 18, 21, 0) 38%); pointer-events: none; } /* taste-skill-ignore: véu neutro sob o cartão */
.arco { position: absolute; left: 7%; right: 7%; top: 7%; height: 17%; }
.arco svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arco path { fill: none; stroke: rgba(22, 48, 57, .5); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sol { position: absolute; left: calc(var(--sx, 8) * 1%); top: calc(var(--sy, 80) * 1%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #FFE6BF; box-shadow: 0 0 0 7px rgba(255, 230, 191, .3), 0 0 46px 14px rgba(255, 186, 120, .6); } /* taste-skill-ignore: o sol desenhado */
.arco-rot { position: absolute; top: calc(100% + 12px); padding: 3px 11px; border-radius: 999px; background: rgba(22, 48, 57, .7); font-size: 13px; font-weight: 600; color: var(--areia); opacity: .55; transition: opacity .4s, background-color .4s; }
.arco-rot.manha { left: -4%; } .arco-rot.tarde { right: -4%; }
.arco-rot.on { opacity: 1; background: rgba(22, 48, 57, .85); }
.lugar-cartao { position: relative; z-index: 2; margin: -120px calc(var(--folha) + 12px) 0; padding: 30px 22px 28px; border-radius: var(--raio-c); background: var(--petro-luz), var(--grao-claro), var(--petroleo); color: var(--areia); }
.lugar-cartao h2 { font-size: clamp(36px, 4.2vw, 60px); }
.fatos { display: grid; gap: 18px; margin-top: 26px; }
.fatos dt { font-size: 15px; font-weight: 600; color: var(--cobre-claro); }
.fatos dd { font-size: 19px; line-height: 1.4; }
.lugar-credito { padding: 14px var(--gut) 0; font-size: 13px; color: var(--meio); }
@media (min-width: 768px) { .lugar-palco { aspect-ratio: 4 / 3; } .lugar-cartao { margin-inline: var(--gut); } }
@media (min-width: 1024px) {
  .lugar-palco { aspect-ratio: auto; height: min(94vh, 880px); }
  .lugar-palco img { object-position: 50% 50%; }
  .arco { left: 10%; right: 10%; top: 6%; height: 20%; }
  .arco-rot { font-size: 15px; padding: 4px 14px; }
  .lugar-cartao { position: absolute; left: calc(var(--folha) + 40px); bottom: 40px; width: min(540px, 44%); margin: 0; padding: 44px 44px 40px; background: rgba(22, 48, 57, .86); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); }
  .fatos { gap: 20px; margin-top: 32px; }
  .lugar-credito { text-align: right; }
}

/* =====================================================================
   4. O médico: sem foto, a voz dele
   ===================================================================== */
.pedro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: var(--sec) var(--gut); max-width: var(--max); margin-inline: auto; }
.pedro-sb { padding-top: 6px; }
.sb-grande { width: 40px; height: 80px; color: var(--cobre); overflow: visible; }
.sb-grande line, .sb-grande path { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.sb-grande circle { fill: currentColor; }
html.mov .sb-grande line, html.mov .sb-grande path { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.pedro h2 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -.03em; color: var(--petroleo); }
.frase { margin: 28px 0 0; font-size: clamp(34px, 6.2vw, 96px); line-height: 1.02; letter-spacing: -.045em; color: var(--petroleo); text-wrap: balance; }
.frase p { max-width: 13em; }
.pedro-bio { display: grid; gap: 16px; margin-top: 40px; max-width: 40ch; }
.pedro-pe { display: grid; gap: 14px; margin-top: 40px; }
.pedro .assinatura { display: flex; align-items: center; gap: 14px; }
.pedro .assinatura svg { width: 22px; height: 44px; color: var(--cobre); }
.pedro .assinatura > span { display: grid; line-height: 1.3; font-size: 15px; color: var(--meio); }
.pedro .assinatura b { font-size: 22px; letter-spacing: -.02em; color: var(--petroleo); }
.pedro .form { font-size: 17px; color: var(--meio); }
@media (min-width: 1024px) {
  .pedro { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 64px; }
  .pedro-sb { position: sticky; top: 140px; align-self: start; justify-self: center; padding-top: 0; }
  .sb-grande { width: 150px; height: 300px; }
  .sb-grande line, .sb-grande path { stroke-width: 1.8; }
  .frase { margin-top: 36px; }
  .pedro-bio { grid-template-columns: 1fr 1fr; gap: 40px; max-width: 880px; margin-top: 64px; font-size: 20px; }
  .pedro-pe { grid-template-columns: auto 1fr; align-items: center; gap: 48px; margin-top: 56px; }
}

/* Dúvidas: a teleconsulta dentro da abinha */
.faq-corpo { padding: 0 18px 20px; }
.faq-corpo > p { padding: 0; }
.faq-lista { display: grid; gap: 10px; margin-top: 14px; }
.faq-lista li { position: relative; padding-left: 20px; color: var(--grafite); }
.faq-lista li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--cobre); }
.faq details[open] { background: var(--areia); }

/* Convite: o bilhete em cima do título */
.fecho .bilhete { margin-top: 22px; }
.bilhete-falta { white-space: nowrap; }
@media (max-width: 1023px) { .sb-fecho { top: 5%; height: 34%; right: -4%; opacity: .35; } }
/* r11: na agenda já tem o Enviar; o fixo sai da frente */
.wa-fixo.mostra.na-agenda { transform: translateY(calc(100% + 24px + var(--seguro))); }
.fecho-txt h2 + .btn { margin-top: 32px; }
.fecho .bilhete { display: flex; width: max-content; max-width: 100%; }
@media (max-width: 599px) { .fecho .bilhete { width: auto; flex-wrap: wrap; } }