/* ============================================================
   Florais Pet Shop · landing page (11º protótipo da Cotta)
   Verde-água #049A9F medido na foto de perfil; madeira da fachada; creme entre os blocos.
   Sem degradê, sem ícones em bolinha, fotos retas (lições da GOPET).
   ============================================================ */
:root {
  --agua: #049A9F;          /* cor da marca (logo) */
  --agua-funda: #037A7F;    /* fundo com texto branco (contraste 4,9) e botões */
  --agua-texto: #03676B;    /* texto pequeno verde sobre creme (contraste 5,5) */
  --agua-clara: #E2EFED;
  --agua-luz: #9ED8D9;      /* destaque sobre madeira e verde-água */
  --creme: #F4EFE7;
  --creme-2: #FBF8F3;
  --tinta: #1F2B2C;
  --tinta-2: #4A5556;
  --madeira: #33261F;
  --linha: rgba(31, 43, 44, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --cab: 76px;
  --pad: 48px;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { font: 400 17px/1.6 Jost, system-ui, sans-serif; color: var(--tinta); background: var(--creme); -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure { overflow: hidden; border-radius: 6px; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
svg { display: block; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--tinta); color: #fff; border-radius: 6px; }
.pular:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--agua); outline-offset: 3px; }

/* ---------- tipografia ---------- */
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--agua-texto); }
h1, .display { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -.01em; }
h1 em, .display em { font-style: italic; color: var(--agua-texto); }
.display { font-size: 52px; line-height: 1.05; margin: 14px 0 18px; }
.lead { font-size: 18px; color: var(--tinta-2); max-width: 32em; }
h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 28px; line-height: 1.15; }

/* ---------- botões (só texto) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 500; font-size: 16px; letter-spacing: .02em; transition: background .25s, color .25s, transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn-agua { background: var(--agua-funda); color: #fff; }
.btn-agua:hover { background: var(--agua-texto); }
.btn-creme { background: var(--creme); color: var(--tinta); }
.btn-creme:hover { background: #fff; }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; border-bottom: 1.5px solid currentColor; line-height: 1.2; padding-top: 2px; }
.link:hover { color: var(--agua-texto); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- selo "Aberto agora" ---------- */
.selo { display: inline-flex; align-items: center; gap: 8px; }
.selo i { width: 8px; height: 8px; border-radius: 50%; background: #C9A34A; flex: none; }
.selo.aberto i { background: #3FAE6B; box-shadow: 0 0 0 4px rgba(63, 174, 107, .18); }

/* ---------- cabeçalho ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--creme); transition: transform .45s var(--ease), box-shadow .3s; }
.site-header.is-solid { box-shadow: 0 1px 0 var(--linha), 0 10px 30px rgba(31, 43, 44, .06); }
.site-header.is-hidden { transform: translateY(-110%); }
.header-in { display: flex; align-items: center; justify-content: space-between; height: var(--cab); gap: 24px; }
.marca { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 600 22px/1 "Cormorant Garamond", serif; letter-spacing: .02em; color: var(--agua-texto); }
.marca .logo { width: 46px; height: 46px; color: var(--agua); }
.nav { display: flex; gap: 14px; font-size: 15px; letter-spacing: .04em; }
.nav a { padding: 12px 8px; min-width: 44px; text-align: center; border-bottom: 1.5px solid transparent; transition: border-color .25s; }
.nav a:hover, .nav a.is-active { border-color: var(--agua); }
.bar-cta { font-weight: 500; font-size: 15px; padding: 12px 0; border-bottom: 1.5px solid currentColor; }
.bar-cta:hover { color: var(--agua-texto); }
.nav-toggle, .menu { display: none; }

/* ---------- 1. topo ---------- */
.hero-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; min-height: calc(100vh - var(--cab)); min-height: calc(100svh - var(--cab)); padding-top: 28px; padding-bottom: 56px; }
.logo-grande { width: 118px; height: 118px; color: var(--agua); margin-bottom: 26px; }
h1 { font-size: 66px; line-height: 1.02; margin: 18px 0 20px; }
.hero-sub { max-width: 30em; font-size: 18px; }
.servicos-linha { margin-top: 18px; font-size: 15px; letter-spacing: .02em; color: var(--tinta-2); }
.servicos-linha span { white-space: nowrap; }
.servicos-linha span:not(:last-child)::after { content: " ·"; }
.hero .acoes { margin-top: 30px; }
.info { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font-size: 14px; letter-spacing: .02em; }
.info a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.info b { font-weight: 500; margin-right: 4px; }
.hero-fotos { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: min(700px, calc(100vh - 140px)); min-height: 520px; }
.hero-fotos .f-grande { grid-row: 1 / 3; }
.hero-fotos .f-grande img { object-position: 50% 35%; }

/* ---------- 2. o dia de spa (madeira da fachada) ---------- */
.spa { background: var(--madeira); color: var(--creme); padding: 120px 0; }
.spa .eyebrow, .spa .display em { color: var(--agua-luz); }
.spa .lead { color: rgba(244, 239, 231, .82); }
.spa-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); gap: 80px; align-items: center; }
.spa-cromo { aspect-ratio: 4 / 5; }
.terapias { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; margin: 36px 0 40px; counter-reset: t; }
.terapias li { counter-increment: t; padding-top: 16px; border-top: 1px solid rgba(244, 239, 231, .2); }
.terapias h3 { font-size: 26px; display: flex; gap: 12px; align-items: baseline; }
.terapias h3::before { content: "0" counter(t); font: 500 13px Jost, sans-serif; letter-spacing: .1em; color: var(--agua-luz); }
.terapias p { margin-top: 6px; font-size: 16px; color: rgba(244, 239, 231, .78); }

