@font-face{font-family:Inter;src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:1.125rem/1.6 var(--font-body)}
h1,h2,h3{font-family:var(--font-head);font-weight:var(--head-weight);line-height:1.2;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.3rem,7vw,3.8rem);letter-spacing:-.01em;max-width:16ch}
h2{font-size:clamp(1.55rem,4vw,2.1rem);max-width:22ch}
h3{font-size:1.15rem;font-family:var(--font-body);font-weight:700}  /* blackletter capitals (A looks like R) stay out of small heads */
p,li{max-width:var(--measure)}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
img,svg{display:block;max-width:100%;height:auto}  /* height:auto: width/height attrs set the ratio, never stretch */

.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
section{padding:3.5rem 0}
.band{background:var(--band)}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0}
.who{line-height:1.25}
.who b{font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.45rem;line-height:1.1;display:block}
.who small{color:var(--muted);font-size:.9rem}
.top nav{display:flex;align-items:center;gap:1rem}
.top nav a:not(.btn){font-size:.95rem}
a.who{color:inherit;text-decoration:none}
.who small{display:block}  /* CRM line + postgraduate line stack; both may wrap on a phone */
.who-logo{display:flex;align-items:center;gap:.75rem}
.top .logo{height:3.6rem;width:auto;flex:none}
@media (max-width:30rem){.top nav a:not(.btn){display:none}}  /* English stays reachable from the hero line and the footer, Blog from the home section */

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.3rem;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--accent);min-height:48px}
.btn-main{background:var(--accent);color:#fff}
.btn-main:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-alt{color:var(--accent);background:transparent}
.btn-alt:hover{background:var(--band)}
.btn svg{width:1.25rem;height:1.25rem;flex:none}
.top .btn{padding:.55rem 1rem;font-size:.95rem}

/* hero */
.hero{padding:2.5rem 0 0}
.hero-photo{display:block;width:100%;max-width:20rem;margin:2rem auto 0;aspect-ratio:4/5;object-fit:cover}  /* photo also on the phone, below the text */
@media (min-width:52rem){
  .hero .wrap{display:grid;grid-template-columns:1fr 19rem;gap:3rem;align-items:center}
  .hero-photo{max-width:none;margin:0;height:auto}
}
.hero .lead{font-size:1.25rem;color:var(--muted);margin:0 0 1.75rem}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}
.fine{font-size:.95rem;color:var(--muted)}

/* steps: a real sequence, so numbered */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.75rem;counter-reset:s}
.steps li{counter-increment:s;padding-left:3.2rem;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;font:var(--head-weight) 1.9rem/1 var(--font-head);color:var(--accent)}
.steps h3{margin-bottom:.3em}
.steps p{margin:0}
@media (min-width:52rem){.steps{grid-template-columns:repeat(3,1fr)}}

.plain{padding-left:1.2rem}
.plain li{margin-bottom:.55rem}
.plain li::marker{color:var(--accent)}

.urgent{border-left:4px solid var(--alert);padding:.25rem 0 .25rem 1rem;margin:0 0 1.5rem}
.urgent strong{color:var(--alert)}

