/* Mapa do Ano. Estilos isolados no namespace .mapa-do-ano-
   Tokens do design Marinho e Dourado Cabalistico. */
.mapa-do-ano{
--ma-bg:#FAF8F3;--ma-sup:#FFFFFF;--ma-ink:#141A2E;--ma-ac:#1B2A55;
--ma-plum:#2E1B47;--ma-ouro:#B08A4A;--ma-mudo:#5F6786;--ma-linha:#E6E0D4;
--ma-r:2px;--ma-col:680px;
font-family:Figtree,system-ui,sans-serif;font-size:18px;line-height:1.65;
color:var(--ma-ink);
}
.mapa-do-ano *,.mapa-do-ano *::before,.mapa-do-ano *::after{box-sizing:border-box}
.mapa-do-ano h2,.mapa-do-ano h3,.mapa-do-ano h4{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
line-height:1.12;margin:0 0 16px;color:var(--ma-ink);
}
.mapa-do-ano h2{font-size:38px}
.mapa-do-ano h3{font-size:27px}
.mapa-do-ano h4{font-size:23px}
.mapa-do-ano p{margin:0 0 16px}
.mapa-do-ano p:last-child{margin-bottom:0}
.mapa-do-ano-wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.mapa-do-ano-col{max-width:var(--ma-col)}
.mapa-do-ano-rotulo{
font-size:12px;letter-spacing:.12em;text-transform:uppercase;
font-weight:500;color:var(--ma-ouro);margin:0 0 12px;
}
.mapa-do-ano-filete{height:1px;background:var(--ma-linha);border:0;margin:32px 0}

