/* ==========================================================================
   CARTAVIVA — Homepage
   Depende de marca.css (tokens, botões, logótipo).
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden}
img,svg,iframe{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--cv-dourado);color:#1A1405}
:focus-visible{outline:2px solid var(--cv-dourado);outline-offset:3px}

.cv-titulo{margin-block:var(--cv-e3) var(--cv-e4);max-width:20ch}
.cv-liga{color:var(--cv-dourado);text-decoration:underline;text-underline-offset:3px}
em{font-style:italic;color:var(--cv-dourado)}

/* --------------------------------------------------------------------------
   TOPO
   -------------------------------------------------------------------------- */
.cv-topo{
  position:sticky;top:0;z-index:60;
  transition:background var(--cv-d2),border-color var(--cv-d2),backdrop-filter var(--cv-d2);
  border-bottom:1px solid transparent;
}
.cv-topo.preso{
  background:rgba(11,11,11,.82);backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);border-bottom-color:var(--cv-linha);
}
.cv-topo__in{display:flex;align-items:center;justify-content:space-between;gap:var(--cv-e4);min-height:72px}
.cv-nav{display:none;gap:clamp(1rem,2.2vw,2rem)}
@media (min-width:980px){.cv-nav{display:flex;align-items:center}}
.cv-nav a{font-size:.8rem;font-weight:500;letter-spacing:.04em;color:var(--cv-cinza-claro);transition:color var(--cv-d1)}
.cv-nav a:hover{color:var(--cv-dourado)}
.cv-topo__acoes{display:flex;align-items:center;gap:.6rem}
.cv-topo__acoes .cv-btn{width:auto}
/* Rótulo curto do botão do cabeçalho: escondido por omissão, aparece só em
   ecrãs estreitos. Esta regra tem de vir ANTES da media query — têm a mesma
   especificidade, e a última a ser escrita ganha. */
.cv-topo__acoes .cv-btn [data-curto]{display:none}
.cv-menu-btn{
  display:inline-grid;gap:5px;place-content:center;width:46px;height:46px;
  background:none;border:1px solid var(--cv-linha);border-radius:12px;cursor:pointer;
}
@media (min-width:980px){.cv-menu-btn{display:none}}
.cv-menu-btn span{display:block;width:18px;height:1.5px;background:var(--cv-creme)}
.cv-menu-mob{
  display:grid;gap:.25rem;padding:0 var(--cv-margem);max-height:0;overflow:hidden;
  background:rgba(11,11,11,.96);transition:max-height var(--cv-d3) var(--cv-suave),padding var(--cv-d2);
}
.cv-menu-mob.aberto{max-height:340px;padding-block:var(--cv-e3) var(--cv-e5);border-bottom:1px solid var(--cv-linha)}
.cv-menu-mob a{font-family:var(--cv-serif);font-size:1.15rem;padding-block:.65rem;color:var(--cv-creme)}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.cv-hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,7vw,5rem) clamp(3rem,8vw,6rem)}
.cv-hero__brilho{
  position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 12%,rgba(212,175,55,.20),transparent 62%),
    radial-gradient(55% 45% at 12% 8%,rgba(139,30,30,.22),transparent 62%);
}
.cv-hero__in{position:relative;display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:center}
@media (min-width:980px){.cv-hero__in{grid-template-columns:1.05fr .95fr}}
.cv-hero__texto{display:grid;gap:var(--cv-e4);justify-items:start}
.cv-hero-t{max-width:14ch}
/* Abaixo dos 980 px o hero passa a uma coluna e o limite de 14ch deixa de
   proteger seja o que for: so aperta. A 393 px dava 303 px de caixa para 353
   disponíveis, e o título partia-se em quatro degraus. Sem limite, são duas
   linhas cheias. */
@media (max-width:979px){.cv-hero-t{max-width:none}}
.cv-hero__acoes{margin-top:var(--cv-e2)}
@media (min-width:761px){.cv-hero__acoes{display:flex;gap:.75rem}}
.cv-hero__nota{font-size:.82rem;color:var(--cv-cinza);max-width:46ch}
.cv-hero__nota b{color:var(--cv-dourado);font-weight:600}
.cv-hero__slogan{margin-top:-.25rem}