/* about */
.about{display:grid;gap:2rem;align-items:start}
.about img{width:100%;max-width:18rem;margin:0 auto;aspect-ratio:4/5;object-fit:cover;border-radius:1.25rem;background:var(--band)}
@media (min-width:52rem){.about{grid-template-columns:18rem 1fr}}
.creds{list-style:none;padding:0;margin:1.25rem 0 0}
.creds li{padding:.5rem 0;border-top:1px solid var(--line)}
.badge{display:inline-block;background:var(--accent);color:#fff;padding:.4rem .9rem;border-radius:999px;font-weight:700;font-size:min(.95rem,calc((100vw - 4rem)/27.5));white-space:nowrap;margin:0 0 1rem}  /* the text is ~27.3em wide: shrink with the screen so it stays on one line */
@media (max-width:30rem){.badge{padding:.35rem .65rem}}

/* faq: native details */
details{border-top:1px solid var(--line);padding:.9rem 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:.6rem 0 0}

.final{text-align:left}
footer{padding:2.5rem 0 6rem;font-size:.92rem;color:var(--muted)}
footer p{margin:.3rem 0}

/* floating WhatsApp, always reachable on mobile */
.float{position:fixed;right:1rem;bottom:1rem;z-index:10;box-shadow:0 6px 18px rgb(27 42 38 / .25)}
@media (min-width:52rem){.float{right:1.5rem;bottom:1.5rem}}


/* blog: list, home preview (nginx SSI), post */
.blog-home:not(:has(.card)){display:none}  /* no posts yet: the include is empty */
/* home: right after "Como funciona", same band (no top padding = one continuous band); the card is a lighter panel so it stands out */
.blog-home{padding-top:0}
.blog-home .card{background:var(--bg);border:0;border-radius:1.25rem;padding:1rem}
.blog-home .card h3{font-size:1.5rem}
@media (min-width:40rem){.blog-home .card{padding:1.25rem}.blog-home .card:has(img){grid-template-columns:18rem 1fr}}
.card{position:relative;display:grid;gap:1rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:1.25rem}
@media (min-width:40rem){.card:has(img){grid-template-columns:15rem 1fr;gap:1.75rem;align-items:start}}
.card h2,.card h3{font-size:1.35rem;margin:.25rem 0 .4rem}
.card h2 a,.card h3 a{color:inherit;text-decoration:none}
.card h2 a::after,.card h3 a::after{content:"";position:absolute;inset:0}  /* the whole card is the link */
.card a:hover{text-decoration:underline}
.card p{margin:0}
.data{font-size:.92rem;color:var(--muted);margin:0}
.mais{display:flex;flex-wrap:wrap;gap:1.5rem;margin:.5rem 0 0}
.blog,.post{padding:2.5rem 0 3rem}
.blog .lead{color:var(--muted)}
.post .wrap{max-width:44rem}
.autor{color:var(--muted);font-size:.95rem;margin:0 0 2rem}
.texto h2{margin-top:2.2rem}
.texto img{border-radius:1rem;margin:1.5rem 0}
.texto blockquote{margin:1.5rem 0;padding-left:1rem;border-left:3px solid var(--accent);color:var(--muted)}
.texto table{border-collapse:collapse;display:block;overflow-x:auto}
.texto th,.texto td{border-bottom:1px solid var(--line);padding:.4rem .7rem;text-align:left}


/* Art: wine sprigs, stars and a hairline ornament from the card's own language. Decorative only (alt="", aria-hidden). */
section{position:relative;overflow:hidden}
.wrap{position:relative}
.art{position:absolute;pointer-events:none;user-select:none;z-index:0;height:auto;max-width:none}
.wrap>*:not(.art){position:relative;z-index:1}
.js .art{opacity:0;transform:translateY(1.4rem);transition:opacity 1.8s ease,transform 1.8s ease}
.js .art.vis{opacity:var(--o,1);transform:none}
@media (prefers-reduced-motion:reduce){.js .art{transition:none}}
.art-arco,.art-videira,.art-rosa,.art-lua,.art-filete,.art-estrelas,.art-divisor{--o:1}
.about>.art{aspect-ratio:auto;background:none;border-radius:0;margin:0;object-fit:fill;outline:0;max-width:none}  /* out-rank .about img */
.hero{padding-bottom:5.5rem}
.art-divisor-hero{left:0;right:0;margin-inline:auto;width:min(36rem,100%);bottom:-5rem}  /* .wrap ends at the text; hero padding sits below it */
.art-arco-saude{width:4.2rem;right:0;top:-2.2rem}
.art-estrelas-como{width:4rem;right:.5rem;top:-1.5rem}
.about>.art.art-videira-quem{display:none}  /* phone: no free corner next to the framed photo */
.art-rosa-reembolso{width:2.6rem;right:.5rem;top:-2.4rem}
.art-filete-perg{width:min(24rem,100%);right:0;top:-2.4rem}
.art-lua-final{width:5rem;right:0;top:-2rem}
@media (min-width:52rem){
  .hero{padding-bottom:7rem}
  .art-divisor-hero{width:44rem;bottom:-6rem}
  .art-arco-saude{width:10rem;right:4rem;top:-2rem}
  .art-estrelas-como{width:7rem;right:2rem;top:-1.5rem}
  .about>.art.art-videira-quem{display:block;width:18rem;left:0;right:auto;top:auto;bottom:.5rem}  /* under the photo, clear of the text column */
  .art-rosa-reembolso{width:4.5rem;right:7rem;top:0}
  .art-filete-perg{width:36rem;right:-4rem;top:-1.6rem}
  .art-lua-final{width:9rem;right:4rem;top:.2rem}
}
/* a short wine line above every heading, echo of the card's rule */
section h2::before{content:"";display:block;width:3rem;height:2px;background:var(--accent);opacity:.75;margin:0 0 .9rem}
.hero h1::before{display:none}

/* the card's thin frame around the photos; gothic look wants square corners */
.hero-photo,.about>img:not(.art){border-radius:.2rem;outline:1px solid var(--ink);outline-offset:.6rem}
.lema{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:1.3rem;line-height:1.4;color:var(--ink);border-left:2px solid var(--accent);padding-left:1rem;margin:1.25rem 0}