/* PetKlinic · prévia. Carregado depois do filme.css: troca os tokens pela casa (turquesa da fachada,
   vermelho da piscina de bolinhas, texto petróleo) e estiliza a página de baixo do filme. */

@font-face { font-family: "Fredoka"; src: url(../fontes/fredoka.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(../fontes/nunito.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --fundo: #f3fafa;
  --fundo-2: #ffffff;
  --texto: #17393b;
  --apagado: #3c5f61;
  --acento: #59c7c8;          /* turquesa do logo e da fachada */
  --acento-forte: #147476;    /* turquesa escuro para texto pequeno (contraste) */
  --vermelho: #e8412f;        /* piscina de bolinhas */
  --zap: #1fa855;
  --linha: rgba(23, 57, 59, .14);
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --corpo: "Nunito", system-ui, -apple-system, sans-serif;
  --grao: .035;
  --vinheta: .1;
  --faixa: 30px;
  --trecho: 340svh;           /* rolagem por capítulo; com data-pausa .22 a transição (8 s de vídeo, 120 quadros de 1080p) gasta 265svh e a parada 75svh */
  --raio: 24px;
}

body { font-size: 17px; }
/* as fotos levam width/height no HTML (reserva o espaço e evita pulo); sem height:auto a altura do atributo
   vence e a foto estica */
img { height: auto; }

/* faixa de prévia: obrigatória em toda prévia de abordagem */
.faixa-previa {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--faixa); margin: 0;
  display: flex; align-items: center; justify-content: center; padding: 0 12px;
  background: var(--texto); color: #fff; font: 600 12px/1.2 var(--corpo); letter-spacing: .02em; text-align: center;
}
.faixa-previa a { color: var(--acento); }
.faixa-curta { display: none; }
@media (max-width: 560px) { .faixa-longa { display: none; } .faixa-curta { display: inline; } }

/* topo sólido e claro: transparente sobre a foto, o menu sumia */
.topo {
  top: var(--faixa); padding-top: 12px; padding-bottom: 12px;
  background: rgb(243 250 250 / .9); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 var(--linha);
}
.marca { display: inline-flex; align-items: center; gap: 10px; font: 600 22px/1 var(--display); letter-spacing: 0; color: var(--texto); }
.marca img { width: 38px; height: 38px; border-radius: 50%; }
.menu a { font-weight: 800; font-size: 15px; color: var(--texto); opacity: 1; }
.menu a:hover { color: var(--acento-forte); }
.botao { color: var(--texto); font-weight: 800; box-shadow: 0 10px 24px -12px rgba(20, 116, 118, .7); }
.botao--zap { background: var(--zap); color: #fff; box-shadow: 0 10px 24px -12px rgba(31, 168, 85, .8); }
.botao--linha { background: rgba(255, 255, 255, .7); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linha); backdrop-filter: blur(6px); }
.botao svg { width: 18px; height: 18px; flex: none; }

/* filme claro: o véu clareia o terço do título em vez de escurecer */
.filme__veu {
  background:
    radial-gradient(120% 95% at 50% 45%, transparent 60%, rgb(0 0 0 / var(--vinheta)) 100%),
    linear-gradient(90deg, rgb(243 250 250 / .94) 0%, rgb(243 250 250 / .72) 26%, rgb(243 250 250 / 0) 52%),
    linear-gradient(0deg, rgb(243 250 250 / .55) 0%, transparent 22%);
}
.capitulo { padding-top: calc(var(--faixa) + 96px); }
.cap-rotulo { color: var(--acento-forte); font-weight: 800; }
.cap-titulo {
  max-width: 9ch;
  font: 600 clamp(52px, 7.4vw, 132px)/.95 var(--display);
  font-stretch: normal; letter-spacing: -.01em; text-transform: none;
}
.cap-titulo em { font-style: normal; color: var(--vermelho); }
.cap-texto { color: var(--apagado); font-weight: 600; font-size: clamp(16px, 1.25vw, 19px); }
.cap-acoes { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 4; margin-top: 6px; }
.filme__contador b { color: var(--texto); }

/* ---------- página de baixo ---------- */
.secao { position: relative; z-index: 1; padding: clamp(72px, 10vw, 128px) var(--margem); background: var(--fundo); }
.secao--branca { background: #fff; }
.secao__rotulo { margin: 0 0 14px; color: var(--acento-forte); font: 800 12px/1 var(--corpo); letter-spacing: .2em; text-transform: uppercase; }
.secao__titulo { margin: 0 0 18px; max-width: 18ch; font: 600 clamp(36px, 4.6vw, 68px)/1 var(--display); letter-spacing: -.01em; }
.secao__titulo em { font-style: normal; color: var(--vermelho); }
.secao__texto { margin: 0 0 36px; max-width: 56ch; color: var(--apagado); font-size: clamp(16px, 1.2vw, 19px); }
.largura { max-width: 1240px; margin: 0 auto; }

.servicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.servico { overflow: hidden; border-radius: var(--raio); background: #fff; box-shadow: 0 1px 0 var(--linha), 0 24px 48px -32px rgba(23, 57, 59, .35); text-decoration: none; transition: transform .5s var(--ease); }
.servico:hover { transform: translateY(-4px); }
.servico img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.servico div { padding: 20px 22px 24px; }
.servico h3 { margin: 0 0 6px; font: 600 24px/1.1 var(--display); }
.servico p { margin: 0; color: var(--apagado); font-size: 15px; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.dupla--inversa > :first-child { order: 2; }
.foto-grande { position: relative; }
.foto-grande img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--raio) + 8px); }
.foto-grande figcaption { position: absolute; left: 16px; bottom: 16px; padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / .92); font-size: 14px; font-weight: 700; }
.foto-grande figcaption span { display: block; color: var(--apagado); font-weight: 600; font-size: 13px; }

