/* ==========================================================================
   CARTAVIVA — Design System
   --------------------------------------------------------------------------
   Marca-mãe + quatro sub-marcas. A estrutura, o símbolo e a tipografia são
   sempre os mesmos; só a linguagem de cor muda. É isso que faz a CartaViva
   passar de Amor para Formatura sem parecer outra marca.

   Aplica-se uma sub-marca pondo o atributo no elemento ou no <body>:
       <body data-familia="celebra">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MARCA-MÃE
   -------------------------------------------------------------------------- */
:root{
  /* Paleta principal do manual */
  --cv-dourado:#D4AF37;
  --cv-vermelho:#8B1E1E;
  --cv-preto:#0B0B0B;
  --cv-creme:#F8F6F2;

  /* Degraus derivados */
  --cv-ouro-claro:#E8C766;
  --cv-ouro-escuro:#B8912E;
  --cv-vinho:#5E1111;
  --cv-carvao:#141418;
  --cv-grafite:#2B2B2B;
  --cv-cinza:#6E6E73;
  --cv-cinza-claro:#A8A8AE;
  /* Texto secundário sobre fundo ESCURO. Vive só aqui e NUNCA é redefinido
     dentro de [data-familia] — é essa a diferença para --cv-tinta, que muda
     com o tema da sub-marca e por isso não serve para texto sobre escuro. */
  --cv-texto-2:#C3C3CA;
  --cv-linha:rgba(212,175,55,.22);
  --cv-linha-suave:rgba(255,255,255,.10);

  /* Por omissão, a superfície é a da marca-mãe: preto sofisticado */
  --cv-fundo:var(--cv-preto);
  --cv-superficie:var(--cv-carvao);
  --cv-tinta:var(--cv-creme);
  --cv-tinta-suave:var(--cv-cinza-claro);
  --cv-realce:var(--cv-dourado);
  --cv-realce-2:var(--cv-vermelho);
  --cv-contraste:var(--cv-preto);

  /* Tipografia do manual */
  --cv-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --cv-sans:'Montserrat',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --cv-manuscrita:'Caveat','Segoe Script',cursive;

  /* Escala fluida, pensada primeiro para telemóvel */
  /* O piso de 2.1rem (33,6 px) nunca era ultrapassado em telemovel nenhum:
     a 393 px, 7.2vw da 28 px, logo ficava sempre nos 33,6. Resultado: em
     ecras estreitos o titulo partia-se em quatro degraus curtos. Piso mais
     baixo e inclinacao maior: a 393 px da praticamente o mesmo tamanho de
     antes (33,8 px), mas a 360 e a 320 encolhe o suficiente para o titulo
     caber em duas linhas cheias. */
  --cv-t-hero:clamp(1.75rem,8.6vw,4.6rem);
  --cv-t-h1:clamp(1.85rem,5.4vw,3.4rem);
  --cv-t-h2:clamp(1.5rem,4vw,2.5rem);
  --cv-t-h3:clamp(1.15rem,2.4vw,1.6rem);
  --cv-t-lead:clamp(1rem,1.5vw,1.2rem);
  --cv-t-corpo:clamp(.95rem,1vw,1.0625rem);
  --cv-t-etiqueta:.6875rem;

  --cv-e1:.25rem; --cv-e2:.5rem;  --cv-e3:.75rem; --cv-e4:1rem;
  --cv-e5:1.5rem; --cv-e6:2rem;   --cv-e7:3rem;   --cv-e8:4rem;
  --cv-e9:6rem;   --cv-e10:8rem;

  --cv-seccao:clamp(3.5rem,9vw,7.5rem);
  --cv-margem:clamp(1.25rem,5vw,4rem);
  --cv-largura:1280px;

  --cv-raio:14px;
  --cv-raio-p:10px;
  --cv-sombra:0 18px 50px rgba(0,0,0,.35);
  --cv-suave:cubic-bezier(.22,1,.36,1);
  --cv-d1:.2s; --cv-d2:.4s; --cv-d3:.7s;
}

/* --------------------------------------------------------------------------
   2. SUB-MARCAS
   --------------------------------------------------------------------------
   Só se troca a cor. O símbolo, a tipografia e a estrutura não mudam.
   -------------------------------------------------------------------------- */

