:root{
  --tinta:#1B2430; --tinta-2:#4A5563; --papel:#F6F7F5; --branco:#FFFFFF;
  --linha:#DADFDB; --marca:#D3502F; --marca-escura:#A93A1E; --pago:#1F7A5C;
  --t: 'Familjen Grotesk', system-ui, sans-serif; --c: 'Source Sans 3', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.0625rem/1.6 var(--c);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--marca);outline-offset:3px;border-radius:4px}
.contentor{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--t);line-height:1.1;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:700}
h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600}
h3{font-size:1.2rem;font-weight:600}
p{margin:0}

/* cabeçalho */
.topo{display:flex;align-items:center;justify-content:space-between;padding-block:22px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.35rem var(--t)}
.marca img{height:34px}
.marca .nome{color:var(--tinta)}.marca .nome span{color:var(--marca)}
.topo nav{display:flex;gap:28px;align-items:center}
.topo nav a{text-decoration:none;color:var(--tinta-2);font-weight:600}
.topo nav a:hover{color:var(--tinta)}
.topo nav a[aria-current]{color:var(--tinta)}
.botao{display:inline-block;text-decoration:none;font:600 1rem var(--c);padding:13px 22px;border-radius:10px;border:2px solid transparent}
.botao.primario{background:var(--marca);color:#fff}
.botao.primario:hover{background:var(--marca-escura)}
.botao.secundario{border-color:var(--tinta);color:var(--tinta)}
.botao.secundario:hover{background:var(--tinta);color:#fff}
@media (max-width:760px){.topo nav a.oculto-m{display:none}.topo nav{gap:16px}}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:48px 88px}
.hero p.lead{font-size:1.25rem;color:var(--tinta-2);margin:22px 0 32px;max-width:34em}
.hero .accoes{display:flex;gap:14px;flex-wrap:wrap}
.hero small{display:block;margin-top:14px;color:var(--tinta-2)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:40px;padding-top:24px}}

/* o recibo: o elemento memorável da página */
.recibo{background:var(--branco);border:1px solid var(--linha);border-radius:4px;padding:26px 28px 24px;
  box-shadow:0 1px 0 var(--linha),0 22px 40px -24px rgba(27,36,48,.45);transform:rotate(1.2deg);
  font-variant-numeric:tabular-nums;position:relative}
.recibo:before,.recibo:after{content:"";position:absolute;left:0;right:0;height:10px;
  background:radial-gradient(circle at 6px -2px,var(--papel) 6px,transparent 6.5px) 0 0/12px 10px repeat-x}
.recibo:before{top:-1px}.recibo:after{bottom:-1px;transform:scaleY(-1)}
.recibo .cab{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--tinta);padding-bottom:10px;margin-bottom:12px}
.recibo .cab b{font:600 1.05rem var(--t)}
.recibo .cab span{color:var(--tinta-2);font-size:.92rem}
.recibo .quem{font-size:.92rem;color:var(--tinta-2);margin-bottom:12px}
.recibo .quem strong{color:var(--tinta)}
.recibo table{width:100%;border-collapse:collapse;font-size:.98rem}
.recibo td{padding:5px 0}
.recibo td.v{text-align:right;white-space:nowrap;padding-left:12px}
.recibo tr.sub td{color:var(--tinta-2);font-size:.88rem;padding-top:0}
.recibo tr.grupo td{padding-top:12px;font-weight:600;font-size:.88rem;color:var(--tinta-2)}
.recibo tr.menos td.v{color:var(--marca-escura)}
.recibo .liquido{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:12px;border-top:1px dashed var(--tinta-2)}
.recibo .liquido span{font-weight:600}
.recibo .liquido b{font:700 1.7rem var(--t);white-space:nowrap}
.recibo .carimbo{position:absolute;right:22px;bottom:70px;border:2px solid var(--pago);color:var(--pago);font:700 .95rem var(--t);
  padding:4px 12px;border-radius:6px;transform:rotate(-9deg);opacity:.9}
@media (max-width:420px){.recibo{padding:22px 18px 20px}.recibo .liquido b{font-size:1.35rem}.recibo .carimbo{position:static;display:inline-block;margin-top:14px}}

