/* Passaporte Pet — sistema de design herdado das paginas da Animal Travel
   tinta petroleo #11202B · papel #EEF0EC · selo verde #0E6F5C · carimbo #C8442A */

:root{
  --ink:#11202B; --ink-2:#3A4A52; --muted:#6B7A75;
  --paper:#EEF0EC; --card:#F7F8F6; --line:#CFD6D0; --line-2:#E2E6E1;
  --seal:#0E6F5C; --seal-ink:#FFFFFF; --seal-soft:rgba(14,111,92,.09);
  --stamp:#C8442A; --stamp-soft:rgba(200,68,42,.10);
  --mid:#9A6207; --mid-soft:rgba(154,98,7,.12);
  --shadow:0 1px 2px rgba(17,32,43,.06), 0 10px 30px -14px rgba(17,32,43,.22);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E6EAE7; --ink-2:#AEBAB5; --muted:#8B9A94;
    --paper:#0C1A1F; --card:#132329; --line:#283B41; --line-2:#1B2E34;
    --seal:#3FB39A; --seal-ink:#06201B; --seal-soft:rgba(63,179,154,.13);
    --stamp:#E6705A; --stamp-soft:rgba(230,112,90,.14);
    --mid:#D9A441; --mid-soft:rgba(217,164,65,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ink:#E6EAE7; --ink-2:#AEBAB5; --muted:#8B9A94;
  --paper:#0C1A1F; --card:#132329; --line:#283B41; --line-2:#1B2E34;
  --seal:#3FB39A; --seal-ink:#06201B; --seal-soft:rgba(63,179,154,.13);
  --stamp:#E6705A; --stamp-soft:rgba(230,112,90,.14);
  --mid:#D9A441; --mid-soft:rgba(217,164,65,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--seal)}
p{margin:0 0 16px}

.wrap{max-width:660px; margin:0 auto; padding:0 20px}
.wrap-wide{max-width:720px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.tag{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

header{padding:28px 0 0}
.brandrow{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--ink); text-decoration:none}

h1{
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-size:clamp(29px,6.8vw,44px); line-height:1.1; letter-spacing:-.02em;
  margin:16px 0 0; text-wrap:balance;
}
h1 em{font-style:normal; color:var(--stamp)}
h2.sec{font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:clamp(22px,5vw,28px); line-height:1.2; letter-spacing:-.015em; margin:0 0 16px; text-wrap:balance}
h3.sub-sec{font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:clamp(19px,4.2vw,23px); line-height:1.25; letter-spacing:-.01em; margin:0 0 12px}
.sub,.lead{font-size:clamp(16.5px,4vw,19px); color:var(--ink-2); margin:20px 0 0; max-width:56ch}
.sub strong,.lead strong{color:var(--ink); font-weight:600}
.hero{padding:34px 0 36px}
section{padding:30px 0}
.perf{border:0; border-top:1px dashed var(--line); margin:0}
.kicker{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--seal); font-weight:600; display:block; margin-bottom:10px}
.big-line{font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:clamp(21px,4.8vw,27px); line-height:1.2; letter-spacing:-.015em; margin:0 0 16px}
.tight p{margin-bottom:12px}

/* formularios */
.form{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:24px 20px; margin:30px 0 0; box-shadow:var(--shadow)}
.form h2{font-family:"Public Sans",sans-serif; font-size:16px; font-weight:700; margin:0 0 4px; letter-spacing:-.01em}
.form p.note{font-size:14px; color:var(--muted); margin:0 0 18px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
label{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
input,select,textarea{
  font-family:"Public Sans",sans-serif; font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:12px; width:100%; appearance:none;
}
textarea{min-height:92px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--seal); outline-offset:1px; border-color:var(--seal)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.consent{display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:start; margin:18px 0 6px}
.consent input[type=checkbox]{
  width:18px; height:18px; margin:3px 0 0; border:1.5px solid var(--muted);
  border-radius:2px; background:var(--paper); cursor:pointer; flex:none; padding:0;
}
.consent input[type=checkbox]:checked{background:var(--seal); border-color:var(--seal)}
.consent input[type=checkbox]:checked::after{content:"\2713"; color:var(--seal-ink); font-size:13px; display:block; text-align:center; line-height:15px; font-weight:700}
.consent input[type=checkbox]:focus-visible{outline:2px solid var(--seal); outline-offset:2px}
.consent label{font-family:"Public Sans",sans-serif; font-size:13.5px; line-height:1.45; letter-spacing:0; text-transform:none; color:var(--ink-2); cursor:pointer}
.microtext{font-size:13px; color:var(--muted); margin:12px 0 0}
.microtext.center{text-align:center}

.radio-set{display:grid; gap:8px; margin-top:4px}
.radio-set span.opt{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start}
.radio-set input{width:17px; height:17px; margin:3px 0 0; padding:0; border-radius:50%; border:1.5px solid var(--muted); background:var(--paper)}
.radio-set input:checked{border:5px solid var(--seal)}
.radio-set label{font-family:"Public Sans",sans-serif; font-size:15.5px; text-transform:none; letter-spacing:0; color:var(--ink); cursor:pointer}
.inline-fields{display:grid; gap:12px}
@media(min-width:560px){.inline-fields.two{grid-template-columns:1fr 1fr}.inline-fields.three{grid-template-columns:repeat(3,1fr)}}

/* botoes */
.btn{
  display:block; width:100%; text-align:center; text-decoration:none; cursor:pointer;
  background:var(--seal); color:var(--seal-ink); border:0; border-radius:3px;
  font-family:"Public Sans",sans-serif; font-weight:700; font-size:17px;
  padding:16px 18px; margin-top:8px; letter-spacing:.01em;
  transition:transform .12s ease, filter .12s ease;
}
.btn span{display:block; font-weight:400; font-size:13px; opacity:.85; margin-top:3px}
.btn.alt{background:transparent; color:var(--seal); border:1.5px solid var(--seal)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.btn[disabled]{opacity:.6; cursor:progress}
.btn-quiet{display:inline-block; font-size:14.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* estados do form */
.msg{border-radius:3px; padding:13px 15px; margin:14px 0 0; font-size:15px; display:none}
.msg.show{display:block}
.msg.err{border:1px solid var(--stamp); background:var(--stamp-soft); color:var(--stamp)}
.msg.ok{border:1px solid var(--seal); background:var(--seal-soft); color:var(--seal)}

/* blocos */
.bullets{margin:0; padding:0; list-style:none; display:grid; gap:2px}
.bullets li{padding:14px 0; border-bottom:1px solid var(--line); font-size:16.5px}
.bullets li:last-child{border-bottom:0}
.bullets strong{font-weight:700}
.box{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:18px 20px; margin:18px 0 0; box-shadow:var(--shadow)}
.box p:last-child{margin-bottom:0}
.quote{border-left:3px solid var(--seal); background:var(--seal-soft); padding:16px 18px; margin:18px 0 0; border-radius:0 3px 3px 0}
.quote p:last-child{margin-bottom:0}
.warn{border:1px solid var(--stamp); background:var(--stamp-soft); border-radius:3px; padding:16px 18px; margin:20px 0 0}
.warn p:last-child{margin-bottom:0}
.warn .k{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--stamp); display:block; margin-bottom:7px; font-weight:600}
.cta{border:1px solid var(--seal); background:var(--seal-soft); border-radius:4px; padding:22px 20px; margin:20px 0 0}
.cta h2,.cta h3{margin-top:0}
.sig{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:16px; margin-top:24px}
.sig strong{font-family:"Fraunces",Georgia,serif; font-size:17px; color:var(--ink); display:block; margin-bottom:4px}

/* stack numerada */
.stack{margin:0; padding:0; list-style:none; counter-reset:s}
.stack li{
  display:block; position:relative; padding:14px 0 14px 46px;
  border-bottom:1px solid var(--line-2); font-size:16px;
}
.stack li:last-child{border-bottom:0}
.stack li::before{
  position:absolute; left:0; top:17px;
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:600;
  color:var(--seal); font-variant-numeric:tabular-nums;
}

/* preco */
.preco{text-align:center; padding:26px 18px; background:var(--card); border:1px solid var(--line); border-radius:4px; margin-top:22px; box-shadow:var(--shadow)}
.preco .big{font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:clamp(40px,10vw,56px); line-height:1; display:block; margin:6px 0 2px; letter-spacing:-.03em; color:var(--seal)}
.preco .under{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin:8px 0 0}
.ancora{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; margin:18px 0 0}
.ancora div{background:var(--card); padding:14px 16px; display:flex; justify-content:space-between; gap:14px; font-size:15.5px; align-items:baseline}
.ancora .v{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.ancora .destaque .v{color:var(--seal); font-weight:600}

/* faq */
details{border-bottom:1px solid var(--line); padding:4px 0}
details summary{
  cursor:pointer; padding:14px 0; font-weight:600; font-size:16.5px; list-style:none;
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--seal); font-size:18px; flex:none}
details[open] summary::after{content:"\2212"}
details summary:focus-visible{outline:2px solid var(--seal); outline-offset:2px}
details .answer{padding:0 0 14px; color:var(--ink-2); font-size:16px}
details .answer p:last-child{margin-bottom:0}

footer{padding:28px 0 44px; border-top:1px solid var(--line); margin-top:36px}
footer p{font-size:13px; color:var(--muted); margin:0 0 10px}
footer p:last-child{margin-bottom:0}
footer a{color:var(--muted)}

/* marcador do que falta preencher */
.fill{background:rgba(200,68,42,.12); border-bottom:1px dashed var(--stamp); padding:0 3px; border-radius:2px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:20px; top:10px; background:var(--seal); color:var(--seal-ink); padding:8px 12px; border-radius:3px; z-index:9}

@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