.lista { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.lista li { padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linha); font-weight: 700; font-size: 15px; }
.secao--branca .lista li { background: var(--fundo); }
.lista li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--acento); vertical-align: 1px; }
.nota { margin: 0 0 28px; color: var(--apagado); font-size: 15px; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trio img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--raio); }
.trio img:nth-child(2) { transform: translateY(28px); }

/* grade fechada: 10 fotos = 2 linhas de 5 (5 de 2 no celular), todas no mesmo formato, sem buraco */
.galeria { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.galeria img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }

.nota-google { display: flex; align-items: baseline; gap: 14px; margin: 0 0 36px; }
.nota-google b { font: 600 clamp(56px, 7vw, 96px)/1 var(--display); color: var(--texto); }
.nota-google span { color: var(--apagado); font-weight: 700; }
.estrelas { color: #f5b301; letter-spacing: 2px; }
.depoimentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.depoimento { margin: 0; padding: 26px; border-radius: var(--raio); background: var(--fundo); }
.depoimento p { margin: 0 0 16px; font-size: 16px; }
.depoimento footer { color: var(--apagado); font-size: 14px; font-weight: 700; }

.contato { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.contato { align-items: center; }
.contato img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); }
/* mapa em faixa inteira no fim da página, de ponta a ponta */
.faixa-mapa { position: relative; z-index: 1; line-height: 0; background: #e3eeee; }
.mapa { display: block; width: 100%; height: clamp(360px, 48vh, 520px); border: 0; }
.dados { display: grid; gap: 22px; margin: 0 0 30px; }
.dados div { display: grid; gap: 4px; }
.dados dt { color: var(--acento-forte); font: 800 12px/1 var(--corpo); letter-spacing: .18em; text-transform: uppercase; }
.dados dd { margin: 0; font-size: 18px; font-weight: 700; }
.dados dd a { text-decoration: none; }
.dados dd small { display: block; color: var(--apagado); font-size: 15px; font-weight: 600; }

.rodape { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; background: var(--texto); color: rgb(255 255 255 / .75); border: 0; }
.rodape a { color: #fff; }

/* botão de WhatsApp fixo em toda a página */
.zap-fixo {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 25;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--zap); color: #fff; box-shadow: 0 14px 30px -10px rgba(31, 168, 85, .85);
  transition: transform .4s var(--ease);
}
.zap-fixo:hover { transform: scale(1.06); }
.zap-fixo svg { width: 30px; height: 30px; }

@media (max-width: 860px) {
  .dupla, .contato { grid-template-columns: 1fr; }
  .dupla--inversa > :first-child { order: 0; }
  .trio img:nth-child(2) { transform: none; }
  .galeria { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-aspect-ratio: 4/5) {
  .faixa-previa { font-size: 11px; }
  /* pôster em pé (primeiro quadro do celular), por cima do inline do computador */
  .filme__palco { background-image: url(../quadros/1080/poster-m.webp) !important; }
  .topo .botao { display: none; }
  .filme__veu {
    background:
      linear-gradient(180deg, rgb(243 250 250 / .95) 0%, rgb(243 250 250 / .7) 26%, rgb(243 250 250 / 0) 44%),
      linear-gradient(0deg, rgb(243 250 250 / .98) 0%, rgb(243 250 250 / .94) 22%, rgb(243 250 250 / .6) 34%, rgb(243 250 250 / 0) 46%);
  }
  .capitulo { padding-top: calc(var(--faixa) + 80px); padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .cap-titulo { font-size: clamp(40px, 12.5vw, 64px); max-width: 10ch; }
  .cap-texto { max-width: 30ch; padding-right: 56px; color: var(--texto); font-size: 15px; text-shadow: 0 0 14px #f3fafa, 0 0 4px #f3fafa; }
  .cap-acoes .botao--linha { display: none; }
  .filme__hud { right: 92px; }
  .zap-fixo { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .servico, .zap-fixo { transition: none; }
}