/* pessoas: a ilustração da equipa dá rosto ao que o produto faz */
.pessoas{padding:0 0 80px}
.pessoas .contentor{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:end}
.pessoas .contentor>div{padding-bottom:40px}
.pessoas figure{margin:0}
.pessoas img{display:block;width:100%;height:auto}
.pessoas figcaption{margin-top:6px;text-align:right;font-size:.75rem}
.pessoas figcaption a{color:#9AA3AD;text-decoration:none}
.pessoas figcaption a:hover{text-decoration:underline}
.pessoas p{color:var(--tinta-2);margin-top:16px;max-width:30em}
@media (max-width:900px){.pessoas{padding:8px 0 56px}.pessoas .contentor{grid-template-columns:1fr;gap:24px}.pessoas .contentor>div{padding-bottom:0}.pessoas figure{order:2}}

/* faixa do mês: é uma sequência real, por isso numerada */
.mes{background:var(--tinta);color:#E9ECEF;padding:84px 0}
.mes h2{color:#fff;max-width:20em}
.mes p.intro{color:#B9C1CA;margin:14px 0 46px;max-width:40em}
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:p}
.passos li{padding:0 24px 0 0;position:relative;counter-increment:p}
.passos li:before{content:counter(p);display:block;font:700 3.2rem/1 var(--t);color:var(--marca);margin-bottom:14px}
.passos li:not(:last-child):after{content:"";position:absolute;top:26px;left:52px;right:18px;border-top:1px solid #3B4757}
.passos h3{color:#fff;margin-bottom:8px}
.passos p{color:#B9C1CA;font-size:1rem}
@media (max-width:860px){.passos{grid-template-columns:1fr 1fr;row-gap:40px}.passos li:after{display:none}}
@media (max-width:520px){.passos{grid-template-columns:1fr}}

/* o que sai do mês */
.saidas{padding:88px 0}
.saidas .dois{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.saidas p.intro{color:var(--tinta-2);margin-top:14px}
.saidas dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:30px 40px}
.saidas dt{font:600 1.1rem var(--t);margin-bottom:6px;padding-top:14px;border-top:2px solid var(--tinta)}
.saidas dd{margin:0;color:var(--tinta-2)}
@media (max-width:860px){.saidas .dois{grid-template-columns:1fr;gap:32px}.saidas dl{grid-template-columns:1fr}}

/* zComercial */
.zc{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);background:var(--branco);padding:64px 0}
.zc .linha{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.zc p{color:var(--tinta-2);margin-top:12px;max-width:44em}
@media (max-width:760px){.zc .linha{grid-template-columns:1fr}}

/* preços: tabela comparativa, mesmo registo do recibo */
.precos{padding:88px 0}
.precos p.intro{color:var(--tinta-2);margin:14px 0 40px;max-width:40em}
.tabela-precos{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:var(--branco);border:1px solid var(--linha)}
.tabela-precos th,.tabela-precos td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linha)}
.tabela-precos thead th{font:600 1.25rem var(--t);border-bottom:2px solid var(--tinta)}
.tabela-precos tbody th{font-weight:600;color:var(--tinta-2);width:22%}
.tabela-precos .valor{font:700 1.9rem/1.1 var(--t)}
.tabela-precos .valor small{font:400 .95rem var(--c);color:var(--tinta-2)}
.tabela-precos .destaque{background:#FDF3EF}
.tabela-precos tfoot td{border-bottom:0}
.precos .notas{margin-top:22px;color:var(--tinta-2);max-width:48em}
.precos .notas p+p{margin-top:6px}
.cartoes-m{display:none}
@media (max-width:860px){
  .tabela-precos{display:none}
  .cartoes-m{display:grid;gap:16px}
  .cartoes-m section{background:var(--branco);border:1px solid var(--linha);padding:20px}
  .cartoes-m h3{margin-bottom:6px}
  .cartoes-m .valor{font:700 1.7rem var(--t);font-variant-numeric:tabular-nums}
  .cartoes-m p{color:var(--tinta-2)}
}

/* perguntas */
.faq{padding:88px 0}
.faq .dois{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.faq details{border-bottom:1px solid var(--linha);padding:18px 0}
.faq summary{cursor:pointer;font:600 1.1rem var(--t);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--marca);font-size:1.4rem;line-height:1}
.faq details[open] summary:after{content:"−"}
.faq details p{color:var(--tinta-2);margin-top:10px;max-width:38em}
@media (max-width:860px){.faq .dois{grid-template-columns:1fr;gap:20px}}

/* fecho */
.fecho{background:var(--marca);color:#fff;padding:72px 0;text-align:left}
.fecho h2{color:#fff;max-width:18em}
.fecho p{margin:14px 0 28px;color:#FBE3DB;max-width:36em}
.fecho .botao{background:#fff;color:var(--marca-escura)}
.fecho .botao:hover{background:var(--tinta);color:#fff}
footer{padding:36px 0;color:var(--tinta-2);font-size:.95rem}
footer .contentor{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
footer a{color:var(--tinta-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}