/* Telemóvel com a experiência a correr */
.cv-telemovel{display:grid;justify-items:center;gap:var(--cv-e3)}
.cv-telemovel__corpo{
  position:relative;width:min(300px,78vw);aspect-ratio:9/19;
  background:#000;border:10px solid #17171B;border-radius:42px;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(212,175,55,.22);
  overflow:hidden;
}
.cv-telemovel__entalhe{
  position:absolute;top:6px;left:50%;translate:-50% 0;width:98px;height:20px;
  background:#17171B;border-radius:0 0 14px 14px;z-index:2;
}
.cv-telemovel iframe{width:100%;height:100%;border:0;background:#fff}
.cv-telemovel__legenda{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cv-texto-2)}

/* --------------------------------------------------------------------------
   SECÇÕES
   -------------------------------------------------------------------------- */
.cv-seccao--alt{background:var(--cv-carvao)}

/* Catálogo */
.cv-catalogo{display:grid;gap:clamp(.75rem,1.4vw,1rem);margin-top:var(--cv-e6);
  grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.cv-catalogo{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1060px){.cv-catalogo{grid-template-columns:repeat(5,1fr)}}
.cv-cat{
  display:grid;gap:.45rem;align-content:start;height:100%;padding:var(--cv-e5) var(--cv-e4);
  background:var(--cv-carvao);border:1px solid var(--cv-linha-suave);border-radius:var(--cv-raio);
  position:relative;overflow:hidden;
  transition:transform var(--cv-d2) var(--cv-suave),border-color var(--cv-d2),background var(--cv-d2);
}
.cv-seccao--alt .cv-cat{background:#0E0E11}
.cv-cat::after{
  content:"";position:absolute;inset:auto 0 0;height:2px;
  background:var(--cv-realce);transform:scaleX(0);transform-origin:left;
  transition:transform var(--cv-d3) var(--cv-suave);
}
.cv-cat:hover{transform:translateY(-4px);border-color:var(--cv-linha);background:#141418}
.cv-cat:hover::after{transform:scaleX(1)}
/* Os ícones são SVG e herdam a cor por currentColor: a cor da família
   chega-lhes sem ninguém a repetir aqui. */
.cv-cat__icone{display:inline-flex;line-height:0;color:var(--cv-realce)}
.cv-cat__nome{font-family:var(--cv-serif);font-size:1.05rem;font-weight:600;color:var(--cv-creme)}
.cv-cat__desc{font-size:.82rem;line-height:1.55;color:var(--cv-texto-2)}
.cv-cat__familia{
  margin-top:auto;padding-top:.5rem;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:1;
  /* guarda a cor da família, mas puxada para o claro: o cartão é escuro */
  color:color-mix(in srgb, var(--cv-realce) 35%, var(--cv-texto-2));
}

/* Como funciona */
.cv-passos{display:grid;gap:1px;margin-top:var(--cv-e6);background:var(--cv-linha-suave);
  border:1px solid var(--cv-linha-suave);border-radius:var(--cv-raio);overflow:hidden}
@media (min-width:860px){.cv-passos{grid-template-columns:repeat(4,1fr)}}
.cv-passo{background:var(--cv-preto);padding:var(--cv-e6) var(--cv-e5);display:grid;gap:.6rem;align-content:start}
.cv-passo__n{font-family:var(--cv-serif);font-size:2.4rem;line-height:1;color:var(--cv-dourado);opacity:.55}
.cv-passo .cv-h3{color:var(--cv-creme)}

/* --------------------------------------------------------------------------
   VITRINE DAS SUB-MARCAS
   --------------------------------------------------------------------------
   Quatro telemóveis lado a lado, cada um com a capa da sua família. Em ecrã
   estreito passam a carrossel com encaixe, para não espremer nem obrigar a
   zoom. As cores vêm do config em variáveis --vf, --vt, --vb.
   -------------------------------------------------------------------------- */
.cv-familias{
  /* A sombra dos telemóveis sai 86 px por baixo e 34 px por cima da caixa.
     Como esta caixa passa a cortar o que sai (ver overflow-y, mais abaixo),
     esse espaço tem de existir por dentro. A margem negativa devolve-o à
     página, para o espaçamento ficar igual ao que era. */
  margin-top:calc(var(--cv-e7) - 40px);
  margin-bottom:-90px;
  padding-block:40px 90px;

  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);
  gap:clamp(1rem,2.6vw,2rem);
  padding-inline:var(--cv-margem);

  /* ======================================================================
     O DEDO TEM DE PODER DESCER A PÁGINA AQUI
     ----------------------------------------------------------------------
     `overflow-x:auto` faz o que se quer na horizontal, mas o CSS não deixa
     um eixo rolar e o outro ficar `visible`: o `overflow-y` passa sozinho a
     `auto`. Isto tornava a fila dos telemóveis num contentor de deslocamento
     VERTICAL, e o dedo que descia a página ficava preso nela.

     `overflow-y:hidden` resolve na raiz: um eixo escondido não é rolável
     pelo utilizador, por isso o gesto vertical nunca pertence a esta caixa
     e vai directo à página.

     NÃO voltar a pôr aqui `touch-action:pan-x`. Parece a solução e é o
     contrário: o touch-action não escolhe quem trata do gesto, PROIBE o
     gesto, e o valor vale para toda a cadeia de elementos acima. Com pan-x,
     um deslize vertical que comece aqui deixa de ser permitido a ninguém,
     nem à página. Foi esse o erro que prendeu o ecrã ao toque.
     ====================================================================== */
  overflow-x:auto;
  overflow-y:hidden;
  touch-action:auto;

  /* `proximity`, não `mandatory`: obrigatório significa parar sempre em cima
     de um cartão, e isso disputava qualquer gesto com um pouco de diagonal. */
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;

  scrollbar-width:thin;scrollbar-color:var(--cv-linha) transparent;
}
@media (min-width:1100px){
  .cv-familias{
    grid-auto-flow:row;grid-template-columns:repeat(4,1fr);
    /* Aqui não há carrossel nenhum: são quatro colunas lado a lado. Sem
       deslocamento, nada precisa de ser cortado nem compensado. */
    overflow:visible;
    max-width:var(--cv-largura);margin-inline:auto;
    margin-top:var(--cv-e7);margin-bottom:0;
    padding-block:0 var(--cv-e4);
  }
}
.cv-familias::-webkit-scrollbar{height:6px}
.cv-familias::-webkit-scrollbar-thumb{background:var(--cv-linha);border-radius:99px}

.cv-disp{scroll-snap-align:center;display:grid;gap:var(--cv-e4);justify-items:center}

/* --- moldura do telemóvel --- */
.cv-disp__moldura{
  position:relative;width:100%;max-width:262px;aspect-ratio:9/19;
  background:#0E0E11;border:9px solid #17171B;border-radius:38px;
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(212,175,55,.18),
             inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
  transition:transform var(--cv-d3) var(--cv-suave),box-shadow var(--cv-d3) var(--cv-suave);
}
.cv-disp:hover .cv-disp__moldura{
  transform:translateY(-8px);
  box-shadow:0 34px 76px rgba(0,0,0,.6),0 0 0 1px rgba(212,175,55,.34);
}
.cv-disp__entalhe{
  position:absolute;top:5px;left:50%;translate:-50% 0;width:84px;height:17px;
  background:#17171B;border-radius:0 0 12px 12px;z-index:3;
}

/* --- ecrã --- */
.cv-disp__ecra{
  position:absolute;inset:0;display:grid;
  grid-template-rows:auto 1fr auto auto;gap:.5rem;
  padding:clamp(1.6rem,4vw,2rem) clamp(.9rem,2.4vw,1.15rem) clamp(1rem,2.6vw,1.3rem);
  background:linear-gradient(175deg,var(--vf),var(--vf2));
  color:var(--vt);text-align:center;
}
.cv-disp__marca{display:grid;justify-items:center;gap:.3rem;padding-top:.3rem}
.cv-disp__nome{height:13px;width:auto}
.cv-disp__familia{
  font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  /* fica por cima do fundo escuro da secção, não do ecrã do telemóvel:
     a tinta da família (escura no Amor e no Celebra) desaparecia aqui */
  color:var(--cv-texto-2);padding-left:.28em;
}

/* --- visual: fotografia real ou composição da marca --- */
.cv-disp__visual{
  margin:0;border-radius:12px;overflow:hidden;position:relative;
  min-height:0;align-self:stretch;
}
.cv-disp__visual img{width:100%;height:100%;object-fit:cover;display:block}
.cv-disp__comp{
  position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(75% 60% at 50% 32%,rgba(255,255,255,.16),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.10),rgba(0,0,0,.24));
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
}
.cv-disp--claro .cv-disp__comp{
  background:
    radial-gradient(75% 60% at 50% 32%,rgba(255,255,255,.7),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.5),rgba(0,0,0,.08));
  border-color:rgba(0,0,0,.08);
}
.cv-disp__icone{display:inline-flex;line-height:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}