/* CARTAVIVA AMOR — vermelho, vinho, dourado, creme */
[data-familia="amor"]{
  --cv-fundo:#FBEDED;
  --cv-superficie:#FFFFFF;
  --cv-tinta:#2A1113;
  --cv-tinta-suave:#7C5A5C;
  --cv-realce:#8B1E1E;
  --cv-realce-2:#C0392B;
  --cv-ornamento:#D4AF37;
  --cv-linha:rgba(139,30,30,.18);
  --cv-contraste:#FFFFFF;
}
/* CARTAVIVA CELEBRA — dourado, creme, champanhe */
[data-familia="celebra"]{
  --cv-fundo:#FFFCF5;
  --cv-superficie:#FFFFFF;
  --cv-tinta:#2E2A1E;
  --cv-tinta-suave:#7E7361;
  --cv-realce:#B8912E;
  --cv-realce-2:#D4AF37;
  --cv-ornamento:#D4AF37;
  --cv-linha:rgba(184,145,46,.22);
  --cv-contraste:#FFFFFF;
}
/* CARTAVIVA EVENTOS — preto, branco, dourado, cinza sofisticado */
[data-familia="eventos"]{
  --cv-fundo:#0B0B0B;
  --cv-superficie:#161618;
  --cv-tinta:#F2EDE6;
  --cv-tinta-suave:#9A9A9F;
  --cv-realce:#D4AF37;
  --cv-realce-2:#F2EDE6;
  --cv-ornamento:#D4AF37;
  --cv-linha:rgba(212,175,55,.26);
  --cv-contraste:#0B0B0B;
}
/* CARTAVIVA MEMÓRIAS — azul-ardósia, tom de fotografia antiga ao anoitecer */
[data-familia="memorias"]{
  --cv-fundo:#2C3E50;
  --cv-superficie:#33475C;
  --cv-tinta:#EAF0F5;
  --cv-tinta-suave:#A9BDCE;
  --cv-realce:#9CC2E0;
  --cv-realce-2:#EAF0F5;
  --cv-ornamento:#C9A227;
  --cv-linha:rgba(156,194,224,.24);
  --cv-contraste:#22303F;
}

/* --------------------------------------------------------------------------
   3. LOGÓTIPO  (imagens oficiais — ver assets/marca.js)
   --------------------------------------------------------------------------
   `--s` é a altura do símbolo. Todas as peças são dimensionadas a partir dela,
   para o logótipo crescer e encolher como um conjunto.
   -------------------------------------------------------------------------- */
.cv-logo{display:inline-flex;align-items:center;gap:.6rem;line-height:1;text-decoration:none;--s:40px}
.cv-logo__txt{display:grid;gap:.3rem;min-width:0}
.cv-marca-img{display:block;height:auto;width:auto}

/* lockup completo: símbolo + nome + descritivo, numa só imagem */
.cv-logo--lockup .cv-marca-img--logo{height:calc(var(--s) * 1.62);max-width:100%}

/* símbolo isolado */
.cv-simbolo{display:inline-flex;flex:none;--s:44px}
.cv-simbolo .cv-marca-img{height:var(--s)}

/* nome ao lado do símbolo (usado nas assinaturas de sub-marca) */
.cv-logo__txt .cv-marca-img--nome{height:calc(var(--s) * .44)}
.cv-logo__txt .cv-marca-img--wordmark{height:calc(var(--s) * .60)}

