/* tema studio-capta v1.3 (2026-10-08 22:12) */
/* ─────────────────────────────────────────────────────────────────────────
   Tema Studio Capta — studiocapta.pt (a loja vive em studiocapta.pt/loja)
   Estilo EDITORIAL do site, com valores MEDIDOS (getComputedStyle):
     - texto e menus em Jost (300 no corpo; menu 400 em MAIÚSCULAS espaçadas)
     - títulos em Cormorant 400, cor tinta #231F20
     - paleta do site: marfim #FBF9F6 · champanhe #F3EEE8 · areia #E7DDD2 ·
       texto #4A423D · cinza-quente #8A7F77 · caramelo #9C7F68 / #7D634F (o site; aqui os botões usam cinzento-pedra)
     - rodapé escuro #231F20 com texto branco a 72%
   Decisões de casa (preferências do dono do IMAGO):
     - fundo da loja BRANCO; o marfim fica nos detalhes
     - botões SEM preto: o principal é CINZENTO-PEDRA CLARO (#D9D4CE) com texto escuro (#2E2A27); os secundários só contorno fino
     - cantos discretos (2px nos botões, 4px nos cartões), como o site
   ───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500&family=Jost:wght@300;400;500&display=swap');

:root {
    --capta-tinta:      #231F20;
    --capta-texto:      #4A423D;
    --capta-suave:      #8A7F77;
    /* BOTÕES (v1.2): cinzento-pedra CLARO com texto escuro — elegante e legível.
       (Cinzento claro com texto branco ficava abaixo do contraste mínimo.) */
    --capta-botao:       #D9D4CE;   /* fundo do botão principal */
    --capta-botao-hover: #CBC5BE;
    --capta-botao-texto: #2E2A27;   /* 9,9:1 sobre o fundo do botão */
    /* ACENTO para ligações, contornos, foco e ícones — cinzento médio, legível no branco */
    --capta-acento:     #6F6964;
    --capta-acento-esc: #57524E;
    --capta-marfim:     #FBF9F6;
    --capta-champanhe:  #F3EEE8;
    --capta-areia:      #E7DDD2;
    --capta-linha:      rgba(35, 31, 32, .10);
    --capta-linha-forte: rgba(35, 31, 32, .28);
    --capta-serif: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
    --capta-sans:  'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
}

/* ── Coleções (provas/editadas) com os MESMOS botões do tema ──
   As páginas das coleções definem --col-acento em :root num <style> que vem DEPOIS
   deste ficheiro; "html:root" tem mais força e ganha, sem tocar no núcleo.
   --col-acento serve aí para texto/contornos → cinzento médio; os elementos PREENCHIDOS
   (botão principal, coração escolhido, contador ativo) levam o botão claro + texto escuro. */
html:root {
    --col-acento: var(--capta-acento);
    --col-acento-escuro: var(--capta-acento-esc);
}
.col-pill-principal, .col-pill-rosa.on, .col-coracao.on, .col-seg a.ativo .n, .colpw-btn {
    background: var(--capta-botao) !important;
    border-color: var(--capta-botao) !important;
    color: var(--capta-botao-texto) !important;
}
.col-pill-principal:hover, .colpw-btn:hover { background: var(--capta-botao-hover) !important; border-color: var(--capta-botao-hover) !important; }
.col-pill-rosa.on svg { color: var(--capta-botao-texto) !important; }
/* Entrada com palavra-passe da coleção (cores escritas na própria página) */
.colpw-campo:focus { border-color: var(--capta-acento) !important; }
.colpw [style*="9C7F68"] { color: var(--capta-acento) !important; }

/* ── Base ── (o núcleo põe um fundo cinzento; aqui é branco) */
body, body.text-slate-700 {
    background: #FFFFFF !important;
    color: var(--capta-texto) !important;
    font-family: var(--capta-sans);
    font-weight: 300;
    letter-spacing: .01em;
}
/* Títulos em Cormorant. As classes do Tailwind (text-slate-800, font-bold) ganham à
   regra do elemento — por isso os seletores repetem a classe. */
