:root {
  --teal: #21686E;
  --orange: #D9822B;
  --ink: #1A1D20;
  --cream: #F8F5EE;
  --paper: #fffdf8;
  --line: rgba(33,104,110,.16);
  --shadow: 0 20px 55px rgba(26,29,32,.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--cream);
  font-family: Montserrat, Open Sans, sans-serif; line-height: 1.55;
  overflow-x: hidden;
}
body:before {
  content:""; position: fixed; inset: 0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 10% 20%, rgba(217,130,43,.10), transparent 22rem),
    radial-gradient(circle at 90% 70%, rgba(33,104,110,.08), transparent 24rem);
}
.header {
  width:min(1180px, calc(100% - 48px)); margin:0 auto; height:100px;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.brand-mini { width:80px; height:80px; display:block; }
.brand-mini img { width:100%; height:100%; object-fit:contain; }
.nav { display:flex; gap:30px; }
.nav a, .footer a { color:var(--teal); text-decoration:none; font-weight:700; font-size:.88rem; }
.nav a:hover, .footer a:hover { color:var(--orange); }
.menu-button { display:none; border:0; background:none; font-size:1.7rem; color:var(--teal); cursor:pointer; }

.hero {
  width:min(1180px, calc(100% - 48px)); min-height:680px; margin:auto;
  display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:30px;
}
.eyebrow, .section-label {
  color:var(--orange); font-weight:800; letter-spacing:.16em; font-size:.73rem;
}
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family: Fredoka, Nunito, sans-serif; line-height:1.05; }
h1 { color:var(--teal); font-size:clamp(3.5rem,7vw,6.7rem); letter-spacing:-.045em; margin:14px 0 22px; }
h1 em, h2 span, h2 em { color:var(--orange); font-style:normal; }
.hero-copy>p { max-width:600px; font-size:1.08rem; }
.hero-actions,.contact-actions { display:flex; flex-wrap:wrap; gap:14px; margin:30px 0; }
.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px;
  border-radius:999px; text-decoration:none; font-weight:800; transition:.25s transform,.25s box-shadow,.25s background;
}
.button:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(26,29,32,.13); }
.button-primary { background:var(--teal); color:white; }
.button-secondary { border:1.5px solid var(--teal); color:var(--teal); }
.trust-row { display:flex; gap:28px; margin-top:35px; }
.trust-row div { display:flex; align-items:center; gap:7px; color:var(--teal); }
.trust-row span { color:var(--orange); font-size:1.35rem; }
.trust-row small { font-weight:700; }

.hero-art { min-height:590px; position:relative; display:grid; place-items:center; }
.hero-logo {
  width:min(500px,90%); aspect-ratio:1/1; object-fit:contain; position:relative; z-index:3;
  filter:drop-shadow(0 25px 30px rgba(26,29,32,.13));
}
.hero-circle { position:absolute; border-radius:50%; }
.hero-circle-orange { width:430px; height:430px; border:2px solid rgba(217,130,43,.45); transform:rotate(25deg); }
.hero-circle-teal { width:500px; height:500px; border:2px solid rgba(33,104,110,.22); transform:rotate(-18deg); }
.paw,.leaf { position:absolute; z-index:4; color:var(--orange); }
.paw { font-size:3rem; right:4%; top:13%; transform:rotate(18deg); }
.leaf { font-size:4rem; color:var(--teal); left:6%; bottom:13%; }

.section { padding:110px max(24px, calc((100% - 1180px)/2)); }
.intro { text-align:center; }
.section h2 { color:var(--teal); font-size:clamp(2.3rem,4vw,4.2rem); letter-spacing:-.04em; margin:12px auto 22px; max-width:900px; }
.intro>p { max-width:760px; margin:0 auto; }
.intro-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; text-align:left; }
.intro-cards article {
  background:rgba(255,253,248,.72); border:1px solid var(--line); border-radius:24px;
  padding:30px; transition:.25s transform,.25s box-shadow;
}
.intro-cards article:hover,.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.icon { color:var(--orange); font-size:2rem; }
.intro-cards h3 { color:var(--teal); font-size:1.35rem; margin:15px 0 8px; }
.intro-cards p { margin:0; font-size:.94rem; }

.section-tinted { background:rgba(33,104,110,.055); }
.section-heading { display:flex; justify-content:space-between; gap:60px; align-items:end; }
.section-heading h2 { margin-bottom:0; }
.section-heading>p { max-width:350px; margin:0; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:45px; }
.service-card {
  position:relative; padding:34px; min-height:280px; background:var(--paper); border:1px solid var(--line);
  border-radius:28px; overflow:hidden; transition:.25s transform,.25s box-shadow;
}
.service-card.featured { background:var(--teal); color:white; }
.service-card.featured h3 { color:white; }
.service-number { position:absolute; right:25px; top:20px; color:rgba(33,104,110,.18); font:800 4rem Fredoka; }
.featured .service-number { color:rgba(255,255,255,.14); }
.service-icon { display:block; font-size:2.2rem; margin-bottom:42px; }
.service-card h3 { color:var(--teal); font-size:1.7rem; margin-bottom:12px; }

