/* =========================================================
   VET EM CASA — Dra. Esther Maggessi
   Design system: petróleo + navy + ouro + água suave
   Display: Fraunces · Body: Plus Jakarta Sans · Accent: Caveat
   ========================================================= */

:root{
  /* Brand */
  --petroleo:#0C4A56;
  --petroleo-700:#08363F;
  --navy:#1B2A47;
  --ouro:#C6A15B;
  --ouro-claro:#E4C98A;
  --agua:#7FCDBF;
  --agua-suave:#DCF0EA;
  --areia:#F6F1E7;

  /* Surfaces (light) */
  --bg:#F4FAF8;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#EFF7F4;
  --ink:#143038;
  --ink-soft:#4A6066;
  --line:rgba(12,74,86,.12);
  --shadow-sm:0 2px 10px rgba(11,40,46,.06);
  --shadow:0 18px 50px -18px rgba(11,40,46,.28);
  --shadow-lg:0 30px 80px -30px rgba(11,40,46,.40);

  /* Type scale */
  --display:"Fraunces", Georgia, serif;
  --body:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --script:"Caveat", cursive;

  --radius:24px;
  --radius-sm:14px;
  --radius-lg:34px;
  --container:1180px;
  --header-h:76px;

  --grad-hero:radial-gradient(120% 90% at 80% 0%, #12606E 0%, var(--petroleo) 42%, var(--petroleo-700) 100%);
  --grad-gold:linear-gradient(135deg, var(--ouro-claro), var(--ouro));
}

[data-theme="dark"]{
  --bg:#0A1820;
  --bg-2:#0E2029;
  --surface:#11262F;
  --surface-2:#16303A;
  --ink:#E7F1F0;
  --ink-soft:#9DB5B6;
  --line:rgba(255,255,255,.10);
  --shadow-sm:0 2px 10px rgba(0,0,0,.30);
  --shadow:0 18px 50px -18px rgba(0,0,0,.6);
  --shadow-lg:0 30px 80px -30px rgba(0,0,0,.75);
  --surface-2:#15303A;
  --grad-hero:radial-gradient(120% 90% at 80% 0%, #0E3A44 0%, #0A2A33 45%, #06181E 100%);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.1; margin:0; letter-spacing:-.01em}
h2{font-size:clamp(2rem,3.6vw,2.9rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--ouro); outline-offset:3px; border-radius:6px}

.container{width:min(var(--container),92vw); margin-inline:auto}
.section{padding:clamp(64px,9vw,120px) 0; position:relative}

/* Decorative background paws */
/* ---------- Fundo animado (desenhos de pets flutuando, site inteiro) ---------- */
.bg-paws{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.bg-doodle{position:absolute; width:120px; height:120px; color:var(--petroleo); opacity:.13; will-change:transform}
/* cada desenho se desenha sozinho e depois some, em looping */
.bg-doodle path{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:bg-draw var(--dd,9s) ease-in-out infinite; animation-delay:var(--delay,0s)}
@keyframes bg-draw{
  0%{stroke-dashoffset:1}            /* nada desenhado */
  6%{stroke-dashoffset:1}
  40%{stroke-dashoffset:0}           /* totalmente desenhado */
  62%{stroke-dashoffset:0}           /* fica visível um instante */
  96%{stroke-dashoffset:-1}          /* some (apaga) */
  100%{stroke-dashoffset:-1}
}
[data-theme="dark"] .bg-doodle{color:var(--agua); opacity:.18}
.bd1{top:8%;  left:4%;   width:150px; --dd:8s;    --delay:0s}
.bd2{top:22%; left:88%;  width:120px; --dd:10.5s; --delay:1.4s}
.bd3{top:48%; left:7%;   width:90px;  --dd:7.5s;  --delay:.7s; color:#E0608A}
.bd4{top:40%; left:80%;  width:130px; --dd:11s;   --delay:2.6s}
.bd5{top:74%; left:14%;  width:110px; --dd:9s;    --delay:1.9s}
.bd6{top:82%; left:84%;  width:120px; --dd:12s;   --delay:3.4s}
.bd7{top:64%; left:46%;  width:120px; --dd:9.5s;  --delay:.3s}
@media (max-width:760px){ .bd2,.bd4,.bd7{display:none} }

/* Roof chevron motif (the logo signature) */
.roof{display:inline-block; width:26px; height:9px; position:relative; vertical-align:middle}
.roof::before,.roof::after{content:""; position:absolute; top:0; height:3px; width:15px; background:var(--grad-gold); border-radius:3px}
.roof::before{left:0; transform-origin:left; transform:rotate(-26deg)}
.roof::after{right:0; transform-origin:right; transform:rotate(26deg)}

/* ---------- Buttons ---------- */
.btn{
  --b:var(--petroleo);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--body); font-weight:700; font-size:1rem;
  padding:.85em 1.5em; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s, color .25s;
  line-height:1; text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.62em 1.1em; font-size:.92rem}
.btn-primary{background:var(--petroleo); color:#fff; box-shadow:0 12px 26px -12px var(--petroleo)}
.btn-primary:hover{background:var(--petroleo-700)}
[data-theme="dark"] .btn-primary{background:var(--agua); color:#06222a}
[data-theme="dark"] .btn-primary:hover{background:#9adccd}
.btn-whats{background:#1FAE54; color:#fff; box-shadow:0 12px 26px -12px #1FAE54}
.btn-whats:hover{background:#19914a}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ouro); color:var(--ouro)}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:60;
  display:flex; align-items:center; gap:1rem;
  padding:0 clamp(16px,4vw,40px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled{border-bottom-color:var(--line); box-shadow:var(--shadow-sm)}
.brand{display:flex; align-items:center; gap:.7rem; margin-right:auto}
.brand-chip{display:grid; place-items:center; width:64px; height:46px; flex:none}
.brand-chip img{width:100%; height:100%; object-fit:contain}
.brand-name{font-family:var(--display); font-weight:600; font-size:1.18rem; line-height:1; display:block}
.brand-sub{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:600}

.nav{display:flex; gap:.2rem; align-items:center}
.nav a{padding:.5em .7em; border-radius:10px; font-weight:600; font-size:.92rem; color:var(--ink-soft); transition:color .2s, background .2s}
.nav a:hover,.nav a.active{color:var(--petroleo); background:var(--surface-2)}
[data-theme="dark"] .nav a:hover,[data-theme="dark"] .nav a.active{color:var(--agua)}

.header-actions{display:flex; align-items:center; gap:.6rem}
.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:transform .3s, color .2s, border-color .2s;
}
.theme-toggle:hover{transform:rotate(15deg); color:var(--ouro); border-color:var(--ouro)}
.theme-toggle svg{stroke:currentColor; stroke-width:1.8; fill:none}
.theme-toggle .ico-moon{display:none; fill:currentColor; stroke:none}
[data-theme="dark"] .theme-toggle .ico-sun{display:none}
[data-theme="dark"] .theme-toggle .ico-moon{display:block}

.nav-toggle{display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.nav-toggle span{width:24px; height:2.5px; background:var(--ink); border-radius:3px; transition:transform .3s, opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-backdrop{position:fixed; inset:0; z-index:55; background:rgba(8,28,33,.45); backdrop-filter:blur(2px)}

/* ---------- Hero ---------- */
.hero{position:relative; padding:calc(var(--header-h) + 5vh) 0 8vh; background:var(--grad-hero); color:#fff; overflow:hidden}
.hero-glow{position:absolute; width:60vw; height:60vw; right:-10vw; top:-20vw; background:radial-gradient(circle, rgba(127,205,191,.28), transparent 60%); filter:blur(20px)}
.hero-inner{width:min(var(--container),92vw); margin-inline:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center; position:relative}
.kicker{font-family:var(--body); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; color:var(--ouro-claro); display:flex; align-items:center; gap:.55rem; margin:0 0 1rem}
.hero-title{font-size:clamp(2.3rem,5vw,4rem); font-weight:600; letter-spacing:-.02em; color:#fff}
.hero-title em{font-style:normal; font-family:var(--script); font-weight:700; color:var(--ouro-claro); font-size:1.12em; padding:0 .06em}
.hero-sub{font-size:clamp(1.02rem,1.6vw,1.22rem); color:rgba(255,255,255,.85); max-width:46ch; margin:1.2rem 0 1.8rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem}
.hero .btn-primary{background:#fff; color:var(--petroleo)}
.hero .btn-primary:hover{background:var(--areia)}
.hero-trust{list-style:none; margin:2.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:1.6rem}
.hero-trust li{font-size:.9rem; color:rgba(255,255,255,.78); line-height:1.3; max-width:14ch}
.hero-trust strong{display:block; font-family:var(--display); font-size:1.5rem; color:#fff; font-weight:600}

.hero-media{position:relative; display:grid; place-items:center}
.hero-frame{position:relative; width:min(440px,86%); aspect-ratio:1; display:grid; place-items:center}
.hero-logo-anim{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block}
.hero-frame-glow{position:absolute; inset:8%; background:radial-gradient(circle at 50% 45%, rgba(198,161,91,.28), transparent 62%); filter:blur(26px); pointer-events:none}
.hero-badge{margin-top:1.4rem; background:var(--surface); color:var(--ink); padding:.7rem 1.1rem; border-radius:999px; font-weight:600; font-size:.9rem; box-shadow:var(--shadow); display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap}
.hero-badge .heart{color:#E0608A}

.scroll-cue{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:26px; height:42px; border:2px solid rgba(255,255,255,.5); border-radius:14px; display:grid; justify-items:center; padding-top:7px}
.scroll-cue span{width:4px; height:9px; border-radius:3px; background:#fff; animation:scrollcue 1.6s infinite}
@keyframes scrollcue{0%{opacity:0; transform:translateY(-4px)}40%{opacity:1}80%,100%{opacity:0; transform:translateY(10px)}}

/* ---------- Section headers ---------- */
.sec-head{text-align:center; max-width:680px; margin:0 auto clamp(36px,5vw,60px)}
/* título do comparativo sempre em uma única linha (fonte escala p/ caber) */
.beneficios .sec-head{max-width:none}
.beneficios .sec-head h2{white-space:nowrap; font-size:clamp(1.3rem,4.4vw,2.9rem)}
.eyebrow{font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.8rem; color:var(--ouro); display:inline-flex; align-items:center; gap:.5rem; margin:0 0 .7rem}
.sec-lead{color:var(--ink-soft); font-size:1.05rem; margin:.7rem 0 0}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}

/* ---------- Photo placeholders ---------- */
.ph{width:100%; border-radius:var(--radius); object-fit:cover; background:linear-gradient(150deg,var(--navy),var(--petroleo)); box-shadow:var(--shadow); aspect-ratio:1/1}
.ph[data-ratio="4x5"]{aspect-ratio:4/5}
.ph[data-ratio="16x10"]{aspect-ratio:16/10}

/* ---------- Sobre ---------- */
.sobre-media{position:relative}
/* ---------- Carrossel de fotos (Sobre Nós) ---------- */
.sobre-carousel{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:1/1; background:linear-gradient(150deg,var(--navy),var(--petroleo)); touch-action:pan-y}
.sc-track{display:flex; height:100%; transition:transform .5s ease; will-change:transform}
.sc-slide{flex:0 0 100%; height:100%; margin:0}
.sc-slide img{width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-select:none}
.sobre-carousel .ph{height:100%}
.sc-prev,.sc-next{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.85); color:#143038; cursor:pointer; display:grid; place-items:center; font-size:1.5rem; line-height:1; padding-bottom:3px; box-shadow:var(--shadow-sm); transition:background .2s, transform .2s}
.sc-prev:hover,.sc-next:hover{background:#fff; transform:translateY(-50%) scale(1.08)}
.sc-prev{left:10px} .sc-next{right:10px}
.sc-dots{position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:80%}
.sc-dots button{width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.55); cursor:pointer; padding:0; transition:width .25s, background .2s}
.sc-dots button.active{background:#fff; width:20px; border-radius:5px}
.sobre-pill{position:absolute; bottom:18px; left:18px; z-index:4; background:var(--surface); padding:.7rem 1rem; border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.pill-num{font-family:var(--display); font-weight:600; color:var(--ouro)}
.pill-txt{font-size:.78rem; color:var(--ink-soft)}
.sobre-copy h2{margin-bottom:1rem}
.values{list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:1rem}
.values li{display:flex; gap:.9rem; align-items:flex-start}
.v-ico{flex:none; width:46px; height:46px; border-radius:14px; background:var(--agua-suave); display:grid; place-items:center; font-size:1.3rem}
[data-theme="dark"] .v-ico{background:var(--surface-2)}
.values strong{display:block; font-size:1.02rem}
.values span{color:var(--ink-soft); font-size:.95rem}

/* ---------- Serviços ---------- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.4rem; cursor:pointer; text-align:left; font:inherit; color:inherit;
  transition:transform .3s, box-shadow .3s, border-color .3s; position:relative; overflow:hidden;
}
.card::after{content:""; position:absolute; inset:auto -30% -40% auto; width:140px; height:140px; border-radius:50%; background:var(--agua-suave); opacity:0; transition:opacity .35s; z-index:0}
[data-theme="dark"] .card::after{background:rgba(127,205,191,.10)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.card:hover::after{opacity:.7}
.card-ico{font-size:2rem; display:block; margin-bottom:.7rem; position:relative; z-index:1}
.card h3{font-size:1.12rem; margin-bottom:.35rem; position:relative; z-index:1}
.card p{font-size:.92rem; color:var(--ink-soft); margin:0; position:relative; z-index:1}
.card-more{margin-top:.9rem; font-weight:700; font-size:.85rem; color:var(--petroleo); position:relative; z-index:1; display:inline-flex; align-items:center; gap:.3rem}
[data-theme="dark"] .card-more{color:var(--agua)}

/* ---------- Timeline ---------- */
.timeline{list-style:none; padding:0; margin:0; max-width:760px; margin-inline:auto; position:relative}
.timeline::before{content:""; position:absolute; left:23px; top:10px; bottom:10px; width:2px; background:linear-gradient(var(--ouro),var(--agua))}
.t-step{display:flex; gap:1.4rem; padding:0 0 1.6rem; position:relative}
.t-step:last-child{padding-bottom:0}
.t-num{flex:none; width:48px; height:48px; border-radius:50%; background:var(--grad-gold); color:#3a2c0e; font-family:var(--display); font-weight:700; font-size:1.25rem; display:grid; place-items:center; box-shadow:var(--shadow-sm); z-index:1}
.t-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.1rem 1.3rem; flex:1; box-shadow:var(--shadow-sm)}
.t-card h3{font-size:1.1rem; margin-bottom:.2rem}
.t-card p{margin:0; color:var(--ink-soft); font-size:.95rem}

/* ---------- Benefícios ---------- */
.compare{display:grid; grid-template-columns:1fr auto 1fr; gap:1.2rem; align-items:stretch; max-width:980px; margin-inline:auto}
.compare-col{border-radius:var(--radius); padding:2rem 1.8rem; position:relative}
.compare-col h3{margin-bottom:1.1rem}
.compare-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.8rem}
.compare-col li{position:relative; padding-left:1.9rem; font-size:.97rem}
.compare-col li::before{position:absolute; left:0; top:-1px; font-size:1.1rem}
.col-trad{background:var(--surface); border:1px solid var(--line)}
.col-trad li{color:var(--ink-soft)}
.col-trad li::before{content:"✕"; color:#C25B5B; font-weight:700}
.col-home{background:linear-gradient(160deg,var(--petroleo),var(--petroleo-700)); color:#fff; box-shadow:var(--shadow)}
.col-home li::before{content:"✓"; color:var(--agua); font-weight:700}
.col-home .ribbon{position:absolute; top:-12px; right:18px; background:var(--grad-gold); color:#3a2c0e; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:.35em .8em; border-radius:999px}
.compare-vs{display:grid; place-items:center}
.compare-vs span{font-family:var(--display); font-size:1.6rem; color:var(--ouro); width:54px; height:54px; border:2px dashed var(--line); border-radius:50%; display:grid; place-items:center}

/* ---------- Área ---------- */
.area-tags{list-style:none; padding:0; margin:1.4rem 0; display:flex; flex-wrap:wrap; gap:.5rem}
.area-tags li{background:var(--surface-2); border:1px solid var(--line); padding:.4em .9em; border-radius:999px; font-size:.88rem; font-weight:600; color:var(--ink-soft)}
.area-meta{display:flex; gap:2rem; flex-wrap:wrap; margin:1.4rem 0}
.area-meta strong{font-family:var(--display); font-size:1.4rem; color:var(--petroleo); display:block}
[data-theme="dark"] .area-meta strong{color:var(--agua)}
.area-meta span{font-size:.86rem; color:var(--ink-soft)}
.area-map{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); min-height:380px}
.area-map iframe{width:100%; height:100%; min-height:380px; border:0; display:block; filter:saturate(1.05)}
[data-theme="dark"] .area-map iframe{filter:invert(.9) hue-rotate(180deg) saturate(.8)}

/* ---------- Agenda ---------- */
.booking{max-width:780px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.6rem); box-shadow:var(--shadow)}
.field{margin-bottom:1.1rem; display:flex; flex-direction:column}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.field label{font-weight:700; font-size:.9rem; margin-bottom:.4rem}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; padding:.8em 1em; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--bg-2); color:var(--ink); transition:border-color .2s, box-shadow .2s; width:100%;
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--ouro); box-shadow:0 0 0 4px rgba(198,161,91,.18)}
.field input.invalid,.field select.invalid{border-color:#C25B5B; box-shadow:0 0 0 4px rgba(194,91,91,.15)}
.form-error{color:#C25B5B; font-weight:600; font-size:.92rem; margin:.2rem 0 1rem}
.booking-actions{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:.4rem}
.btn-wide{width:100%; justify-content:center; gap:.6rem; background:#1FAE54 !important; color:#fff !important}
.btn-wide:hover{background:#179247 !important}
.btn .wa-ico{display:inline-grid; place-items:center}
.btn .wa-ico svg{display:block}
.booking-feedback{margin:.9rem 0 0; padding:.7rem 1rem; border-radius:12px; background:rgba(31,174,84,.12); color:#127a39; font-weight:600; font-size:.9rem; border:1px solid rgba(31,174,84,.3)}
[data-theme="dark"] .booking-feedback{color:#7ee2a3; background:rgba(31,174,84,.16)}
.booking-note{font-size:.82rem; color:var(--ink-soft); margin:1rem 0 0}

/* ---------- Depoimentos ---------- */
.reviews{overflow:hidden}
.reviews-track{display:flex; transition:transform .6s cubic-bezier(.6,.05,.2,1)}
.review{flex:0 0 100%; padding:.5rem}
.review-inner{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.6rem); box-shadow:var(--shadow-sm); max-width:760px; margin-inline:auto; text-align:center}
.g-badge{display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; color:var(--ink-soft); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.32rem .7rem; margin-bottom:.9rem}
.g-logo{width:16px; height:16px; flex:none}
.stars{color:var(--ouro); font-size:1.2rem; letter-spacing:.1em; margin-bottom:1rem}
.review-text{font-family:var(--display); font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:500; line-height:1.45; margin:0 0 1.4rem}
.review-author{display:flex; align-items:center; justify-content:center; gap:.8rem}
.review-avatar{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; color:#fff; flex:none}
.review-meta{text-align:left}
.review-meta strong{display:block; font-size:.98rem}
.review-meta span{font-size:.85rem; color:var(--ink-soft)}
.reviews-dots{display:flex; justify-content:center; gap:.5rem; margin-top:1.4rem}
.reviews-dots button{width:9px; height:9px; border-radius:50%; border:none; background:var(--line); cursor:pointer; transition:width .3s, background .3s; padding:0}
.reviews-dots button.active{width:26px; border-radius:6px; background:var(--ouro)}

/* ---------- Blog ---------- */
.blog-cats{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2rem}
.blog{position:relative; overflow:hidden}
.blog .container{position:relative; z-index:1}
/* ---------- Doodles animados (desenho à mão em looping) ---------- */
.doodles{position:absolute; inset:0; z-index:0; pointer-events:none}
.doodle{position:absolute; width:90px; height:90px; color:var(--ouro); opacity:.16; animation:doodle-float var(--fdur,11s) ease-in-out infinite; animation-delay:var(--delay,0s)}
.doodle path{fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:doodle-draw var(--dur,8s) ease-in-out infinite; animation-delay:var(--delay,0s)}
@keyframes doodle-draw{0%{stroke-dashoffset:1}42%{stroke-dashoffset:0}72%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes doodle-float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-16px) rotate(calc(var(--rot,0deg) + 5deg))}}
[data-theme="dark"] .doodle{opacity:.22}
.d1{top:5%;  left:2%;  width:96px; color:var(--ouro);     --dur:7.5s; --fdur:11s; --rot:-8deg; --delay:0s}
.d2{top:9%;  left:85%; width:92px; color:var(--petroleo); --dur:8.5s; --fdur:13s; --rot:7deg;  --delay:1.2s}
.d3{top:39%; left:1%;  width:62px; color:#E0608A;          --dur:6.5s; --fdur:10s; --rot:6deg;  --delay:.6s}
.d4{top:45%; left:89%; width:88px; color:var(--agua);      --dur:9s;   --fdur:12s; --rot:-6deg; --delay:2s}
.d5{top:73%; left:4%;  width:74px; color:var(--ouro);      --dur:8s;   --fdur:14s; --rot:5deg;  --delay:1.6s}
.d6{top:76%; left:87%; width:82px; color:var(--petroleo);  --dur:9.5s; --fdur:12s; --rot:-7deg; --delay:.3s}
.d7{top:30%; left:45%; width:84px; color:var(--ouro);      --dur:8.5s; --fdur:15s; --rot:4deg;  --delay:2.4s}
.d8{top:87%; left:43%; width:66px; color:var(--petroleo);  --dur:7s;   --fdur:11s; --rot:-5deg; --delay:1s}
@media (max-width:760px){ .d3,.d4,.d7{display:none} .doodle{opacity:.12} }
.blog-cats button{font:inherit; font-weight:600; font-size:.88rem; padding:.45em 1em; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer; transition:all .2s}
.blog-cats button:hover{border-color:var(--ouro); color:var(--ouro)}
.blog-cats button.active{background:var(--petroleo); color:#fff; border-color:var(--petroleo)}
[data-theme="dark"] .blog-cats button.active{background:var(--agua); color:#06222a}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.post{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; display:flex; flex-direction:column}
.post:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.post-img{aspect-ratio:16/10; position:relative; overflow:hidden; background:linear-gradient(150deg,var(--navy),var(--petroleo))}
.post-img svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.post-cat{position:absolute; z-index:2; top:12px; left:12px; background:var(--surface); color:var(--petroleo); font-size:.74rem; font-weight:700; padding:.3em .7em; border-radius:999px}
[data-theme="dark"] .post-cat{color:var(--agua)}
.post-body{padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1}
.post-body h3{font-size:1.12rem; margin-bottom:.5rem}
.post-body p{font-size:.92rem; color:var(--ink-soft); margin:0 0 1rem}
.post-link{margin-top:auto; align-self:flex-start; font:inherit; font-weight:700; font-size:.85rem; color:var(--petroleo); background:none; border:none; padding:0; cursor:pointer; transition:gap .2s, opacity .2s}
.post-link:hover{opacity:.75}
[data-theme="dark"] .post-link{color:var(--agua)}

/* ---------- Contato ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; display:flex; flex-direction:column; gap:.9rem; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s}
a.contact-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.c-ico{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff}
.c-ico.whats{background:#1FAE54}
.c-ico.insta{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.c-ico.clock{background:var(--petroleo)}
.c-ico.pin{background:var(--ouro)}
.contact-card strong{display:block; font-size:1.05rem}
.contact-card span{color:var(--ink-soft); font-size:.92rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:#D8E2E6; padding:clamp(48px,6vw,72px) 0 28px; margin-top:40px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem}
.f-brand .brand-chip{width:76px; height:54px}
.f-emotional{font-family:var(--script); font-size:1.5rem; color:var(--ouro-claro); line-height:1.25; margin:1rem 0 0; max-width:24ch}
.f-col h4{font-family:var(--display); color:#fff; font-size:1.05rem; margin-bottom:.8rem}
.f-col p{margin:0 0 .5rem; font-size:.92rem; color:rgba(216,226,230,.8)}
.f-col a{transition:color .2s}
.f-col a:hover{color:var(--ouro-claro)}
.footer-base{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); font-size:.83rem; color:rgba(216,226,230,.65)}
.f-made span{color:#E0608A}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed; right:20px; bottom:20px; z-index:50; width:60px; height:60px; border-radius:50%; background:#1FAE54; color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px -8px rgba(31,174,84,.6); transition:transform .25s}
.wa-float:hover{transform:scale(1.08)}
.wa-pulse{position:absolute; inset:0; border-radius:50%; background:#1FAE54; z-index:-1; animation:pulse 2.4s infinite}
@keyframes pulse{0%{transform:scale(1); opacity:.6}70%{transform:scale(1.7); opacity:0}100%{opacity:0}}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(8,28,33,.55); backdrop-filter:blur(3px)}
.modal-box{position:relative; background:var(--surface); border-radius:var(--radius-lg); padding:clamp(1.8rem,4vw,2.8rem); max-width:580px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:modalin .3s ease}
@keyframes modalin{from{opacity:0; transform:translateY(20px) scale(.97)}to{opacity:1}}
.modal-close{position:sticky; top:0; float:right; margin:-8px -8px 0 0; width:38px; height:38px; border-radius:50%; border:none; background:var(--surface-2); color:var(--ink); font-size:1.5rem; cursor:pointer; line-height:1; transition:background .2s; z-index:2}
.modal-close:hover{background:var(--line)}
.modal-ico{font-size:2.6rem; display:block; margin-bottom:.6rem}
.modal-content h3{font-size:1.5rem; margin-bottom:.8rem}
.modal-content #modal-body{color:var(--ink-soft); margin-bottom:1.4rem}
.modal-content #modal-body p{margin-bottom:.7rem}
/* artigos do blog dentro do modal */
.article{text-align:left}
.article h4{font-family:var(--display); color:var(--ink); font-size:1.08rem; margin:1.3rem 0 .5rem}
.article p{margin:0 0 .8rem; line-height:1.6}
.article ul{margin:0 0 1rem; padding-left:1.2rem; list-style:none}
.article li{position:relative; margin:0 0 .5rem; padding-left:1.2rem; line-height:1.55}
.article li::before{content:"🐾"; position:absolute; left:0; top:0; font-size:.8rem; opacity:.85}
.article strong{color:var(--ink)}

/* ---------- Reveal on scroll (only when JS is active) ---------- */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav{
    position:fixed; top:0; right:0; height:100dvh; width:min(320px,82vw); z-index:58;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.2rem;
    background:var(--bg); padding:calc(var(--header-h) + 16px) 22px 22px; box-shadow:var(--shadow-lg);
    transform:translateX(105%); transition:transform .35s cubic-bezier(.5,0,.2,1);
  }
  .nav.open{transform:none}
  .nav a{padding:.85em .6em; font-size:1.05rem; border-bottom:1px solid var(--line); border-radius:0}
  .nav-toggle{display:flex}
  .header-cta{display:none}
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .hero-copy{order:2}
  .hero-sub{margin-inline:auto}
  .hero-cta,.hero-trust,.kicker{justify-content:center}
  .hero-trust li{max-width:none}
  .hero-media{order:1; margin-bottom:1rem}
  .two-col{grid-template-columns:1fr}
  .sobre-media{max-width:440px; margin-inline:auto; width:100%}
  .cards{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:1fr 1fr}
  .compare{grid-template-columns:1fr; gap:1.6rem}
  .compare-vs{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .brand-sub{display:none}
  .area-meta{gap:1.2rem}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .js .reveal{opacity:1; transform:none}
  .hero-logo-anim{display:none} /* troca a logo animada pela versão estática */
  .hero-frame{background:url("../assets/hero-logo-still.png") center/contain no-repeat}
  .doodle path,.bg-doodle path{stroke-dashoffset:0 !important} /* doodles ficam desenhados, sem animar */
}