h1, h2, h3,
h1.text-slate-800, h2.text-slate-800, h3.text-slate-800,
h1.font-bold, h2.font-bold, h2.font-semibold, h3.font-semibold {
    font-family: var(--capta-serif) !important;
    font-weight: 400 !important;
    color: var(--capta-tinta) !important;
    letter-spacing: .02em;
}
h1 { font-size: 2.1rem; line-height: 1.15; }
strong, b, .font-semibold, .font-bold { font-weight: 500; }
a { transition: color .2s, border-color .2s, background-color .2s; }

/* ── Cabeçalho ── branco translúcido, filete fino, como as páginas interiores do site */
header.bg-white {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid var(--capta-linha) !important;
}
.capta-logo { height: 38px; width: auto; display: block; }
@media (max-width: 640px) { .capta-logo { height: 30px; } }

/* Menu: Jost MAIÚSCULAS espaçadas, tinta; o ativo leva um traço fino por baixo */
header nav a, header nav button {
    font-family: var(--capta-sans) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--capta-tinta) !important;
    background: transparent !important;
    border-radius: 2px !important;
}
header nav a:hover, header nav button:hover { color: var(--capta-acento-esc) !important; }
header nav a.bg-brand-50 { background: transparent !important; box-shadow: inset 0 -1px 0 var(--capta-tinta); border-radius: 0 !important; }
/* "Criar conta" — só contorno fino */
header nav a.border-brand-500 { border-color: var(--capta-linha-forte) !important; }
header nav a.border-brand-500:hover { border-color: var(--capta-acento) !important; }
/* "Log In" — a única ação preenchida, em cinzento-pedra */
header nav a.bg-brand-500 { background: var(--capta-botao) !important; color: var(--capta-botao-texto) !important; border: 1px solid var(--capta-botao); }
header nav a.bg-brand-500:hover { background: var(--capta-botao-hover) !important; color: var(--capta-botao-texto) !important; }
/* Carrinho: deixa de ser um bloco escuro — fica só com contorno */
header a[aria-label="Carrinho"] {
    background: transparent !important;
    color: var(--capta-tinta) !important;
    border: 1px solid var(--capta-linha-forte);
    border-radius: 2px !important;
}
header a[aria-label="Carrinho"]:hover { border-color: var(--capta-acento); color: var(--capta-acento-esc) !important; }
#cartBadge { background: var(--capta-botao) !important; color: var(--capta-botao-texto) !important; }
#navToggle { color: var(--capta-tinta) !important; border-radius: 2px !important; }
#navToggle:hover { background: var(--capta-champanhe) !important; }
#navPanel { background: #FFFFFF !important; border-color: var(--capta-linha) !important; }

/* ── Cor de marca → cinzento-pedra (botões, contadores, ligações, realces) ── */
.bg-brand-500 { background-color: var(--capta-botao) !important; background-image: none !important; color: var(--capta-botao-texto) !important; }
.hover\:bg-brand-600:hover, .bg-brand-600 { background-color: var(--capta-botao-hover) !important; color: var(--capta-botao-texto) !important; }
.text-brand-600, .text-brand-500 { color: var(--capta-acento-esc) !important; }
.border-brand-500 { border-color: var(--capta-acento) !important; }
.bg-brand-50, .hover\:bg-brand-50:hover { background-color: var(--capta-champanhe) !important; }
/* Botões preenchidos: maiúsculas espaçadas e cantos retos, como os do site */
a.bg-brand-500, button.bg-brand-500 {
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px !important;
    font-weight: 400 !important;
}
/* Botões cinzentos-escuros do núcleo → o mesmo cinzento-pedra claro (nada de preto) */
.bg-slate-600, .bg-slate-700, .bg-slate-800 { background-color: var(--capta-botao) !important; color: var(--capta-botao-texto) !important; }
.hover\:bg-slate-700:hover { background-color: var(--capta-botao-hover) !important; }

/* Campos: foco em cinzento-pedra, cantos discretos */
input:not([type=checkbox]):not([type=radio]), select, textarea { border-radius: 2px !important; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
    border-color: var(--capta-acento) !important;
    box-shadow: 0 0 0 3px rgba(119, 112, 106, .18) !important;
}
input[type=checkbox], input[type=radio] { accent-color: var(--capta-acento); }