/* Galeria de Fotos dos Pets */
.gallery { text-align: center; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.gallery-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(26,29,32,.05);
  transition: .25s transform, .25s box-shadow;
}
.gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.gallery-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.gallery-info {
  padding: 16px;
}
.gallery-info h3 {
  color: var(--teal);
  font-size: 1.25rem;
  margin: 0;
  font-family: Fredoka, Nunito, sans-serif;
}

.process { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.process h2 { margin-left:0; font-size:clamp(2.5rem,4vw,4rem); }
.steps { margin:0; padding:0; list-style:none; }
.steps li { display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); }
.steps li:last-child { border-bottom:0; }
.steps span { width:45px; height:45px; border-radius:50%; flex:0 0 45px; display:grid; place-items:center; background:var(--orange); color:white; font-weight:800; }
.steps h3 { color:var(--teal); margin:0 0 8px; font-size:1.25rem; }
.steps p { margin:0; font-size:.92rem; }

.difference { padding-top:20px; padding-bottom:20px; }
.difference-panel { background:var(--teal); color:white; border-radius:40px; min-height:500px; padding:70px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; overflow:hidden; position:relative; }
.difference h2 { color:white; margin-left:0; }
.difference h2 em { color:#f4b467; }
.light { color:#f4b467; }
.difference-content p { max-width:620px; }
.pill-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.pill-list span { border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:9px 14px; font-size:.83rem; font-weight:700; }
.difference-art { position:relative; min-height:300px; display:grid; place-items:center; }
.heart-outline { font-size:20rem; color:rgba(255,255,255,.08); position:absolute; }
.big-paw { font-size:7rem; z-index:1; }
.difference-art p { position:absolute; bottom:12px; text-align:center; font:1.8rem Pacifico, cursive; color:#f4b467; z-index:1; }

.cta { text-align:center; padding-top:130px; padding-bottom:130px; }
.cta>p { max-width:700px; margin:0 auto; }
.cta .contact-actions { justify-content:center; }

/* Botão Flutuante do WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.footer { padding:45px max(24px, calc((100% - 1180px)/2)); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-brand { display:flex; flex-direction:column; color:var(--teal); }
.footer-brand .script { font:2.4rem Pacifico,cursive; line-height:1; }
.footer-brand strong { letter-spacing:.22em; font-size:.65rem; margin-top:7px; }
.footer p { margin:0; color:var(--teal); font-weight:600; font-style:italic; }

.page-decoration { position:fixed; pointer-events:none; opacity:.08; z-index:-1; font-size:6rem; }
.decor-1 { left:2vw; top:38vh; color:var(--orange); }
.decor-2 { right:3vw; top:20vh; color:var(--teal); }

@media (max-width:850px) {
  .header { height:84px; }
  .nav { display:none; position:absolute; left:24px; right:24px; top:75px; flex-direction:column; background:var(--paper); padding:24px; border-radius:18px; box-shadow:var(--shadow); z-index:10; }
  .nav.open { display:flex; }
  .menu-button { display:block; }
  .hero { grid-template-columns:1fr; padding-top:45px; text-align:center; }
  .hero-copy>p { margin-left:auto; margin-right:auto; }
  .hero-actions,.trust-row { justify-content:center; }
  .hero-art { min-height:440px; }
  .hero-circle-orange { width:340px; height:340px; }
  .hero-circle-teal { width:390px; height:390px; }
  .section-heading,.process,.difference-panel { grid-template-columns:1fr; display:grid; }
  .section-heading { gap:20px; }
  .intro-cards,.service-grid { grid-template-columns:1fr; }
  .process { gap:45px; }
  .difference-panel { padding:45px 28px; }
  .difference-art { min-height:220px; }
  .footer { flex-direction:column; text-align:center; }
}
@media (max-width:520px) {
  .header,.hero { width:min(100% - 32px,1180px); }
  .section { padding-left:20px; padding-right:20px; }
  h1 { font-size:3.55rem; }
  .trust-row { gap:14px; flex-wrap:wrap; }
  .hero-art { min-height:370px; }
  .hero-circle-orange { width:280px; height:280px; }
  .hero-circle-teal { width:330px; height:330px; }
  .difference-panel { border-radius:28px; }
}