/* =========================================================================
   ODONTO M.E - Palotina/PR
   Landing page de campanha. Mobile first, CSS puro, sem framework.
   ========================================================================= */

/* ------------------------------ 1. TOKENS ------------------------------- */

:root{
  /* Paleta. CONFIRMAR os tons exatos com o material oficial da clinica
     (o Instagram @odontomepalotina usa dourado sobre preto). */
  --tinta:    #1A1A1A;   /* texto principal e fundo escuro */
  --dourado:  #C9A227;   /* CONFIRMAR tom exato com o cliente */
  --areia:    #F7F4EE;   /* fundo claro alternativo */
  --branco:   #FFFFFF;
  --cinza:    #6B6B6B;   /* texto de apoio */
  --linha:    #E3DED4;   /* bordas e filetes */
  --whatsapp: #25D366;   /* apenas no botao de WhatsApp */

  /* Derivados */
  --dourado-fraco: rgba(201,162,39,.12);
  --tinta-suave:   #2C2C2C;

  /* Ritmo */
  --raio:      14px;
  --raio-p:    10px;
  --gutter:    20px;
  --secao-y:   64px;
  --largura:   1140px;
  --altura-cabecalho: 64px;

  --sombra:    0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(26,26,26,.06);
  --sombra-f:  0 6px 20px rgba(37,211,102,.35);
}

@media (min-width: 900px){
  :root{ --gutter: 32px; --secao-y: 104px; --altura-cabecalho: 76px; }
}

/* ------------------------------ 2. BASE --------------------------------- */

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;              /* scroll nativo, sem biblioteca */
  scroll-padding-top:calc(var(--altura-cabecalho) + 12px);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
}

body{
  margin:0;
  font-family:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,iframe{ max-width:100%; display:block }
img{ height:auto }

a{ color:inherit }

h1,h2,h3,h4{
  margin:0 0 .5em;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
}

p{ margin:0 0 1em }
p:last-child{ margin-bottom:0 }

ul{ margin:0; padding:0 }
li{ list-style:none }

address{ font-style:normal }

::selection{ background:var(--dourado); color:var(--tinta) }

:focus-visible{
  outline:2px solid var(--dourado);
  outline-offset:3px;
  border-radius:4px;
}

.pular-para-conteudo{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--branco);
  padding:12px 18px; border-radius:0 0 var(--raio-p) 0;
  font-weight:600; text-decoration:none;
}
.pular-para-conteudo:focus{ left:0 }

/* ----------------------------- 3. LAYOUT -------------------------------- */

.container{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--estreito{ max-width:820px }

.secao{ padding-block:var(--secao-y) }
.secao--areia{ background:var(--areia) }

.secao__cabecalho{
  max-width:680px;
  margin-bottom:40px;
}
.secao__cabecalho h2{ font-size:clamp(1.75rem, 5.2vw, 2.6rem) }
.secao__apoio{ color:var(--cinza); font-size:1.02rem }

/* ------------------------ 4. PAR TIPOGRAFICO ---------------------------- */
/* Enfase nasce da troca de familia, nunca de cor ou de peso.
   Playfair Display Italic SO aparece dentro de <em> em titulo. */

.titulo-par{
  font-family:'Hanken Grotesk', sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
}
.titulo-par em{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
}

.etiqueta{
  display:inline-block;
  margin:0 0 14px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dourado);
}
.etiqueta--escura{ color:var(--dourado) }

/* Marcadores de pendencia. Visualmente evidentes de proposito. */
.a-confirmar{
  display:inline-block;
  padding:2px 8px;
  border:1px dashed var(--dourado);
  border-radius:6px;
  background:var(--dourado-fraco);
  color:var(--dourado);
  font-size:.82rem;
  font-weight:600;
}

/* ------------------------------ 5. BOTOES ------------------------------- */