/* --- frase e botão --- */
.cv-disp__chamada{
  font-family:var(--cv-serif);font-size:clamp(.95rem,2.4vw,1.1rem);
  line-height:1.3;font-weight:500;
}
.cv-disp__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:38px;padding:0 1rem;border-radius:999px;
  background:var(--vb);color:var(--vbt);
  border:1px solid color-mix(in srgb,var(--vbt) 34%,transparent);
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:transform var(--cv-d1) var(--cv-suave),filter var(--cv-d2);
}
.cv-disp__btn:hover{transform:translateY(-1px);filter:brightness(1.12)}
.cv-disp__btn svg{flex:none;transition:transform var(--cv-d2) var(--cv-suave)}
.cv-disp:hover .cv-disp__btn svg{transform:translateX(3px)}

/* --- legenda sob o telemóvel --- */
.cv-disp__pe{display:grid;gap:.4rem;text-align:center;max-width:262px}
.cv-disp__promessa{
  font-family:var(--cv-serif);font-size:1.05rem;font-weight:600;color:var(--cv-creme);
}
.cv-disp__desc{font-size:.84rem;line-height:1.55;color:var(--cv-texto-2)}
.cv-disp__demo{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cv-dourado);
  padding-top:.2rem;
}
.cv-disp__demo:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:1099px){
  /* dá ar nas pontas para o primeiro e o último não colarem ao ecrã */
  .cv-familias::after{content:"";width:1px}
}

