/* ============================================================
   psimater.css
   Sistema visual de eugeniaamaro.pt
   Baseado no Moodboard Visual de julho 2026 e no Manual Visual
   Versão 1.0 · 18 de agosto de 2026
   ============================================================
   Prefixo geral: psi-
   Prefixos existentes que se mantêm: ylp- (landing yoga),
   qyz- (quiz), blg- (artigos), cpm- (Caderno PsiMater)
   ============================================================ */


/* ------------------------------------------------------------
   1 · TIPOGRAFIA, servida do próprio domínio
   Ficheiros em /wp-content/uploads/fontes/
   Servir localmente evita o pedido ao Google, que transfere o IP
   do visitante para fora da UE e acrescenta latência ao LCP.
   ------------------------------------------------------------ */

@font-face{
  font-family:'Lora';
  src:url('/wp-content/uploads/fontes/lora-variable.woff2') format('woff2-variations');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Lora';
  src:url('/wp-content/uploads/fontes/lora-italic-variable.woff2') format('woff2-variations');
  font-weight:400 700;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('/wp-content/uploads/fontes/dmsans-variable.woff2') format('woff2-variations');
  font-weight:100 1000;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('/wp-content/uploads/fontes/dmmono-medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}


/* ------------------------------------------------------------
   2 · TOKENS
   Paleta canónica do Manual Visual. Não inventar valores novos.
   ------------------------------------------------------------ */

:root{
  /* cor */
  --psi-ameixa:#5D3B73;
  --psi-ameixa-esc:#4a2e5c;
  --psi-ameixa-cl:#efe7f4;
  --psi-marfim:#F5F1E8;
  --psi-marfim-cl:#faf8f3;
  --psi-grafite:#2F2C33;
  --psi-salvia:#8FA383;
  --psi-salvia-cl:#e2e8dd;
  --psi-floresta:#365B4A;
  --psi-floresta-cl:#dbe5df;
  --psi-terracota:#C97945;
  --psi-terracota-cl:#f6e6d9;
  --psi-dourado:#E2C35E;
  --psi-dourado-cl:#f9f1d9;
  --psi-branco:#ffffff;

  /* texto */
  --psi-texto:#2F2C33;
  --psi-texto-mid:#4d4954;
  --psi-texto-suave:#807b88;
  --psi-linha:#e4ded1;

  /* cor de acento, redefinida por área. Ver secção 4 */
  --psi-acento:var(--psi-ameixa);
  --psi-acento-cl:var(--psi-ameixa-cl);

  /* tipo */
  --psi-serif:'Lora',Georgia,'Times New Roman',serif;
  --psi-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --psi-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* escala tipográfica */
  --psi-t-hero:clamp(2.35rem,4.6vw,3.5rem);
  --psi-t-h1:clamp(2rem,3.6vw,2.85rem);
  --psi-t-h2:clamp(1.7rem,3.1vw,2.4rem);
  --psi-t-h3:1.25rem;
  --psi-t-corpo:1.0625rem;   /* 17px */
  --psi-t-peq:0.9375rem;     /* 15px */
  --psi-t-mini:0.6875rem;    /* 11px, etiquetas */

  /* ritmo */
  --psi-linha-corpo:1.75;
  --psi-linha-titulo:1.2;

  /* espaço */
  --psi-esp-1:.5rem;  --psi-esp-2:1rem;   --psi-esp-3:1.5rem;
  --psi-esp-4:2rem;   --psi-esp-5:3rem;   --psi-esp-6:4.5rem;
  --psi-sec-y:clamp(3.5rem,7vw,5.25rem);
  --psi-sec-x:clamp(1.25rem,4vw,2rem);

  /* forma */
  --psi-raio:12px;
  --psi-raio-peq:7px;
  --psi-raio-pill:999px;
  --psi-largura:1040px;
  --psi-medida:68ch;         /* comprimento de linha confortável */

  /* movimento */
  --psi-transicao:.18s ease;
}


/* ------------------------------------------------------------
   3 · BASE
   ------------------------------------------------------------ */

.psi{
  font-family:var(--psi-sans);
  font-size:var(--psi-t-corpo);
  font-weight:300;
  line-height:var(--psi-linha-corpo);
  color:var(--psi-texto-mid);
  background:var(--psi-marfim);
  -webkit-font-smoothing:antialiased;
}
.psi *{box-sizing:border-box;}

.psi h1,.psi h2,.psi h3,.psi h4{
  font-family:var(--psi-serif);
  font-weight:600;
  line-height:var(--psi-linha-titulo);
  color:var(--psi-ameixa);
  margin:0 0 var(--psi-esp-2);
  /* Sentence case, por decisão editorial. Nunca text-transform em títulos. */
}
.psi h1{font-size:var(--psi-t-h1);}
.psi h2{font-size:var(--psi-t-h2);}
.psi h3{font-size:var(--psi-t-h3);font-weight:500;color:var(--psi-floresta);}

.psi p{margin:0 0 var(--psi-esp-2);max-width:var(--psi-medida);}
.psi p:last-child{margin-bottom:0;}
.psi strong{font-weight:500;color:var(--psi-texto);}
.psi em{font-style:italic;}

.psi a{color:var(--psi-ameixa);text-decoration-thickness:1px;text-underline-offset:3px;}
.psi a:hover{color:var(--psi-acento);}


/* ------------------------------------------------------------
   4 · ÁREAS
   Uma classe no wrapper da página muda a cor de acento de todos
   os componentes. Combinações fixadas no Manual Visual.
   Exemplo: <div class="psi psi-area-corpo">
   ------------------------------------------------------------ */

.psi-area-metodo    {--psi-acento:var(--psi-ameixa);   --psi-acento-cl:var(--psi-ameixa-cl);}
.psi-area-corpo     {--psi-acento:var(--psi-salvia);   --psi-acento-cl:var(--psi-salvia-cl);}
.psi-area-natureza  {--psi-acento:var(--psi-floresta); --psi-acento-cl:var(--psi-floresta-cl);}
.psi-area-relacoes  {--psi-acento:var(--psi-terracota);--psi-acento-cl:var(--psi-terracota-cl);}
.psi-area-criancas  {--psi-acento:var(--psi-dourado);  --psi-acento-cl:var(--psi-dourado-cl);}
.psi-area-psicologos{--psi-acento:var(--psi-floresta); --psi-acento-cl:var(--psi-floresta-cl);}


/* ------------------------------------------------------------
   5 · LAYOUT
   ------------------------------------------------------------ */

.psi-inner{max-width:var(--psi-largura);margin-inline:auto;}
.psi-sec{padding:var(--psi-sec-y) var(--psi-sec-x);}
.psi-sec--marfim {background:var(--psi-marfim);}
.psi-sec--claro  {background:var(--psi-marfim-cl);}
.psi-sec--branco {background:var(--psi-branco);}

/* blocos de cor, usar com parcimónia: o Manual pede 60 a 70% de marfim */
.psi-sec--ameixa{background:var(--psi-ameixa);color:rgba(245,241,232,.88);}
.psi-sec--ameixa h1,.psi-sec--ameixa h2,.psi-sec--ameixa h3{color:#fff;}
.psi-sec--acento{background:var(--psi-acento);color:var(--psi-grafite);}
.psi-sec--acento h1,.psi-sec--acento h2{color:var(--psi-grafite);}

/* duas colunas, um terço para dois terços. O padrão de leitura do site */
.psi-split{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.psi-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--psi-esp-3);}
.psi-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--psi-esp-3);}