.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 22px;
  border:0;
  border-radius:999px;
  font-family:inherit;
  font-size:.98rem;
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.botao:active{ transform:translateY(1px) }

.botao--zap{
  background:var(--whatsapp);
  color:#0B2E17;
  box-shadow:var(--sombra-f);
}
.botao--zap:hover{ background:#1FBE5B }

.botao--grande{ padding:17px 30px; font-size:1.06rem }
.botao--compacto{ padding:10px 16px; font-size:.9rem; box-shadow:none }

.botao--contorno{
  background:transparent;
  color:var(--tinta);
  border:1.5px solid var(--linha);
}
.botao--contorno:hover{ border-color:var(--dourado); color:var(--dourado) }

.icone-zap{ flex:0 0 auto }

.link-simples{
  padding:0; border:0; background:none;
  font-family:inherit; font-size:.88rem; font-weight:600;
  color:var(--dourado); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}

/* ---------------------------- 6. CABECALHO ------------------------------ */

.cabecalho{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--altura-cabecalho);
  display:flex;
  align-items:center;
  background:transparent;
  transition:background-color .25s ease, box-shadow .25s ease;
}
.cabecalho__interno{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Estado rolado: fundo solido */
.cabecalho.rolado{
  background:rgba(26,26,26,.96);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:saturate(140%) blur(8px);
}

/* Lockup horizontal: dente dourado + lettering branco, recortados do
   logo oficial. Os PNGs ja vem coloridos e com fundo transparente. */
.marca{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
}
/* Escalonado em tres passos: num aparelho de 360px o lockup inteiro mais o
   botao de WhatsApp precisam caber na largura do cabecalho. */
.marca__icone{ height:24px; width:auto; flex:0 0 auto }
.marca__lettering{ height:10px; width:auto; flex:0 0 auto }

@media (min-width: 400px){
  .marca__icone{ height:26px }
  .marca__lettering{ height:12px }
}

@media (min-width: 560px){
  .marca{ gap:11px }
  .marca__icone{ height:30px }
  .marca__lettering{ height:14px }
}

/* O botao de WhatsApp do cabecalho fica sempre visivel, inclusive em mobile */
.cabecalho .botao--zap{ flex:0 0 auto }

/* ------------------------------- 7. HERO -------------------------------- */

.hero{
  position:relative;
  padding-top:calc(var(--altura-cabecalho) + 56px);
  padding-bottom:0;
  background:var(--tinta);
  color:var(--branco);
  overflow:hidden;
}

/*
  CONFIRMAR: quando houver foto real da clinica, aplicar aqui como
  background-image com overlay escuro (contraste minimo AA no texto).
  Enquanto nao houver foto licenciada, o hero usa apenas cor e luz de marca.
*/
.hero__fundo{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 82% 8%, rgba(201,162,39,.28), transparent 60%),
    radial-gradient(90% 60% at 8% 92%, rgba(201,162,39,.10), transparent 62%),
    var(--tinta);
}
.hero__fundo::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
}

/* Dente da marca como filigrana do hero. Decorativo, some no mobile. */
.hero__marca-dagua{
  position:absolute;
  top:50%;
  right:-64px;
  width:320px;
  height:auto;
  transform:translateY(-54%);
  opacity:.07;
  pointer-events:none;
  display:none;
}
@media (min-width: 980px){
  .hero__marca-dagua{ display:block }
}

.hero__interno{
  position:relative;
  padding-bottom:72px;
  max-width:860px;
  margin-inline:auto;
  text-align:center;
}

.hero__titulo{
  font-size:clamp(2.1rem, 8.4vw, 4.15rem);
  margin-bottom:20px;
  text-wrap:balance;
}
.hero__titulo em{ color:inherit }

.hero__apoio{
  max-width:56ch;
  margin:0 auto 30px;
  font-size:1.06rem;
  color:rgba(255,255,255,.76);
}