/* Manifesto */
.cv-manifesto{
  padding-block:clamp(4rem,10vw,8rem);text-align:center;
  background:linear-gradient(180deg,var(--cv-preto),#15100A 50%,var(--cv-preto));
}
.cv-manifesto .cv-limite{display:grid;gap:var(--cv-e3);justify-items:center}
.cv-manifesto .cv-lead{text-align:center}

/* Planos */
.cv-planos{display:grid;gap:var(--cv-e4);margin-top:var(--cv-e6)}
@media (min-width:760px){.cv-planos{grid-template-columns:repeat(2,1fr);max-width:820px}}
.cv-plano{
  position:relative;background:var(--cv-preto);border:1px solid var(--cv-linha-suave);
  border-radius:var(--cv-raio);padding:var(--cv-e6) var(--cv-e5);display:grid;gap:var(--cv-e3);
  align-content:start;
}
.cv-plano--destaque{border-color:var(--cv-dourado);box-shadow:0 0 0 1px rgba(212,175,55,.2),var(--cv-sombra)}
.cv-plano__selo{
  position:absolute;top:-11px;left:var(--cv-e5);background:var(--cv-dourado);color:#1A1405;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.32rem .66rem;border-radius:999px;
}
.cv-plano__preco{font-family:var(--cv-serif);font-size:2rem;color:var(--cv-dourado);display:grid;gap:.15rem}
.cv-plano__preco small{font-family:var(--cv-sans);font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cv-texto-2)}
.cv-plano__itens{display:grid;gap:.55rem;margin-block:.25rem}
.cv-plano__itens li{position:relative;padding-left:1.4rem;font-size:.88rem;color:var(--cv-cinza-claro)}
.cv-plano__itens li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--cv-dourado);
}