/* Cartões: brancos, cantos de 4px, filete discreto */
.bg-white.rounded-xl, .bg-white.rounded-2xl {
    border-radius: 4px !important;
    border-color: var(--capta-linha) !important;
}

/* ── Cinzentos do núcleo → tons QUENTES do site ──
   O núcleo usa a escala "slate" (cinzento azulado); ao lado do marfim e do caramelo
   ficava fria. Trocada pelos tons de texto e areia do Studio Capta. */
.text-slate-900, .text-slate-800 { color: var(--capta-tinta) !important; }
.text-slate-700, .text-slate-600 { color: var(--capta-texto) !important; }
.text-slate-500, .text-slate-400 { color: var(--capta-suave) !important; }
.text-slate-300 { color: #C2B8AF !important; }
.bg-slate-50 { background-color: var(--capta-marfim) !important; }
.bg-slate-100, .hover\:bg-slate-100:hover { background-color: var(--capta-champanhe) !important; }
.bg-slate-200 { background-color: var(--capta-areia) !important; }
.border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--capta-linha) !important; }
/* Cantos discretos em todo o lado (o site é quase todo de ângulos retos) */
.rounded-xl, .rounded-2xl { border-radius: 4px !important; }

/* Página inicial (código de acesso): caixa "Aceder" CENTRADA no espaço que já existe
   entre o menu e o rodapé — sem o alargar (o rodapé fica exatamente onde estava).
   O núcleo centra o CONJUNTO "frase + caixa"; como a frase («Usa o teu código…», 20px
   + 36px de margem) está por cima, a caixa ficava descaída: 96px acima, 40px abaixo.
   Aqui leva por baixo um espaço vazio igual à frase (::after) e as margens descem de
   40px para 12px na mesma medida → a zona mantém os 268px e a caixa fica a 68/68.
   (Medido na loja, 1280x800 e telemóvel.) */
main > .flex-1.flex-col.justify-center {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}
main > .flex-1.flex-col.justify-center::after {
    content: "";
    display: block;
    flex: none;
    height: calc(1.25rem + 2.25rem);   /* = altura da frase (text-sm) + a sua margem (mb-9) */
}

/* Rede de segurança da largura (ver layout) */
main > * { width: 100%; }

/* ─────────────────────────────────────────────────────────────
   RODAPÉ — réplica de studiocapta.pt: escuro #231F20, Jost.
   ───────────────────────────────────────────────────────────── */
.capta-footer {
    background: var(--capta-tinta);
    color: rgba(255, 255, 255, .72);
    font-family: var(--capta-sans);
    font-weight: 300;
    letter-spacing: .01em;
    padding-top: 56px;
    margin-top: auto;
}
.capta-footer a { color: rgba(255, 255, 255, .72); }
.capta-footer a:hover { color: #FFFFFF; }
.capta-footer__grelha {
    max-width: 1240px; margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) 50px;
    display: grid; gap: 40px; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .capta-footer__grelha { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.capta-footer__logo { width: 170px; height: auto; display: block; color: #FFFFFF; margin-bottom: 18px; }
.capta-footer__marca p { font-size: 14.72px; line-height: 1.75; }
/* Títulos das colunas: Jost pequena, MAIÚSCULAS bem espaçadas, branco */
.capta-footer h2.capta-footer__titulo {
    font-family: var(--capta-sans) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #FFFFFF !important;
    margin: 0 0 16px;
}
.capta-footer__lista { list-style: none; margin: 0; padding: 0; }
.capta-footer__lista li { margin-bottom: 8px; font-size: 14.72px; }
.capta-footer__livro img { width: 170px; max-width: 100%; height: auto; display: block; }
.capta-footer__ral {
    max-width: 1240px; margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) 26px;
    font-size: 12.8px; line-height: 1.6;
}
.capta-footer__ral a { text-decoration: underline; text-underline-offset: 3px; }
.capta-footer__base {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 22px clamp(16px, 4vw, 48px);
    max-width: 1240px; margin: 0 auto;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
    font-size: 12.8px;
}
.capta-footer__base ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Versão do tema — para confirmar no site qual está instalada */
:root { --imago-tema: "tema studio-capta v1.3 (2026-10-08 22:12)"; }