/* Relacionamentos. Cores e letras do tema hp-eneagrama. */
.hp-rel { --noite:#0F2A44; --marca:#1569A6; --linha:#D7E3EC; --sec:#4E6275; --leitura:#2E4A62; --casa:44px; font-family:'Lexend','Segoe UI',system-ui,sans-serif; color:var(--noite); }
.hp-rel h2, .hp-rel h3 { font-family:'Lexend','Segoe UI',system-ui,sans-serif; color:var(--noite); margin:0; }

/* Escolha */
.hp-rel__escolha { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:center; background:#fff; border:1px solid var(--linha); border-radius:20px; padding:40px; box-shadow:0 10px 30px rgba(15,42,68,.06); }
.hp-rel__texto h2 { font-size:clamp(24px,3vw,30px); margin-bottom:12px; }
.hp-rel__texto > p { font-family:'Source Serif 4',Georgia,serif; font-size:18px; line-height:1.6; color:var(--leitura); margin:0 0 20px; }
.hp-rel__seletores { display:flex; flex-wrap:wrap; gap:12px 16px; margin-bottom:20px; }
.hp-rel__seletores label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:500; color:var(--sec); flex:1 1 200px; }
.hp-rel__seletores select { font:inherit; font-size:16px; color:var(--noite); padding:11px 12px; border:1px solid var(--linha); border-radius:10px; background:#F3F7FA; }
.hp-rel__seletores select:focus-visible { outline:3px solid #2BBBD8; outline-offset:1px; }
.hp-rel__texto > .hp-rel__legenda { font-family:'Lexend','Segoe UI',system-ui,sans-serif; font-size:13px; line-height:1.5; color:var(--sec); margin:0; }

/* Grelha em escada */
.hp-rel__grelha { display:grid; grid-template-columns:repeat(10,var(--casa)); grid-template-rows:repeat(10,var(--casa)); gap:5px; }
.hp-rel__eixo { display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; color:var(--c); border-radius:50%; transition:background .15s, color .15s; }
.hp-rel__eixo.is-ativo { background:var(--c); color:#fff; }
.hp-rel__casa { position:relative; display:flex; align-items:center; justify-content:center; border-radius:10px; text-decoration:none; color:#fff; font-size:12px; font-weight:600; letter-spacing:.02em;
	background:linear-gradient(135deg,var(--ca) 0 50%,var(--cb) 50% 100%); opacity:.78; transition:transform .15s, opacity .15s, box-shadow .15s; }
.hp-rel__casa span { text-shadow:0 1px 2px rgba(0,0,0,.35); }
.hp-rel__casa:hover, .hp-rel__casa:focus-visible { opacity:1; transform:scale(1.12); box-shadow:0 6px 14px rgba(15,42,68,.25); z-index:2; outline:none; }
.hp-rel__casa:focus-visible { box-shadow:0 0 0 3px #fff, 0 0 0 6px #2BBBD8; }
.hp-rel__casa.is-escolhida { opacity:1; box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--noite); transform:scale(1.08); z-index:3; }
.hp-rel__grelha.tem-escolha .hp-rel__casa:not(.is-escolhida):not(:hover) { opacity:.45; }

/* Painel */
.hp-rel__paineis { margin-top:40px; }
.hp-rel__vazio { text-align:center; max-width:640px; margin:0 auto; font-family:'Source Serif 4',Georgia,serif; font-size:18px; line-height:1.6; color:var(--leitura); }
.hp-rel__vazio[hidden] { display:none; }
.hp-rel__painel { background:#fff; border:1px solid var(--linha); border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(15,42,68,.06); scroll-margin-top:24px; }
.hp-rel__painel:focus { outline:none; }
.hp-rel__topo { padding:36px 40px 30px; background:linear-gradient(120deg,var(--claro-a) 0%,#fff 55%,var(--claro-b) 100%); border-bottom:1px solid var(--linha); }
.hp-rel__marcas { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:18px; }
.hp-rel__marca { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--noite); text-decoration:none; background:#fff; border:1px solid var(--linha); border-radius:999px; padding:5px 16px 5px 5px; }
a.hp-rel__marca:hover { border-color:var(--noite); }
.hp-rel__num { width:32px; height:32px; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.hp-rel__e { font-size:22px; font-weight:300; color:var(--sec); }
.hp-rel__topo h2 { font-size:clamp(26px,3.4vw,36px); line-height:1.15; margin-bottom:10px; }
.hp-rel__frase { font-family:'Source Serif 4',Georgia,serif; font-size:20px; line-height:1.5; color:var(--leitura); margin:0 0 16px; max-width:720px; }
.hp-rel__chip { display:inline-block; margin:0; font-size:13px; font-weight:500; color:var(--sec); background:rgba(255,255,255,.8); border:1px solid var(--linha); border-radius:999px; padding:4px 12px; }

.hp-rel__bloco, .hp-rel__duas { padding:30px 40px 0; }
.hp-rel__bloco h3, .hp-rel__cartao h3 { font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sec); margin-bottom:14px; }
.hp-rel__dinamica { font-family:'Source Serif 4',Georgia,serif; font-size:19px; line-height:1.65; color:var(--leitura); margin:0; }

.hp-rel__duas { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.hp-rel__cartao { border-radius:16px; padding:22px 22px 8px; }
.hp-rel__cartao--liga { background:#E9F5EC; } .hp-rel__cartao--liga .hp-rel__ic { color:#2F7D46; }
.hp-rel__cartao--atrito { background:#FDEEE9; } .hp-rel__cartao--atrito .hp-rel__ic { color:#B8432C; }
.hp-rel__lista { list-style:none; margin:0; padding:0; }
.hp-rel__lista li { display:flex; gap:10px; align-items:flex-start; font-size:16px; line-height:1.45; margin-bottom:14px; }
.hp-rel__ic { flex:none; margin-top:1px; }

.hp-rel__citacoes { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.hp-rel__citacao { margin:0; position:relative; border-left:4px solid var(--cq); background:#F3F7FA; border-radius:4px 16px 16px 4px; padding:20px 22px 18px; }
.hp-rel__aspas { display:block; font-family:Georgia,serif; font-size:56px; line-height:.6; height:26px; color:var(--cq); opacity:.55; }
.hp-rel__citacao blockquote { margin:6px 0 12px; padding:0; border:0; }
.hp-rel__citacao blockquote p { font-family:'Source Serif 4',Georgia,serif; font-style:italic; font-size:17px; line-height:1.55; color:var(--noite); margin:0; }
.hp-rel__citacao figcaption { font-size:13px; font-weight:600; color:var(--cq); }

.hp-rel__crescer { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.hp-rel__cresce { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--linha); border-radius:16px; padding:18px 20px; font-size:16px; line-height:1.5; }
.hp-rel__cresce--a .hp-rel__ic { color:var(--ca); } .hp-rel__cresce--b .hp-rel__ic { color:var(--cb); }
.hp-rel__cresce strong { display:block; color:var(--noite); margin-bottom:2px; }
.hp-rel__cresce span { color:var(--leitura); }

.hp-rel__dicas { counter-reset:dica; list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.hp-rel__dicas li { counter-increment:dica; display:flex; gap:14px; align-items:center; font-size:16px; line-height:1.45; background:#FBF0E6; border-radius:14px; padding:14px 18px; }
.hp-rel__dicas li::before { content:counter(dica); flex:none; width:30px; height:30px; border-radius:50%; background:var(--noite); color:#fff; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }

.hp-rel__rodape { margin-top:30px; padding:20px 40px 26px; border-top:1px solid var(--linha); display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; font-size:14px; color:var(--sec); }
.hp-rel__rodape p { margin:0; max-width:620px; }
.hp-rel__rodape a { color:var(--noite); font-weight:600; }
.hp-rel__voltar { white-space:nowrap; }

/* Ecrãs médios e pequenos */
@media (max-width: 980px) {
	.hp-rel__escolha { grid-template-columns:1fr; gap:0; padding:28px; }
	.hp-rel__texto { display:contents; }
	.hp-rel__texto > p { margin-bottom:24px; }
	.hp-rel__grelha { justify-self:center; margin-bottom:28px; }
	.hp-rel__texto h2 { order:1; } .hp-rel__texto > p:not(.hp-rel__legenda) { order:2; } .hp-rel__grelha { order:3; } .hp-rel__seletores { order:4; } .hp-rel__legenda { order:5; }
}
@media (max-width: 700px) {
	.hp-rel { --casa:calc((100vw - 32px - 24px - 45px) / 10); }
	.hp-rel__escolha { padding:20px 12px; border-radius:16px; }
	.hp-rel__texto { padding:0 4px; }
	.hp-rel__grelha { gap:5px; }
	.hp-rel__casa { font-size:10px; border-radius:7px; }
	.hp-rel__casa span { display:none; }
	.hp-rel__eixo { font-size:13px; }
	.hp-rel__topo { padding:26px 20px 22px; }
	.hp-rel__bloco, .hp-rel__duas { padding:24px 20px 0; }
	.hp-rel__rodape { padding:18px 20px 22px; }
	.hp-rel__duas, .hp-rel__citacoes, .hp-rel__crescer { grid-template-columns:1fr; gap:14px; }
	.hp-rel__frase { font-size:18px; }
	.hp-rel__dinamica { font-size:17px; }
}
@media (prefers-reduced-motion: reduce) { .hp-rel__casa { transition:none; } }

/* Ligação no topo escuro da página */
.has-azul-noite-background-color a { color:#7FD6E8; }