/* onboarding-prop.css — estilos da página de onboarding do proprietário
   (onboarding-prop.html). Espelha o mesmo sistema visual de
   webapp/assets/onboarding.css (onboarding do vet): glass-container,
   botão dots_border, radio checkbox-wrapper-12, moeda 3D. Cópia exata da
   proposta aprovada em artifact (claude.ai/artifact/QX5YkpSH6NNNsnmsrRTfkf),
   só com os assets trocados de data-URI pros arquivos reais em
   /assets/img/, e os dois ajustes finais de comentário (linha pontilhada
   da timeline centrada exatamente na altura da bolinha; título de uma
   linha só ajustado via JS em vez de clamp fixo, pra nunca estourar o
   padding em nenhum device). */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800;900&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap");

:root{
  --green:#2D5A4E; --green-dark:#1b4332; --gold:#D2B48C; --gold-dark:#C19A6B;
  --bg-color:#f0f5f3; --cream:#FBF8F2; --line:rgba(45,90,78,.12);
}
* { box-sizing: border-box; font-family: "Inter", sans-serif; }
body{margin:0;background-color:var(--green-dark);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  padding-block:32px; transition:background-color .8s ease;}
body.loaded{
  background-color:var(--bg-color);
  background-image:radial-gradient(at 0% 0%, rgba(210,180,140,.16) 0px, transparent 50%),radial-gradient(at 100% 100%, rgba(45,90,78,.1) 0px, transparent 55%);
}

/* --- intro splash: idêntico ao onboarding.html do vet --- */
#intro-splash{position:fixed;inset:0;background:var(--green-dark);z-index:999;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease, visibility .6s ease;}
#intro-splash.fade-out{opacity:0;visibility:hidden;}
.splash-logo{width:90px;height:90px;object-fit:contain;animation:sproutLogo 1.2s cubic-bezier(.175,.885,.32,1.275) forwards;filter:drop-shadow(0 0 20px rgba(210,180,140,.4));}
@keyframes sproutLogo{0%{transform:scale(.1);opacity:0;}50%{opacity:1;}100%{transform:scale(1);opacity:1;}}

.glass-container{width:100%;max-width:460px;margin:20px;background:rgba(255,255,255,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.9);border-radius:28px;box-shadow:0 20px 40px rgba(27,67,50,.1);padding:34px 26px;position:relative;overflow:hidden;opacity:0;transform:scale(.95);transition:all .6s cubic-bezier(.16,1,.3,1);}
.glass-container.show{opacity:1;transform:scale(1);}

.step{display:none;opacity:0;transform:translateX(20px);transition:all .4s cubic-bezier(.16,1,.3,1);}
.step.active{display:block;opacity:1;transform:translateX(0);}
.step.leaving{display:block;opacity:0;transform:translateX(-20px);}

.dots{display:flex;gap:5px;margin-bottom:20px;}
.dots span{height:4px;flex:1;border-radius:3px;background:rgba(45,90,78,.14);transition:background .3s ease;}
.dots span.on{background:var(--gold-dark);}

.title{font-size:23px;font-weight:900;color:var(--green-dark);line-height:1.22;margin-bottom:6px;letter-spacing:-.3px;}
.title.center{text-align:center;text-transform:uppercase;}
/* .oneline: tamanho de partida pro JS (fitOneLineTitles, no HTML) reduzir
   até caber sem quebrar linha — nunca deve depender só do clamp, porque
   nomes/telas variam demais pra uma fórmula fixa cobrir todo device. */
.title.oneline{white-space:nowrap;letter-spacing:-.2px;}
.subtitle{font-size:14px;color:rgba(45,90,78,.72);margin-bottom:24px;font-weight:500;line-height:1.5;max-width:38ch;}
.subtitle.center{text-align:center;max-width:none;}