.hero__acoes{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.selo-google{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  font-size:.92rem;
  color:rgba(255,255,255,.86);
}
.selo-google__estrelas{ display:inline-flex; gap:2px; color:var(--dourado) }
.selo-google__texto strong{ font-weight:800; color:var(--branco) }

/* Barra inferior do hero */
.barra-hero{
  position:relative;
  background:rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.10);
}
.barra-hero__interno{
  display:grid;
  gap:2px;
  padding-block:6px;
}
.barra-hero__bloco{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 2px;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-size:.9rem;
  line-height:1.45;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.barra-hero__interno > :last-child{ border-bottom:0 }
.barra-hero__bloco svg{ flex:0 0 auto; margin-top:2px; color:var(--dourado) }
.barra-hero__bloco strong{
  display:block;
  color:var(--branco);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:3px;
}
a.barra-hero__bloco:hover{ color:var(--branco) }

@media (min-width: 860px){
  .hero{ padding-top:calc(var(--altura-cabecalho) + 96px) }
  .hero__interno{ padding-bottom:96px }
  .hero__acoes{ flex-direction:row; justify-content:center; gap:22px }
  .barra-hero__interno{
    grid-template-columns:repeat(3, 1fr);
    gap:0;
  }
  .barra-hero__bloco{
    border-bottom:0;
    border-right:1px solid rgba(255,255,255,.10);
    padding:22px 26px;
  }
  .barra-hero__interno > :last-child{ border-right:0 }
  .barra-hero__bloco:first-child{ padding-left:0 }
}

/* ----------------------------- 8. SERVICOS ------------------------------ */

.cards-destaque,
.cards-secundarios{
  display:grid;
  gap:16px;
}
.cards-destaque{ margin-bottom:52px }

.card{
  padding:26px 24px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  transition:transform .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-3px); border-color:var(--dourado) }

.card--destaque{ padding:30px 26px }

.card__icone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  margin-bottom:18px;
  border-radius:14px;
  background:var(--dourado-fraco);
  color:var(--dourado);
}

.card__titulo{
  font-size:1.24rem;
  margin-bottom:8px;
}
.card__titulo--pequeno{ font-size:1.05rem }

.card__texto{
  margin:0;
  color:var(--cinza);
  font-size:.95rem;
  line-height:1.55;
}

.subtitulo-lista{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cinza);
  margin-bottom:18px;
}

.nota-servicos{
  margin-top:28px;
  font-size:.85rem;
  color:var(--cinza);
  max-width:62ch;
}

@media (min-width: 700px){
  .cards-destaque{ grid-template-columns:repeat(3, 1fr) }
  .cards-secundarios{ grid-template-columns:repeat(2, 1fr) }
}
@media (min-width: 1000px){
  .cards-secundarios{ grid-template-columns:repeat(4, 1fr) }
}

/* ------------------------------- 9. SOBRE ------------------------------- */

.sobre__grade{
  display:grid;
  gap:36px;
  align-items:center;
}

.placeholder-imagem{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  border:2px dashed var(--dourado);
  border-radius:var(--raio);
  background:
    repeating-linear-gradient(135deg, var(--areia) 0 12px, #FFFDF7 12px 24px);
}
.placeholder-imagem--retrato{ aspect-ratio:4/5 }

.cro-linha{
  display:inline-block;
  margin:0 0 18px;
  padding:5px 12px;
  border:1px solid var(--linha);
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--cinza);
  background:var(--areia);
}

.sobre__texto h2{ font-size:clamp(1.7rem, 5vw, 2.5rem) }
.sobre__texto p{ color:var(--cinza) }
.sobre__texto .botao{ margin-top:12px }

@media (min-width: 900px){
  .sobre__grade{ grid-template-columns:.85fr 1.15fr; gap:64px }
}

/* --------------------------- 10. DIFERENCIAIS --------------------------- */