/* ------------------------------------------------------------
   6 · ETIQUETAS E RUBRICAS
   DM Mono, sempre pequenas e sempre curtas.
   ------------------------------------------------------------ */

.psi-label{
  font-family:var(--psi-mono);
  font-size:var(--psi-t-mini);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--psi-texto-suave);
  margin:0 0 var(--psi-esp-2);
  display:block;
}
.psi-sec--ameixa .psi-label,
.psi-sec--acento .psi-label{color:var(--psi-dourado);}
.psi-sec--acento .psi-label{color:#3d4a38;}


/* ------------------------------------------------------------
   7 · CHAMADAS PARA AÇÃO
   Quatro tipos, com tratamentos distintos, conforme o Manual.
   Não misturar: cada tipo diz ao visitante que género de passo é.
   ------------------------------------------------------------ */

.psi-cta{
  display:inline-block;
  font-family:var(--psi-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:1rem 1.9rem;
  border-radius:var(--psi-raio-pill);
  text-decoration:none;
  border:1px solid transparent;
  transition:transform var(--psi-transicao),filter var(--psi-transicao),background var(--psi-transicao);
  cursor:pointer;
}
.psi-cta:hover{transform:translateY(-1px);}

/* clínico · marcar consulta. Ameixa sólida, contraste alto */
.psi-cta--clinico{background:var(--psi-ameixa);color:var(--psi-marfim);}
.psi-cta--clinico:hover{background:var(--psi-ameixa-esc);color:var(--psi-marfim);}

/* inscrição · cor da área da porta */
.psi-cta--inscricao{background:var(--psi-acento);color:var(--psi-grafite);}
.psi-cta--inscricao:hover{filter:brightness(1.07);}

/* relação · leve, para escrever, partilhar, responder */
.psi-cta--relacao{background:transparent;color:var(--psi-ameixa);border-color:var(--psi-acento);}
.psi-cta--relacao:hover{background:var(--psi-acento-cl);}

/* reflexivo · sem botão. Ler, guardar, voltar */
.psi-cta--reflexivo{
  font-family:var(--psi-sans);
  font-size:var(--psi-t-peq);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  padding:0 0 4px;
  border-radius:0;
  border-bottom:1px solid var(--psi-linha);
  color:var(--psi-texto);
  background:transparent;
}
.psi-cta--reflexivo:hover{border-bottom-color:var(--psi-acento);color:var(--psi-ameixa);transform:none;}

/* sobre fundo escuro */
.psi-sec--ameixa .psi-cta--reflexivo{color:var(--psi-marfim);border-bottom-color:rgba(245,241,232,.35);}
.psi-sec--ameixa .psi-cta--clinico{background:var(--psi-marfim);color:var(--psi-ameixa);}


/* ------------------------------------------------------------
   8 · CARTÕES E PAINÉIS
   ------------------------------------------------------------ */

.psi-card{
  background:var(--psi-branco);
  border:1px solid var(--psi-linha);
  border-radius:var(--psi-raio);
  padding:clamp(1.5rem,3vw,2.15rem);
}
.psi-card--acento{border-top:4px solid var(--psi-acento);}
.psi-card--vidro{
  background:rgba(245,241,232,.10);
  border:1px solid rgba(245,241,232,.22);
  backdrop-filter:blur(6px);
  color:var(--psi-marfim);
}

/* caixa de destaque, para ciência e citações de apoio */
.psi-destaque{
  background:var(--psi-acento-cl);
  border-left:4px solid var(--psi-acento);
  border-radius:0 var(--psi-raio-peq) var(--psi-raio-peq) 0;
  padding:1.25rem 1.5rem;
  margin:var(--psi-esp-3) 0;
}
.psi-destaque p{font-size:var(--psi-t-peq);font-weight:400;}

/* lista com marcador redondo na cor da área */
.psi-lista{list-style:none;margin:0;padding:0;}
.psi-lista li{
  position:relative;
  padding:.8rem 0 .8rem 1.55rem;
  border-bottom:1px solid var(--psi-marfim);
  font-size:1rem;
  line-height:1.6;
}
.psi-lista li:last-child{border-bottom:none;}
.psi-lista li::before{
  content:'';position:absolute;left:0;top:1.42em;
  width:7px;height:7px;border-radius:50%;background:var(--psi-acento);
}
/* variante com visto, para o que está incluído */
.psi-lista--visto li::before{
  content:'✓';width:auto;height:auto;background:none;top:.8em;
  color:var(--psi-acento);font-weight:700;
}


/* ------------------------------------------------------------
   9 · PLANOS E PREÇOS
   ------------------------------------------------------------ */

.psi-plano{position:relative;}
.psi-plano--destaque{border:2px solid var(--psi-acento);box-shadow:0 10px 34px rgba(93,59,115,.10);}
.psi-plano__selo{
  position:absolute;top:-12px;left:2rem;
  background:var(--psi-acento);color:var(--psi-grafite);
  font-family:var(--psi-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.35rem .95rem;border-radius:var(--psi-raio-pill);
}
.psi-preco{
  font-family:var(--psi-serif);font-size:2.75rem;font-weight:600;
  color:var(--psi-grafite);line-height:1;margin:.85rem 0 var(--psi-esp-3);
}
.psi-preco span{font-family:var(--psi-sans);font-size:1rem;font-weight:300;color:var(--psi-texto-suave);}


/* ------------------------------------------------------------
   10 · TESTEMUNHOS
   ------------------------------------------------------------ */

.psi-voz{background:var(--psi-marfim);border-radius:var(--psi-raio);padding:1.85rem 1.75rem 1.6rem;}
.psi-voz p{font-family:var(--psi-serif);font-style:italic;font-size:1.0625rem;
  color:var(--psi-texto);line-height:1.62;margin-bottom:var(--psi-esp-2);}
.psi-voz cite{
  font-family:var(--psi-mono);font-style:normal;font-size:var(--psi-t-mini);
  letter-spacing:.14em;text-transform:uppercase;color:var(--psi-texto-suave);
}


/* ------------------------------------------------------------
   11 · FORMULÁRIOS
   Estende o Contact Form 7 sem lhe tocar no markup.
   ------------------------------------------------------------ */

.psi-form{
  background:var(--psi-branco);
  border:1px solid var(--psi-linha);
  border-radius:var(--psi-raio);
  padding:clamp(1.75rem,3vw,2.4rem);
}
.psi-form label{
  display:block;
  font-family:var(--psi-mono);font-size:var(--psi-t-mini);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--psi-texto-suave);margin-bottom:.5rem;
}
.psi-form input[type=text],
.psi-form input[type=email],
.psi-form input[type=tel],
.psi-form textarea,
.psi-form select{
  width:100%;
  background:var(--psi-marfim);
  border:1px solid var(--psi-linha);
  border-radius:var(--psi-raio-peq);
  padding:.85rem .95rem;
  font-family:var(--psi-sans);font-size:var(--psi-t-peq);
  color:var(--psi-texto);
  transition:border-color var(--psi-transicao);
}
.psi-form input:focus,.psi-form textarea:focus,.psi-form select:focus{
  outline:none;border-color:var(--psi-acento);
  box-shadow:0 0 0 3px var(--psi-acento-cl);
}
.psi-form textarea{min-height:130px;resize:vertical;}

/* checkboxes de consentimento */
.psi-form .wpcf7-acceptance .wpcf7-list-item{margin:0 0 .8rem;}
.psi-form .wpcf7-acceptance label{
  display:flex;gap:.7rem;align-items:flex-start;
  font-family:var(--psi-sans);font-size:.875rem;font-weight:300;
  letter-spacing:0;text-transform:none;color:var(--psi-texto-mid);
  line-height:1.6;cursor:pointer;
}
.psi-form .wpcf7-acceptance input[type=checkbox]{
  width:18px;height:18px;flex-shrink:0;margin-top:3px;accent-color:var(--psi-ameixa);
}
.psi-form .wpcf7-submit{
  background:var(--psi-acento);color:var(--psi-grafite);
  font-family:var(--psi-mono);font-size:.78rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  padding:1rem 2rem;border:none;border-radius:var(--psi-raio-pill);cursor:pointer;
  transition:filter var(--psi-transicao);
}
.psi-form .wpcf7-submit:hover{filter:brightness(1.07);}

/* mensagens do CF7 na paleta */
.psi-form .wpcf7-not-valid-tip{color:var(--psi-terracota);font-size:.8125rem;margin-top:.35rem;}
.psi-form .wpcf7 form.invalid .wpcf7-response-output,
.psi-form .wpcf7 form.unaccepted .wpcf7-response-output{border-color:var(--psi-terracota);color:var(--psi-terracota);}
.psi-form .wpcf7 form.sent .wpcf7-response-output{border-color:var(--psi-salvia);color:var(--psi-floresta);}


/* ------------------------------------------------------------
   12 · IMAGENS
   ------------------------------------------------------------ */

.psi-img{display:block;width:100%;height:auto;border-radius:var(--psi-raio);}
.psi-img--retrato{aspect-ratio:4/5;object-fit:cover;}
.psi-img--larga{aspect-ratio:16/9;object-fit:cover;}
figure.psi-figura{margin:0;}
figure.psi-figura figcaption{
  font-family:var(--psi-mono);font-size:var(--psi-t-mini);
  letter-spacing:.1em;color:var(--psi-texto-suave);margin-top:.65rem;
}
/* espaço reservado enquanto não houver fotografia real */
.psi-img--reservado{
  background:#e6e0d2;border-radius:var(--psi-raio);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1.85rem;min-height:26rem;
  font-family:var(--psi-mono);font-size:var(--psi-t-mini);
  letter-spacing:.14em;text-transform:uppercase;color:#8a8172;line-height:2.1;
}


/* ------------------------------------------------------------
   13 · ACESSIBILIDADE
   O Manual pede contraste forte e não depender só da cor.
   ------------------------------------------------------------ */

/* nunca usar sálvia ou dourado como cor de texto sobre marfim:
   não passam o rácio mínimo. Ficam para fundos e marcadores. */

.psi :focus-visible{
  outline:3px solid var(--psi-ameixa);
  outline-offset:3px;
  border-radius:2px;
}
.psi-sec--ameixa :focus-visible{outline-color:var(--psi-dourado);}

.psi-skip{
  position:absolute;left:-9999px;
  background:var(--psi-ameixa);color:var(--psi-marfim);
  padding:.75rem 1.25rem;border-radius:var(--psi-raio-peq);z-index:999;
}
.psi-skip:focus{left:1rem;top:1rem;}

@media(prefers-reduced-motion:reduce){
  .psi *,.psi *::before,.psi *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* leitores de ecrã */
.psi-so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* ------------------------------------------------------------
   14 · RESPONSIVO
   ------------------------------------------------------------ */

@media(max-width:900px){
  .psi-split,.psi-duo,.psi-trio{grid-template-columns:1fr;gap:var(--psi-esp-4);}
  .psi-plano__selo{left:1.5rem;}
  .psi-img--reservado{min-height:16rem;}
}

@media print{
  .psi-sec--ameixa,.psi-sec--acento{background:none !important;color:#000 !important;}
  .psi-cta{border:1px solid #000 !important;background:none !important;color:#000 !important;}
}


/* ------------------------------------------------------------
   15 · GENESIS
   Anulações do tema-pai, quando a página é de largura total.
   Substituir XXXX pelo ID da página.
   ------------------------------------------------------------ */

/*
.page-id-XXXX .site-inner{max-width:100%;padding:0;}
.page-id-XXXX .entry{padding:0;}
.page-id-XXXX .entry-title{display:none;}
*/