/* hero dividida 7/5, texto a esquerda */
.mapa-do-ano-hero{
background:linear-gradient(160deg,#2E1B47 0%,#141A2E 78%);
color:#FAF8F3;padding:64px 0;position:relative;overflow:hidden;
}
.mapa-do-ano-hero .mapa-do-ano-wrap{
display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:center;
position:relative;z-index:2;
}
.mapa-do-ano-hero h2,.mapa-do-ano-hero h3{color:#FAF8F3}
.mapa-do-ano-hero h2{font-size:44px;margin-bottom:12px}
.mapa-do-ano-hero p{color:#E6E0D4;max-width:62ch}
.mapa-do-ano-hero .mapa-do-ano-rotulo{color:var(--ma-ouro)}
.mapa-do-ano-ano{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
font-size:112px;line-height:1;color:var(--ma-ouro);margin:0;
}
.mapa-do-ano-geo{position:absolute;inset:0;z-index:1;pointer-events:none}
.mapa-do-ano-geo svg{position:absolute;right:-120px;top:50%;
transform:translateY(-50%);width:620px;height:620px;opacity:.22}

/* calculadora */
.mapa-do-ano-form{background:var(--ma-sup);border:1px solid var(--ma-linha);
border-radius:var(--ma-r);padding:28px;margin-top:0}
.mapa-do-ano-campo label{display:block;font-size:12px;letter-spacing:.12em;
text-transform:uppercase;font-weight:500;color:var(--ma-mudo);margin:0 0 8px}
.mapa-do-ano-campo{margin-bottom:20px}
.mapa-do-ano input[type=text],.mapa-do-ano input[type=date]{
width:100%;background:var(--ma-sup);border:1px solid var(--ma-linha);
border-radius:var(--ma-r);padding:13px 14px;font:inherit;font-size:17px;
color:var(--ma-ink);-webkit-appearance:none;appearance:none}
.mapa-do-ano input::placeholder{color:var(--ma-mudo);opacity:1}
.mapa-do-ano input[type=text]:focus,.mapa-do-ano input[type=date]:focus{
outline:0;border-color:var(--ma-ac);box-shadow:0 0 0 2px rgba(27,42,85,.2)}
.mapa-do-ano-check{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px}
.mapa-do-ano-check input{margin-top:5px;width:16px;height:16px;flex:0 0 auto;
accent-color:var(--ma-ac)}
.mapa-do-ano-check span{font-size:15px;color:var(--ma-mudo);line-height:1.5}
.mapa-do-ano .mapa-do-ano-botao{
display:inline-block;width:100%;background:var(--ma-ac);color:#FAF8F3;
border:1px solid var(--ma-ac);border-radius:var(--ma-r);padding:16px 32px;
font-family:Figtree,sans-serif;font-size:16px;font-weight:500;letter-spacing:.04em;
text-transform:uppercase;cursor:pointer;transition:background .18s ease}
.mapa-do-ano .mapa-do-ano-botao:hover{background:var(--ma-ink);border-color:var(--ma-ink)}
.mapa-do-ano .mapa-do-ano-botao:disabled{opacity:.55;cursor:not-allowed}
.mapa-do-ano-erro{color:#8C2F39;font-size:15px;margin:8px 0 0}
.mapa-do-ano-nota{font-size:14px;color:var(--ma-mudo);margin:16px 0 0;line-height:1.55}

/* resultado */
.mapa-do-ano-res{margin-top:64px}
.mapa-do-ano-res[hidden]{display:none}
.mapa-do-ano-res-topo{border-top:1px solid var(--ma-linha);padding-top:32px}
.mapa-do-ano-destaque{
display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
background:var(--ma-sup);border:1px solid var(--ma-linha);
border-radius:var(--ma-r);padding:32px;margin:32px 0}
.mapa-do-ano-numeral{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:112px;
line-height:.9;color:var(--ma-ouro);margin:0}
.mapa-do-ano-conta{font-size:15px;color:var(--ma-mudo);margin:8px 0 0}

/* areas da vida: lista com filete, sem cartoes iguais */
.mapa-do-ano-areas{margin:0;padding:0;list-style:none;border-top:1px solid var(--ma-linha)}
.mapa-do-ano-areas li{border-bottom:1px solid var(--ma-linha);padding:24px 0;
display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:start}
.mapa-do-ano-areas h4{margin:0}
.mapa-do-ano-areas p{color:var(--ma-ink)}

/* bloco de numero, padrao do design */
.mapa-do-ano-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.mapa-do-ano-num{border-top:1px solid var(--ma-linha);padding-top:16px}
.mapa-do-ano-num .mapa-do-ano-n{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:72px;
line-height:1;color:var(--ma-ouro);display:block;margin-bottom:8px}
.mapa-do-ano-num h4{margin:0 0 8px}
.mapa-do-ano-num p{font-size:16px;color:var(--ma-mudo);margin:0 0 10px}
.mapa-do-ano-num dl{margin:0;font-size:15px}
.mapa-do-ano-num dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ma-ouro);font-weight:500;margin-top:10px}
.mapa-do-ano-num dd{margin:2px 0 0;color:var(--ma-ink)}

/* meses: lista com filete e numeral */
.mapa-do-ano-meses{margin:0;padding:0;list-style:none;border-top:1px solid var(--ma-linha)}
.mapa-do-ano-meses li{border-bottom:1px solid var(--ma-linha);padding:20px 0;
display:grid;grid-template-columns:72px 1fr;gap:24px;align-items:baseline}
.mapa-do-ano-meses .mapa-do-ano-n{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:54px;
line-height:1;color:var(--ma-ouro)}
.mapa-do-ano-meses h4{margin:0 0 6px;font-size:23px}
.mapa-do-ano-meses p{font-size:16px;margin:0 0 8px}
.mapa-do-ano-meses .mapa-do-ano-pares{font-size:15px;color:var(--ma-mudo);margin:0}
.mapa-do-ano-meses .mapa-do-ano-pares b{color:var(--ma-ink);font-weight:600}

/* trimestres: 2x2 com um fundo diferente */
.mapa-do-ano-tris{display:grid;grid-template-columns:1fr 1fr;gap:1px;
background:var(--ma-linha);border:1px solid var(--ma-linha)}
.mapa-do-ano-tri{background:var(--ma-bg);padding:28px}
.mapa-do-ano-tri:nth-child(2),.mapa-do-ano-tri:nth-child(3){background:var(--ma-sup)}
.mapa-do-ano-tri .mapa-do-ano-n{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:64px;
line-height:1;color:var(--ma-ouro);display:block;margin-bottom:6px}
.mapa-do-ano-tri h4{margin:0 0 10px}
.mapa-do-ano-tri p{font-size:16px;margin:0 0 10px}

/* perguntas frequentes */
.mapa-do-ano-faq{border-top:1px solid var(--ma-linha)}
.mapa-do-ano-faq details{border-bottom:1px solid var(--ma-linha)}
.mapa-do-ano-faq summary{
list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;font-weight:600;
line-height:1.2;color:var(--ma-ink)}
.mapa-do-ano-faq summary::-webkit-details-marker{display:none}
.mapa-do-ano-faq summary::after{
content:"";position:absolute;right:8px;top:28px;width:9px;height:9px;
border-right:1px solid var(--ma-ouro);border-bottom:1px solid var(--ma-ouro);
transform:rotate(45deg);transition:transform .2s ease}
.mapa-do-ano-faq details[open] summary::after{transform:rotate(225deg)}
.mapa-do-ano-faq summary:focus-visible{outline:2px solid var(--ma-ac);outline-offset:2px}
.mapa-do-ano-faq .mapa-do-ano-resp{padding:0 0 20px;font-size:17px;max-width:var(--ma-col)}

/* aviso */
.mapa-do-ano-aviso{
background:var(--ma-sup);border:1px solid var(--ma-linha);
border-left:1px solid var(--ma-ouro);border-radius:var(--ma-r);padding:28px 32px}
.mapa-do-ano-aviso h3{margin:0 0 12px;font-size:25px}
.mapa-do-ano-aviso p{font-size:16px;color:var(--ma-mudo);max-width:68ch}
.mapa-do-ano-losango{display:inline-block;width:9px;height:9px;
border:1px solid var(--ma-ouro);transform:rotate(45deg);margin-right:10px;
vertical-align:middle}

/* celular */
@media (max-width:980px){
.mapa-do-ano-numeros{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
.mapa-do-ano{font-size:17px}
.mapa-do-ano h2{font-size:30px}
.mapa-do-ano h3{font-size:25px}
.mapa-do-ano-hero{padding:40px 0}
.mapa-do-ano-hero .mapa-do-ano-wrap{grid-template-columns:1fr;gap:24px}
.mapa-do-ano-hero h2{font-size:32px}
.mapa-do-ano-ano{font-size:72px}
.mapa-do-ano-geo svg{width:360px;height:360px;right:-150px;opacity:.16}
.mapa-do-ano-form{padding:22px}
.mapa-do-ano-destaque{grid-template-columns:1fr;gap:12px;padding:24px;text-align:left}
.mapa-do-ano-numeral{font-size:84px}
.mapa-do-ano-areas li{grid-template-columns:1fr;gap:10px}
.mapa-do-ano-numeros{grid-template-columns:1fr;gap:24px}
.mapa-do-ano-meses li{grid-template-columns:54px 1fr;gap:16px}
.mapa-do-ano-meses .mapa-do-ano-n{font-size:42px}
.mapa-do-ano-tris{grid-template-columns:1fr}
.mapa-do-ano-res{margin-top:40px}
}
@media (prefers-reduced-motion:reduce){
.mapa-do-ano *,.mapa-do-ano *::after{transition:none!important;animation:none!important;
scroll-behavior:auto!important}
}

/* h1 da pagina */
.mapa-do-ano .mapa-do-ano-h1{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:44px;
line-height:1.1;margin:0;color:var(--ma-ink);max-width:16ch}
@media (max-width:780px){
.mapa-do-ano .mapa-do-ano-h1{font-size:32px;max-width:none}
}

.mapa-do-ano .mapa-do-ano-pares{font-size:15px;color:var(--ma-mudo);margin:0 0 8px}
.mapa-do-ano .mapa-do-ano-pares b{color:var(--ma-ink);font-weight:600}

/* Coluna de leitura. Vale so nesta pagina, pela classe de corpo.
   O conteudo dos proprios atalhos fica de fora, porque ja tem
   largura propria dentro de .mapa-do-ano */
.mapa-do-ano-page .elementor-widget p,
.mapa-do-ano-page .elementor-widget h2,
.mapa-do-ano-page .elementor-widget h3,
.mapa-do-ano-page .elementor-widget ul,
.mapa-do-ano-page .elementor-widget ol{max-width:680px}
.mapa-do-ano-page .mapa-do-ano p,
.mapa-do-ano-page .mapa-do-ano h2,
.mapa-do-ano-page .mapa-do-ano h3,
.mapa-do-ano-page .mapa-do-ano h4,
.mapa-do-ano-page .mapa-do-ano ul,
.mapa-do-ano-page .mapa-do-ano dl{max-width:none}
.mapa-do-ano-page .elementor-widget h3{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:27px;
line-height:1.14;margin:32px 0 12px;color:#141A2E}
.mapa-do-ano-page .elementor-widget h3:first-child{margin-top:0}
@media (max-width:780px){
.mapa-do-ano-page .elementor-widget h3{font-size:25px;margin:24px 0 10px}
.mapa-do-ano-page .mapa-do-ano h3{margin:0 0 16px}
}

/* Itens de grid tem min-width auto por padrao, o que estoura a largura
   quando o conteudo tem palavra ou campo largo. */
.mapa-do-ano-hero .mapa-do-ano-wrap > *,
.mapa-do-ano-destaque > *,
.mapa-do-ano-areas li > *,
.mapa-do-ano-meses li > *,
.mapa-do-ano-numeros > *,
.mapa-do-ano-tris > *{min-width:0}
.mapa-do-ano-hero .mapa-do-ano-wrap{overflow:hidden}

/* O tema deixa label em caixa alta. O texto da confirmacao e frase
   corrida e precisa voltar ao normal. */
.mapa-do-ano .mapa-do-ano-check,
.mapa-do-ano .mapa-do-ano-check span{
text-transform:none;letter-spacing:normal;font-weight:400}
.mapa-do-ano .mapa-do-ano-nota{text-transform:none;letter-spacing:normal}

/* No celular a hero precisa caber na primeira dobra com o botao
   visivel, entao ela fica mais compacta e o numeral vai para o lado
   do rotulo em vez de ocupar uma faixa inteira. */
@media (max-width:780px){
.mapa-do-ano-hero{padding:20px 0 24px}
.mapa-do-ano-hero .mapa-do-ano-wrap{gap:16px}
.mapa-do-ano-hero h2{font-size:27px;margin-bottom:8px}
.mapa-do-ano-hero p{font-size:15px;line-height:1.5}
.mapa-do-ano-hero p.mapa-do-ano-ano{font-size:44px;margin:4px 0 0;line-height:1}
.mapa-do-ano-form{padding:18px}
.mapa-do-ano-campo{margin-bottom:12px}
.mapa-do-ano input[type=text],.mapa-do-ano input[type=date]{padding:11px 12px;font-size:16px}
.mapa-do-ano-campo label{margin-bottom:5px}
.mapa-do-ano-check{margin-bottom:14px}
.mapa-do-ano-check span{font-size:14px;line-height:1.4}
.mapa-do-ano .mapa-do-ano-botao{padding:14px 12px;font-size:14px;letter-spacing:.02em}
.mapa-do-ano-nota{font-size:13px;margin-top:12px}
}