.diferenciais{
  display:grid;
  gap:14px;
}
.diferencial{
  padding:26px 24px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
}
.diferencial__numero{
  display:block;
  margin-bottom:12px;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--dourado);
}
.diferencial__titulo{ font-size:1.1rem; margin-bottom:6px }
.diferencial p{ margin:0; color:var(--cinza); font-size:.95rem }

@media (min-width: 700px){
  .diferenciais{ grid-template-columns:repeat(2, 1fr) }
}
@media (min-width: 1000px){
  .diferenciais{ grid-template-columns:repeat(4, 1fr) }
}

/* ----------------------------- 11. ACORDEAO ----------------------------- */

.acordeao{
  border-top:1px solid var(--linha);
}
.acordeao__item{ border-bottom:1px solid var(--linha) }

.acordeao__gatilho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  padding:20px 2px;
  border:0;
  background:none;
  font-family:inherit;
  font-size:1.03rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.35;
  color:var(--tinta);
  text-align:left;
  cursor:pointer;
}
.acordeao__gatilho:hover{ color:var(--dourado) }

.acordeao__sinal{
  position:relative;
  flex:0 0 auto;
  width:20px; height:20px;
}
.acordeao__sinal::before,
.acordeao__sinal::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:14px; height:2px;
  background:var(--dourado);
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .25s ease;
}
.acordeao__sinal::after{ transform:translate(-50%,-50%) rotate(90deg) }
.acordeao__gatilho[aria-expanded="true"] .acordeao__sinal::after{
  transform:translate(-50%,-50%) rotate(0deg);
  opacity:0;
}

.acordeao__painel{
  overflow:hidden;
  max-height:0;
  transition:max-height .3s ease;
}
.acordeao__painel p{
  margin:0;
  padding:0 2px 22px;
  color:var(--cinza);
  font-size:.97rem;
}
.acordeao__painel[hidden]{ display:none }

@media (prefers-reduced-motion: reduce){
  .acordeao__painel{ transition:none }
}

/* ---------------------------- 12. LOCALIZACAO --------------------------- */

.local__grade{
  display:grid;
  gap:28px;
}

.endereco{
  font-size:1.05rem;
  line-height:1.55;
  margin-bottom:22px;
}
.endereco strong{ font-weight:800 }

.local__lista{ margin:0 0 24px }
.local__lista dt{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cinza);
  margin-top:14px;
}
.local__lista dd{
  margin:2px 0 0;
  font-size:1rem;
  font-weight:600;
}
.local__lista a{ text-decoration:none }
.local__lista a:hover{ color:var(--dourado) }

.local__mapa{
  border-radius:var(--raio);
  overflow:hidden;
  border:1px solid var(--linha);
  box-shadow:var(--sombra);
}
.local__mapa iframe{
  width:100%;
  height:320px;
  display:block;
}

@media (min-width: 900px){
  .local__grade{ grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center }
  .local__mapa iframe{ height:420px }
}

/* ---------------------------- 13. CTA FINAL ----------------------------- */

.cta-final{
  position:relative;
  padding-block:var(--secao-y);
  background:var(--tinta);
  color:var(--branco);
  overflow:hidden;
}
.cta-final::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(100% 90% at 50% 0%, rgba(201,162,39,.22), transparent 65%);
}
.cta-final__interno{ position:relative; text-align:center }
.cta-final__titulo{
  font-size:clamp(1.85rem, 6vw, 3rem);
  margin-bottom:16px;
  text-wrap:balance;
}
.cta-final__apoio{
  max-width:52ch;
  margin:0 auto 30px;
  color:rgba(255,255,255,.74);
}

/* ------------------------------ 14. RODAPE ------------------------------ */

.rodape{
  background:#111;
  color:rgba(255,255,255,.66);
  font-size:.92rem;
  padding-top:52px;
}
.rodape a{ color:rgba(255,255,255,.86); text-decoration:none }
.rodape a:hover{ color:var(--dourado) }

.rodape__grade{
  display:grid;
  gap:34px;
  padding-bottom:36px;
}