/* Dúvidas */
.cv-faq-grelha{display:grid;gap:var(--cv-e6)}
@media (min-width:900px){.cv-faq-grelha{grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem)}}
.cv-faq{display:grid;gap:.5rem;align-content:start}
.cv-faq__item{border:1px solid var(--cv-linha-suave);border-radius:var(--cv-raio-p);background:var(--cv-carvao)}
.cv-faq__item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.05rem 1.2rem;font-weight:500;color:var(--cv-creme);
}
.cv-faq__item summary::-webkit-details-marker{display:none}
.cv-faq__item summary i{
  position:relative;width:12px;height:12px;flex:none;transition:transform var(--cv-d2) var(--cv-suave);
}
.cv-faq__item summary i::before,.cv-faq__item summary i::after{
  content:"";position:absolute;background:var(--cv-dourado);
}
.cv-faq__item summary i::before{inset:50% 0 auto;height:1.5px;translate:0 -50%}
.cv-faq__item summary i::after{inset:0 50% auto;width:1.5px;translate:-50% 0}
.cv-faq__item[open] summary i{transform:rotate(135deg)}
.cv-faq__item p{padding:0 1.2rem 1.2rem;color:var(--cv-cinza-claro);font-size:.92rem}

/* CTA final */
.cv-final{
  padding-block:clamp(4rem,9vw,7rem);text-align:center;border-top:1px solid var(--cv-linha);
  background:radial-gradient(70% 90% at 50% 0%,rgba(212,175,55,.12),transparent 60%);
}
.cv-final .cv-limite{display:grid;gap:var(--cv-e5);justify-items:center}
.cv-final .cv-acoes{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* Rodapé */
.cv-rodape{border-top:1px solid var(--cv-linha-suave);background:#070708;padding-block:var(--cv-e7) var(--cv-e4)}
.cv-rodape__in{display:grid;gap:var(--cv-e6)}
@media (min-width:880px){.cv-rodape__in{grid-template-columns:1.2fr .8fr 1fr;gap:var(--cv-e7)}}
.cv-rodape__nav{display:grid;gap:.6rem;align-content:start}
.cv-rodape__nav a{font-size:.85rem;color:var(--cv-cinza-claro)}
.cv-rodape__nav a:hover{color:var(--cv-dourado)}
.cv-garantias{display:grid;gap:.55rem;align-content:start}
.cv-garantias li{position:relative;padding-left:1.15rem;font-size:.82rem;color:var(--cv-texto-2)}
.cv-garantias li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  background:var(--cv-dourado);rotate:45deg}
.cv-rodape__fim{
  margin-top:var(--cv-e6);padding-top:var(--cv-e4);border-top:1px solid var(--cv-linha-suave);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.76rem;letter-spacing:.08em;color:var(--cv-texto-2);
}

@media (max-width:760px){
  .cv-hero__texto{justify-items:stretch}
  .cv-hero__acoes{width:100%}
  .cv-manifesto .cv-h2{text-align:center}
}

/* --------------------------------------------------------------------------
   CORRECÇÃO — topo em ecrã estreito
   O descritivo do logótipo não pode quebrar linha (é assinatura de marca),
   por isso em telemóvel esconde-se e fica só CARTAVIVA. Sem isto, o bloco
   empurrava as acções para fora do ecrã e criava scroll horizontal.
   -------------------------------------------------------------------------- */
.cv-topo__in{flex-wrap:nowrap;min-width:0}
.cv-topo .cv-logo{min-width:0;flex:0 1 auto}
.cv-topo .cv-logo__txt{min-width:0}
@media (max-width:620px){
  /* em ecrã estreito o lockup completo rouba espaço às acções:
     encolhe-se, mantendo o símbolo e o nome legíveis */
  .cv-topo .cv-logo{--s:30px}
}
@media (max-width:400px){
  /* Em ecrãs estreitos, encurta-se o TEXTO — não a letra. .62rem dava 9,9 px
     medidos, letra de bula no botão que é a principal chamada à acção.
     O rótulo curto está no HTML, em <span data-curto>. */
  .cv-topo__acoes .cv-btn{padding:0 .8rem;font-size:.76rem;letter-spacing:.06em}
  .cv-topo__acoes .cv-btn [data-longo]{display:none}
  .cv-topo__acoes .cv-btn [data-curto]{display:inline}
}
/* o botão do topo nunca ocupa a largura toda, mesmo em telemóvel */
.cv-topo__acoes .cv-btn{width:auto;flex:none}

/* Alvos de toque na vitrine — no telemóvel o botão do ecrã e o link da
   demonstração ficavam abaixo dos 44px recomendados. */
@media (hover:none),(pointer:coarse){
  .cv-disp__btn{min-height:44px}
  .cv-disp__demo{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* direcção criativa de cada plano, por baixo do preço */
.cv-plano__dir { margin: -6px 0 14px; font-size: 13px; opacity: .62; line-height: 1.5; }

/* ==========================================================================
   LEGIBILIDADE E JUSTIFICACAO
   --------------------------------------------------------------------------
   Medido a 375 px: o texto corrido do site tem 37 a 45 caracteres por linha.

   O texto e justificado em todos os tamanhos de ecra, por decisao do dono do
   projecto. A 37 caracteres por linha a justificacao tende a abrir espacos
   grandes entre as palavras, e por isso ela vem SEMPRE acompanhada de tres
   travoes, sem os quais ficaria mesmo mal:

     text-wrap:pretty        cuida das ultimas linhas do paragrafo.

   NAO se corta nenhuma palavra ao fim da linha: nada de `hyphens`. Foi
   decisao do dono do projecto, depois de ver os hifenes no ecra. O preco
   e a justificacao abrir mais os espacos; o travao passa a ser o corpo da
   letra, escolhido para a palavra mais comprida caber inteira na linha.

   Justifica-se PROSA: paragrafos com varias linhas. Titulos, etiquetas,
   botoes e texto centrado ficam de fora — justificar texto centrado nao
   quer dizer nada, e justificar duas palavras deforma-as.
   ========================================================================== */
/* Texto corrido. `hyphens: none` é explicito de propósito: impede que um
   browser que hifenize por omissão volte a cortar palavras. */
.cv-prosa, .cv-cat__desc, .cv-disp__desc, .cv-faq__item p, .cv-seccao__sub {
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: pretty;
}

/* JUSTIFICADO só onde a medida dá para isso.
   As descrições dos cartões do catálogo têm 17 caracteres por linha no
   telemóvel — duas ou três palavras. Justificar aí abre buracos entre as
   palavras em vez de alinhar seja o que for. Ficam à esquerda, de propósito. */
.cv-prosa, .cv-faq__item p, .cv-seccao__sub {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;        /* a última linha nunca se estica */
}

/* --------------------------------------------------------------------------
   FOCO VISIVEL
   Nao havia UMA regra de :focus em todo o projecto. Quem navega por teclado
   — ou quem usa leitor de ecra — andava as cegas. `:focus-visible` mostra o
   contorno a quem navega por teclado sem o mostrar a quem clica com o rato.
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cv-dourado);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================================================
   CABEÇALHOS DE SECÇÃO — título ao centro, texto justificado
   --------------------------------------------------------------------------
   Cada secção abre com três coisas: uma etiqueta pequena, o título grande e
   um parágrafo de entrada. O título e a etiqueta vão ao centro — são o que
   anúncia a secção. O parágrafo fica justificado, numa coluna centrada e
   limitada: medido, tem 57 caracteres por linha, que dá folga para a
   justificação ficar bem (abaixo de ~40 abriria buracos).
   ========================================================================== */
.cv-etiqueta,
.cv-titulo {
  text-align: center;
}
.cv-titulo {
  margin-inline: auto;
  max-width: 22ch;              /* o título quebra onde faz sentido, não a meio */
}
.cv-lead {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: center;      /* a última linha centrada, a acompanhar o título */
  hyphens: none;
  -webkit-hyphens: none;
  margin-inline: auto;
  max-width: 62ch;
}

/* Em ecrãs estreitos a justificação deixa de compensar, e sem cortar
   palavras deixa mesmo de funcionar. Medido a 375 px, sem hífenes: uma
   resposta das perguntas frequentes abria 9,93x o espaço normal entre
   palavras. Reduzir o corpo da letra não resolve — experimentei de 16,5 px
   a 12,5 px e o pior caso nunca desceu dos 5,2x, já com a letra pequena
   demais para se ler ao telemóvel.

   Por isso, abaixo dos 560 px, o texto corrido alinha à esquerda. A aresta
   da direita fica irregular, mas os espaços ficam todos iguais — 1,00x —
   e nenhuma palavra é cortada. Acima dos 560 px a linha já é longa que
   chegue e a justificação mantém-se (medido: 2,34x no pior caso). */
@media (max-width: 560px) {
  .cv-lead { text-align: center; }
  .cv-prosa, .cv-faq__item p, .cv-seccao__sub {
    text-align: left;
    text-align-last: left;
  }
}

/* ==========================================================================
   HERO À ESQUERDA, SEM ESPAÇOS ESTICADOS
   --------------------------------------------------------------------------
   O hero fica encostado à esquerda. NÃO é justificado, e isso é de
   propósito: justificar reparte a sobra de cada linha pelos espaços que lá
   estão, e as linhas daqui são curtas (a letra é grande), por isso cada
   espaço ficava enorme. Medido: 8,16x o espaço normal no título ao
   telemóvel — "merecem        ganhar" — e 2,95x no parágrafo.

   Alinhado à esquerda não há sobra para repartir, logo não há buracos.
   A justificação fica onde as linhas são longas e funciona: `.cv-prosa`,
   as respostas das perguntas frequentes e os subtítulos das secções.

   Não basta `text-align`: os elementos do hero são itens de uma grelha. Sem
   mexer no `justify-items`, cada caixa fica tão larga quanto o seu conteúdo
   e o alinhamento de dentro não se vê.
   ========================================================================== */
.cv-hero__texto {
  justify-items: stretch;
  text-align: left;
}
/* O título reparte as linhas por igual. Sem isto, no telemóvel do dono do
   projecto a última linha ficava só com "vida." — uma palavra sozinha a
   fechar o título principal. O balance só vale a pena em títulos curtos, que
   é o caso; em parágrafos longos o browser ignora-o. */
.cv-hero-t,
.cv-hero__texto .cv-lead {
  text-align: left;
  /* a regra dos cabecalhos de seccao poe text-align-last:center em todos os
     .cv-lead abaixo dos 560px; sem este travao, a ultima linha do paragrafo
     do hero continuava a aparecer ao centro, desalinhada das de cima */
  text-align-last: left;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: pretty;
}
/* DEPOIS da regra acima, de propósito: `pretty` e `balance` são a mesma
   propriedade, e com a mesma especificidade ganha a última. Já escrevi isto
   pela ordem inversa e o equilíbrio do título nunca chegou a existir.
   `balance` reparte as linhas por igual — é o que evita a última linha com
   uma palavra sozinha, e só vale a pena em títulos curtos como este. */
.cv-hero-t {
  text-wrap: balance;
}
.cv-hero__nota,
.cv-hero-t {
  margin-inline: 0;
}
.cv-hero__acoes {
  justify-content: flex-start;
}
/* No telemóvel os dois botões empilham-se e não chegam à largura toda.
   A caixa é uma GRELHA, e isso muda quem os centra: justify-items centra
   cada botão dentro da sua coluna, mas a coluna tem a largura do botão e
   continua encostada à esquerda — nada se mexia. Quem centra a coluna é
   justify-content. Ficam cá os dois: um alinha a coluna, o outro alinha o
   botão dentro dela, caso os botões venham a ter larguras diferentes.
   Acima dos 760 px voltam a ficar lado a lado e seguem o texto, à esquerda. */
@media (max-width: 760px) {
  .cv-hero__acoes {
    justify-content: center;
    justify-items: center;
  }
}


/* ==========================================================================
   ÍCONES
   --------------------------------------------------------------------------
   Um SVG é inline por omissão e assenta na linha de base do texto, o que o
   deixa uns pixeis abaixo do rótulo ao lado. O vertical-align resolve isso;
   o flex-shrink impede que encolha quando o rótulo é comprido.
   ========================================================================== */
.cv-ic{display:block;vertical-align:middle;flex-shrink:0}


/* ==========================================================================
   COPY DA HOMEPAGE (documento de 03/10/2026)
   ========================================================================== */

/* §6 — a lista de exemplos do catálogo. São frases curtas entre aspas, não
   uma lista de funcionalidades: sem marcadores, em coluna, com ar entre elas. */
.cv-exemplos {
  list-style: none;
  margin: 0 0 var(--cv-e6);
  padding: 0;
  display: grid;
  gap: 2px;
}
.cv-exemplos li {
  font: 400 clamp(17px, 2.4vw, 21px)/1.75 var(--cv-serif, "Playfair Display", Georgia, serif);
  color: var(--cv-texto-2);
}

/* fecho de secção: a frase que remata, com mais peso do que o corpo */
.cv-fecho {
  margin-top: var(--cv-e5);
  font-style: italic;
  color: var(--cv-realce);
}

/* §14 — "Não precisas saber design, programação ou edição." */
.cv-destaque {
  margin-top: var(--cv-e5);
  font-size: 1rem;
  color: var(--cv-realce);
}

/* §15 — o remate do manifesto e a frase final */
.cv-remate {
  margin: var(--cv-e5) 0 0;
  color: var(--cv-realce);
}
.cv-frase-final {
  margin-top: var(--cv-e4);
  font-style: italic;
}

/* §8-11 — "Explorar Amor →". Cada universo chama-se pelo nome, para o
   visitante saber para onde vai antes de carregar. */
.cv-disp__explorar {
  display: inline-block;
  margin-top: var(--cv-e3);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cv-realce);
  text-decoration: none;
}
.cv-disp__explorar:hover { text-decoration: underline; }


/* ==========================================================================
   §4 CONCEITO  ·  §5 DEMONSTRAÇÃO
   --------------------------------------------------------------------------
   Sao as duas seccoes que explicam o produto antes de o venderem. Por isso
   sao as unicas da homepage CENTRADAS e com medida curta: lem-se de uma vez,
   como uma afirmacao, nao como um bloco de texto.
   ========================================================================== */
.cv-conceito,
.cv-demo {
  max-width: 54ch;
  text-align: center;
}
.cv-conceito .cv-lead,
.cv-demo .cv-lead {
  text-align: center;
  text-align-last: center;
  margin-inline: auto;
}

/* "É uma experiência que alguém abre, explora e vive." — a linha que faz a
   viração. Fica maior do que o corpo e mais pequena do que o título. */
.cv-conceito__sub {
  font: 400 clamp(19px, 3.4vw, 26px)/1.5 var(--cv-serif, "Playfair Display", Georgia, serif);
  color: var(--cv-realce);
  margin: var(--cv-e3) 0 var(--cv-e5);
}

/* "Tu dás o significado. Nós damos-lhe vida." */
.cv-conceito__destaque {
  margin: 0;
  font-style: italic;
}

/* §5 — atalhos para uma experiência de cada universo. Cada um leva a cor da
   sua família, para a seccao mostrar a diferença de que fala. */
.cv-demos-rapidos {
  list-style: none;
  margin: var(--cv-e5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.cv-demos-rapidos a {
  display: inline-block;
  padding: .5rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--cv-tinta) 22%, transparent);
  border-radius: 999px;
  font-size: .86rem;
  letter-spacing: .04em;
  color: var(--cv-texto-2);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.cv-demos-rapidos a[data-familia="amor"]:hover     { border-color: #8B1E1E; color: #E8A0A0; }
.cv-demos-rapidos a[data-familia="celebra"]:hover  { border-color: #B8912E; color: #E8D3A5; }
.cv-demos-rapidos a[data-familia="memorias"]:hover { border-color: #3E5871; color: #A9C3DD; }
.cv-demos-rapidos a[data-familia="eventos"]:hover  { border-color: var(--cv-realce); color: var(--cv-realce); }

@media (max-width: 560px) {
  .cv-conceito .cv-lead,
  .cv-demo .cv-lead { text-align: center; }
}