/* ============================================================
PEDRO ELIAS — Instrução Espiritual
Segunda concepção: a sobriedade de um livro clássico.
Quase negro · marfim · ouro antigo, usado com parcimónia.
Cormorant Garamond (títulos) · EB Garamond (corpo).
============================================================ */
:root{
/* Paleta extraída da fotografia dos Himalaias:
céu #5473A2 · horizonte #B29098 · alpenglow #A47578
bruma #3D4C64 · encostas #354056 · sombra #343D4D */
--fundo:#1B2436; /* azul-ardósia mais vibrante, ainda pastel */
--fundo-suave:#233049;
--fundo-painel:#212C42;
--marfim:#EEE8DA;
--marfim-secundario:#AEB7C9;
--ouro:#C79A7E;
--ouro-vivo:#EBC6A2;
--ceu:#8293BA; /* azul-brumoso do céu médio */
--ceu-vivo:#A9B7D6;
--lavanda:#6E86B4; /* azul-lavanda do topo */
--pessego:#DCC5C4; /* rosa-pêssego do horizonte */
--linha:rgba(199,154,126,.42);
--linha-tenue:rgba(174,183,201,.22);
--medida:66ch;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}
body{
background:
radial-gradient(120% 60% at 50% -8%, rgba(110,134,180,.28) 0%, rgba(110,134,180,0) 55%),
var(--fundo);
background-attachment:fixed;
color:var(--marfim);
font-family:"EB Garamond",Georgia,"Times New Roman",serif;
font-size:1.22rem;
line-height:1.85;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
::selection{background:var(--ouro);color:var(--fundo)}
a{color:var(--marfim);text-decoration:none;border-bottom:1px solid var(--linha);transition:color .3s,border-color .3s}
a:hover{color:var(--ouro-vivo);border-color:var(--ouro-vivo)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:1px solid var(--ouro);outline-offset:4px;
}
img{max-width:100%;display:block}
/* ---------- Moldura: um único fio, quase imperceptível ---------- */
.moldura{position:fixed;inset:0;pointer-events:none;z-index:1000}
.moldura::before{
content:"";position:absolute;inset:16px;
border:1px solid var(--linha-tenue);
}
.moldura::after{
content:"";position:absolute;inset:22px;
border:1px solid rgba(199,154,126,.10);
}
.moldura .canto{
position:absolute;width:44px;height:44px;
background:url("../img/canto.svg") no-repeat center/contain;
}
.moldura .canto.tl{top:6px;left:6px}
.moldura .canto.tr{top:6px;right:6px;transform:scaleX(-1)}
.moldura .canto.bl{bottom:6px;left:6px;transform:scaleY(-1)}
.moldura .canto.br{bottom:6px;right:6px;transform:scale(-1,-1)}
/* ---------- Cabeçalho ---------- */
header.topo{
position:relative;z-index:900;
padding:5rem clamp(28px,6vw,84px) 0;
}
.topo-inner{
max-width:1080px;margin:0 auto;text-align:center;
}
.marca{display:inline-block;border:none}
.marca .nome{
display:block;
font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
font-size:clamp(2.3rem,4.1vw,3.15rem);
line-height:1.1; /* aproxima o nome do subtítulo */
word-spacing:-0.3em; /* encurta o vão PEDRO·ELIAS */
letter-spacing:.34em;text-transform:uppercase;
color:var(--marfim);
}
.marca .lema{
display:block;margin-top:.45rem;
font-size:.72rem;letter-spacing:.52em;text-transform:uppercase;
color:var(--ouro);
}
.marca:hover .nome{color:var(--ouro-vivo)}
nav.principal{margin-top:2.2rem;border-top:1px solid var(--linha-tenue);border-bottom:1px solid var(--linha-tenue)}
nav.principal ul{
list-style:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:clamp(1.2rem,2.6vw,2.6rem);padding:1.5rem clamp(28px,5vw,64px);
}
nav.principal a,nav.principal button.sub-btn{
font-family:"EB Garamond",serif;font-size:.86rem;
letter-spacing:.3em;text-transform:uppercase;
color:var(--marfim-secundario);
background:none;border:none;cursor:pointer;padding:.2rem 0;
}
nav.principal a:hover,nav.principal button.sub-btn:hover{color:var(--ouro-vivo)}
nav.principal a.activo{color:var(--ouro-vivo)}
li.tem-sub{position:relative}
ul.submenu{
position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
flex-direction:column;gap:0;min-width:280px;
background:var(--fundo);border:1px solid var(--linha);border-radius:7px;
padding:.6rem 0;display:none;z-index:50;
}
li.tem-sub.aberto ul.submenu{display:flex}
/* Abrir ao passar o rato (computador); no telemóvel mantém-se o clique */
@media (hover:hover){
li.tem-sub:hover ul.submenu{display:flex}
/* ponte invisível para o rato não "cair" ao descer até ao submenu */
li.tem-sub:hover::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
}
ul.submenu li{margin:0}
ul.submenu a{
display:flex;align-items:center;gap:.85rem;
padding:.7rem 1.5rem;letter-spacing:.14em;font-size:.82rem;
border:none;text-align:left;white-space:nowrap;
color:var(--marfim-secundario);
}
ul.submenu a:hover{color:var(--ouro-vivo);background:rgba(190,141,117,.08)}
ul.submenu .sub-ic{
display:inline-flex;flex:0 0 18px;width:18px;height:18px;
color:var(--ouro);
}
ul.submenu a:hover .sub-ic{color:var(--ouro-vivo)}
ul.submenu .sub-ic svg{width:18px;height:18px}
button.nav-toggle,button.nav-fechar{display:none}
/* ---------- Herói (fotografia + paralaxe) ---------- */
.heroi{
position:relative;overflow:hidden;
min-height:min(94vh,920px);
display:flex;align-items:center;justify-content:center;
text-align:center;
padding:clamp(5rem,12vh,8rem) clamp(28px,8vw,120px);
margin-top:1.5rem;
}
.heroi-fundo{
position:absolute;inset:-6%;
background:url("../img/himalaia.webp") no-repeat center 32%/cover;
transform:scale(1.05);
will-change:transform;
}
.heroi-veu{
position:absolute;inset:0;
background:linear-gradient(180deg,
rgba(27,36,54,.28) 0%,
rgba(27,36,54,.14) 28%,
rgba(27,36,54,.28) 56%,
rgba(27,36,54,.72) 84%,
var(--fundo) 100%);
}
.heroi-conteudo{position:relative;z-index:2;max-width:820px;margin-top:4vh}
.heroi .invocacao{
font-size:.84rem;letter-spacing:.5em;text-transform:uppercase;
color:#F2D7AC;font-weight:500;
margin-bottom:3rem;
text-shadow:0 1px 2px rgba(8,11,18,.95),0 2px 10px rgba(8,11,18,.7);
}
/* Mancha escura por trás da invocação, esbatida em toda a volta (sem
contorno visível) — apenas escurece o fundo para as letras se lerem.
Camada vertical (dá a altura) + esbatimento lateral por máscara. */
.heroi .invocacao{
position:relative;
display:inline-block;
padding:.7rem 2.6rem;
}
.heroi .invocacao::before{
content:"";
position:absolute;inset:-0.9rem 0;z-index:-1;
background:linear-gradient(to bottom,
rgba(10,13,20,0) 0%,
rgba(10,13,20,.32) 50%,
rgba(10,13,20,0) 100%);
-webkit-mask:linear-gradient(to right,
rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%,
rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
mask:linear-gradient(to right,
rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%,
rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
}
.heroi h1{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-style:italic;
font-size:clamp(2.1rem,5vw,3.6rem);
line-height:1.4;letter-spacing:.015em;
color:#F6F1E6;
text-shadow:0 1px 3px rgba(8,11,18,.85),0 2px 16px rgba(8,11,18,.4);
}
.heroi .subtitulo{
margin-top:2.6rem;
font-size:clamp(1.05rem,1.8vw,1.25rem);
color:var(--marfim);
max-width:560px;margin-inline:auto;
text-shadow:0 1px 3px rgba(8,11,18,.85);
}
.heroi .accoes{margin-top:3.4rem}
.heroi .accoes .chamada{text-shadow:0 1px 14px rgba(18,22,31,.9)}
/* ---------- Ligações solenes (em vez de botões) ---------- */
.chamada{
display:inline-block;
font-family:"EB Garamond",Georgia,serif;
font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--marfim);
border:1px solid var(--ouro);border-radius:7px;
padding:.6rem 1.4rem;
transition:background .3s,color .3s,border-color .3s;
}
.chamada:hover{background:var(--ouro);border-color:var(--ouro);color:#12161F}
.chamada + .chamada{margin-left:3rem}
.ligacoes{font-size:1.02rem;color:var(--marfim-secundario);line-height:2.1}
.ligacoes a{color:var(--marfim-secundario);border-bottom:1px solid var(--linha-tenue)}
.ligacoes a:hover{color:var(--ouro-vivo);border-color:var(--ouro-vivo)}
.ligacoes .sep{color:var(--ouro);margin:0 .55rem}
.ligacoes .rotulo-linha{
font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;
color:var(--ouro);margin-right:1rem;
}
/* ---------- Secções ---------- */
main{position:relative;z-index:1}
section.bloco{padding:clamp(5.5rem,11vh,8.5rem) clamp(28px,7vw,110px)}
.limite{max-width:1080px;margin:0 auto}
.limite.estreito{max-width:var(--medida);margin:0 auto}
.florao{
width:300px;height:55px;margin:0 auto;position:relative;
}
/* Duas metades de linha, ao nível da barriga da chama (mais abaixo do centro),
cada uma com fade nas duas pontas — esbatem nas extremidades e junto ao
centro, deixando um vão curto e limpo para a chama. */
.florao::before{
content:"";position:absolute;top:63%;left:0;right:0;height:1px;
transform:translateY(-50%);
background:
linear-gradient(to right, transparent 0%, var(--linha) 28%, var(--linha) 62%, transparent 74%) left/50% 100% no-repeat,
linear-gradient(to left, transparent 0%, var(--linha) 28%, var(--linha) 62%, transparent 74%) right/50% 100% no-repeat;
}
/* A chama ao centro, bem visível, sem nada por cima */
.florao::after{
content:"";position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:26px;height:40px;
background:url("../img/florao.svg") no-repeat center/contain;
}
.rotulo{
display:block;text-align:center;
font-size:.74rem;letter-spacing:.55em;text-transform:uppercase;
color:var(--ceu-vivo);margin-bottom:1.6rem;
}
h1.titulo,h2.titulo{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
text-align:center;
font-size:clamp(1.9rem,3.6vw,2.7rem);
letter-spacing:.04em;line-height:1.3;
color:var(--marfim);
margin-bottom:2.6rem;
}
h3.assunto{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
font-size:clamp(1.5rem,2.6vw,2rem);
letter-spacing:.03em;line-height:1.35;
color:var(--marfim);margin-bottom:.6rem;
}
.prosa{max-width:var(--medida);margin:0 auto}
.prosa p{margin-bottom:1.4rem;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.prosa p:last-child{margin-bottom:0}
.prosa em{color:var(--ouro-vivo);font-style:italic}
.prosa .capitular::first-letter{
font-family:"Cormorant Garamond",serif;
font-size:3.4em;line-height:.8;float:left;
padding:.08em .12em 0 0;color:var(--ouro-vivo);
}
/* ---------- Citação ---------- */
blockquote.mantra{
text-align:center;
font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;
font-size:clamp(1.4rem,2.8vw,2rem);line-height:1.75;
color:var(--marfim);
max-width:760px;margin:0 auto;
}
blockquote.mantra footer{
margin-top:2.2rem;
font-family:"EB Garamond",serif;font-style:normal;
font-size:.74rem;letter-spacing:.45em;text-transform:uppercase;
color:var(--ceu-vivo);
}
/* ---------- Linhagem ---------- */
.linhagem{max-width:var(--medida);margin:0 auto;list-style:none}
.linhagem li{
padding:2.2rem 0;text-align:center;
border-bottom:1px solid var(--linha-tenue);
}
.linhagem li:last-child{border-bottom:none}
.linhagem .datas{
font-size:.72rem;letter-spacing:.42em;color:var(--ouro);
text-transform:uppercase;
}
.linhagem h3{
font-family:"Cormorant Garamond",serif;font-weight:500;
font-size:1.5rem;letter-spacing:.05em;color:var(--marfim);
margin:.5rem 0 .4rem;
}
.linhagem p{font-style:italic;color:var(--marfim-secundario);font-size:1.05rem}
/* ---------- Obras (galeria sóbria) ---------- */
.estante{
display:grid;grid-template-columns:repeat(4,1fr);
gap:clamp(1.6rem,3.5vw,3rem);align-items:end;
}
.obra{text-align:center;border:none}
.obra .capa{
border:1px solid var(--linha-tenue);
transition:border-color .4s;
}
.obra:hover .capa{border-color:var(--ouro)}
.obra .capa img{width:100%}
.obra h3{
font-family:"Cormorant Garamond",serif;font-weight:500;
font-size:1.05rem;letter-spacing:.06em;line-height:1.45;
color:var(--marfim);margin-top:1.3rem;
}
.obra:hover h3{color:var(--ouro-vivo)}
/* ---------- Página de livro ---------- */
.livro{max-width:960px;margin:0 auto}
.livro-topo{
display:grid;grid-template-columns:260px 1fr;gap:clamp(2.5rem,5vw,4.5rem);
align-items:start;margin-bottom:2.8rem;
}
.livro-topo .capa{border:none}
.livro .estado{
display:block;
font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
color:var(--ouro);margin:0 0 2rem;
}
.livro details{margin-top:1.6rem}
.livro summary{
cursor:pointer;list-style:none;
font-size:.76rem;letter-spacing:.4em;text-transform:uppercase;
color:var(--ouro);
}
.livro summary:hover{color:var(--ouro-vivo)}
.livro summary::-webkit-details-marker{display:none}
.livro details[open] summary{margin-bottom:1.4rem}
.livro .aquisicao{margin-top:2.4rem;border-top:1px solid var(--linha-tenue);padding-top:1.8rem}
/* ---------- Formulários ---------- */
form.formal{max-width:var(--medida);margin:0 auto}
form.formal .campo{margin-bottom:1.8rem}
form.formal label{
display:block;
font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;
color:var(--ouro);margin-bottom:.6rem;
}
form.formal input,form.formal textarea,form.formal select{
width:100%;
background:transparent;
border:none;border-bottom:1px solid var(--linha);
color:var(--marfim);
font-family:"EB Garamond",serif;font-size:1.15rem;
padding:.5rem 0;
}
form.formal input:focus,form.formal textarea:focus,form.formal select:focus{
outline:none;border-bottom-color:var(--ouro-vivo);
}
form.formal select option{background:var(--fundo)}
form.formal .lado-a-lado{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
form.formal button[type="submit"]{
background:transparent;border:1px solid var(--ouro);border-radius:7px;
color:var(--marfim);cursor:pointer;
font-family:"EB Garamond",Georgia,serif;
font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
padding:.7rem 2.4rem;margin-top:1rem;
transition:background .3s,color .3s,border-color .3s;
}
form.formal button[type="submit"]:hover{background:var(--ouro);border-color:var(--ouro);color:#12161F}
/* ---------- Loja / Ecwid ---------- */
.ecwid-utilidades{
display:flex;flex-wrap:wrap;gap:2.5rem;align-items:flex-start;
justify-content:center;
margin:0 auto 3.5rem;max-width:960px;
padding-bottom:2.5rem;border-bottom:1px solid var(--linha-tenue);
}
.ecwid-utilidades > div{min-width:220px}
.ecwid-montra{
background:#F7F4EC;
border:1px solid var(--linha);
padding:clamp(1rem,2.5vw,2.5rem);
max-width:1080px;margin:0 auto;
}
/* ---------- Rodapé ---------- */
footer.rodape{
margin-top:3rem;
padding:4.5rem clamp(28px,7vw,110px) 3.5rem;
border-top:1px solid var(--linha-tenue);
text-align:center;
}
.rodape .nome-rodape{
font-family:"Cormorant Garamond",serif;font-weight:500;
letter-spacing:.34em;text-transform:uppercase;
font-size:1.05rem;color:var(--marfim);
}
.rodape nav{margin:2.2rem 0}
.rodape nav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 2.4rem}
.rodape nav a{
font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;
color:var(--marfim-secundario);border:none;
}
.rodape nav a:hover{color:var(--ouro-vivo)}
.sociais{display:flex;justify-content:center;gap:2rem;margin:1.4rem 0 2.6rem}
.sociais a{border:none;color:var(--marfim-secundario)}
.sociais a:hover{color:var(--ouro-vivo)}
.sociais svg{width:17px;height:17px;fill:currentColor}
.rodape .assinatura{
font-size:.85rem;letter-spacing:.12em;color:var(--marfim-secundario);
}
.rodape .assinatura em{
display:block;margin-top:.8rem;
font-family:"Cormorant Garamond",serif;font-size:1.05rem;
color:var(--ouro);
}
/* ---------- Utilitários ---------- */
.centro{text-align:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mt-4{margin-top:4rem}
/* ---------- Responsivo ---------- */
@media (max-width:960px){
.estante{grid-template-columns:repeat(2,1fr)}
.livro-topo{grid-template-columns:1fr}
.livro-topo .capa{max-width:260px;margin:0 auto}
}
@media (max-width:640px){
body{font-size:1.12rem}
.moldura::before{inset:8px}
.moldura .canto{width:30px;height:30px;top:2px;left:2px}
.moldura .canto.tr{top:2px;right:2px;left:auto}
.moldura .canto.bl{bottom:2px;left:2px;top:auto}
.moldura .canto.br{bottom:2px;right:2px;top:auto;left:auto}
.estante{grid-template-columns:1fr 1fr;gap:1.4rem}
form.formal .lado-a-lado{grid-template-columns:1fr;gap:0}
.chamada + .chamada{margin-left:0;margin-top:1.6rem;display:block}
.prosa p{text-align:left;hyphens:none}
nav.principal ul{gap:1rem 1.6rem;padding:.9rem 1rem}
}
/* ---------- Submenu: garantia de estado fechado ---------- */
nav.principal ul.submenu{display:none !important}
nav.principal li.tem-sub.aberto ul.submenu{display:flex !important}
/* Abrir ao passar o rato (só em ecrãs com rato); telemóvel mantém o clique */
@media (hover:hover){
nav.principal li.tem-sub:hover ul.submenu{display:flex !important}
}
/* ---------- Cronologia horizontal da Linhagem ---------- */
.cronologia{
margin-top:2.6rem;
overflow-x:auto;overflow-y:hidden;
cursor:grab;
scrollbar-width:thin;
scrollbar-color:var(--ouro) transparent;
padding-bottom:1.6rem;
-webkit-overflow-scrolling:touch;
}
.cronologia.a-arrastar{cursor:grabbing;user-select:none}
.cronologia::-webkit-scrollbar{height:3px}
.cronologia::-webkit-scrollbar-track{background:var(--linha-tenue)}
.cronologia::-webkit-scrollbar-thumb{background:var(--ouro)}
.cronologia-faixa{
list-style:none;display:flex;
min-width:max-content;
padding:0 clamp(1rem,6vw,5rem);
}
.marco{
position:relative;
width:clamp(240px,26vw,310px);
padding:0 clamp(1.2rem,2.4vw,2.2rem);
text-align:center;
flex-shrink:0;
}
/* a linha do tempo, contínua sob os retratos */
.marco::before{
content:"";position:absolute;left:0;right:0;top:200px;
height:1px;background:var(--linha);
}
.marco:first-child::before{left:50%}
.marco:last-child::before{right:50%}
/* o nó sobre a linha */
.marco::after{
content:"";position:absolute;left:50%;top:200px;
width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);
background:var(--fundo);border:1px solid var(--ouro);border-radius:7px;
}
.marco figure{
width:160px;height:160px;margin:0 auto 58px;
border-radius:50%;overflow:hidden;
border:1px solid var(--linha);
padding:5px;background:var(--fundo);
}
.marco figure img{
width:100%;height:100%;object-fit:cover;border-radius:50%;
filter:grayscale(1) sepia(.28) brightness(.94) contrast(.98);
transition:filter .5s;
}
.marco:hover figure img{filter:grayscale(.15) sepia(.12)}
.marco:hover figure{border-color:var(--ouro)}
.marco .datas{
display:block;margin-top:0;
font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;
color:var(--ceu-vivo);
}
.marco h3{
font-family:"Cormorant Garamond",serif;font-weight:500;
font-size:1.35rem;letter-spacing:.05em;color:var(--marfim);
margin:.5rem 0 .5rem;
}
.marco p{font-style:italic;color:var(--marfim-secundario);font-size:1rem;line-height:1.7}
.cronologia-nota{
text-align:center;margin-top:1rem;
font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
color:var(--marfim-secundario);opacity:.7;
}
@media (max-width:640px){
.marco{width:78vw}
}
/* ============================================================
AFINAÇÕES · terceira ronda
============================================================ */
/* Empilhamento: marca de água atrás de tudo */
body{position:relative}
header.topo,nav.principal,main,footer.rodape{position:relative;z-index:1}
/* Marca de água da montanha nas páginas interiores */
.marca-agua{
position:absolute;top:0;left:0;right:0;
height:min(70vh,620px);
pointer-events:none;z-index:0;
background:
linear-gradient(180deg,
rgba(27,36,54,.55) 0%,
rgba(27,36,54,.70) 45%,
rgba(27,36,54,.90) 78%,
var(--fundo) 98%),
url("../img/himalaia.webp") no-repeat center 20%/cover;
}
/* Menu fixo ao rolar (sem a marca acima) */
nav.principal{
position:sticky;top:0;z-index:850;
background:rgba(27,36,54,.62);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
margin-top:2.2rem;
}
/* Ecrãs estreitos: carrinho em linha própria, no fim da lista */
@media (max-width:900px){
nav.principal ul{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}
}
/* Submenu «Páginas»: espaçamento compacto */
nav.principal ul.submenu{gap:0;padding:.5rem 0}
nav.principal ul.submenu li{margin:0}
nav.principal ul.submenu a{display:flex;align-items:center;gap:.85rem;justify-content:flex-start;text-align:left;padding:.7rem 1.5rem;line-height:1.5;width:100%}
/* Cronologia centrada quando a janela é larga */
.cronologia-faixa{width:max-content;min-width:0;margin:0 auto}
/* Capas alinhadas e emolduradas a ouro (sem os traços) */
.estante{align-items:start}
.obra .capa{
display:block;position:relative;
padding:7px;
border:1px solid var(--linha);
transition:border-color .4s;
}
.obra .capa::before{
content:"";position:absolute;inset:3px;
border:1px solid var(--linha-tenue);
pointer-events:none;
}
.obra .capa img{
width:100%;aspect-ratio:2/3;object-fit:cover;
}
.obra:hover .capa{border-color:var(--ouro-vivo)}
/* ---------- Componente .quadro: moldura dourada elegante ---------- */
.quadro{
border:26px solid transparent;
border-image:url("../img/quadro.svg") 50 stretch;
padding:1.4rem;
}
@media (max-width:640px){
.quadro{border-width:20px;padding:.8rem}
}
/* Instrumentos de Estudo em caixas emolduradas */
.instrumentos{
display:grid;grid-template-columns:repeat(3,1fr);
gap:2.2rem;margin-top:1rem;
}
.instrumento{text-align:center;padding:2.2rem 1.6rem}
.instrumento h3{
font-family:"Cormorant Garamond",serif;font-weight:500;
font-size:1.45rem;letter-spacing:.05em;color:var(--marfim);
margin-bottom:1rem;
}
.instrumento p{color:var(--marfim-secundario);font-size:1.05rem;line-height:1.75}
.instrumento .chamada{margin-top:1.6rem}
@media (max-width:960px){.instrumentos{grid-template-columns:1fr}}
/* Blocos de livro emoldurados */
.livro.quadro{max-width:1020px;padding:clamp(1.2rem,3vw,2.6rem)}
/* ---------- Música: mostrador + capa e contracapa ---------- */
.album{max-width:1020px;margin:0 auto}
.album + .album{margin-top:3.5rem}
.album-grelha{
display:grid;grid-template-columns:350px 1fr;
gap:clamp(1.6rem,3vw,2.6rem);align-items:center;
}
.album-player{width:350px;height:470px;border:0;display:block}
.album-arte{display:block;border:none}
.album-arte img{width:100%;border:1px solid var(--linha-tenue);border-radius:7px}
@media (max-width:820px){
.album-grelha{grid-template-columns:1fr;justify-items:center}
.album-player{width:100%;max-width:350px}
}
/* ---------- Arte digital ---------- */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.galeria a{border:none}
.galeria .capa{display:block;position:relative;padding:7px;border:1px solid var(--linha);border-radius:7px;transition:border-color .4s}
.galeria .capa::before{content:"";position:absolute;inset:3px;border:1px solid var(--linha-tenue);pointer-events:none}
.galeria .capa img{width:100%;aspect-ratio:1/1;object-fit:cover}
.galeria a:hover .capa{border-color:var(--ouro-vivo)}
.video-moldura{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--linha-tenue);border-radius:7px;overflow:hidden}
.video-moldura iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.galeria-videos{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
@media (max-width:600px){.galeria-videos{gap:.8rem}}
@media (max-width:820px){.galeria{grid-template-columns:1fr 1fr}}
/* ---------- Donativos ---------- */
.donativos-grelha{
display:grid;grid-template-columns:repeat(3,1fr);
gap:2.2rem;max-width:1020px;margin:0 auto;
}
.donativo{text-align:center;padding:2.2rem 1.4rem}
.donativo h3{
font-family:"Cormorant Garamond",serif;font-weight:500;
font-size:1.45rem;letter-spacing:.05em;color:var(--marfim);
margin-bottom:.4rem;
}
.donativo .via{
display:block;font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;
color:var(--ouro);margin-bottom:1.4rem;
}
.donativo .dado{
color:var(--marfim);font-size:1.05rem;line-height:1.9;
letter-spacing:.04em;
}
.donativo .dado span{
display:block;font-size:.7rem;letter-spacing:.38em;text-transform:uppercase;
color:var(--marfim-secundario);margin-top:1rem;
}
@media (max-width:960px){.donativos-grelha{grid-template-columns:1fr}}
/* ---------- Loja em fundo escuro ---------- */
.ecwid-montra{background:transparent;border:none;padding:0}
.ecwid-utilidades{flex-direction:column;align-items:stretch;gap:1.8rem}
.ecwid-categorias{width:100%;text-align:center}
.ecwid-linha2{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;align-items:center}
/* Categorias por extenso, no registo do site */
#my-categories-717298 ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.4rem;padding:0;margin:0}
#my-categories-717298 li{margin:0;padding:0}
#my-categories-717298 a{
font-family:"EB Garamond",serif !important;
font-size:.84rem !important;letter-spacing:.28em !important;text-transform:uppercase !important;
color:var(--marfim-secundario) !important;background:transparent !important;
border:none !important;text-decoration:none !important;
}
#my-categories-717298 a:hover{color:var(--ouro-vivo) !important}
/* Ecwid sobre fundo escuro */
#my-store-717298 .ec-store,#my-store-717298 .ec-size,
#my-store-717298 .ec-store__content-wrapper{background:transparent !important}
#my-store-717298,#my-store-717298 .ec-store{color:var(--marfim) !important}
#my-store-717298 .grid-product__title-inner,
#my-store-717298 .ec-header-h1,#my-store-717298 .ec-header-h2,
#my-store-717298 .ec-header-h3,#my-store-717298 .ec-header-h4,
#my-store-717298 .product-details__product-title{color:var(--marfim) !important}
#my-store-717298 .grid-product__price,
#my-store-717298 .grid-product__price-value,
#my-store-717298 .details-product-price__value{color:var(--ouro-vivo) !important}
#my-store-717298 .ec-breadcrumbs,#my-store-717298 .ec-breadcrumbs a,
#my-store-717298 .ec-footer,#my-store-717298 .ec-footer a,
#my-store-717298 p,#my-store-717298 .ec-text-muted{color:var(--marfim-secundario) !important}
#my-store-717298 .form-control__button,#my-store-717298 .ec-link{color:var(--ouro-vivo) !important}
#my-search-717298 input{
background:transparent !important;color:var(--marfim) !important;
border:none !important;border-bottom:1px solid var(--linha) !important;
font-family:"EB Garamond",serif !important;
}
/* ---------- Carrinho na linha do menu (loja) ---------- */
.nav-carrinho a{
display:inline-flex;align-items:center;gap:.45rem;
border:none;
font-size:1.05rem;letter-spacing:.14em;
color:var(--marfim-secundario);white-space:nowrap;
line-height:1;
}
.nav-carrinho a:hover{color:var(--ouro-vivo)}
.nav-carrinho svg{
width:34px;height:34px;max-height:100%;
stroke:currentColor;fill:none;stroke-width:1.4;
display:block;
}
@media (max-width:1240px){
.nav-carrinho{position:static;transform:none;text-align:center;padding-bottom:.8rem}
}
/* ============================================================
AFINAÇÕES · quarta ronda
============================================================ */
/* Descrições dos produtos Ecwid — texto maior e legível */
#my-store-717298 .details-product-description,
#my-store-717298 .details-product-description *,
#my-store-717298 .details-product-description p,
#my-store-717298 .details-product-description span,
#my-store-717298 .details-product-description div,
#my-store-717298 .product-details__product-description,
#my-store-717298 .product-details__product-description *,
#my-store-717298 .ec-store .details-product-description,
#my-store-717298 .ec-store .details-product-description *{
font-size:1.18rem !important;
line-height:1.8 !important;
}
/* títulos e subtítulos dos produtos */
#my-store-717298 .grid-product__title,
#my-store-717298 .grid-product__title-inner,
#my-store-717298 .product-details__product-title{
font-size:1.35rem !important;line-height:1.35 !important;
}
#my-store-717298 .grid-product__subtitle,
#my-store-717298 .grid-product__sku{font-size:1rem !important}
/* preço */
#my-store-717298 .details-product-price__value,
#my-store-717298 .grid-product__price-value{font-size:1.4rem !important}
/* Widget de produto único v2 (páginas de livros) */
.ecsp-SingleProduct-v2,
.ecsp-SingleProduct-v2-bordered{
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
color:var(--marfim) !important;
}
.ecsp-SingleProduct-v2 .ecsp-title,
.ecsp-SingleProduct-v2 .ecsp-title *{
color:var(--marfim) !important;font-size:1.1rem !important;
}
.ecsp-SingleProduct-v2 .ecsp-price,
.ecsp-SingleProduct-v2 .ecsp-price *{color:var(--ouro-vivo) !important}
.ecsp-SingleProduct-v2 .ecsp-image img,
.ecsp-SingleProduct-v2 img{border:1px solid var(--linha-tenue)}
/* botão adicionar ao carrinho no registo do site */
.ecsp-SingleProduct-v2 button,
.ecsp-SingleProduct-v2 .form-control__button,
.ecsp-SingleProduct-v2 .ec-cart-item__button{
font-family:"EB Garamond",serif !important;
letter-spacing:.14em !important;
}
/* Pop-up / carrinho / checkout da Ecwid no tom do site (todas as páginas) */
.ec-minicart,.ec-minicart__body,.ec-minicart__wrap,
.ec-cart,.ec-cart__body,.ec-cart-step,
.ecwid-productBrowser,
.gwt-PopupPanel,.gwt-PopupPanelGlass,
.ec-notice,.popup__body,.popup,
.ec-modal,.ec-modal__body,.ec-modal__content,
.ec-overlay,.ec-overlay__window,.ec-overlay__body,
.ecwid-popup,.ecwid-popup-content,.ecwid-popup-container,
.ec-cart-email,.ec-cart-summary,.ec-cart-items,
[class*="ec-minicart"]:not([class*="picture"]):not([class*="image"]),
[class*="ec-cart"]:not([class*="picture"]):not([class*="image"]):not([class*="thumbnail"]){
background:var(--fundo-suave) !important;
background-color:var(--fundo-suave) !important;
color:var(--marfim) !important;
}
/* fundo/wrapper exterior branco do pop-up */
.ec-minicart__inner,.ec-cart__inner,
.ec-overlay,.gwt-PopupPanel > div,
.ecwid-popup-container{
background:var(--fundo-suave) !important;
}
/* véu por trás do pop-up */
.ec-overlay,.gwt-PopupPanelGlass,.ecwid-popup-overlay{
background:rgba(11,14,22,.86) !important;
}
/* texto legível em todo o pop-up */
.ec-minicart *,.ec-cart *,.gwt-PopupPanel *,
.ec-modal *,.ec-overlay *,.ecwid-popup *{
color:var(--marfim) !important;
}
/* preços e ligações em âmbar */
.ec-cart .ec-price,.ec-cart [class*="price"],
.ec-minicart [class*="price"]{color:var(--ouro-vivo) !important}
.ec-cart a,.ec-minicart a{color:var(--ceu-vivo) !important}
/* campos de texto (e-mail, cupão) no tom do site */
.ec-cart input,.ec-minicart input,.ec-modal input{
background:rgba(11,14,22,.5) !important;
color:var(--marfim) !important;
border:1px solid var(--linha) !important;
}
/* ---------- Donativos compactos e harmoniosos ---------- */
.donativos-grelha{
grid-template-columns:repeat(3,1fr);
gap:1.4rem;max-width:940px;
}
.quadro.donativo{
border-width:18px;
padding:1.6rem 1.4rem 1.8rem;
text-align:center;
display:flex;flex-direction:column;align-items:center;
}
.donativo .simbolo{
width:52px;height:52px;margin-bottom:1.1rem;
display:block;
}
.donativo h3{font-size:1.3rem;margin-bottom:.2rem}
.donativo .via{margin-bottom:1rem;font-size:.66rem;letter-spacing:.34em}
.donativo .dado{font-size:1rem;line-height:1.7;margin:0}
.donativo .dado strong{
display:block;color:var(--ouro-vivo);font-weight:500;
letter-spacing:.02em;font-size:1.08rem;
}
.donativo .dado span{
display:block;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
color:var(--marfim-secundario);margin-top:.7rem;margin-bottom:.1rem;
}
.donativo .chamada{margin-top:1.6rem}
@media (max-width:820px){.donativos-grelha{grid-template-columns:1fr;gap:1.1rem}}
/* ---------- Bloco Autor ---------- */
.autor{max-width:760px;margin:0 auto;position:relative}
.autor .retrato{
width:170px;height:170px;margin:0 auto -85px;position:relative;z-index:3;
border-radius:50%;overflow:hidden;
border:1px solid var(--ouro);padding:6px;background:var(--fundo);
}
.autor .retrato img{
width:100%;height:100%;object-fit:cover;border-radius:50%;
filter:grayscale(1) sepia(.28) brightness(.96);
transition:filter .5s;
}
.autor .retrato{transition:border-color .4s}
.autor:hover .retrato img{filter:grayscale(.15) sepia(.12)}
.autor:hover .retrato{border-color:var(--ouro-vivo)}
.autor .moldura-texto{
border:26px solid transparent;
border-image:url("../img/quadro.svg") 50 stretch;
padding:6.5rem clamp(2rem,5vw,4rem) 2.8rem;
text-align:center;
}
.autor .texto p{margin-bottom:1.2rem;color:var(--marfim);text-align:justify;hyphens:auto}
.autor .assinatura-autor{
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:1.35rem;color:var(--ouro-vivo);margin-top:.6rem;text-align:center;
}
@media (max-width:640px){
.autor .moldura-texto{border-width:18px;padding:5.5rem 1.4rem 2.2rem}
.autor .texto p{text-align:left;hyphens:none}
}
/* ---------- Timeline horizontal da bibliografia ---------- */
.bibliografia{
overflow-x:auto;overflow-y:hidden;cursor:grab;
scrollbar-width:thin;scrollbar-color:var(--ouro) transparent;
padding:2.5rem 0 1.6rem;-webkit-overflow-scrolling:touch;
max-width:1080px;margin:0 auto;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.bibliografia.a-arrastar{cursor:grabbing;user-select:none}
.bibliografia::-webkit-scrollbar{height:3px}
.bibliografia::-webkit-scrollbar-track{background:var(--linha-tenue)}
.bibliografia::-webkit-scrollbar-thumb{background:var(--ouro)}
.biblio-faixa{
list-style:none;display:flex;width:max-content;margin:0;
padding:0 clamp(1rem,4vw,3rem);position:relative;
}
.biblio-item{
width:clamp(180px,20vw,220px);flex-shrink:0;
padding:0 clamp(.9rem,1.8vw,1.6rem);text-align:center;position:relative;
}
.biblio-capa{
display:block;width:120px;height:180px;margin:0 auto 22px;
border:1px solid var(--linha-tenue);padding:5px;background:var(--fundo);
transition:border-color .4s;
}
.biblio-capa img{width:100%;height:100%;object-fit:cover;display:block}
.biblio-capa-vazia{width:120px;height:180px}
.biblio-item:hover .biblio-capa{border-color:var(--ouro)}
.biblio-item::before{
content:"";position:absolute;left:0;right:0;top:262px;height:1px;background:var(--linha);
}
.biblio-item:first-child::before{left:50%}
.biblio-item:last-child::before{right:50%}
.biblio-item::after{
content:"";position:absolute;left:50%;top:262px;width:9px;height:9px;
transform:translate(-50%,-50%) rotate(45deg);
background:var(--fundo);border:1px solid var(--ouro);
}
.biblio-datas{
height:66px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
.biblio-ano{
display:block;
font-family:"Cormorant Garamond",serif;font-size:1.5rem;line-height:1.1;color:var(--ouro-vivo);
}
.biblio-mes{
display:block;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;
color:var(--ceu-vivo);margin-top:.2rem;margin-bottom:.3rem;
}
.biblio-titulo{
margin-top:1.8rem;font-family:"EB Garamond",serif;
font-size:1.02rem;color:var(--marfim);line-height:1.45;
}
.biblio-editora{
display:block;margin-top:.5rem;font-style:italic;
font-size:.86rem;color:var(--marfim-secundario);
}
.biblio-nota{
text-align:center;margin-top:.6rem;
font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;
color:var(--marfim-secundario);opacity:.7;
}
@media (max-width:640px){.biblio-item{width:70vw}}
/* ---------- Lightbox ---------- */
.lightbox{
position:fixed;inset:0;z-index:2000;
background:rgba(11,14,22,.94);
display:none;align-items:center;justify-content:center;
padding:5vh 5vw;cursor:zoom-out;
}
.lightbox.aberto{display:flex}
.lightbox img{
max-width:100%;max-height:90vh;
border:1px solid var(--linha);
box-shadow:0 20px 80px rgba(0,0,0,.6);
}
.lightbox .fechar{
position:absolute;top:26px;right:34px;
color:var(--ouro-vivo);font-size:2.4rem;line-height:1;
background:none;border:none;cursor:pointer;
}
/* ---------- Botões Ecwid no tom do site (âmbar) ---------- */
.ec-store button.form-control__button,
.ec-store .btn,
.ec-store .btn--primary,
.ec-store .form-control__button--primary,
.ecsp button,
.ecwid button.form-control__button,
.ecwid-btn--primary,
button.details-product-purchase__add-to-bag,
.ec-cart button.form-control__button,
.ec-cart__button button,
.ecsp-SingleProduct-v2 button{
background:var(--ouro) !important;
background-image:none !important;
border:1px solid var(--ouro) !important;
color:#1B2436 !important;
box-shadow:none !important;
text-transform:uppercase !important;
letter-spacing:.14em !important;
transition:background .3s !important;
}
.ec-store button.form-control__button:hover,
.ec-store .btn--primary:hover,
.ecsp button:hover,
button.details-product-purchase__add-to-bag:hover,
.ec-cart button.form-control__button:hover,
.ecsp-SingleProduct-v2 button:hover{
background:var(--ouro-vivo) !important;
border-color:var(--ouro-vivo) !important;
color:#1B2436 !important;
}
/* botões secundários (contornados) */
.ec-store .btn--secondary,
.ec-store .form-control__button--secondary{
background:transparent !important;
border:1px solid var(--ouro) !important;
color:var(--ouro-vivo) !important;
}
/* Widget de produto v2 — remover toda a moldura/caixa própria */
.ecsp-SingleProduct-v2,
.ecsp-SingleProduct-v2-bordered,
.ecsp-SingleProduct-v2-centered,
.ec-Product,
.ecsp.ecsp-Product{
border:0 !important;
box-shadow:none !important;
outline:0 !important;
background:transparent !important;
padding:0 !important;
}
.ecsp-SingleProduct-v2 *{box-shadow:none !important}
/* Esconder o seletor de quantidade nos embeds de produto (páginas de livros) */
.ecsp-SingleProduct-v2 [customprop="qty"],
.ecsp-SingleProduct-v2 .ecsp-qty,
.ecsp-SingleProduct-v2 .details-product-purchase__qty,
.ecsp-SingleProduct-v2 .product-details-module--qty,
.ecsp-SingleProduct-v2 .form-control--qty,
.ecsp-SingleProduct-v2 .ec-qty,
.ecsp-SingleProduct-v2 .ecsp-productBrowser-qty{
display:none !important;
}
/* Botões Ecwid — texto sempre legível (corrige texto que some no hover) */
.ec-store button.form-control__button,
.ec-store .form-control__button,
.ec-store .btn--primary,
.ecsp button,
.ecsp-SingleProduct-v2 button,
button.details-product-purchase__add-to-bag,
.ec-cart button.form-control__button{
color:#12161F !important;
}
.ec-store button.form-control__button *,
.ec-store .form-control__button *,
.ec-store .btn--primary *,
.ecsp button *,
.ecsp-SingleProduct-v2 button *,
button.details-product-purchase__add-to-bag *,
.ec-cart button.form-control__button *,
.form-control__button-text,
.form-control__button-inner{
color:#12161F !important;
opacity:1 !important;
}
/* estados hover / focus / active — manter fundo âmbar e texto escuro */
.ec-store button.form-control__button:hover,
.ec-store .form-control__button:hover,
.ec-store .btn--primary:hover,
.ecsp button:hover,
.ecsp-SingleProduct-v2 button:hover,
button.details-product-purchase__add-to-bag:hover,
.ec-cart button.form-control__button:hover,
.ec-store button.form-control__button:focus,
.ec-store button.form-control__button:active{
background:var(--ouro-vivo) !important;
color:#12161F !important;
}
.ec-store button.form-control__button:hover *,
.ecsp-SingleProduct-v2 button:hover *,
button.details-product-purchase__add-to-bag:hover *{
color:#12161F !important;
}
/* Esconder o ícone/seta que a Ecwid coloca sobre o texto do botão */
.ec-store button.form-control__button::before,
.ec-store button.form-control__button::after,
.ec-store .form-control__button::before,
.ec-store .form-control__button::after,
.ec-store .btn--primary::before,
.ec-store .btn--primary::after,
.ecsp button::before,
.ecsp button::after,
.ecsp-SingleProduct-v2 button::before,
.ecsp-SingleProduct-v2 button::after,
button.details-product-purchase__add-to-bag::before,
button.details-product-purchase__add-to-bag::after,
.form-control__button-icon,
.form-control__loader,
.ec-cart button.form-control__button::before,
.ec-cart button.form-control__button::after{
display:none !important;
content:none !important;
background:none !important;
}
/* Rede larga: esconder QUALQUER svg/ícone dentro dos botões de compra da Ecwid */
.ec-store button svg,
.ec-store .btn svg,
.ec-store .form-control__button svg,
.ecsp button svg,
.ecsp-SingleProduct-v2 button svg,
button.details-product-purchase__add-to-bag svg,
.ec-cart button svg,
.ec-store button i,
.ec-store button .icon,
.ec-store button [class*="icon"],
.ec-store button [class*="loader"],
.ec-store button [class*="Icon"],
.ecsp button [class*="icon"],
.ecsp-SingleProduct-v2 button [class*="icon"]{
display:none !important;
width:0 !important;height:0 !important;
visibility:hidden !important;
}
/* garantir que o texto do botão fica centrado sem o espaço do ícone */
.ec-store .form-control__button-inner,
.ecsp-SingleProduct-v2 .form-control__button-inner{
justify-content:center !important;
}
/* ============================================================
Pop-up clássico da Ecwid (ecwid-popup-*) — fundo do site
Classes confirmadas no inspector: .ecwid-popup, .popupContent,
.ecwid-popup-touchLimiter, .ecwid-popup-content
Alta especificidade para vencer as regras internas da Ecwid.
============================================================ */
body#ecwid_body .ecwid-popup,
body#ecwid_body .ecwid-popup .popupContent,
body#ecwid_body .ecwid-popup-touchLimiter,
body#ecwid_body .ecwid-popup-content,
html#ecwid_html body .ecwid-popup-content,
html#ecwid_html body .popupContent,
.ecwid-popup,.ecwid-popup .popupContent,
.ecwid-popup-touchLimiter,.ecwid-popup-content{
background:var(--fundo-suave) !important;
background-color:var(--fundo-suave) !important;
color:var(--marfim) !important;
}
/* a tabela interior do pop-up também é branca por defeito */
body#ecwid_body .ecwid-popup table,
body#ecwid_body .ecwid-popup td,
body#ecwid_body .ecwid-popup tbody,
body#ecwid_body .ecwid-popup tr{
background:transparent !important;
}
/* véu de fundo */
body#ecwid_body .ecwid-overlay,
#ecwid_body .ecwid-overlay{
background:rgba(11,14,22,.86) !important;
}
/* texto legível dentro do pop-up clássico */
body#ecwid_body .ecwid-popup-content *,
.ecwid-popup-content *{
color:var(--marfim) !important;
}
/* preços em âmbar, ligações em azul-céu */
body#ecwid_body .ecwid-popup-content [class*="price"],
.ecwid-popup-content [class*="price"]{color:var(--ouro-vivo) !important}
body#ecwid_body .ecwid-popup-content a,
.ecwid-popup-content a{color:var(--ceu-vivo) !important}
/* campos de texto */
body#ecwid_body .ecwid-popup-content input,
.ecwid-popup-content input{
background:rgba(11,14,22,.5) !important;
color:var(--marfim) !important;
border:1px solid var(--linha) !important;
}
/* Proteger as miniaturas dos produtos no carrinho (não apagar o background-image) */
.ecwid-popup-content .ec-cart-item__image,
.ecwid-popup-content .ec-cart-item__picture,
.ecwid-popup-content [class*="cart-item__image"],
.ecwid-popup-content [class*="cart-item__picture"],
.ecwid-popup-content [class*="item__thumbnail"],
.ecwid-popup-content .grid-product__image,
body#ecwid_body .ecwid-popup-content [class*="image"],
body#ecwid_body .ecwid-popup-content [class*="thumbnail"],
body#ecwid_body .ecwid-popup-content [class*="picture"]{
background-color:transparent !important;
background-image:var(--ec-thumb,none);
}
/* NÃO sobrepor o background dos elementos que usam background-image para a capa */
.ecwid-popup-content [style*="background-image"]{
background-color:transparent !important;
}
.ecwid-popup-content [style*="background-image"]{
/* preservar a imagem inline definida pela Ecwid */
background-image:unset;
}
/* imagens ![]()
visíveis */
.ecwid-popup-content img{
opacity:1 !important;visibility:visible !important;display:block !important;
}
/* Capa dos produtos no carrinho — classe confirmada: ec-cart-item__picture-inner
Restaurar o background-image inline que a Ecwid define. */
.ec-cart-item__picture-inner,
.ec-cart-item__picture,
.ec-cart-item__image,
body#ecwid_body .ec-store .ec-cart-item__picture-inner{
background-color:transparent !important;
background-repeat:no-repeat !important;
background-size:cover !important;
background-position:center center !important;
}
/* garantir que nada torna a miniatura transparente/oculta */
.ec-cart-item__picture-inner{opacity:1 !important;visibility:visible !important}
/* Mensagem de estado dos formulários */
.estado-form{
text-align:center;margin-top:1.4rem;min-height:1.4rem;
font-size:1rem;letter-spacing:.02em;
}
.estado-form.sucesso{color:var(--ceu-vivo)}
.estado-form.erro{color:#D98A78}
/* Nota de privacidade sob o formulário de newsletter */
.nota-privacidade{
text-align:center;margin-top:1.6rem;max-width:34rem;margin-inline:auto;
font-size:.82rem;line-height:1.6;color:var(--marfim-secundario);opacity:.8;
font-style:italic;
}
/* Submenu «Páginas» — alinhamento à esquerda garantido */
nav.principal ul.submenu{align-items:stretch !important;text-align:left !important}
nav.principal ul.submenu li{width:100% !important;text-align:left !important}
nav.principal ul.submenu a{
display:flex !important;justify-content:flex-start !important;
align-items:center !important;text-align:left !important;width:100% !important;
}
/* ==================================================================
REVISÃO DE DESIGN — polimento sem perda de identidade
================================================================== */
/* --- 1. Tipografia refinada ------------------------------------- */
body{
text-rendering:optimizeLegibility;
font-feature-settings:"liga","kern";
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* números em estilo antigo, próprios da tipografia clássica */
p,li,.biblio-ano,.marco time{font-variant-numeric:oldstyle-nums}
/* medida de leitura confortável nos textos corridos */
.texto p, .prosa p{max-width:38rem;margin-left:auto;margin-right:auto}
/* --- 2. Selecção de texto no tom da casa ------------------------- */
::selection{background:rgba(199,154,126,.32);color:#F5F1E8}
::-moz-selection{background:rgba(199,154,126,.32);color:#F5F1E8}
/* --- 3. Barra de deslocamento discreta --------------------------- */
html{scrollbar-width:thin;scrollbar-color:rgba(199,154,126,.45) #141B2A}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:#141B2A}
body::-webkit-scrollbar-thumb{
background:rgba(199,154,126,.4);border:2px solid #141B2A;border-radius:6px;
}
body::-webkit-scrollbar-thumb:hover{background:rgba(235,198,162,.6)}
/* --- 4. Estados de foco elegantes (acessibilidade com estilo) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
outline:1px solid var(--ouro-vivo);outline-offset:3px;border-radius:1px;
}
/* --- 5. Transições coesas em elementos interactivos -------------- */
a,button{transition:color .35s ease,background-color .35s ease,border-color .35s ease,opacity .35s ease}
/* --- 6. Rótulos de secção com fio lateral ------------------------ */
/* --- 7. Títulos de secção: respiro e presença --------------------- */
.titulo{letter-spacing:.01em}
.bloco .limite > .titulo{margin-bottom:1.1em}
/* --- 8. Botões: acabamento -------------------------------------- */
button,.botao{position:relative}
button:hover{letter-spacing:.19em}
button{transition:letter-spacing .4s ease,color .35s,background-color .35s,border-color .35s}
/* --- 9. Ligações no corpo do texto: sublinhado fino descolado ---- */
main p a{
text-decoration:none;
border-bottom:1px solid rgba(199,154,126,.45);
padding-bottom:1px;
transition:border-color .3s,color .3s;
}
main p a:hover{border-color:var(--ouro-vivo);color:var(--ouro-vivo)}
/* --- 10. Imagens: leve suavidade ---------------------------------- */
img{image-rendering:auto}
/* --- 11. Formulários: campos com estados refinados ---------------- */
.formal input,.formal textarea{
transition:border-color .35s,background-color .35s;
}
.formal input:hover,.formal textarea:hover{border-color:rgba(199,154,126,.55)}
.formal input:focus,.formal textarea:focus{
border-color:var(--ouro-vivo);
background:rgba(235,198,162,.03);
}
.formal label{transition:color .3s}
.formal .campo:focus-within label{color:var(--ouro-vivo)}
/* --- 12. Aparição suave das secções ao rolar ---------------------- */
@media (prefers-reduced-motion:no-preference){
.apar{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.apar.visto{opacity:1;transform:none}
}
/* --- 13. Citação com aspas ornamentais ---------------------------- */
.citacao blockquote{position:relative}
.citacao blockquote::before{
content:"“";
position:absolute;top:-.55em;left:50%;transform:translateX(-50%);
font-family:"Cormorant Garamond",serif;font-size:4.6rem;line-height:1;
color:var(--ouro);opacity:.35;pointer-events:none;
}
/* --- 14. Rodapé: fio superior duplo fino --------------------------- */
footer.rodape{position:relative}
footer.rodape::before{
content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
width:120px;height:1px;background:var(--linha-tenue);
}
/* --- 15. Cartões de obra: elevação subtil no hover ----------------- */
.obra{transition:transform .5s ease}
.obra:hover{transform:translateY(-4px)}
.obra .capa{transition:border-color .45s}
/* --- 16. Medalhões e retratos: anel de respiro --------------------- */
.marco figure,.autor .retrato{box-shadow:0 0 0 6px rgba(27,36,54,.85)}
/* --- Herói: indicador de descida ---------------------------------- */
.heroi .desce{
position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
width:1px;height:52px;overflow:hidden;opacity:.55;
}
.heroi .desce::before{
content:"";position:absolute;left:0;top:-52px;width:1px;height:52px;
background:linear-gradient(to bottom,transparent,var(--ouro-vivo));
}
@media (prefers-reduced-motion:no-preference){
.heroi .desce::before{animation:descer 2.6s ease-in-out infinite}
@keyframes descer{
0%{top:-52px}
60%,100%{top:52px}
}
}
/* ==================================================================
BOOST VISUAL — atmosfera e cerimónia (todas as páginas)
================================================================== */
/* --- Céu estrelado: duas camadas de estrelas fixas atrás do conteúdo --- */
body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:
radial-gradient(1.2px 1.2px at 12% 18%, rgba(235,198,162,.55), transparent 60%),
radial-gradient(1px 1px at 28% 64%, rgba(169,183,214,.45), transparent 60%),
radial-gradient(1.4px 1.4px at 41% 9%, rgba(235,198,162,.4), transparent 60%),
radial-gradient(1px 1px at 57% 41%, rgba(169,183,214,.5), transparent 60%),
radial-gradient(1.1px 1.1px at 66% 78%, rgba(235,198,162,.38), transparent 60%),
radial-gradient(1.5px 1.5px at 79% 22%, rgba(220,197,196,.42), transparent 60%),
radial-gradient(1px 1px at 89% 55%, rgba(169,183,214,.42), transparent 60%),
radial-gradient(1.2px 1.2px at 8% 84%, rgba(169,183,214,.36), transparent 60%),
radial-gradient(1px 1px at 47% 91%, rgba(235,198,162,.32), transparent 60%),
radial-gradient(1.3px 1.3px at 94% 88%, rgba(235,198,162,.3), transparent 60%);
background-size:1100px 1100px;
background-repeat:repeat;
}
body::after{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:
radial-gradient(1px 1px at 22% 33%, rgba(238,232,218,.5), transparent 60%),
radial-gradient(.9px .9px at 63% 12%, rgba(238,232,218,.4), transparent 60%),
radial-gradient(1px 1px at 83% 69%, rgba(238,232,218,.35), transparent 60%),
radial-gradient(.8px .8px at 36% 82%, rgba(238,232,218,.34), transparent 60%),
radial-gradient(1px 1px at 74% 44%, rgba(238,232,218,.3), transparent 60%);
background-size:700px 700px;
background-repeat:repeat;
animation:cintilar 9s ease-in-out infinite alternate;
}
@keyframes cintilar{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}
/* --- Geometria sagrada: Flor da Vida como marca de água ------------- */
@media (prefers-reduced-motion:no-preference){
@keyframes girar{to{transform:translate(-50%,-50%) rotate(360deg)}}
}
footer.rodape{overflow:hidden}
footer.rodape::after{
content:"";position:absolute;left:50%;bottom:-46%;
width:620px;height:620px;transform:translateX(-50%);
background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23C79A7E%22%20stroke-width%3D%220.6%22%3E%3Cg%20opacity%3D%221%22%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2272%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%22124.2%22%20cy%3D%2286%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%22124.2%22%20cy%3D%22114%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22128%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%2275.8%22%20cy%3D%22114%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%2275.8%22%20cy%3D%2286%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2244%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%22148.5%22%20cy%3D%2272%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%22148.5%22%20cy%3D%22128%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22156%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%2251.5%22%20cy%3D%22128%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%2251.5%22%20cy%3D%2272%22%20r%3D%2228%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2256%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2284%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
opacity:.05;pointer-events:none;
}
/* --- Títulos de secção: ornamento e halo ---------------------------- */
.bloco .limite .titulo{
position:relative;
text-shadow:0 0 34px rgba(235,198,162,.14);
}
.bloco .limite .titulo::before{
content:"";display:block;width:7px;height:7px;margin:0 auto 1.1rem;
transform:rotate(45deg);
border:1px solid var(--ouro);opacity:.65;
}
/* --- Letra capitular nos textos de abertura -------------------------- */
.autor .texto p:first-of-type::first-letter,
.capitular::first-letter{
font-family:"Cormorant Garamond",serif;
font-size:3.4em;line-height:.78;
float:left;padding:.08em .12em 0 0;
color:var(--ouro-vivo);
}
/* --- Molduras douradas: brilho interior ao pairar --------------------- */
.quadro{transition:box-shadow .7s ease}
.quadro:hover{box-shadow:inset 0 0 60px rgba(199,154,126,.07)}
/* --- Herói: respiração lenta do alpenglow ------------------------------ */
.heroi .respira{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(70% 55% at 50% 42%, rgba(235,198,162,.14), transparent 70%);
mix-blend-mode:screen;
}
@media (prefers-reduced-motion:no-preference){
.heroi .respira{animation:respirar 11s ease-in-out infinite alternate}
@keyframes respirar{from{opacity:.45}to{opacity:1}}
}
/* --- Cartões de música/arte e obras: véu dourado ao pairar ------------- */
.obra{position:relative}
.obra::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(160deg, rgba(235,198,162,.08), transparent 45%);
opacity:0;transition:opacity .6s;
}
.obra:hover::after{opacity:1}
/* --- Molduras douradas: montanha em marca de água (base -> fade no topo)
A imagem estende-se por baixo da própria moldura, até ao limite
exterior (inset negativo = largura da border), com z-index:-1 para
a moldura dourada pintar por cima. --- */
.quadro,.autor .moldura-texto{position:relative}
.quadro::before,.autor .moldura-texto::before{
content:"";position:absolute;inset:-20px;pointer-events:none;z-index:-1;
background:url("../img/himalaia-leve.webp") no-repeat bottom center/cover;
opacity:.24;
-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 52%,transparent 96%);
mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 52%,transparent 96%);
}
@media (max-width:640px){
.autor .moldura-texto::before{inset:-9px}
}
/* ==================== Carrossel de testemunhos ==================== */
.testemunhos{
display:flex;align-items:center;gap:clamp(.5rem,2vw,1.6rem);
max-width:940px;margin:6rem auto 0;
}
.test-palco{
position:relative;flex:1;min-height:340px;
display:grid;place-items:center;
}
.test-item{
grid-area:1/1;margin:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:0 clamp(1rem,4vw,3rem);
opacity:0;visibility:hidden;transform:translateY(12px);
transition:opacity .7s ease,transform .7s ease,visibility .7s;
}
.test-item.activo{opacity:1;visibility:visible;transform:none}
.test-item blockquote{
margin:0 0 1.6rem;border:none;padding:0;
font-family:"Cormorant Garamond",serif;font-style:italic;
font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.5;color:var(--marfim);
position:relative;
}
.test-item blockquote::before{
content:"“";position:absolute;top:-.5em;left:50%;transform:translateX(-50%);
font-family:"Cormorant Garamond",serif;font-size:7rem;line-height:1;
color:var(--ouro);opacity:.28;pointer-events:none;
}
.test-item figcaption{
font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;
color:var(--ouro-vivo);margin-top:.6rem;
}
.test-nav{
flex:0 0 auto;width:52px;height:52px;border-radius:50%;
background:transparent;border:1px solid var(--linha);
color:var(--ouro-vivo);font-size:1.7rem;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:border-color .35s,background .35s,color .35s;padding-bottom:3px;
}
.test-nav:hover{border-color:var(--ouro-vivo);background:rgba(199,154,126,.10)}
.test-pontos{
display:flex;justify-content:center;gap:.7rem;margin-top:3.2rem;
}
.test-ponto{
width:8px;height:8px;transform:rotate(45deg);
background:transparent;border:1px solid var(--ouro);opacity:.5;
cursor:pointer;transition:opacity .35s,background .35s;
}
.test-ponto.activo{opacity:1;background:var(--ouro)}
@media (max-width:640px){
.test-nav{width:42px;height:42px;font-size:1.4rem}
.test-palco{min-height:220px}
.test-item blockquote::before{font-size:4.6rem;top:-.35em}
.test-pontos{margin-top:2.4rem}
}
/* Carrinho como entrada normal do menu (a seguir a Contactar) */
.carrinho-abrir{
display:inline-flex;align-items:center;gap:.5rem;
color:var(--marfim);
}
.carrinho-abrir:hover{color:var(--ouro-vivo)}
.carrinho-abrir svg,
.carrinho-abrir svg path,
.carrinho-abrir svg *{
fill:none !important;
stroke:currentColor !important;
stroke-width:1.4 !important;
stroke-linecap:round;stroke-linejoin:round;
}
.carrinho-abrir svg{width:22px;height:22px;display:block}
.carrinho-abrir .carrinho-qtd{font-variant-numeric:normal}
/* Tag de tradução no canto do livro (activada pela língua do GTranslate) */
.livro{position:relative}
.tag-traduzido{
position:absolute;top:0;right:0;z-index:5;
display:none;align-items:center;gap:.4rem;
background:var(--ouro);color:#12161F;
font-family:"EB Garamond",serif;font-size:.72rem;letter-spacing:.12em;
text-transform:uppercase;padding:.42rem .8rem;
border-bottom-left-radius:4px;
box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.tag-traduzido.visivel{display:inline-flex}
.tag-traduzido svg{width:13px;height:13px;fill:none;stroke:#12161F;stroke-width:1.6}
/* Capa traduzida (substitui o embed de compra quando há tradução na língua activa) */
.capa-traduzida{display:none;border:none}
.capa-traduzida img{width:100%;display:block;border:1px solid var(--linha-tenue)}
.livro-topo .capa.mostra-traducao .embed-compra,
.livro-topo .capa.mostra-original .embed-compra{display:none !important}
.livro-topo .capa.mostra-traducao .capa-traduzida.activa{display:block !important}
.capa-original{display:none;border:none}
.capa-original img{width:100%;display:block;border:1px solid var(--linha-tenue)}
.livro-topo .capa.mostra-original .capa-original.activa{display:block !important}
/* Donativos: ajustar a marca de água ao fio da moldura (borda pode diferir) */
.donativo.quadro::before{inset:-13px}
/* Esconder o mini-carrinho flutuante da Ecwid (canto inferior direito) */
.ec-minicart,
.ec-minicart--position-bottom-right,
.ec-minicart--layout-attached,
[class*="ec-minicart"],
.ecwid-minicart,
#ecwid_minicart{
display:none !important;
}
/* o ![]()
interior é um placeholder transparente — esticá-lo para cobrir */
.gtranslate_wrapper a.gflag img,
.gtranslate_wrapper .gflag img{
width:100% !important;height:100% !important;
border-radius:50% !important;
object-fit:cover !important;object-position:center !important;
display:block;
}
/* caso o widget use ![]()
directo (sem sprite) */
.gtranslate_wrapper > img,
.gtranslate_wrapper span img{
width:30px !important;height:30px !important;
border-radius:50% !important;object-fit:cover !important;object-position:center !important;
box-shadow:0 0 0 1px rgba(199,154,126,.5);
}
/* ===== Bandeiras GTranslate — imagem maior que o círculo, para preencher ===== */
.gtranslate_wrapper{position:fixed;top:70px;right:84px;z-index:1100}
.gt_switcher_wrapper{
display:flex !important;gap:7px !important;align-items:center;
position:fixed !important;top:30px !important;right:28px !important;
}
.gt_switcher_wrapper a.glink{
display:inline-flex !important;align-items:center;justify-content:center;
width:20px !important;height:20px !important;
border-radius:50% !important;overflow:hidden !important;
box-shadow:0 0 0 1px rgba(199,154,126,.5);
transition:box-shadow .3s,transform .3s;
}
.gt_switcher_wrapper a.glink:hover{
box-shadow:0 0 0 1px var(--ouro-vivo),0 0 10px rgba(235,198,162,.4);
transform:translateY(-1px);
}
/* imagem MAIOR que o círculo -> transborda e o overflow:hidden recorta -> círculo cheio */
.gt_switcher_wrapper a.glink img{
width:29px !important;height:29px !important;
min-width:29px !important;min-height:29px !important;
max-width:none !important;
object-fit:cover !important;object-position:center !important;
display:block !important;
filter:saturate(.86) brightness(.96);
}
.gt_switcher_wrapper a.glink:hover img{filter:none}
/* Vídeos da Alquimia por língua */
.video-grupo{display:none !important}
.video-grupo.activo{display:block !important}
.video-grupo .video-moldura:first-child{margin-top:0}
/* Espaçamento dos vídeos da Alquimia */
.videos-alquimia{margin-top:2.2rem}
.video-grupo .video-moldura{margin-top:1rem}
.video-grupo .video-moldura:first-child{margin-top:0}
/* ============================================================
CORRECÇÕES DE LAYOUT MOBILE — 12/07/2026
============================================================ */
/* --- 1. Bandeiras GTranslate: linha própria no topo (≤640px) ---
No telemóvel deixam de ser fixas e passam a fluir como faixa
centrada acima do cabeçalho. Assim, ao rolar, já não caem por
cima do menu fixo (nav.principal · position:sticky · top:0). */
@media (max-width:640px){
.gtranslate_wrapper{
position:absolute !important;z-index:1101 !important;
top:0 !important;right:0 !important;left:auto !important;
width:auto !important;text-align:right;
}
/* Canto superior direito, por baixo do ornamento do canto (30px) e
afastado da linha da moldura (8px em mobile). Os -6px de margem da
regra .gt-recolhido descontam: fica a 28px do topo e 16px da direita. */
.gt_switcher_wrapper{
position:absolute !important;
top:34px !important;right:22px !important;left:auto !important;
justify-content:flex-end !important;
gap:7px !important;
}
}
/* --- 2. Etiqueta "Disponível em X": não sobrepor a capa (≤640px) ---
Com a capa centrada no topo em mobile, a etiqueta (absoluta,
top/right:0) caía por cima da capa. Passa a faixa centrada acima
da capa; o espaço só é reservado quando está visível (língua ≠ pt). */
@media (max-width:640px){
.tag-traduzido{
left:50% !important;right:auto !important;
transform:translateX(-50%);
top:.3rem;white-space:nowrap;
border-radius:4px;
font-size:.64rem;padding:.36rem .72rem;
}
.livro:has(.tag-traduzido.visivel) .livro-topo{
padding-top:2.9rem;
}
}
/* --- 3. Alquimia · vídeos transbordavam a moldura e descentravam a capa ---
As iframes têm largura intrínseca (~300px). Como os itens do grid
.livro-topo tinham min-width:auto, a coluna não encolhia abaixo disso:
o conteúdo saía da moldura e, por arrasto, a capa (margin:0 auto)
deixava de centrar. min-width:0 permite encolher e resolve ambos. */
.livro-topo{min-width:0}
.livro-topo > *{min-width:0}
.videos-alquimia,.video-grupo,.video-moldura{max-width:100%}
/* --- 4. Linhas de ligações (Edições/Traduções): quebrar entre nomes ---
Os nomes das línguas não têm espaços entre si no HTML (só ·), pelo que
formavam um bloco sem pontos de quebra e transbordavam a moldura na
Alquimia (5 traduções). Permite quebrar ENTRE itens, mantendo cada
nome/ligação inteiro (nunca "Fran-çais"). */
.ligacoes{overflow-wrap:anywhere}
.ligacoes a{white-space:nowrap}
/* Loja em destaque no menu — moldura própria, junto ao carrinho */
.nav-loja-destaque{
display:flex;align-items:center;gap:.8rem;
border:1px solid var(--ouro);
border-radius:7px;
padding:.3rem .9rem;
}
.nav-loja-destaque .nav-loja-link{color:var(--ouro-vivo)}
.nav-loja-destaque .nav-loja-link:hover{color:var(--marfim)}
/* ============================================================
Chama · marca de água no cabeçalho — 13/07/2026
Chama em gradiente de fogo, muito suave, por detrás do nome.
Base ligeiramente acima do lema; pontas sobem acima do nome.
Só CSS: aplica-se a todas as páginas sem tocar no HTML.
============================================================ */
.marca .nome{position:relative;z-index:0}
.marca .nome::before{
content:"";
position:absolute;
left:50%;bottom:-0.12em; /* barriga da chama ao nível do O·E (line-height 1.1) */
transform:translateX(calc(-50% + .14em)); /* centro do vão entre PEDRO·ELIAS */
height:2.1em; /* acompanha o tamanho do nome */
aspect-ratio:387/600;
background:url("../img/fogo.png") no-repeat center bottom/contain;
opacity:.30;
pointer-events:none;
z-index:-1;
}
/* --- Nome no cabeçalho em mobile: uma só linha ---
O mínimo fixo (2.3rem) excedia a largura em ecrãs estreitos e o nome
quebrava (PEDRO / ELIAS). Passa a escalar com o ecrã, com tecto, e
nunca quebra. A chama acompanha (dimensões em em). */
@media (max-width:640px){
.marca .nome{
font-size:min(7.2vw,2.1rem);
white-space:nowrap;
}
}
/* --- Bandeiras recolhidas: só a língua activa; expandem ao passar o rato/tocar --- */
.gt_switcher_wrapper.gt-recolhido a.glink{display:none !important}
.gt_switcher_wrapper.gt-recolhido a.glink.gt-activa{display:inline-flex !important}
.gt_switcher_wrapper.gt-recolhido:hover a.glink,
.gt_switcher_wrapper.gt-recolhido:focus-within a.glink,
.gt_switcher_wrapper.gt-recolhido.gt-aberto a.glink{display:inline-flex !important}
/* área de rato mais generosa (evita fechar sem querer) */
.gt_switcher_wrapper.gt-recolhido{padding:6px !important;margin:-6px !important}
/* a bandeira activa sugere que há mais: anel ténue */
.gt_switcher_wrapper.gt-recolhido a.glink.gt-activa{
box-shadow:0 0 0 1px rgba(199,154,126,.75),0 0 0 4px rgba(235,198,162,.12);
cursor:pointer;
}
.gt_switcher_wrapper.gt-recolhido:hover a.glink.gt-activa,
.gt_switcher_wrapper.gt-recolhido.gt-aberto a.glink.gt-activa{
box-shadow:0 0 0 1px var(--ouro-vivo),0 0 10px rgba(235,198,162,.4);
}
/* Seta de menu ao lado da bandeira activa (indica que há mais línguas) */
/* Seta de menu: elemento real (área de clique de 18px, o triângulo é decorativo) */
.gt-seta{
display:none;flex:none;cursor:pointer;
width:18px;height:18px;margin-left:-1px;
align-items:center;justify-content:center;
}
.gt_switcher_wrapper.gt-recolhido .gt-seta{display:inline-flex}
.gt-seta::after{
content:"";display:block;width:0;height:0;
border-left:3.5px solid transparent;
border-right:3.5px solid transparent;
border-top:4.5px solid var(--ouro);
opacity:.9;transition:transform .3s,opacity .3s;
pointer-events:none;
}
.gt_switcher_wrapper.gt-recolhido:hover .gt-seta::after,
.gt_switcher_wrapper.gt-recolhido.gt-aberto .gt-seta::after{
transform:rotate(180deg);border-top-color:var(--ouro-vivo);opacity:1;
}
.gt_switcher_wrapper.gt-recolhido.gt-fechar-forcado:hover .gt-seta::after{transform:none}
/* Após escolher uma língua, recolhe de imediato mesmo com o rato em cima */
.gt_switcher_wrapper.gt-recolhido.gt-fechar-forcado:hover a.glink,
.gt_switcher_wrapper.gt-recolhido.gt-fechar-forcado:focus-within a.glink{display:none !important}
.gt_switcher_wrapper.gt-recolhido.gt-fechar-forcado:hover a.glink.gt-activa,
.gt_switcher_wrapper.gt-recolhido.gt-fechar-forcado:focus-within a.glink.gt-activa{display:inline-flex !important}
.gt_switcher_wrapper.gt-recolhido.gt-fechar-forcado:hover::after{transform:none}
/* Botão COMPRAR nas capas traduzidas (línguas sem embed de compra) */
.btn-comprar{
display:none;
margin-top:1rem;padding:.6rem 1.1rem;
background:transparent;color:var(--marfim);
border:1px solid var(--ouro);border-radius:7px;
font-family:"EB Garamond",Georgia,serif;font-size:.82rem;
letter-spacing:.16em;text-transform:uppercase;text-align:center;
transition:background .3s,color .3s,border-color .3s;
}
.livro-topo .capa.mostra-traducao .btn-comprar{display:block}
.btn-comprar:hover{background:var(--ouro);border-color:var(--ouro);color:#12161F}
/* Ícone de doar (mãos que dão, com um coração), à direita da Loja.
Desenhado como máscara: a cor vem do CSS — o âmbar da moldura da Loja. */
.nav-doar{margin-left:-.4rem;margin-top:.35rem}
.nav-doar a{
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--ouro);border-radius:7px;
padding:.34rem .7rem;color:var(--ouro);
transition:background .3s,color .3s,border-color .3s;
}
.nav-doar a:hover{background:rgba(199,154,126,.10);color:var(--ouro-vivo);border-color:var(--ouro-vivo)}
.ic-doar{
display:block;width:30px;height:24px;
background-color:currentColor;
-webkit-mask:url("../img/doacao.png") no-repeat center/contain;
mask:url("../img/doacao.png") no-repeat center/contain;
}
/* ============================================================
Perguntas e Respostas — pesquisa, categorias e cartões
============================================================ */
/* --- Caixa de pesquisa --- */
.faq-busca{
position:relative;max-width:520px;margin:2.4rem auto 0;
}
.faq-busca input{
width:100%;box-sizing:border-box;
padding:.9rem 2.8rem .9rem 3rem;
background:rgba(27,36,54,.55);
border:1px solid var(--linha);
color:var(--marfim);
font-family:"EB Garamond",Georgia,serif;font-size:1.02rem;
letter-spacing:.02em;border-radius:8px;
transition:border-color .3s,background .3s;
}
.faq-busca input::placeholder{color:var(--marfim-secundario);opacity:.75}
.faq-busca input:focus{
outline:none;border-color:var(--ouro);
background:rgba(27,36,54,.78);
}
.faq-lupa{
position:absolute;left:1rem;top:50%;transform:translateY(-50%);
width:19px;height:19px;pointer-events:none;
fill:none;stroke:var(--ouro);stroke-width:1.6;stroke-linecap:round;
}
#faq-limpar{
position:absolute;right:.8rem;top:50%;transform:translateY(-50%);
width:26px;height:26px;border:none;background:none;cursor:pointer;
color:var(--marfim-secundario);font-size:1.5rem;line-height:1;
transition:color .2s;
}
#faq-limpar:hover{color:var(--ouro-vivo)}
/* --- Categorias com a moldura da Loja --- */
.faq-categorias{
display:flex;flex-wrap:wrap;justify-content:center;
gap:.7rem .8rem;margin-top:2.2rem;margin-bottom:0;
}
.faq-cat{
display:inline-flex;align-items:center;gap:.5rem;
border:1px solid var(--ouro);border-radius:7px;
padding:.5rem 1.1rem;cursor:pointer;
background:transparent;color:var(--marfim);
font-family:"EB Garamond",Georgia,serif;
font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
transition:background .3s,color .3s,border-color .3s;
}
.faq-cat .faq-conta{color:var(--ouro);letter-spacing:.05em}
.faq-cat:hover{background:rgba(199,154,126,.10);color:var(--ouro-vivo)}
.faq-cat:hover .faq-conta{color:var(--ouro-vivo)}
.faq-cat.activa{
background:var(--ouro);border-color:var(--ouro);color:#12161F;
}
.faq-cat.activa .faq-conta{color:#12161F;opacity:.8}
/* --- Estado / lista --- */
.faq-resultados-bloco{padding-top:0 !important;margin-top:0}
.faq-vazio{
text-align:center;color:var(--marfim-secundario);
font-style:italic;font-size:1.05rem;padding:2rem 0;
}
.faq-lista{display:flex;flex-direction:column;gap:1.6rem}
/* --- Cartão pergunta/resposta com a montanha de fundo --- */
.faq-item{scroll-margin-top:96px}
.faq-cartao{
border-radius:7px;
position:relative;overflow:hidden;
border:1px solid var(--linha);
padding:2rem 2.2rem;
background-color:var(--fundo);
}
/* Imagem só no topo, presa lá; esbate-se para a cor de fundo. O resto do
cartão (respostas longas) segue apenas com a cor sólida, sem imagem. */
.faq-cartao::before{
content:"";
position:absolute;left:0;right:0;top:0;height:340px;
background:
linear-gradient(180deg,
rgba(27,36,54,.78) 0%,
rgba(27,36,54,.86) 45%,
rgba(27,36,54,.97) 82%,
var(--fundo) 100%),
url("../img/himalaia.webp") no-repeat center 22%/cover;
pointer-events:none;z-index:0;
}
.faq-cartao > *{position:relative;z-index:1}
.faq-tema-etiq{
display:inline-block;margin-bottom:.7rem;
font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--ouro);opacity:.9;
}
.faq-pergunta{
font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
font-size:clamp(1.35rem,2.3vw,1.7rem);line-height:1.32;
letter-spacing:.02em;color:var(--ouro-vivo);
margin:0 0 .6rem;position:relative;
}
/* Assinatura de quem perguntou, logo por baixo da pergunta */
.faq-autor{
font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--ouro);opacity:.7;
margin:0 0 1.3rem;padding-bottom:1.3rem;position:relative;
}
.faq-autor-nome{color:var(--ouro-vivo);opacity:1}
/* Separador do site (duas linhas que se esbatem, sem a chama), a fechar
o bloco pergunta+assinatura antes da resposta. */
.faq-autor::after,
.faq-pergunta.sem-autor::after{
content:"";position:absolute;left:0;bottom:0;
width:min(220px,60%);height:1px;
background:linear-gradient(to right,var(--linha),transparent);
}
/* Quando não há autor, o separador fica na própria pergunta */
.faq-pergunta.sem-autor{margin-bottom:1.5rem;padding-bottom:1.3rem}
/* Resposta: só a diferença de cor (marfim suave) */
.faq-resposta{color:var(--marfim-secundario)}
.faq-resposta p{margin:0 0 1rem;line-height:1.8}
.faq-resposta p:last-child{margin-bottom:0}
/* aparição suave */
.faq-item:not([hidden]){animation:faqSurge .45s ease both}
@keyframes faqSurge{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* destaque do termo procurado */
.faq-marca{background:rgba(235,198,162,.28);color:var(--ouro-vivo);border-radius:2px}
@media (max-width:640px){
.faq-cartao{padding:1.5rem 1.3rem}
.faq-cat{font-size:.76rem;padding:.45rem .85rem}
}
/* Nomes de obras e sites (entre « ») a âmbar; ligações discretas */
.faq-obra{color:var(--ouro-vivo)}
.faq-link{
color:var(--ouro-vivo);
border-bottom:1px solid var(--linha);
transition:border-color .3s;
}
.faq-link:hover{border-bottom-color:var(--ouro-vivo)}
/* Encostar as categorias ao primeiro cartão (os blocos têm padding grande) */
.faq-topo-bloco{padding-bottom:3rem !important}
/* Introdução por baixo do título das Perguntas — cor distinta, mais suave */
.faq-intro p{color:var(--marfim-secundario)}
/* ============================================================
Botões da Loja (Ecwid) — mesmo estilo dos botões do site:
moldura âmbar, transparente; ao passar o rato preenche de âmbar.
============================================================ */
#my-store-717298 button.form-control__button,
#my-store-717298 .ec-cart__button button,
#my-store-717298 .details-product-purchase__controls button,
#my-store-717298 button.details-product-purchase__add-to-bag,
#my-store-717298 .ec-cart-step__button button,
#my-store-717298 button.ec-cart__checkout,
#my-store-717298 .ec-form__button button,
#my-store-717298 .form-control--button{
background:transparent !important;
border:1px solid var(--ouro) !important;
border-radius:7px !important;
color:var(--marfim) !important;
font-family:"EB Garamond",Georgia,serif !important;
letter-spacing:.16em !important;text-transform:uppercase !important;
box-shadow:none !important;
transition:background .3s,color .3s,border-color .3s !important;
}
#my-store-717298 button.form-control__button *,
#my-store-717298 .details-product-purchase__controls button *,
#my-store-717298 button.ec-cart__checkout *{color:inherit !important;background:transparent !important}
#my-store-717298 button.form-control__button:hover,
#my-store-717298 .ec-cart__button button:hover,
#my-store-717298 .details-product-purchase__controls button:hover,
#my-store-717298 button.details-product-purchase__add-to-bag:hover,
#my-store-717298 .ec-cart-step__button button:hover,
#my-store-717298 button.ec-cart__checkout:hover,
#my-store-717298 .ec-form__button button:hover,
#my-store-717298 .form-control--button:hover{
background:var(--ouro) !important;
border-color:var(--ouro) !important;
color:#12161F !important;
}
#my-store-717298 button.form-control__button:hover *,
#my-store-717298 button.ec-cart__checkout:hover *{color:#12161F !important}
/* ============================================================
Formulário "Fazer uma Pergunta"
============================================================ */
.faq-perguntar{max-width:520px;margin:2.4rem auto 0;text-align:center}
.faq-botao-perguntar{cursor:pointer}
.faq-form{
margin-top:1.4rem;text-align:left;
border:1px solid var(--linha);border-radius:7px;
padding:1.8rem 1.6rem;
background:rgba(27,36,54,.55);
animation:faqSurge .4s ease both;
}
.faq-form-intro{
color:var(--marfim-secundario);font-size:.92rem;line-height:1.6;
margin:0 0 1.4rem;
}
.faq-form-linha{margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.faq-form label{
font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro);
}
.faq-form input,.faq-form textarea{
width:100%;box-sizing:border-box;
background:rgba(27,36,54,.6);border:1px solid var(--linha);border-radius:6px;
color:var(--marfim);font-family:"EB Garamond",Georgia,serif;font-size:1rem;
padding:.7rem .9rem;transition:border-color .3s,background .3s;
}
.faq-form input:focus,.faq-form textarea:focus{
outline:none;border-color:var(--ouro);background:rgba(27,36,54,.8);
}
.faq-form textarea{resize:vertical;min-height:110px}
.faq-form-enviar{cursor:pointer;margin-top:.4rem}
.faq-form-estado{margin:1rem 0 0;font-size:.95rem;min-height:1.2em}
.faq-form-estado.ok{color:var(--ouro-vivo)}
.faq-form-estado.erro{color:#d98b7a}
/* campo-armadilha: fora de vista, mas presente para os robôs */
.faq-armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ============================================================
Ícone de destaque na categoria "Perguntas dos Leitores"
============================================================ */
.faq-cat-ic{
display:inline-block;width:16px;height:22px;flex:0 0 auto;
background-color:var(--ouro);
-webkit-mask:url("../img/email-fogo.png") no-repeat center/contain;
mask:url("../img/email-fogo.png") no-repeat center/contain;
transition:background-color .3s,filter .3s;
}
/* Categoria em destaque: chama viva e a brilhar */
.faq-cat-destaque .faq-cat-ic{
background-color:var(--ouro-vivo);
filter:drop-shadow(0 0 4px rgba(235,198,162,.95)) drop-shadow(0 0 8px rgba(199,154,126,.6));
}
/* Ao passar o rato / activa: o botão fica âmbar, por isso a chama passa a
escura e sólida (sem brilho), para contrastar e continuar bem visível. */
.faq-cat-destaque:hover .faq-cat-ic,
.faq-cat-destaque.activa .faq-cat-ic{
background-color:#12161F;
filter:none;
}
/* leve realce da moldura para a distinguir das outras */
.faq-cat-destaque{border-color:var(--ouro-vivo)}
/* ============================================================
Respostas dos leitores: recolhidas por defeito, com fade e "ler mais"
============================================================ */
.faq-resposta-recolhivel{
position:relative;
max-height:7.6em; /* ~4 linhas */
overflow:hidden;
transition:max-height .45s ease;
}
/* véu de esbatimento no fundo, quando recolhida */
.faq-resposta-recolhivel::after{
content:"";
position:absolute;left:0;right:0;bottom:0;height:3.4em;
background:linear-gradient(to bottom, rgba(27,36,54,0), var(--fundo));
pointer-events:none;transition:opacity .3s;
}
.faq-resposta-recolhivel.aberta{max-height:none}
.faq-resposta-recolhivel.aberta::after,
.faq-resposta-recolhivel.sem-fade::after{opacity:0}
.faq-ler-mais{
margin-top:.9rem;
background:transparent;border:none;cursor:pointer;
color:var(--ouro-vivo);
font-family:"EB Garamond",Georgia,serif;
font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
padding:0;transition:color .3s;
}
.faq-ler-mais:hover{color:var(--marfim)}
.faq-ler-mais::after{content:" \2193";opacity:.7}
.faq-ler-mais.aberto::after{content:" \2191"}
/* ============================================================
Barra de partilha no fundo de cada cartão
============================================================ */
.faq-partilha{
display:flex;align-items:center;justify-content:flex-end;gap:.55rem;
margin-top:1.6rem;padding-top:1.1rem;
border-top:1px solid var(--linha-tenue);
}
.faq-partilha-txt{
font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--marfim-secundario);margin-right:.15rem;
}
.faq-share{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;
border:1px solid var(--linha);color:var(--ouro);
transition:background .3s,color .3s,border-color .3s;
}
.faq-share svg{width:15px;height:15px;fill:currentColor}
.faq-share:hover{background:var(--ouro);border-color:var(--ouro);color:#12161F}
@media (max-width:520px){
.faq-partilha{justify-content:flex-start;flex-wrap:wrap}
}
/* ============================================================
Nota sobre criação com IA (arte digital)
============================================================ */
.arte-ia{padding-top:1rem}
.arte-ia .interior{max-width:640px}
.arte-ia-texto,
.prosa .arte-ia-texto{
text-align:center !important;color:var(--marfim-secundario);
font-style:italic;line-height:1.8;max-width:none;
}
/* ============================================================
Artigo (páginas de reflexões)
============================================================ */
.artigo-meta{
text-align:center;color:var(--marfim-secundario);
font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-top:1rem;
}
.artigo-corpo{max-width:680px;margin:0 auto}
.artigo-corpo > p{margin:0 0 1.4rem;line-height:1.9}
.artigo-cita{
margin:1.8rem 0;padding:1.4rem 1.8rem;
border-left:2px solid var(--ouro);border-radius:0 7px 7px 0;
background:rgba(199,154,126,.06);
color:var(--marfim-secundario);font-style:italic;
}
.artigo-cita p{margin:0 0 1rem;line-height:1.85}
.artigo-cita p:last-child{margin-bottom:0}
.artigo-cita em{color:var(--ouro-vivo);font-style:italic}
.artigo-cita strong{color:var(--ouro-vivo);font-weight:500;font-style:normal}
.artigo-assinatura{
text-align:center;color:var(--ouro);margin:2rem 0 0;line-height:1.8;
}
.artigo-sep{
border:none;height:1px;width:120px;margin:2.4rem auto;
background:linear-gradient(to right,transparent,var(--linha),transparent);
}
.artigo-corpo a{color:var(--ouro-vivo);text-decoration:none;border-bottom:1px solid var(--linha)}
.artigo-corpo a:hover{border-color:var(--ouro-vivo)}
/* ============================================================
Termos ligados ao Glossário Espiritual (respostas aos leitores)
Discretos: um sublinhado ténue que só ganha cor ao passar o rato.
============================================================ */
.faq-termo{
color:var(--ouro-vivo);text-decoration:none;
border-bottom:1px dotted rgba(199,154,126,.55);
transition:color .25s,border-color .25s;
}
.faq-termo:hover,
.faq-termo:focus-visible{
color:var(--ouro-vivo);
border-bottom-color:var(--ouro-vivo);
}
/* ============================================================
Página de erro (404)
============================================================ */
.erro-404-texto{
text-align:center !important;color:var(--marfim-secundario);
}
/* Botões em linha, centrados e com espaço uniforme mesmo quando mudam de
linha. A regra geral (.chamada + .chamada{margin-left:3rem}) desalinhava-os
ao quebrar; aqui o espaçamento é dado pelo gap do flex. */
.erro-404-botoes{
display:flex;flex-wrap:wrap;justify-content:center;
gap:1rem 1.6rem;margin-top:2.4rem;
}
.erro-404-botoes .chamada + .chamada{margin-left:0}
/* ============================================================
Perguntas de seguimento (conversas dentro de uma resposta)
Cada nível recua para dentro, com um fio âmbar à esquerda que
torna visível a que resposta a nova pergunta pertence.
============================================================ */
.faq-seguimentos{
margin-top:1.6rem;
padding-left:1.5rem;
border-left:1px solid var(--linha);
}
.faq-seguimentos.nivel-2{border-left-color:var(--linha-tenue)}
.faq-seguimentos.nivel-3{border-left-style:dotted}
.faq-seguimento + .faq-seguimento{
margin-top:1.6rem;padding-top:1.6rem;
border-top:1px solid var(--linha-tenue);
}
.faq-seg-pergunta{
font-family:"Cormorant Garamond",Georgia,serif;
font-size:1.3rem;line-height:1.45;font-style:italic;
color:var(--ouro-vivo);margin:0 0 .5rem;
}
.faq-seg-autor{
font-size:.72rem;margin:0 0 .9rem;padding-bottom:0;
}
.faq-seg-autor::after{display:none} /* sem o separador do autor principal */
/* Em "em", e não em "rem": assim a resposta do seguimento fica sempre numa
proporção certa da resposta principal, e não presa a um valor absoluto que
a tornava demasiado pequena. */
.faq-seg-resposta{font-size:.9em}
.faq-seg-resposta p:last-child{margin-bottom:0}
/* Convite a continuar a conversa */
.faq-perguntar-sobre{
display:block;margin:1.2rem 0 0 auto; /* linha própria, encostado à direita */
width:fit-content;
background:transparent;border:1px solid var(--linha);border-radius:7px;
padding:.42rem 1rem;cursor:pointer;
color:var(--marfim-secundario);
font-family:"EB Garamond",Georgia,serif;
font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
transition:background .3s,color .3s,border-color .3s;
}
.faq-perguntar-sobre:hover{
background:var(--ouro);border-color:var(--ouro);color:#12161F;
}
/* Linha de contexto no formulário */
.faq-form-contexto{
margin:0 0 1.2rem;padding:.7rem 1rem;
border-left:2px solid var(--ouro);
background:rgba(199,154,126,.07);
font-size:.88rem;color:var(--marfim-secundario);
}
.faq-form-contexto #fp-contexto-txt{color:var(--ouro-vivo);font-style:italic}
.faq-form-limpar{
display:block;margin-top:.4rem;
background:none;border:none;padding:0;cursor:pointer;
color:var(--marfim-secundario);
font-family:"EB Garamond",Georgia,serif;font-size:.78rem;
text-decoration:underline;text-underline-offset:3px;
}
.faq-form-limpar:hover{color:var(--ouro-vivo)}
@media (max-width:600px){
.faq-seguimentos{padding-left:.9rem}
}
/* Formulário quando abre junto a uma resposta (dentro do cartão), em vez de
no topo da página. Recolhe-se um pouco e ganha um fio âmbar à esquerda,
para se perceber que pertence àquela resposta. */
.faq-form.faq-form-junto{
margin-top:1.2rem;
padding-left:1.4rem;
border-left:2px solid var(--ouro);
}
@media (max-width:600px){
.faq-form.faq-form-junto{padding-left:.9rem}
}
/* Data da pergunta, a seguir ao nome: mais pequena e em âmbar */
.faq-data{
font-size:.86em;letter-spacing:.1em;
color:var(--ouro);opacity:.9;
}
/* Seguimentos recolhidos: só o primeiro fica à vista */
.faq-seguimento.faq-seg-oculto{display:none}
.faq-ver-mais-perg{
display:block;margin:1.2rem 0 0;
background:transparent;border:none;padding:0;cursor:pointer;
color:var(--ouro-vivo);
font-family:"EB Garamond",Georgia,serif;
font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
transition:color .3s;
}
.faq-ver-mais-perg::after{content:" \2193";opacity:.7}
.faq-ver-mais-perg.aberto::after{content:" \2191"}
.faq-ver-mais-perg:hover{color:var(--marfim)}
/* Botão activo: o formulário está aberto debaixo dele */
.faq-perguntar-sobre.activa{
background:var(--ouro);border-color:var(--ouro);color:#12161F;
}
/* Níveis mais fundos da conversa: recuo menor, para não perder largura útil */
.faq-seguimentos.nivel-4,
.faq-seguimentos.nivel-5{
padding-left:1.1rem;
border-left-style:dotted;
border-left-color:var(--linha-tenue);
}
@media (max-width:600px){
.faq-seguimentos.nivel-3,
.faq-seguimentos.nivel-4,
.faq-seguimentos.nivel-5{padding-left:.7rem}
}
/* Para lá do limite de recuo: a conversa continua, mas já não recua mais —
assim uma cadeia muito longa nunca fica sem largura para o texto. */
.faq-seguimentos.sem-recuo{
padding-left:0;
border-left:none;
margin-top:1.4rem;
}
/* ============================================================
Cabeçalho da pergunta de seguimento: chama num círculo à esquerda,
pergunta e autor à direita. Marca com clareza onde começa cada
pergunta, sobretudo quando as respostas são longas.
============================================================ */
.faq-seg-cabeca{
display:flex;align-items:flex-start;gap:.85rem;
margin-bottom:.9rem;
}
.faq-seg-titulo{flex:1;min-width:0}
.faq-seg-titulo .faq-seg-pergunta{margin-bottom:.35rem}
.faq-seg-titulo .faq-seg-autor{margin-bottom:0}
.faq-avatar{
flex:0 0 auto;
width:34px;height:34px;border-radius:50%;
border:1px solid var(--linha);
background:rgba(199,154,126,.08);
display:inline-flex;align-items:center;justify-content:center;
margin-top:.15rem;
}
.faq-avatar::before{
content:"";
width:12px;height:17px;
background-color:var(--ouro-vivo);
-webkit-mask:url("../img/email-fogo.png") no-repeat center/contain;
mask:url("../img/email-fogo.png") no-repeat center/contain;
}
@media (max-width:600px){
.faq-seg-cabeca{gap:.6rem}
.faq-avatar{width:28px;height:28px}
.faq-avatar::before{width:10px;height:14px}
}
/* ============================================================
Loja: nitidez do negrito
O Ecwid pede negrito (700) em títulos e totais. Se esse peso não estiver
carregado, o navegador "engrossa" as letras por conta própria — e o
resultado fica esborratado. Os pesos reais passaram a ser carregados;
esta regra garante que, se algum dia faltar um, o navegador escolhe o
peso real mais próximo em vez de o fabricar.
============================================================ */
#my-store-717298,
#my-store-717298 *,
.ec-minicart, .ec-minicart *{
font-synthesis-weight:none;
-webkit-font-synthesis:none;
font-synthesis:none;
}
/* ============================================================
Ordenação das perguntas dos leitores — discreta, à direita,
logo por cima do primeiro cartão.
============================================================ */
.faq-ordenar{
display:flex;align-items:center;justify-content:flex-end;
gap:.6rem;margin:0 0 1rem;
}
/* O atributo hidden esconde por omissão, mas a regra display acima venceria:
é preciso dizê-lo explicitamente. */
.faq-ordenar[hidden]{display:none}
.faq-ordenar label{
font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--marfim-secundario);opacity:.8;
}
.faq-ordenar select{
background:transparent;color:var(--marfim);
border:1px solid var(--linha-tenue);border-radius:7px;
padding:.34rem 1.9rem .34rem .7rem;
font-family:"EB Garamond",Georgia,serif;font-size:.82rem;
cursor:pointer;appearance:none;-webkit-appearance:none;
/* seta desenhada, para não depender do estilo do sistema */
background-image:linear-gradient(45deg,transparent 50%,var(--ouro) 50%),
linear-gradient(135deg,var(--ouro) 50%,transparent 50%);
background-position:calc(100% - 14px) 52%, calc(100% - 9px) 52%;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
transition:border-color .3s,color .3s;
}
.faq-ordenar select:hover,
.faq-ordenar select:focus-visible{
border-color:var(--ouro);color:var(--ouro-vivo);outline:none;
}
/* as opções são desenhadas pelo sistema: garantir que se lêem */
.faq-ordenar option{background:#1B2436;color:#EEE8DA}
@media (max-width:520px){
.faq-ordenar{justify-content:flex-start}
.faq-ordenar label{font-size:.68rem}
}