/* ---------- 3. serviços ---------- */
.servicos { padding: 120px 0 110px; }
.titulo { max-width: 920px; margin-bottom: 48px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { display: flex; flex-direction: column; background: var(--creme-2); border-radius: 6px; overflow: hidden; }
.card > img { aspect-ratio: 3 / 2; height: auto; }
.card-txt { flex: 1; display: flex; flex-direction: column; padding: 28px 28px 30px; }
.card-txt > p { margin-top: 10px; color: var(--tinta-2); }
.itens { margin: 18px 0 26px; display: grid; gap: 8px; font-size: 15px; }
.itens li { padding-left: 18px; position: relative; }
.itens li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1.5px; background: var(--agua); }
.card-btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--agua-funda); color: var(--agua-texto); font-weight: 500; font-size: 15px; transition: background .25s, color .25s; }
.card-btn:hover { background: var(--agua-funda); color: #fff; }
.taxi { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 26px 28px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.taxi div { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.taxi p { color: var(--tinta-2); }
.taxi .link { flex: none; }

/* ---------- 4. o espaço ---------- */
.espaco { background: var(--creme-2); padding: 120px 0; }
.espaco-in { display: grid; grid-template-columns: 1.45fr 1fr; gap: 64px; align-items: center; }
.espaco-fachada { aspect-ratio: 16 / 10.5; }
.espaco-fachada img { object-position: 60% 50%; }
.espaco-recepcao { margin-top: 32px; width: 260px; aspect-ratio: 4 / 5; }

/* ---------- 5. avaliações ---------- */
.avaliacoes { background: var(--agua-clara); padding: 110px 0; }
.aval-topo { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: end; margin-bottom: 48px; }
.nota { display: grid; gap: 6px; padding-right: 64px; border-right: 1px solid var(--linha); }
.nota b { font: 500 96px/0.9 "Cormorant Garamond", serif; color: var(--agua-texto); }
.estrelas { display: flex; gap: 4px; color: var(--agua); }
.estrelas svg { width: 22px; height: 22px; }
.estrelas .meia { clip-path: inset(0 40% 0 0); }
.nota span:last-child { font-size: 15px; color: var(--tinta-2); }
.aval-topo .display { margin-bottom: 0; }
.depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.depoimentos blockquote { background: var(--creme-2); border-radius: 6px; padding: 30px 30px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.depoimentos p { font: 500 23px/1.35 "Cormorant Garamond", serif; }
.depoimentos cite { font-style: normal; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--agua-texto); }
.aval-link { margin-top: 32px; }

/* ---------- 6. como chegar ---------- */
.contato { background: var(--agua-funda); color: #fff; padding: 110px 0; }
.contato .eyebrow { color: #fff; }
.contato .display em { color: var(--agua-luz); }
.contato-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.contato address { font-size: 19px; line-height: 1.5; }
.contato .selo { margin-top: 20px; font-size: 15px; }
.horario { margin: 18px 0 32px; max-width: 380px; }
.horario div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); font-size: 16px; }
.horario dd { font-weight: 500; }
.contato .link:hover { color: var(--agua-luz); }
.fone { margin-top: 22px; font-size: 15px; color: #fff; }
.mapa { border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--agua-texto); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- rodapé (madeira) ---------- */
.site-footer { background: var(--madeira); color: rgba(244, 239, 231, .82); padding: 80px 0 28px; font-size: 15px; }
.footer-top { display: flex; align-items: center; gap: 28px; padding-bottom: 40px; border-bottom: 1px solid rgba(244, 239, 231, .14); }
.footer-marca { display: block; }
.footer-marca .logo { width: 84px; height: 84px; color: var(--agua-luz); }
.footer-frase { font: 500 34px/1.15 "Cormorant Garamond", serif; color: var(--creme); }
.footer-frase em { color: var(--agua-luz); }
.footer-grade { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding: 36px 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.footer-nav a, .footer-redes a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-nav a:hover, .footer-redes a:hover { color: var(--agua-luz); }
.footer-end b { display: block; color: var(--creme); font-weight: 500; }
.footer-end { line-height: 1.6; padding-top: 10px; }
.footer-redes a { gap: 10px; }
.footer-redes svg { width: 20px; height: 20px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 20px 0; border-top: 1px solid rgba(244, 239, 231, .14); font-size: 13px; color: rgba(244, 239, 231, .62); }
.credito { padding-top: 14px; border-top: 1px solid rgba(244, 239, 231, .1); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(244, 239, 231, .55); }
.credito a { display: inline-block; padding: 15px 6px; margin: -15px -6px -15px -2px; color: var(--creme); }
.logo-cotta { display: inline-block; vertical-align: baseline; width: 35px; height: 14px; }
.credito a:hover { color: var(--agua-luz); }

/* ---------- botão fixo do WhatsApp ---------- */
.float-wa { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 24px 0 18px; border-radius: 999px; background: var(--agua-funda); color: #fff; font-weight: 500; font-size: 16px; box-shadow: 0 10px 28px rgba(31, 43, 44, .22); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .35s, transform .45s var(--ease), background .25s; }
.float-wa.show { opacity: 1; transform: none; pointer-events: auto; }
.float-wa:hover { background: var(--agua-texto); }
.float-wa svg { width: 24px; height: 24px; }

/* ---------- entrada suave (só textos; fotos aparecem direto) ---------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .14em; margin: 0 -.05em -.14em; }
.split .w > span { display: inline-block; }
.hero h1.split .w > span { animation: sobe 1.1s var(--ease) backwards; animation-delay: calc(.15s + var(--i) * 70ms); }
.split.reveal { opacity: 1; transform: none; }
.split.reveal .w > span { transform: translateY(115%); }
.split.reveal.in .w > span { transform: none; transition: transform 1.05s var(--ease); transition-delay: calc(.08s + var(--i) * 70ms); }
@keyframes sobe { from { transform: translateY(115%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  :root { --pad: 32px; }
  .nav { display: none; }
  h1 { font-size: 56px; }
  .display { font-size: 44px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .depoimentos { grid-template-columns: 1fr 1fr; }
  .depoimentos blockquote:nth-child(3) { display: none; }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  :root { --pad: 16px; --cab: 64px; }
  html { scroll-padding-top: 64px; }
  body { font-size: 16px; }
  .marca { font-size: 20px; }
  .marca .logo { width: 40px; height: 40px; }
  .bar-cta { display: none; }
  .nav-toggle { display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; cursor: pointer; }
  .nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--tinta); transition: transform .3s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .menu { display: block; position: fixed; inset: 0; z-index: -1; background: var(--creme); padding: calc(var(--cab) + 24px) 16px 32px; opacity: 0; transition: opacity .35s; }
  .menu.open { opacity: 1; }
  .menu[hidden] { display: none; }
  .menu-links { display: grid; margin-bottom: 28px; }
  .menu-links a { padding: 12px 0; font: 500 34px/1.2 "Cormorant Garamond", serif; border-bottom: 1px solid var(--linha); }
  .menu-btn { width: 100%; }
  body.menu-aberto { overflow: hidden; }

  .eyebrow { font-size: 12px; letter-spacing: .2em; }
  .display { font-size: 36px; margin: 10px 0 12px; }
  .lead { font-size: 16px; }
  h3 { font-size: 25px; }

  .hero-in { display: flex; flex-direction: column; gap: 22px; min-height: 0; padding-top: 8px; padding-bottom: 40px; }
  .logo-grande { display: none; }
  h1 { font-size: 42px; margin: 10px 0 12px; }
  .hero-sub { font-size: 16px; }
  .servicos-linha { font-size: 14px; margin-top: 12px; }
  .hero .acoes { margin-top: 20px; gap: 12px 20px; }
  .btn { min-height: 50px; padding: 0 22px; }
  .info { flex-direction: column; gap: 0; margin-top: 14px; font-size: 13px; }
  .info .selo { min-height: 30px; }
  .info a { margin: 0; min-height: 44px; }
  .hero-fotos { order: -1; width: 100%; height: 300px; min-height: 0; grid-template-columns: 1.2fr 1fr; gap: 8px; }

  .spa { padding: 64px 0; }
  .spa-in { display: flex; flex-direction: column; gap: 0; }
  .spa-cromo { order: -1; aspect-ratio: 16 / 10; margin-bottom: 28px; }
  .spa-cromo img { object-position: 50% 30%; }
  .terapias { grid-template-columns: 1fr; gap: 0; margin: 18px 0 26px; }
  .terapias li { padding: 12px 0; }
  .terapias h3 { font-size: 23px; }
  .terapias p { font-size: 15px; margin-top: 2px; }

  .servicos { padding: 64px 0 56px; }
  .titulo { margin-bottom: 28px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card > img { aspect-ratio: 2 / 1; }
  .card-txt { padding: 18px 18px 20px; }
  .card-txt > p { margin-top: 6px; font-size: 15px; }
  .itens { margin: 10px 0 16px; gap: 2px; font-size: 14px; }
  .taxi { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 0; margin-top: 16px; }
  .taxi div { display: block; }
  .taxi p { margin-top: 4px; }

  .espaco { padding: 64px 0; }
  .espaco-in { display: flex; flex-direction: column-reverse; gap: 28px; }
  .espaco-fachada { aspect-ratio: 4 / 3; }
  .espaco-fachada img { object-position: 88% 50%; }
  .espaco-recepcao { display: none; }

  .avaliacoes { padding: 64px 0; }
  .aval-topo { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 24px; margin-bottom: 28px; }
  .nota { padding: 0; border: 0; grid-template-columns: auto auto; align-items: center; gap: 4px 16px; }
  .nota b { font-size: 64px; grid-row: 1 / 3; }
  .depoimentos { grid-template-columns: 1fr; gap: 14px; }
  .depoimentos blockquote { padding: 22px 22px 20px; gap: 14px; }
  .depoimentos blockquote:nth-child(3) { display: none; }
  .depoimentos p { font-size: 21px; }
  .aval-link { margin-top: 20px; }

  .contato { padding: 64px 0; }
  .contato-in { display: flex; flex-direction: column; gap: 32px; align-items: stretch; }
  .contato address { font-size: 17px; }
  .horario { margin: 14px 0 26px; }
  .mapa { display: none; }

  .site-footer { padding: 44px 0 calc(16px + env(safe-area-inset-bottom)); }
  .footer-top { gap: 16px; padding-bottom: 22px; }
  .footer-marca .logo { width: 64px; height: 64px; }
  .footer-frase { font-size: 24px; }
  .footer-grade { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .footer-end { padding-top: 0; }
  .footer-bottom { flex-direction: column; gap: 4px; padding: 16px 0; }

  .float-wa { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 56px; height: 56px; min-height: 0; padding: 0; justify-content: center; }
  .float-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .float-wa svg { width: 28px; height: 28px; }
}