/* CalculaPet — identidade "fofa / arredondada / pastel". Vanilla, zero deps. */
:root{
  --coral:#ff6b6b;
  --coral-dk:#f03e3e;
  --mint:#12b886;
  --lavender:#845ef7;
  --sunny:#ffd43b;
  --cream:#fff7f1;
  --surface:#ffffff;
  --text:#3a2f3a;
  --muted:#8a7f8a;
  --line:#f0e6dd;
  --maxw:680px;
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--cream:#1b141d;--surface:#241a27;--text:#f3e9f0;--muted:#b3a3b3;--line:#382a3c;}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;
  background:var(--cream);
  background-image:radial-gradient(closest-side at 12% 8%,rgba(255,107,107,.14),transparent),radial-gradient(closest-side at 90% 4%,rgba(132,94,247,.12),transparent),radial-gradient(closest-side at 80% 30%,rgba(18,184,134,.10),transparent);
  background-repeat:no-repeat;
}
a{color:var(--coral-dk);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* Header — pílula flutuante */
header.site{position:sticky;top:0;z-index:20;padding-top:12px}
header.site .wrap{display:flex;align-items:center;gap:14px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:saturate(1.5) blur(10px);border:1px solid var(--line);border-radius:999px;padding:9px 18px;box-shadow:0 8px 26px rgba(120,80,120,.10)}
.brand{font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:8px}
.brand b{color:var(--coral)}
header.site nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
header.site nav a{color:var(--muted);font-size:.86rem;font-weight:700;padding:7px 13px;border-radius:999px}
header.site nav a:hover{background:var(--coral);color:#fff;text-decoration:none}

/* Hero — centralizado e fofo */
.hero{text-align:center;padding:44px 0 14px}
.hero h1{font-size:2.15rem;line-height:1.12;letter-spacing:-.03em;margin:.35em 0 .3em;font-weight:800}
.hero p{color:var(--muted);font-size:1.1rem;max-width:46ch;margin:0 auto}
.kicker{display:inline-block;background:#fff;border:1.5px solid var(--line);color:var(--coral-dk);font-weight:800;font-size:.8rem;padding:7px 15px;border-radius:999px;box-shadow:0 4px 14px rgba(255,107,107,.12)}

/* Títulos de seção no hub */
main>h2.section-title{font-size:1.3rem;font-weight:800;letter-spacing:-.01em;margin:1.9em 0 .1em;display:flex;align-items:center;gap:9px}
main>h2.section-title:first-of-type{margin-top:.6em}

/* Cards — grandes, pastel, saltitantes */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:18px 0 6px}
.card{display:block;background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:22px;transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
.card:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 14px 30px rgba(120,80,120,.14);text-decoration:none}
.card .ico{font-size:2.4rem;display:block;line-height:1}
.card h3{margin:.5em 0 .2em;font-size:1.08rem;color:var(--text);font-weight:800}
.card p{margin:0;color:var(--muted);font-size:.9rem}
.grid .card:nth-child(4n+1){background:color-mix(in srgb,var(--coral) 8%,var(--surface));border-color:color-mix(in srgb,var(--coral) 28%,var(--line))}
.grid .card:nth-child(4n+2){background:color-mix(in srgb,var(--mint) 8%,var(--surface));border-color:color-mix(in srgb,var(--mint) 26%,var(--line))}
.grid .card:nth-child(4n+3){background:color-mix(in srgb,var(--lavender) 8%,var(--surface));border-color:color-mix(in srgb,var(--lavender) 26%,var(--line))}
.grid .card:nth-child(4n+4){background:color-mix(in srgb,var(--sunny) 12%,var(--surface));border-color:color-mix(in srgb,var(--sunny) 40%,var(--line))}

/* Calculadora — cartão redondo */
main{padding:26px 0 60px}
h1{font-size:1.85rem;line-height:1.14;letter-spacing:-.02em;margin:.1em 0 .35em;font-weight:800}
.lead{color:var(--muted);font-size:1.06rem;margin:0 0 22px}
.calc{background:var(--surface);border:2px solid var(--line);border-radius:26px;padding:24px;box-shadow:0 10px 30px rgba(120,80,120,.08)}
.field{margin:0 0 16px}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:7px}
.field .hint{font-weight:400;color:var(--muted);font-size:.82rem}
.field input,.field select{width:100%;padding:13px 15px;font-size:1rem;border:2px solid var(--line);border-radius:16px;background:var(--cream);color:var(--text);font-family:inherit}
.field input:focus,.field select:focus{outline:none;border-color:var(--coral)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.row{grid-template-columns:1fr}}
button.go{width:100%;margin-top:6px;padding:15px;font-size:1.05rem;font-weight:800;color:#fff;background:var(--coral);border:0;border-radius:999px;cursor:pointer;box-shadow:0 8px 20px rgba(255,107,107,.32);transition:transform .12s}
button.go:hover{background:var(--coral-dk);transform:translateY(-2px)}

/* Resultado — balão fofo */
.result{margin-top:20px;padding:24px;border-radius:22px;background:color-mix(in srgb,var(--mint) 12%,var(--surface));border:2px solid color-mix(in srgb,var(--mint) 30%,var(--line));display:none;text-align:center}
.result.show{display:block;animation:bounce .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes bounce{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
.result .big{font-size:2.15rem;font-weight:800;color:var(--coral-dk);letter-spacing:-.02em;margin-top:.1em}
.result ul{margin:.7em 0 0;padding-left:0;list-style:none;text-align:left;display:inline-block}
.result li{margin:.3em 0}

.content{margin-top:38px}
.content h2{font-size:1.35rem;letter-spacing:-.01em;margin:1.4em 0 .4em;font-weight:800}
.content h3{font-size:1.1rem;margin:1.2em 0 .3em;font-weight:700}
.content p,.content li{color:var(--text)}
.content .muted{color:var(--muted)}
code{background:var(--cream);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:.9em}
details{border:2px solid var(--line);border-radius:16px;padding:2px 18px;margin:10px 0;background:var(--surface)}
summary{cursor:pointer;font-weight:700;padding:13px 0}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0;font-size:.95rem;border:2px solid var(--line);border-radius:16px;overflow:hidden}
table.tbl th,table.tbl td{border-bottom:1px solid var(--line);padding:10px 13px;text-align:left}
table.tbl tr:last-child td{border-bottom:0}
table.tbl th{background:color-mix(in srgb,var(--lavender) 10%,var(--surface));font-weight:800}

.ad{margin:26px 0;min-height:90px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--line);border-radius:18px;color:var(--muted);font-size:.8rem;background:var(--surface)}
.note{font-size:.88rem;color:var(--muted);background:color-mix(in srgb,var(--sunny) 12%,var(--surface));border:2px solid color-mix(in srgb,var(--sunny) 32%,var(--line));border-radius:16px;padding:13px 16px;margin:22px 0}
footer.site{margin-top:40px;padding:28px 0;color:var(--muted);font-size:.9rem;text-align:center}
footer.site .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
footer.site a{color:var(--muted)}
.breadcrumb{font-size:.85rem;color:var(--muted);margin:0 0 6px}
.breadcrumb a{color:var(--muted)}

/* Gerador de nomes — chips fofos */
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:.4em 0 0}
.name-chip{background:var(--surface);border:2px solid color-mix(in srgb,var(--coral) 30%,var(--line));border-radius:16px;padding:14px;text-align:center;font-weight:800;font-size:1.08rem;color:var(--coral-dk)}