.cv-logo__familia{
  font-family:var(--cv-sans);font-weight:600;font-size:10px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--cv-dourado);
}
.cv-logo--escuro .cv-logo__familia{color:var(--cv-realce,#B8912E)}

.cv-slogan{
  font-family:var(--cv-manuscrita);font-size:clamp(1.2rem,2.6vw,1.75rem);
  color:var(--cv-dourado);
}

/* --------------------------------------------------------------------------
   4. BASE
   -------------------------------------------------------------------------- */
.cv{
  background:var(--cv-fundo);color:var(--cv-tinta);
  font-family:var(--cv-sans);font-size:var(--cv-t-corpo);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.cv-limite{width:100%;max-width:var(--cv-largura);margin-inline:auto;padding-inline:var(--cv-margem)}
.cv-seccao{padding-block:var(--cv-seccao);position:relative}

.cv-display{font-family:var(--cv-serif);font-weight:700;line-height:1.06;letter-spacing:-.015em}
.cv-hero-t{font-size:var(--cv-t-hero)}
.cv-h1{font-size:var(--cv-t-h1)}
.cv-h2{font-size:var(--cv-t-h2)}
.cv-h3{font-size:var(--cv-t-h3);font-weight:600;line-height:1.25}
.cv-lead{font-size:var(--cv-t-lead);color:var(--cv-tinta-suave);max-width:62ch;font-weight:300}
.cv-corpo{color:var(--cv-tinta-suave);max-width:64ch}
.cv-etiqueta{
  font-family:var(--cv-sans);font-size:var(--cv-t-etiqueta);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--cv-realce);
}

/* --------------------------------------------------------------------------
   5. BOTÕES
   -------------------------------------------------------------------------- */
.cv-btn{
  --h:54px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--h);padding:0 1.6rem;border-radius:999px;border:1px solid transparent;
  font-family:var(--cv-sans);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;text-decoration:none;overflow:hidden;
  transition:transform var(--cv-d1) var(--cv-suave),box-shadow var(--cv-d2) var(--cv-suave),
             background var(--cv-d2),color var(--cv-d2),border-color var(--cv-d2);
  -webkit-tap-highlight-color:transparent;
}
.cv-btn:active{transform:translateY(1px)}
.cv-btn--ouro{
  background:linear-gradient(135deg,var(--cv-ouro-claro),var(--cv-dourado) 45%,var(--cv-ouro-escuro));
  color:#221A05;box-shadow:0 8px 24px rgba(212,175,55,.28);
}
.cv-btn--ouro:hover{box-shadow:0 12px 34px rgba(212,175,55,.42);transform:translateY(-2px)}
.cv-btn--contorno{border-color:var(--cv-linha);color:var(--cv-tinta);background:transparent}
.cv-btn--contorno:hover{border-color:var(--cv-realce);color:var(--cv-realce)}
.cv-btn--solido{background:var(--cv-realce);color:var(--cv-contraste)}
.cv-btn--solido:hover{transform:translateY(-2px);box-shadow:var(--cv-sombra)}
/* Botão pequeno do cabeçalho: .7rem dava 9,9 px medidos — letra de bula
   num botão que é a principal chamada à acção. */
.cv-btn--p{--h:44px;padding:0 1.1rem;font-size:.82rem}
.cv-btn--bloco{width:100%}
.cv-btn:focus-visible{outline:2px solid var(--cv-dourado);outline-offset:3px}

/* --------------------------------------------------------------------------
   6. CARTÕES
   -------------------------------------------------------------------------- */
.cv-cartao{
  background:var(--cv-superficie);border:1px solid var(--cv-linha);
  border-radius:var(--cv-raio);padding:var(--cv-e5);
  transition:transform var(--cv-d2) var(--cv-suave),border-color var(--cv-d2),box-shadow var(--cv-d2);
}
.cv-cartao--liga{cursor:pointer;text-decoration:none;color:inherit;display:block}
.cv-cartao--liga:hover{transform:translateY(-4px);border-color:var(--cv-realce);box-shadow:var(--cv-sombra)}

/* Fio dourado — o ornamento que liga todas as sub-marcas */
.cv-fio{height:1px;background:linear-gradient(90deg,transparent,var(--cv-dourado),transparent);opacity:.5}

/* --------------------------------------------------------------------------
   7. MICROINTERACÇÕES
   -------------------------------------------------------------------------- */
[data-revelar]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--cv-suave),transform .8s var(--cv-suave);transition-delay:var(--atraso,0s)}
[data-revelar].cv-visivel{opacity:1;transform:none}

@keyframes cv-subir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cv-brilho{0%,100%{opacity:.35}50%{opacity:.9}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-revelar]{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   8. TELEMÓVEL — é por aqui que a maioria vai entrar
   -------------------------------------------------------------------------- */
@media (hover:none),(pointer:coarse){
  .cv-btn{--h:52px}
  .cv-nav a,.cv-rodape a{min-height:44px;display:inline-flex;align-items:center}
  input,select,textarea{font-size:16px}   /* abaixo disto o iPhone faz zoom */
}
@media (max-width:760px){
  .cv-btn{width:100%}
  .cv-acoes{display:grid;gap:.75rem;width:100%}
}