.marca--rodape{ margin-bottom:16px; gap:12px }
.marca--rodape .marca__icone{ height:34px }
.marca--rodape .marca__lettering{ height:16px }

.rodape__endereco{ margin-bottom:12px; line-height:1.6 }
.rodape__contato{ line-height:1.9 }

/* Identificacao obrigatoria: legivel, sem letra miuda */
.rodape__responsavel{
  padding:16px 18px;
  border:1px solid rgba(201,162,39,.4);
  border-radius:var(--raio-p);
  background:rgba(201,162,39,.08);
  font-size:.95rem;
  line-height:1.65;
  color:rgba(255,255,255,.8);
}
.rodape__responsavel strong{ color:var(--branco); font-weight:800 }

.rodape__juridico{
  margin-top:16px;
  font-size:.9rem;
  line-height:1.7;
}

.rodape__lgpd{
  font-size:.85rem;
  line-height:1.65;
  margin-bottom:12px;
}

.rodape__base{
  display:grid;
  gap:8px;
  padding-block:22px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:.82rem;
  color:rgba(255,255,255,.5);
}
.rodape__base p{ margin:0 }
.rodape__aviso{ max-width:70ch }

/* Copyright a esquerda, credito da agencia a direita. Empilha no mobile. */
.rodape__base-linha{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 20px;
}
.rodape__credito a{
  color:rgba(255,255,255,.78);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.55);
  padding-bottom:1px;
}
.rodape__credito a:hover{ color:var(--dourado); border-bottom-color:var(--dourado) }

@media (min-width: 800px){
  .rodape__grade{ grid-template-columns:1.1fr .9fr 1.2fr; gap:44px }
}

/* -------------------- 15. WHATSAPP FLUTUANTE + MODAL -------------------- */

.zap-flutuante{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--whatsapp);
  color:#0B2E17;
  box-shadow:var(--sombra-f);
  transition:transform .2s ease;
}
.zap-flutuante:hover{ transform:scale(1.06) }

@media (min-width: 900px){
  .zap-flutuante{ right:26px; bottom:26px; width:62px; height:62px }
}

.modal{
  width:min(680px, calc(100% - 32px));
  padding:0;
  border:0;
  border-radius:var(--raio);
  background:var(--branco);
  color:var(--tinta);
}
.modal::backdrop{ background:rgba(26,26,26,.6) }
.modal__caixa{ position:relative; padding:32px 26px }
.modal__caixa h2{ font-size:1.4rem; padding-right:32px }
.modal__caixa h3{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dourado);
  margin-top:22px;
}
.modal__caixa p{ font-size:.94rem; color:var(--cinza) }
.modal__fechar{
  position:absolute;
  top:14px; right:14px;
  width:34px; height:34px;
  border:1px solid var(--linha);
  border-radius:50%;
  background:var(--branco);
  font-size:1.3rem;
  line-height:1;
  color:var(--tinta);
  cursor:pointer;
}

/* --------------------------- 16. ANIMACOES ------------------------------ */
/* Intersection Observer nativo. Sem biblioteca. Delay maximo 0,3s. */

[data-anim]{opacity:0;transition:opacity .55s cubic-bezier(.22,.61,.36,1),
                                transform .55s cubic-bezier(.22,.61,.36,1);
            will-change:opacity,transform}
[data-anim="fade-up"]  {transform:translateY(28px)}
[data-anim="fade-down"]{transform:translateY(-28px)}
[data-anim="scale-in"] {transform:scale(.94)}
[data-anim="zoom-in"]  {transform:scale(.88)}
[data-anim="fade"]     {}
[data-anim].visivel    {opacity:1;transform:none}

[data-delay="1"]{transition-delay:.10s}
[data-delay="2"]{transition-delay:.20s}
[data-delay="3"]{transition-delay:.30s}

@media (prefers-reduced-motion: reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
}