/*
 * Clínica de Bicho — versão final (layout file cover - 1).
 * Design tokens do guia + Figma. As webfonts comerciais devem ser
 * instaladas pelo titular na hospedagem; não são distribuídas neste pacote.
 */
@font-face {
  font-family: 'Belligan Web';
  src: local('Belligan'), local('Belligan Regular'), url('/assets/fonts/Belligan.otf') format('opentype');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Neulis Neue Web';
  src: local('Neulis Neue'), local('Neulis Neue Regular'), url('/assets/fonts/neulis-neue.otf') format('opentype');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Neulis Neue Web';
  src: local('Neulis Neue Bold'), url('/assets/fonts/neulis-neue-bold.otf') format('opentype');
  font-style: normal; font-weight: 700 900; font-display: swap;
}
@font-face {
  font-family: 'Neulis Neue Web';
  src: local('Neulis Neue Light'), url('/assets/fonts/neulis-neue-light.otf') format('opentype');
  font-style: normal; font-weight: 300; font-display: swap;
}
:root {
  /* Paleta institucional oficial — guia, página 4 */
  --brand-green: #556e34;
  --brand-peach: #e5b494;
  --brand-sage: #c2c68b;
  --brand-cream: #f4e9e0;
  --brand-black: #1e1e1e;
  /* Cores de aplicação específicas da LP — arquivo Figma */
  --figma-yellow: #fed52f;
  --figma-orange: #e99e64;
  --figma-sage: #cbca89;
  --font-display: 'Belligan Web', 'Chewy', cursive;
  --font-body: 'Neulis Neue Web', 'Montserrat', system-ui, sans-serif;
  --font-strong: 'Neulis Neue Web', 'Montserrat', system-ui, sans-serif;
  font-family: var(--font-body);
  color: var(--brand-green);
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --green: var(--brand-green);
  --green-dark: #435c2c;
  --yellow: var(--figma-yellow);
  --peach: var(--figma-orange);
  --olive: var(--figma-sage);
  --ink: var(--brand-green);
}
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:80px}
body {margin:0;min-width:320px}
button,a {-webkit-tap-highlight-color:transparent}
a {color:inherit}
button {font:inherit}
:focus-visible {outline:3px solid #164fb0;outline-offset:4px}
img {max-width:100%;height:auto}
[hidden] {display:none!important}
.container {width:min(100% - 80px,1280px);margin-inline:auto}
.section {position:relative;overflow:hidden}
.section h1,.section h2 {font-family:var(--font-display);font-weight:400;line-height:1.12;letter-spacing:.4px}
.section h1 {font-size:clamp(2.55rem,4.1vw,4.4rem);text-transform:uppercase}
.section h2 {font-size:clamp(2.4rem,4vw,4.25rem);text-transform:uppercase;margin:0 0 36px}
.skip-link {position:absolute;z-index:20;top:-100px;left:15px;background:white;padding:12px 18px;border-radius:8px}
.skip-link:focus {top:10px}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header {position:relative;z-index:10;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.header-inner {display:flex;align-items:center;justify-content:space-between;min-height:92px;gap:26px}
.brand-link {display:flex;align-items:center;flex-shrink:0}
.brand-link img {width:204px;display:block}
.main-nav {display:flex;align-items:center;justify-content:flex-end;flex:1;gap:0}
.main-nav a {position:relative;padding:10px clamp(12px,2.3vw,30px);text-decoration:none;font-family:var(--font-display);font-size:clamp(1.17rem,1.45vw,1.38rem);color:var(--brand-green);white-space:nowrap}
.main-nav a:not(:last-child)::after {content:"";height:28px;width:1px;background:#abb79e;position:absolute;right:0;top:50%;transform:translateY(-50%)}
.main-nav a:hover {color:#c5753d}
.menu-toggle {display:none}

/* About */
.about {background:var(--yellow)}
.about-inner {display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:34px;min-height:500px}
.about-copy {padding:46px 0 55px;position:relative;z-index:1}
.about h1 {margin:0 0 17px}
.about-copy p {margin:0 0 15px;line-height:1.43;font-size:clamp(1.05rem,1.52vw,1.28rem);max-width:520px;font-weight:400}
.about-visual {align-self:end;display:flex;align-items:flex-end;justify-content:center;min-width:0}
.about-visual img {display:block;width:100%;max-width:550px;max-height:490px;object-fit:contain;object-position:center bottom}
.button {display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;border:0;border-radius:999px;padding:14px 24px;font-weight:900;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease;line-height:1.2}
.button:hover {transform:translateY(-2px);box-shadow:0 8px 22px #30452724}
.button-primary {background:var(--green-dark);color:#fff}
.button-secondary {background:var(--olive);color:var(--green-dark);font-family:var(--font-display);letter-spacing:.5px;font-weight:400;font-size:clamp(1.4rem,2.6vw,2rem)}
.hero-cta {margin-top:8px}

/* Services */
.services {background:#fff;overflow:visible;z-index:2}
.services-inner {padding:46px 0 55px;position:relative;z-index:1;text-align:center}
.services h2 {text-align:left;margin-bottom:29px}
.services-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:start;column-gap:16px;row-gap:32px;margin-bottom:43px}
.service-item {display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.service-item img {width:min(100%,126px);height:110px;object-fit:contain}
.service-item h3 {margin:2px 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.16rem,2vw,1.85rem);color:var(--green-dark);white-space:nowrap}
.service-item p {font-size:.77rem;line-height:1.2;margin:0}
.service-cta {min-width:min(100%,560px);max-width:100%}
.decor {position:absolute;pointer-events:none}
.decor-paws {left:-14px;top:53%;width:110px;height:160px;opacity:.4;background:radial-gradient(ellipse at 20% 16%,#dec8b6 0 16px,transparent 17px),radial-gradient(ellipse at 75% 40%,#dec8b6 0 11px,transparent 12px),radial-gradient(ellipse at 20% 70%,#dec8b6 0 23px,transparent 24px),radial-gradient(ellipse at 73% 90%,#dec8b6 0 20px,transparent 21px)}
.decor-swirl-figma {
  position:absolute;right:0;top:calc(100% - clamp(112px,12.2vw,178px));
  z-index:3;width:clamp(169px,18.4vw,265px);height:auto;max-width:none;pointer-events:none;
}

/* Space */
.space {background:var(--peach);z-index:1}
.space .container {padding-top:44px;padding-bottom:50px}
.space h2 {color:#ffe537;margin-bottom:26px}
.section-kicker {font-weight:900;text-transform:uppercase;font-size:.76rem;letter-spacing:.14em;margin:0 0 9px;color:#604a31}
.gallery {position:relative;max-width:800px;margin-inline:auto}
.gallery-frame {margin:0;border:3px solid #587b3d;border-radius:28px;overflow:hidden;box-shadow:0 12px 30px #74472322;background:#f1e4d4}
.gallery-frame img {width:100%;aspect-ratio:1089/602;object-fit:cover;display:block}
.gallery-controls {display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px}
.gallery-arrow {width:44px;height:44px;background:var(--figma-yellow);border:1px solid var(--green);border-radius:50%;color:var(--green-dark);cursor:pointer;font-size:2rem;line-height:1}
.gallery-counter {font-weight:900;font-size:.9rem}
.space-caption {margin:18px 0 0;text-align:center;color:#4c422f;font-weight:800}

/* Reviews */
.reviews {background:var(--olive)}
.reviews .container {padding-top:50px;padding-bottom:62px}
.reviews h2 {margin-bottom:30px}
/* Depoimentos selecionados: marcação HTML estática, sem integração externa. */
.reviews-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;padding-top:42px}
.review-card {position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:320px;background:#fff;border-radius:12px;padding:58px 22px 23px;text-align:center;box-shadow:0 5px 17px #415b241c}
.review-avatar {position:absolute;top:-42px;left:50%;transform:translateX(-50%);width:84px;height:84px;object-fit:cover;border:4px solid #fff;border-radius:50%;background:#ecefe5;box-shadow:0 2px 7px #22331830}
.review-author {margin:0 0 8px;font-family:var(--font-body);font-size:1.1rem;font-weight:800;line-height:1.3;color:var(--green-dark)}
.review-stars {margin:0 0 14px;color:#f3aa00;font-family:system-ui,sans-serif;font-size:1.65rem;letter-spacing:1px;line-height:1;white-space:nowrap}
.review-card blockquote {margin:0;flex:1;max-width:38ch;font-size:.95rem;line-height:1.5;color:#35452f;overflow-wrap:break-word}
.review-card blockquote p {margin:0}

/* Footer */
.site-footer {position:relative;background:#fff;padding:52px 0 35px;text-align:center;overflow:hidden}
.footer-inner {position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.footer-logo {width:min(380px,76vw);height:auto;margin-bottom:15px}
.footer-links {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:27px;row-gap:8px;margin:0 0 20px}
.footer-links a {text-decoration:none;color:var(--green-dark)}
.footer-links a:hover {text-decoration:underline}
.footer-links a {display:inline-flex;align-items:center;gap:9px;}
.social-icon {display:block;width:28px;height:28px;flex:0 0 28px;color:var(--green);}
.social-icon-instagram {width:27px;height:27px;}
.addresses {font-style:normal;line-height:1.45;font-size:.86rem;font-weight:800}
.addresses p {margin:0 0 13px}
.footer-fine {font-size:.75rem;color:#6f8061;margin:19px 0 0}
.decor-footer {right:18px;bottom:35px;width:95px;height:120px;opacity:.85;background:radial-gradient(circle at 10% 30%,#c4ca8c 0 4px,transparent 4.5px),radial-gradient(circle at 60% 15%,#c4ca8c 0 4px,transparent 4.5px),radial-gradient(circle at 40% 75%,#c4ca8c 0 4px,transparent 4.5px),radial-gradient(circle at 95% 55%,#c4ca8c 0 4px,transparent 4.5px);background-size:42px 43px}
.whatsapp-float {position:fixed;z-index:9;right:22px;bottom:22px;display:flex;align-items:center;gap:10px;text-decoration:none;background:#fff;border-radius:999px;padding:9px 15px 9px 9px;color:#315a27;font-weight:900;box-shadow:0 5px 28px #0003;border:1px solid #e5eee2}
.whatsapp-float svg {background:#20b85b;fill:#fff;border-radius:50%;width:52px;height:52px;padding:11px}
.whatsapp-float:hover {transform:translateY(-2px)}
.disabled-link {opacity:.5;pointer-events:none}
.cookie-consent {position:fixed;bottom:16px;left:16px;right:16px;max-width:750px;z-index:100;margin:auto;background:#fff;border:1px solid #a9b39b;box-shadow:0 8px 32px #0003;border-radius:18px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.cookie-consent p {font-size:.88rem;margin:0;line-height:1.45}
.cookie-consent p span {display:block;font-size:.8rem;margin-top:3px}
.cookie-buttons {display:flex;gap:7px;flex-shrink:0}
.cookie-buttons button {font-size:.82rem;padding:11px 14px}
.button-outline {border:1px solid var(--green-dark);color:var(--green-dark);background:#fff}
.button-dark {background:var(--green-dark);color:#fff}

@media (max-width: 1020px) {
  .container {width:min(100% - 50px,960px)}
  .main-nav a {font-size:1.04rem;padding:10px 13px}
  .brand-link img {width:168px}
  .about-inner {gap:10px;min-height:450px}
  .about-visual img {max-height:435px}
  .services-grid {column-gap:6px}
  .service-item img {height:94px}
}
@media (max-width: 860px) {
  html {scroll-padding-top:65px}
  .container {width:min(100% - 36px,660px)}
  .header-inner {min-height:68px}
  .brand-link img {width:160px}
  .menu-toggle {display:flex;flex-direction:column;gap:5px;justify-content:center;background:transparent;border:1px solid #d5dece;border-radius:8px;width:44px;height:42px;padding:10px;cursor:pointer}
  .menu-toggle span {display:block;width:100%;height:2px;background:var(--green-dark);border-radius:4px}
  .main-nav {display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 11px 24px #0002;flex-direction:column;align-items:stretch;padding:12px 22px 18px}
  .main-nav.is-open {display:flex}
  .main-nav a {font-size:1.12rem;padding:13px 8px}
  .main-nav a:not(:last-child)::after {display:none}
  .about-inner {grid-template-columns:1fr;gap:0}
  .about-copy {padding:38px 0 10px}
  .about-copy p {font-size:1.05rem;max-width:none}
  .about-visual {justify-content:center}
  .about-visual img {max-width:490px;width:min(100%,490px);max-height:none}
  .section h2 {margin-bottom:25px}
  .services-inner {padding:38px 0 45px}
  .services-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:23px 8px;margin-bottom:35px}
  .service-item img {height:96px}
  .service-item h3 {font-size:1.38rem}
  .gallery-frame {border-radius:20px}
  .space .container,.reviews .container {padding-top:41px;padding-bottom:48px}
  .reviews-list {grid-template-columns:1fr;gap:58px;padding-top:40px}
  .review-card {max-width:480px;width:100%;margin-inline:auto;min-height:0}
  .whatsapp-float {right:12px;bottom:13px}
  .whatsapp-float svg {width:50px;height:50px}
  .whatsapp-float span {display:none}
  .whatsapp-float {padding:4px;border:none;background:#20b85b}
  .cookie-consent {flex-direction:column;align-items:stretch;bottom:72px}
  .cookie-buttons {justify-content:flex-end}
}
@media (max-width: 420px) {
  .container {width:calc(100% - 30px)}
  .service-item h3 {font-size:1.06rem}
  .service-item img {height:77px}
  .service-item p {font-size:.67rem}
  .about-copy p {font-size:1rem}
  .section h1 {font-size:2.55rem}
  .button-secondary {font-size:1.25rem}
  .footer-links {flex-direction:column;gap:4px}
  .footer-links a {font-size:1.3rem}
  .addresses {font-size:.75rem}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* V1.0 — composição dos letreiros fornecidos pelo designer e CTAs */
.illustrated-heading {margin:0 0 30px!important;min-height:0}
.illustrated-heading img {display:block;width:min(100%,420px);height:auto;object-fit:contain;object-position:left center}
.space .illustrated-heading img {width:min(100%,360px)}
.reviews .illustrated-heading img {width:min(100%,475px)}
.service-cta-image {display:block;width:min(100%,570px);margin-inline:auto;border-radius:999px;text-decoration:none;transition:transform .18s ease,filter .18s ease}
.service-cta-image img {display:block;width:100%;height:auto}
.service-cta-image:hover {transform:translateY(-3px);filter:brightness(1.04)}
.service-cta-image:focus-visible {outline:3px solid #164fb0;outline-offset:4px}
.privacy-settings {margin-top:10px;padding:5px 8px;font-size:.78rem;color:var(--green-dark);text-decoration:underline;border:0;background:transparent;cursor:pointer}
.footer-fine {margin-bottom:3px}
@media (max-width:860px) {
  .space .illustrated-heading img {width:min(85%,310px)}
  .reviews .illustrated-heading img {width:min(95%,410px)}
  .service-cta-image {width:min(100%,540px)}
}
@media (max-width:420px) {
  .service-cta-image {width:100%}
  .reviews .illustrated-heading img {width:100%}
}

/* Tipografia: propriedades do Figma e arquivos oficiais fornecidos pelo designer. */
.service-item h3 {font-family:var(--font-strong);font-weight:900;line-height:1.12}
.service-item p {font-family:var(--font-body);font-weight:500}
.review-author {font-family:var(--font-strong)}
.addresses {font-family:var(--font-body);font-weight:500}
.review-card blockquote {font-family:var(--font-body);font-weight:400}
.about-copy p {font-family:var(--font-body)}
/* Os títulos Nosso Espaço e Avaliações e o CTA usam arte autorizada do Figma,
   preservando a forma da Belligan enquanto a fonte web não é fornecida. */
/* Mantém o clique bem acessível mesmo se o usuário preferir reduzir movimento. */
@media (hover:hover) {.review-card:hover {box-shadow:0 9px 22px rgba(54,75,35,.14)}}
@media (max-width:860px) {.about h1 {font-size:clamp(2.35rem,8vw,3.5rem)}}

/* Acabamento: a linha decorativa atravessa a transição Serviços → Nosso Espaço. */
@media (max-width:860px){
  .decor-swirl-figma {width:clamp(110px,23vw,180px);top:calc(100% - clamp(75px,15vw,119px));}
  .social-icon {width:25px;height:25px;flex-basis:25px;}
}
@media (max-width:420px){
  .decor-swirl-figma {width:118px;top:calc(100% - 80px);}
}

/* Rodapé: os contatos usam Neulis, pois Belligan não garante algarismos e @. */
.footer-links a {font-family:var(--font-strong);font-size:clamp(1.2rem,2vw,1.75rem);font-weight:900;line-height:1.2;}
.footer-links a span {display:inline;}
.footer-links a:focus-visible {border-radius:6px;}
@media (max-width:420px) { .decor-swirl-figma {right:0;} }