/* --- inputs (fiel ao onboarding.html) --- */
.input-group{margin-bottom:14px;}
.hs-input{width:100%;border:1.5px solid rgba(45,90,78,.15);outline:none;border-radius:16px;padding:16px 18px;background-color:#f8faf9;box-shadow:inset 0 2px 4px rgba(45,90,78,.02);transition:300ms ease-in-out;color:var(--green-dark);font-weight:700;font-size:15px;}
.hs-input::placeholder{color:rgba(45,90,78,.4);font-weight:500;}
.hs-input:focus{background-color:#fff;transform:scale(1.01);border-color:var(--gold);box-shadow:0 8px 20px rgba(210,180,140,.2);}
.hs-input:-webkit-autofill,.hs-input:-webkit-autofill:hover,.hs-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--green-dark);-webkit-box-shadow:0 0 0px 1000px #f8faf9 inset;box-shadow:0 0 0px 1000px #f8faf9 inset;transition:background-color 9999s ease-in-out 0s;}

/* --- radios (fiel ao onboarding.html) --- */
.option-card{display:flex;align-items:center;padding:14px 16px;background:#fff;border-radius:16px;margin-bottom:10px;cursor:pointer;border:1.5px solid rgba(45,90,78,.1);transition:all .2s ease;position:relative;}
.option-card:hover{border-color:var(--gold);}
.option-card.picked{border-color:var(--gold-dark);box-shadow:0 6px 18px rgba(193,154,107,.18);}
.option-text{margin-left:14px;font-weight:600;color:var(--green-dark);font-size:13.5px;line-height:1.3;}

.checkbox-wrapper-12{position:relative;flex-shrink:0;}
.checkbox-wrapper-12>svg{position:absolute;top:-130%;left:-170%;width:110px;pointer-events:none;}
.checkbox-wrapper-12 input[type="radio"]{-webkit-appearance:none;appearance:none;margin:0;cursor:pointer;outline:0;}
.checkbox-wrapper-12 .cbx{width:22px;height:22px;position:relative;}
.checkbox-wrapper-12 .cbx input{position:absolute;top:0;left:0;width:22px;height:22px;border:2px solid #bfbfc0;border-radius:50%;}
.checkbox-wrapper-12 .cbx label{width:22px;height:22px;background:none;border-radius:50%;position:absolute;top:0;left:0;pointer-events:none;}
.checkbox-wrapper-12 .cbx svg{position:absolute;top:4px;left:3px;z-index:1;pointer-events:none;}
.checkbox-wrapper-12 .cbx svg path{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:19;stroke-dashoffset:19;transition:stroke-dashoffset .3s ease;transition-delay:.2s;}
.checkbox-wrapper-12 .cbx input:checked+label{animation:splash-12 .6s ease forwards;}
.checkbox-wrapper-12 .cbx input:checked+label+svg path{stroke-dashoffset:0;}
@keyframes splash-12{40%{background:var(--gold-dark);box-shadow:0 -18px 0 -8px var(--gold-dark),16px -8px 0 -8px var(--gold-dark),16px 8px 0 -8px var(--gold-dark),0 18px 0 -8px var(--gold-dark),-16px 8px 0 -8px var(--gold-dark),-16px -8px 0 -8px var(--gold-dark);}100%{background:var(--gold-dark);box-shadow:0 -36px 0 -10px transparent,32px -16px 0 -10px transparent,32px 16px 0 -10px transparent,0 36px 0 -10px transparent,-32px 16px 0 -10px transparent,-32px -16px 0 -10px transparent;}}

/* --- passo trial: venda --- */
.trial-hero{margin-bottom:22px;}
.trial-hero.tight{margin-bottom:24px;}
.trial-number{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:50px;line-height:1;color:var(--green-dark);letter-spacing:-1px;}
.trial-number sup{font-family:"Inter",sans-serif;font-size:14.5px;font-weight:800;color:var(--gold-dark);vertical-align:9px;margin-left:6px;letter-spacing:.01em;}
.trial-tag{font-size:13.5px;color:var(--gold-dark);font-weight:700;margin-top:6px;}

.benefits{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;padding-left:2px;border-left:2px solid var(--line);}
.benefit{display:flex;gap:12px;align-items:flex-start;padding-left:16px;}
.benefit .chk{flex-shrink:0;width:19px;height:19px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.benefit .chk svg{width:10px;height:10px;}
.benefit p{margin:0;font-size:13.5px;font-weight:600;color:var(--green-dark);line-height:1.4;}
.benefit p span{display:block;font-weight:500;color:rgba(45,90,78,.65);font-size:12px;margin-top:1px;}

/* linha pontilhada: ancorada exatamente do centro do 1º ao centro do
   último pontinho (padding-top do container + metade da altura do dot),
   nunca por segmento (isso é o que desalinhava ao centralizar o texto). */
.timeline-strip{display:flex;align-items:stretch;gap:0;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:16px 14px;margin-bottom:24px;position:relative;}
.timeline-strip::before{content:"";position:absolute;top:21.5px;left:16.6667%;right:16.6667%;height:1.5px;background:repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 8px);z-index:0;}
.tl-pt{flex:1;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;}
.tl-pt .dot{width:11px;height:11px;border-radius:50%;background:var(--gold-dark);border:2px solid var(--cream);box-shadow:0 0 0 1.5px var(--gold-dark);margin-bottom:8px;position:relative;z-index:1;}
.tl-pt .tl-day{font-size:9.5px;font-weight:800;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
.tl-pt .tl-desc{font-size:11.5px;font-weight:600;color:var(--green-dark);line-height:1.35;}

/* --- passo de planos --- */
.plan-row{display:flex;justify-content:space-between;align-items:baseline;width:100%;}
.plan-name{font-weight:800;color:var(--green-dark);font-size:14.5px;}
.plan-price{font-family:"Fraunces",Georgia,serif;font-weight:600;color:var(--gold-dark);font-size:16px;}
.plan-sub{font-size:11.5px;color:rgba(45,90,78,.65);margin-top:2px;font-weight:500;}
.pick-badge{position:absolute;top:-9px;left:16px;background:var(--gold-dark);color:#fff;font-size:9px;font-weight:900;text-transform:uppercase;padding:3px 9px;border-radius:6px;letter-spacing:.5px;}
.trust-line{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:rgba(45,90,78,.6);font-weight:500;margin-top:14px;text-align:center;}
.trust-line svg{width:13px;height:13px;color:var(--green);flex-shrink:0;}

/* --- botão (fiel ao onboarding.html) --- */
.btn-wrapper{margin-top:4px;display:flex;justify-content:center;width:100%;}
.button{--border_radius:9999px;--transtion:.3s ease-in-out;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1.05rem 2rem;background-color:transparent;border:none;border-radius:var(--border_radius);transform:scale(calc(1 + (var(--active,0)*.05)));transition:transform var(--transtion);-webkit-tap-highlight-color:transparent;}
.button::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-color:var(--green-dark);border-radius:var(--border_radius);box-shadow:inset 0 .5px rgba(255,255,255,.2),0px 4px 15px rgba(27,67,50,.3),0 0 0 calc(var(--active,0)*.375rem) rgba(210,180,140,.4);transition:all var(--transtion);z-index:0;}
.button::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-color:var(--green);background-image:radial-gradient(at 51% 89%, rgba(210,180,140,.4) 0px, transparent 50%);opacity:var(--active,0);border-radius:var(--border_radius);transition:opacity var(--transtion);z-index:2;}
.button.is-clicked{--active:1;transform:scale(.95);}
.button:disabled{opacity:.6;pointer-events:none;}
.button .dots_border{--size_border:calc(100% + 4px);overflow:hidden;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--size_border);height:var(--size_border);background-color:transparent;border-radius:var(--border_radius);z-index:-1;}
.button .dots_border::before{content:"";position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);transform-origin:left;width:100%;height:2rem;background-color:var(--gold);mask:linear-gradient(transparent 0%, white 120%);-webkit-mask:linear-gradient(transparent 0%, white 120%);animation:rotate 2s linear infinite;}
@keyframes rotate{to{transform:rotate(360deg);}}
.button .text_button{position:relative;z-index:10;font-size:.95rem;font-weight:800;color:#fff;letter-spacing:.3px;}

/* --- loader --- */
.loader-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px;}
.hs-coin{font-size:84px;width:1em;height:1em;margin:0 auto 22px;position:relative;animation:rotate_hs_coin 4s infinite linear;transform-style:preserve-3d;}
.hs-coin::before{content:"";position:absolute;top:0;left:.45em;width:.1em;height:1em;border-radius:.05em;background:linear-gradient(#f2ddb2,#C19A6B,#8b6d43);transform:rotateY(90deg);}
.hs-coin .side{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%, var(--green) 0%, var(--green-dark) 70%);box-shadow:inset 0 0 0 .035em var(--gold), inset 0 0 0 .06em var(--gold-dark);display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.hs-coin .side img{width:60%;height:60%;object-fit:contain;filter:drop-shadow(0 0 6px rgba(210,180,140,.4));}
.hs-coin .tails{transform:rotateY(180deg) translateZ(.05em);}
.hs-coin .heads{transform:translateZ(.05em);}
@keyframes rotate_hs_coin{0%{transform:rotateY(0deg);}100%{transform:rotateY(360deg);}}
.loading-text{font-weight:700;color:var(--green);font-size:14px;text-align:center;animation:pulseText 1.5s infinite;}
@keyframes pulseText{0%,100%{opacity:1;}50%{opacity:.5;}}

/* --- resumo final --- */
.plan-card{background:linear-gradient(145deg,#fff,#f8fcfb);border-radius:18px;padding:6px 22px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.05);margin-bottom:22px;}
.plan-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.plan-item:last-child{border-bottom:none;}
.plan-icon-circ{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg, rgba(210,180,140,.28), rgba(45,90,78,.1));display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(193,154,107,.3);}
.plan-icon-circ svg{width:18px;height:18px;color:var(--green-dark);}
.plan-text{text-align:left;}
.plan-text .lbl{display:block;font-size:15px;font-weight:800;color:var(--green-dark);letter-spacing:-.2px;margin-bottom:2px;}
.plan-text .val{display:block;font-size:12.5px;font-weight:500;color:rgba(45,90,78,.62);}

.error-msg{color:#b8463a;font-size:12.5px;font-weight:600;margin-top:8px;text-align:center;display:none;}