/* ============================================================
   InMusic Hospitais — versão 2 (proposta de redesenho)
   Mesma paleta, mesmas imagens, mesmos padrões da versão atual.
   O que muda é a arrumação: hierarquia, ritmo, contraste e foco.
   ============================================================ */

:root{
  color-scheme: light;

  /* --- Cor ---------------------------------------------------
     Nomes agora dizem a cor que é. Na versão atual chamavam-se
     --wine/--wine-dark mas eram verdes: fonte de enganos. */
  --verde:            #1f6f4a;
  --verde-escuro:     #123a26;
  --verde-claro:      #2f8f5b;
  --verde-vestigio:   #e8f0ea;  /* só no backoffice (estado "feito") */

  --dourado:          #c9a227;  /* só para fundos e traços */
  --dourado-botao:    #7d5f12;  /* botão com letras brancas: 6:1 */
  --dourado-texto:    #7d5f12;  /* texto dourado sobre claro: contraste AA */
  --dourado-vestigio: #fdf6e3;
  --dourado-claro:    #d8b64a;  /* centro do degradê da fita */
  --dourado-escuro:   #644b0d;  /* botão dourado ao passar o rato */
  --fita-linha:       rgba(22,40,31,.12);

  --creme:            #fbfaf5;
  --creme2:           #f6f0e2;  /* areia: fundo das secções alternadas */
  --vestigio:         #f3ecdc;  /* realce neutro (hover, ícones, avisos). O verde fica só nos botões */
  --branco:           #ffffff;

  --tinta:            #16281f;
  --tinta-suave:      #4a5c52;
  --linha:            #e8e1d1;
  --linha-forte:      #d6cbb3;

  --erro:             #8a2a1c;  /* texto de erro sobre --erro-fundo: contraste AA */
  --erro-fundo:       #fdf0ee;
  --erro-linha:       #c0392b;

  --veu:              rgba(18,58,38,.45);  /* fundo atrás de janelas (backoffice) */
  --placeholder:      #66766d;  /* texto de exemplo nos campos: 4,8:1 sobre branco */
  --linha-botao:      #6f9a83;  /* contorno dos botões secundários: 3:1, vê-se */

  /* --- Movimento (Emil Kowalski) ---------------------------------
     Curvas fortes: começam rápido, a interface responde logo. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* --- Tipografia -------------------------------------------
     Sem tipos externos: tudo o que já existe no Windows/macOS. */
  --f-corpo:   'Segoe UI', Tahoma, Verdana, Arial, sans-serif;
  --f-titulo:  'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  --f-marca:   'Bodoni MT', Didot, 'Playfair Display', Georgia, serif;
  --f-manual:  'Segoe Script', 'Bradley Hand', cursive;

  /* Escala fluida: um só passo entre telemóvel e desktop */
  --t-display: clamp(2.4rem, 1.55rem + 3.4vw, 4rem);
  --t-h2:      clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
  --t-h3:      clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --t-corpo:   1.0625rem;
  --t-peq:     .875rem;
  --t-micro:   .75rem;

  /* --- Espaço ----------------------------------------------- */
  --e1: .5rem;  --e2: .75rem; --e3: 1rem;   --e4: 1.5rem;
  --e5: 2rem;   --e6: 3rem;   --e7: 4.5rem; --e8: 6.5rem;

  --raio:      14px;
  --raio-peq:  10px;
  --raio-pill: 999px;

  --sombra:      0 1px 2px rgba(22,40,31,.04), 0 8px 24px -12px rgba(22,40,31,.18);
  --sombra-alta: 0 2px 4px rgba(22,40,31,.05), 0 18px 40px -18px rgba(22,40,31,.28);

  --im-logo: url("../img/logo.webp");
  --im-heroi: url("../img/heroi.webp");
  --im-selo: url("../img/selo.webp");
  --im-violinista: url("../img/violinista.webp");
  --im-crm: url("../img/casa-ronald-mcdonald.webp");
  --im-amsm: url("../img/academia-sebastiao-melo.webp");
  --largura: 1320px;
  /* Margem lateral que cresce com o ecrã: 16 px no telemóvel, até 56 px em ecrãs largos */
  --margem-lateral: clamp(16px, 4vw, 56px);
  --altura-cabecalho: 100px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--altura-cabecalho) + 24px); }

body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--f-corpo);
  font-size:var(--t-corpo);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--f-titulo); margin:0 0 .5em; letter-spacing:-.015em; font-weight:800; line-height:1.15;
              text-wrap:balance; /* evita a ultima linha com uma palavra so */ }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); line-height:1.3; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

a{ color:var(--verde); text-decoration-color:color-mix(in srgb, var(--verde) 35%, transparent); text-underline-offset:3px; }
a:hover{ text-decoration-color:currentColor; }

/* Superfícies do browser também levam a marca */
::selection{ background:var(--dourado-vestigio); color:var(--verde-escuro); }
input, textarea{ caret-color:var(--verde); }

/* Foco visível — regra de casa, nada de outline:none */
:focus-visible{ outline:3px solid var(--verde-claro); outline-offset:3px; border-radius:4px; }
h1[tabindex="-1"]:focus{ outline:none; }

.wrap{ max-width:calc(var(--largura) + 2 * var(--margem-lateral)); margin:0 auto; padding:0 var(--margem-lateral); }
.wrap-estreito{ max-width:calc(760px + 2 * var(--margem-lateral)); margin:0 auto; padding:0 var(--margem-lateral); }

/* Saltar para o conteúdo: primeira paragem do teclado */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--verde); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--raio-peq) 0; font-weight:700;
}
.saltar:focus{ left:0; }

/* Imagens definidas uma so vez, em variaveis, e usadas por fundo:
   evita repetir o mesmo base64 em cada sitio onde aparecem. */
.im{ display:block; background-repeat:no-repeat; background-position:center; background-size:contain; }
.im-logo{ background-image:var(--im-logo); background-size:cover; }
.im-selo{ background-image:var(--im-selo); background-size:cover; }
.im-heroi{ background-image:var(--im-heroi); }
.im-violinista{ background-image:var(--im-violinista); }
.im-crm{ background-image:var(--im-crm); }
.im-amsm{ background-image:var(--im-amsm); }

/* ============================ Botões ============================ */
.btn{
  font-family:inherit; font-size:.95rem; font-weight:700; letter-spacing:.01em;
  cursor:pointer; border:1.5px solid transparent; border-radius:var(--raio-pill);
  padding:13px 26px; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; transition:background-color .16s ease, color .16s ease,
                                   border-color .16s ease, transform .16s var(--ease-out);
  white-space:nowrap;
}
/* Ao carregar, o botão cede um pouco: a interface ouviu. */
.btn:active{ transform:scale(.97); }
.btn-principal{ background:var(--verde); color:#fff; }
.btn-dourado{ background:var(--dourado-botao); color:#fff; }
.btn-contorno{ background:transparent; border-color:var(--linha-botao); color:var(--verde); }
@media (hover:hover) and (pointer:fine){
  .btn-principal:hover{ background:var(--verde-escuro); }
  .btn-dourado:hover{ background:var(--dourado-escuro); }
  .btn-contorno:hover{ border-color:var(--verde); background:var(--vestigio); }
}
.btn-peq{ padding:9px 18px; font-size:.875rem; }
.btn-largo{ width:100%; justify-content:center; }

/* ============================ Etiquetas ============================ */
.etiqueta{
  display:inline-block; font-size:var(--t-micro); font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--dourado-texto); background:var(--dourado-vestigio);
  padding:6px 14px; border-radius:var(--raio-pill); margin-bottom:var(--e3);
}
.etiqueta-dourada{ color:var(--dourado-texto); background:var(--dourado-vestigio); }

/* ===================== Aviso: donativos online em breve ===================== */
/* Retirar quando os donativos online (Stripe) estiverem ativos. */
.aviso{
  margin:0; background:var(--dourado-vestigio); color:var(--tinta);
  border-bottom:1px solid color-mix(in srgb, var(--dourado) 40%, transparent);
  font-size:var(--t-peq); line-height:1.45; text-align:center;
  padding:9px 16px;
}
.aviso strong{ color:var(--dourado-texto); font-weight:800; }
.aviso a{ color:var(--tinta); font-weight:700; text-decoration-color:var(--dourado); }

/* ============================ Cabeçalho ============================ */
.cabecalho{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--branco) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linha);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.cabecalho.colado{ box-shadow:0 4px 20px -12px rgba(22,40,31,.35); border-bottom-color:var(--dourado); }
.barra{
  height:var(--altura-cabecalho);
  display:flex; align-items:center; gap:var(--e4);
}
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
        margin-right:auto; min-width:0; }
.marca .im{ flex-shrink:0; }
.marca .im{ width:76px; height:76px; border-radius:50%; }
.rodape .marca .im{ width:88px; height:88px; }
.marca-texto{ display:flex; flex-direction:column; line-height:1; }

.marca-hosp{ font-family:var(--f-manual); font-size:2rem; color:var(--dourado-texto); line-height:1.1; }

.menu{ display:flex; align-items:center; gap:var(--e1); }
.menu a{
  color:var(--tinta-suave); text-decoration:none; font-weight:600; font-size:.95rem;
  padding:9px 14px; border-radius:var(--raio-pill); transition:color .15s ease, background-color .15s ease;
}
@media (hover:hover) and (pointer:fine){
  .menu a:hover{ color:var(--tinta); background:var(--vestigio); }
}

.acoes-cabecalho{ display:flex; align-items:center; gap:var(--e2); }

/* Menu pendente "Quero apoiar" */
.pendente{ position:relative; }
.pendente-lista{
  position:absolute; top:calc(100% + 10px); right:0; min-width:250px;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra-alta); padding:8px; z-index:120;
  /* Abre a partir do botão (canto superior direito), rápido e sem ressalto. */
  transform-origin:top right;
  transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
@starting-style{
  .pendente-lista{ opacity:0; transform:translateY(-4px) scale(.97); }
}
.pendente-lista[hidden]{ display:none; }
/* Texto curto no telemóvel: "Apoiar" cabe ao lado do menu */
.txt-curto{ display:none; }
.pendente-lista a{
  display:block; padding:11px 14px; border-radius:var(--raio-peq);
  text-decoration:none; color:var(--tinta); font-weight:600; font-size:.95rem;
}
.pendente-lista a:hover, .pendente-lista a:focus-visible{ background:var(--vestigio); color:var(--tinta); }
.pendente-lista small{ display:block; font-weight:500; color:var(--tinta-suave); font-size:var(--t-micro); }
.seta{ transition:transform .18s var(--ease-out); }
.pendente[data-aberto="sim"] .seta{ transform:rotate(180deg); }

/* Botão hambúrguer */
.hamburguer{
  display:none; background:transparent; border:1.5px solid var(--linha-forte);
  border-radius:var(--raio-peq); width:44px; height:44px; cursor:pointer;
  align-items:center; justify-content:center; color:var(--verde);
}

/* ============================ Herói ============================ */
.heroi{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 82% 18%, var(--dourado-vestigio) 0%, transparent 62%),
    linear-gradient(180deg, var(--branco) 0%, var(--creme) 100%);
  padding:var(--e7) 0 var(--e6);
}
.heroi-grelha{
  /* texto e ilustração juntos ao centro, sem um vazio entre eles */
  display:grid; grid-template-columns:minmax(0,560px) minmax(0,440px);
  justify-content:center; gap:var(--e4); align-items:center;
}
.heroi h1{
  font-size:var(--t-display); letter-spacing:-.03em; margin-bottom:var(--e3);
  max-width:14ch;
}
.heroi h1 em{ font-style:normal; color:var(--dourado-botao); }
.heroi-texto > p{
  font-size:1.15rem; color:var(--tinta-suave); max-width:46ch; margin-bottom:var(--e5);
}
.heroi-botoes{ display:flex; flex-wrap:wrap; gap:var(--e2); margin-bottom:var(--e5); }
.heroi-selo{
  display:flex; align-items:center; gap:12px;
  padding-top:var(--e4); border-top:1px solid var(--linha);
  max-width:44ch; font-size:var(--t-peq); color:var(--tinta-suave);
}
.heroi-selo .im{ width:44px; height:44px; border-radius:50%; flex-shrink:0; }
.heroi-visual{ position:relative; }
.heroi-visual .im{ width:100%; max-width:430px; margin-inline:auto; aspect-ratio:520/662; }

/* Momento de entrada — a única animação "de autor" do site.
   Corre uma vez, ao abrir a página: o texto chega em cascata (70 ms entre peças)
   e a ilustração assenta. Sem JavaScript: se a animação não correr, está tudo visível. */
@keyframes chegar{
  from{ opacity:0; transform:translateY(14px); filter:blur(4px); }
}
@keyframes assentar{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
}
.heroi-texto > *{ animation:chegar .7s var(--ease-out) backwards; }
.heroi-texto > :nth-child(2){ animation-delay:70ms; }
.heroi-texto > :nth-child(3){ animation-delay:140ms; }
.heroi-texto > :nth-child(4){ animation-delay:210ms; }
.heroi-visual .im{ animation:assentar .9s var(--ease-out) 60ms backwards; }

/* ============================ Fita de números ============================
   Corre devagar e para ao passar o rato. O JS repete o conteúdo até encher o ecrã. */
.fita{
  background:linear-gradient(90deg, var(--dourado) 0%, var(--dourado-claro) 50%, var(--dourado) 100%);
  color:var(--tinta); padding:15px 0; overflow:hidden;
  border-block:1px solid var(--fita-linha);
}
.fita-carril{ display:flex; width:max-content; animation:desliza 48s linear infinite; }
.fita:hover .fita-carril{ animation-play-state:paused; }
.fita-item{ display:flex; align-items:center; gap:9px; padding:0 22px; white-space:nowrap; margin:0; }
.fita-item b{ font-family:var(--f-titulo); font-weight:800; font-size:1.45rem; letter-spacing:-.01em; }
.fita-item span{ font-size:var(--t-micro); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.fita-item em{ font-style:normal; font-size:var(--t-micro); font-weight:700; letter-spacing:.08em;
               text-transform:uppercase; color:var(--dourado-escuro); }
.fita-sep{ align-self:center; color:rgba(22,40,31,.45); padding:0 4px; }

/* Faixas que correm (números e parceiros): cada carril tem o conteúdo repetido
   um número par de vezes, por isso andar 50% volta exatamente ao início. */
@keyframes desliza{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .fita-carril, .marquise-carril{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:8px; }
  [data-copia]{ display:none !important; }
}

/* ============================ Secções ============================ */
/* Secções: fundos sólidos que alternam (branco / areia) e uma linha fina entre elas,
   para se perceber onde acaba uma e começa a seguinte. */
.seccao{ padding:var(--e8) 0; background:var(--branco); border-top:1px solid var(--linha); }
.seccao-creme{ background:var(--creme2); }
.seccao-fecha{ padding-bottom:var(--e6); }
.seccao-curta{ padding:var(--e6) 0; }
.seccao-branca{ background:var(--branco); }
.cabeca-seccao{ max-width:60ch; margin-bottom:var(--e6); }
.cabeca-seccao p{ color:var(--tinta-suave); font-size:1.075rem; }
#apoiar .cabeca-seccao{ max-width:none; }
#apoiar .cabeca-seccao h2{ max-width:none; text-wrap:pretty; }
#apoiar .cabeca-seccao p{ max-width:60ch; margin-inline:auto; }
.centrado{ margin-inline:auto; text-align:center; }

/* Porquê a música: ilustração numa coluna própria — deixa de passar
   por cima dos cartões, como acontece na versão atual. */
.porque{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--e6); align-items:center; margin-bottom:var(--e6);
}
.porque-imagem{ position:relative; }
/* Parágrafo de apoio a um título de secção: medida de leitura confortável */
.texto-guia{ color:var(--tinta-suave); font-size:1.075rem; max-width:62ch; }
.porque-imagem .im{ width:100%; max-width:430px; margin-inline:auto; aspect-ratio:900/650; }

.tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e4); }
.cartao{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e5); box-shadow:var(--sombra);
}
.cartao h3{ display:flex; align-items:center; gap:10px; }
.cartao p{ color:var(--tinta-suave); font-size:.98rem; }
.icone-passo{
  width:36px; height:36px; flex-shrink:0; border-radius:50%;
  background:var(--dourado-vestigio); color:var(--dourado-texto);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--dourado) 35%, transparent);
  display:grid; place-items:center;
}
.icone-passo svg{ width:20px; height:20px; }

/* Citação */
.citacao{
  position:relative; margin:var(--e6) auto 0; max-width:30ch;
  padding-top:var(--e5); text-align:center;
  font-family:var(--f-titulo); font-size:clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  font-weight:800; line-height:1.4; letter-spacing:-.01em;
  color:var(--verde-escuro); text-wrap:balance;
}
/* traco dourado: fecha a seccao em vez de deixar a frase a flutuar */
.citacao::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:56px; height:3px; border-radius:2px; background:var(--dourado);
}
.citacao span{ color:var(--dourado-texto); }

/* ============================ Rede de hospitais ============================ */
.hospitais{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.hospital{
  display:flex; align-items:center; gap:10px;
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio-peq); padding:14px 16px; font-size:.95rem; font-weight:600;
}
.ponto{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--linha-forte); }
.ponto-ativo{ background:var(--dourado); box-shadow:0 0 0 4px var(--dourado-vestigio); }
.estado{ margin-left:auto; font-size:var(--t-micro); font-weight:700; letter-spacing:.06em;
         text-transform:uppercase; color:var(--tinta-suave); white-space:nowrap; padding-left:8px; }
.estado-ativo{ color:var(--dourado-texto); }
.legenda{ display:flex; gap:var(--e4); flex-wrap:wrap; margin-top:var(--e4);
          font-size:var(--t-peq); color:var(--tinta-suave); }
.legenda span{ display:flex; align-items:center; gap:8px; }

/* ============================ Formas de apoiar ============================ */
.apoios{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e4); }
.apoio{
  display:flex; flex-direction:column;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e5) var(--e4); box-shadow:var(--sombra);
}
.apoio-destaque{ border-color:var(--dourado); box-shadow:0 0 0 3px var(--dourado-vestigio), var(--sombra); }
.apoio-fita{
  align-self:flex-start; font-size:var(--t-micro); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dourado-texto); background:var(--dourado-vestigio);
  padding:5px 12px; border-radius:var(--raio-pill); margin-bottom:var(--e3);
}
.apoio h3{ margin-bottom:4px; }
.apoio-sub{ font-size:var(--t-peq); color:var(--dourado-texto); font-weight:700; margin-bottom:var(--e3); }
.apoio ul{ margin-bottom:var(--e4); display:grid; gap:9px; }
.apoio li{ position:relative; padding-left:24px; font-size:.94rem; color:var(--tinta-suave); line-height:1.5; }
.apoio li::before{
  content:''; position:absolute; left:0; top:.5em; width:12px; height:7px;
  border-left:2.5px solid var(--dourado); border-bottom:2.5px solid var(--dourado);
  transform:rotate(-45deg);
}
.apoio .btn{ margin-top:auto; }
.apoios-nota{ text-align:center; margin-top:var(--e5); color:var(--tinta-suave); }
.apoios-nota a{ font-weight:700; }

/* Transparência: o que vai ser publicado, dito antes de haver números */
.transparencia-cabeca{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
                       gap:var(--e3) var(--e5); margin-bottom:var(--e5); }
.transparencia-cabeca .cabeca-seccao{ margin-bottom:0; }
.promessas{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e4); counter-reset:promessa; }
.promessa{
  position:relative; display:flex; flex-direction:column; gap:6px;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e5) var(--e4) var(--e4); box-shadow:var(--sombra); overflow:hidden;
}
.promessa::before{
  counter-increment:promessa; content:'0' counter(promessa);
  position:absolute; top:14px; right:20px;
  font-family:var(--f-titulo); font-weight:800; font-size:3.2rem; line-height:1;
  color:var(--dourado-vestigio); -webkit-text-stroke:1px color-mix(in srgb, var(--dourado) 55%, transparent);
}
.promessa .icone-passo{ width:48px; height:48px; margin-bottom:var(--e2); }
.promessa .icone-passo svg{ width:24px; height:24px; }
.promessa h3{ margin:0; }
.promessa p{ color:var(--tinta-suave); font-size:.98rem; margin:0 0 var(--e3); }
.promessa-estado{
  margin-top:auto; display:flex; align-items:center; gap:8px; padding-top:var(--e3);
  border-top:1px dashed var(--linha-forte);
  font-size:var(--t-micro); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-suave);
}
.promessa-estado::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--dourado);
                          box-shadow:0 0 0 4px var(--dourado-vestigio); }

/* ============================ Transparência ============================ */
.numeros{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e4); margin-bottom:var(--e5); }
.numero{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e5); text-align:center;
}
.numero b{ display:block; font-family:var(--f-titulo); font-size:clamp(1.8rem,1.3rem+1.6vw,2.6rem);
           color:var(--verde); letter-spacing:-.02em; }
.numero span{ font-size:var(--t-micro); font-weight:700; letter-spacing:.09em;
              text-transform:uppercase; color:var(--tinta-suave); }

/* Notas em relevo no fundo da dobra dos apoios: corpo quase da cor da
   seccao, sombra dourada e brilho quente — carimbadas, nao desenhadas. */
#apoiar{ position:relative; overflow:hidden; }
#apoiar::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22560%22%20height%3D%22560%22%20viewBox%3D%220%200%20560%20560%22%3E%3Cdefs%3E%3Cg%20id%3D%22a%22%3E%3Cellipse%20cx%3D%227.5%22%20cy%3D%2217%22%20rx%3D%224.2%22%20ry%3D%223.2%22%20transform%3D%22rotate%28-20%207.5%2017%29%22%2F%3E%3Crect%20x%3D%2210.6%22%20y%3D%223%22%20width%3D%221.8%22%20height%3D%2214%22%20rx%3D%22.9%22%2F%3E%3Cpath%20d%3D%22M12.4%203.2c3.4%201.2%205.2%203.1%204.6%206.2%201.7-3.6-.5-5.7-4.6-7.4z%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22b%22%3E%3Cellipse%20cx%3D%225%22%20cy%3D%2218%22%20rx%3D%223.6%22%20ry%3D%222.8%22%20transform%3D%22rotate%28-20%205%2018%29%22%2F%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2216%22%20rx%3D%223.6%22%20ry%3D%222.8%22%20transform%3D%22rotate%28-20%2016%2016%29%22%2F%3E%3Crect%20x%3D%227.6%22%20y%3D%225%22%20width%3D%221.6%22%20height%3D%2213%22%20rx%3D%22.8%22%2F%3E%3Crect%20x%3D%2218.6%22%20y%3D%223%22%20width%3D%221.6%22%20height%3D%2213%22%20rx%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M7.6%205.2%2020.2%203v3.2L7.6%208.4z%22%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%23dcc78f%22%3E%3Cuse%20href%3D%22%23a%22%20transform%3D%22translate%2842.5%2053%29%20rotate%28-12%29%20scale%283.6%29%22%2F%3E%3Cuse%20href%3D%22%23b%22%20transform%3D%22translate%28332.5%2093%29%20rotate%2810%29%20scale%283.0%29%22%2F%3E%3Cuse%20href%3D%22%23b%22%20transform%3D%22translate%2892.5%20333%29%20rotate%28-16%29%20scale%283.2%29%22%2F%3E%3Cuse%20href%3D%22%23a%22%20transform%3D%22translate%28402.5%20363%29%20rotate%287%29%20scale%282.8%29%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23fffdf5%22%3E%3Cuse%20href%3D%22%23a%22%20transform%3D%22translate%2838.5%2048%29%20rotate%28-12%29%20scale%283.6%29%22%2F%3E%3Cuse%20href%3D%22%23b%22%20transform%3D%22translate%28328.5%2088%29%20rotate%2810%29%20scale%283.0%29%22%2F%3E%3Cuse%20href%3D%22%23b%22%20transform%3D%22translate%2888.5%20328%29%20rotate%28-16%29%20scale%283.2%29%22%2F%3E%3Cuse%20href%3D%22%23a%22%20transform%3D%22translate%28398.5%20358%29%20rotate%287%29%20scale%282.8%29%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23f0f1e7%22%3E%3Cuse%20href%3D%22%23a%22%20transform%3D%22translate%2840%2050%29%20rotate%28-12%29%20scale%283.6%29%22%2F%3E%3Cuse%20href%3D%22%23b%22%20transform%3D%22translate%28330%2090%29%20rotate%2810%29%20scale%283.0%29%22%2F%3E%3Cuse%20href%3D%22%23b%22%20transform%3D%22translate%2890%20330%29%20rotate%28-16%29%20scale%283.2%29%22%2F%3E%3Cuse%20href%3D%22%23a%22%20transform%3D%22translate%28400%20360%29%20rotate%287%29%20scale%282.8%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:560px 560px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 190px,
                                     #000 calc(100% - 190px), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 190px,
                                     #000 calc(100% - 190px), transparent 100%);
}
#apoiar > .wrap{ position:relative; z-index:1; }

/* ============================ Dobra de parceiros ============================
   Faixa que corre (pausa ao passar o rato). As pontas esbatem-se. */
.marquise{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquise-carril{ display:flex; width:max-content; list-style:none; margin:0; padding:6px 0;
                  animation:desliza 40s linear infinite; }
.marquise:hover .marquise-carril, .marquise:focus-within .marquise-carril{ animation-play-state:paused; }
.marquise-carril > li{ display:flex; padding-right:14px; }
.parceiros-grelha{ display:flex; flex-wrap:wrap; gap:14px; list-style:none; margin:0; padding:0; }
.parceiros-grelha > li{ display:flex; }
.selo-parceiro{
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px 26px; min-height:112px; min-width:200px; white-space:nowrap;
}
a.selo-parceiro{ text-decoration:none; color:inherit; transition:border-color .18s ease, background-color .18s ease, transform .16s var(--ease-out); }
a.selo-parceiro:active{ transform:scale(.97); }
.selo-parceiro b{ font-family:var(--f-titulo); font-size:1.02rem; letter-spacing:-.01em; }
.selo-parceiro small{
  font-size:var(--t-micro); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.selo-parceiro .im{ height:58px; margin-bottom:6px; }
.selo-parceiro .im-crm{ width:92px; }
.selo-parceiro .im-amsm{ width:116px; }
.selo-parceiro:has(.im), .selo-parceiro:has(.logo-bedigi){ align-items:center; }
/* Logótipo da bedigi: é tipografia (como no site deles), não imagem */
.logo-bedigi{
  font-family:'Inter', 'Segoe UI', Arial, sans-serif; font-weight:900; font-size:2rem;
  letter-spacing:-.04em; line-height:58px; height:58px; margin-bottom:6px; color:#0f172a;
}
.logo-bedigi span{ background:linear-gradient(135deg, #38bdf8, #0284c7);
                   -webkit-background-clip:text; background-clip:text; color:transparent; }
.selo-convite{
  background:transparent; border:2px dashed var(--dourado); color:var(--dourado-texto);
  text-decoration:none; align-items:center; text-align:center;
}
@media (hover:hover) and (pointer:fine){
  .selo-convite:hover{ background:var(--dourado-vestigio); border-color:var(--dourado-texto); }
}
.selo-convite small{ color:var(--dourado-texto); }

/* ============================ Chamada final ============================
   Painel claro em três partes: ilustração, mensagem, ações. Sem fundo verde:
   o verde é dos botões. */
.chamada-faixa{ padding:var(--e7) 0; background:var(--branco); border-top:1px solid var(--linha); }
.chamada{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--e4) var(--e6);
  background:linear-gradient(120deg, var(--dourado-vestigio) 0%, var(--creme2) 100%);
  border:1px solid color-mix(in srgb, var(--dourado) 45%, transparent);
  border-radius:24px; padding:var(--e6) var(--e6);
  box-shadow:var(--sombra);
}
.chamada:has(.chamada-visual){ grid-template-columns:auto minmax(0,1fr) auto; padding-left:var(--e5); }
.chamada-visual{ width:190px; aspect-ratio:1; }
.chamada h2{ margin-bottom:var(--e2); max-width:22ch; }
.chamada p{ color:var(--tinta-suave); max-width:52ch; margin:0; }
.chamada-acoes{ display:grid; gap:10px; justify-items:stretch; min-width:240px; }
.chamada-acoes .btn{ justify-content:center; }
.chamada-tel{ margin:2px 0 0; text-align:center; font-size:var(--t-peq); color:var(--tinta-suave); }
.chamada-tel a{ color:var(--tinta); font-weight:700; }
/* compatibilidade: chamada sem coluna de ações (página O Projeto) */
.chamada-botoes{ display:flex; gap:var(--e2); flex-wrap:wrap; }

/* ============================ Rodapé ============================ */
.rodape{ background:var(--branco); border-top:3px solid var(--dourado); padding:var(--e7) 0 var(--e5); }
.rodape-marca{ margin-bottom:var(--e3); }
.rodape-sobre{ font-size:var(--t-peq); color:var(--tinta-suave); margin-bottom:var(--e3); max-width:34ch; }
.rodape-grelha{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:var(--e5); align-items:start; }

/* Contactos com icone: o texto alinha, o icone fica fixo a esquerda */
.lista-contactos li{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:13px;
  font-size:var(--t-peq); color:var(--tinta-suave); line-height:1.5;
}
.lista-contactos svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--dourado-texto); }
.lista-contactos a{ color:var(--tinta-suave); text-decoration:none; }
.lista-contactos a:hover{ color:var(--verde); text-decoration:underline; }

/* Listas de ligacoes com seta dourada que avanca ao passar o rato */
.lista-setas a{ display:inline-flex; align-items:center; gap:10px; }
.lista-setas a::before{
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--dourado); transition:transform .16s ease;
}
.lista-setas a:hover::before{ transform:scale(1.45); }
.rodape-titulo{ font-size:var(--t-peq); letter-spacing:.09em; text-transform:uppercase;
                color:var(--tinta-suave); margin-bottom:var(--e3); }
.rodape li{ margin-bottom:9px; }
.rodape a{ color:var(--tinta-suave); text-decoration:none; font-size:.95rem; }
.rodape a:hover{ color:var(--verde); text-decoration:underline; }
.morada{ font-size:var(--t-peq); color:var(--tinta-suave); line-height:1.75; }
.rodape-fim{
  border-top:1px solid var(--linha); margin-top:var(--e6); padding-top:var(--e4);
  font-size:var(--t-peq); color:var(--tinta-suave); display:flex; flex-wrap:wrap;
  gap:var(--e3); justify-content:space-between;
}
.rodape-fim a{ color:var(--dourado-texto); font-weight:700; }

/* ============================ WhatsApp ============================ */
.whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:56px; height:56px; border-radius:50%; background:#25d366;
  display:grid; place-items:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  transition:transform .16s var(--ease-out);
}
.whatsapp:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){
  .whatsapp:hover{ transform:scale(1.06); }
}

/* ============================ Responsivo ============================ */
@media (max-width: 1024px){
  .menu{
    position:absolute; top:calc(100% + 1px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--branco); border-bottom:1px solid var(--linha);
    padding:var(--e3) 24px var(--e4); box-shadow:var(--sombra-alta);
  }
  .menu[hidden]{ display:none; }
  .menu a{ padding:13px 14px; font-size:1rem; }
  .hamburguer{ display:flex; }
  /* O menu desce do cabeçalho, curto e rápido */
  .menu{ transform-origin:top; transition:opacity .2s var(--ease-out), transform .2s var(--ease-out); }
  @starting-style{ .menu{ opacity:0; transform:translateY(-6px); } }
}
@media (max-width: 980px){
  .heroi-grelha{ grid-template-columns:1fr; gap:var(--e5); }
  /* A ilustração vem primeiro, mais pequena; o título segue */
  .heroi-visual .im{ max-width:260px; }
  .promessas{ grid-template-columns:1fr; }
  .chamada, .chamada:has(.chamada-visual){ grid-template-columns:1fr; text-align:center; justify-items:center; padding:var(--e5) var(--e4); }
  .chamada-visual{ width:150px; }
  .chamada h2, .chamada p{ margin-inline:auto; }
  .chamada-acoes{ width:100%; max-width:340px; }
  .heroi{ padding:var(--e5) 0 var(--e6); }
  .heroi h1{ max-width:none; }
  .porque{ grid-template-columns:1fr; }
  /* no telemóvel, sempre a ilustração primeiro e o texto depois */
  .heroi-visual{ order:-1; }
  .porque-imagem .im{ max-width:320px; }
  .tres, .apoios{ grid-template-columns:repeat(2,1fr); }
  .rodape-grelha{ grid-template-columns:1fr 1fr; gap:var(--e5); }
  .rodape-grelha > :first-child{ grid-column:1 / -1; }
}
@media (max-width: 760px){
  :root{ --e7:3rem; --e8:3.75rem; }
  .tres, .apoios{ grid-template-columns:1fr; }
  .heroi-botoes .btn{ flex:1 1 100%; justify-content:center; }
  .heroi-visual .im{ max-width:210px; }
  :root{ --altura-cabecalho:72px; }
  .marca .im{ width:56px; height:56px; }
  .marca-hosp{ font-size:1.5rem; }
}
@media (max-width: 560px){
  :root{ --altura-cabecalho:64px; }
  .marca .im{ width:48px; height:48px; }
  .marca-hosp{ font-size:1.3rem; }
  /* "Quero apoiar" fica, mais curto: a ação principal nunca desaparece */
  .txt-largo{ display:none; }
  .txt-curto{ display:inline; }
  .acoes-cabecalho .btn-peq{ padding:9px 14px; }
  .fita{ padding:12px 0; }
  .fita-item b{ font-size:1.25rem; }
  .whatsapp{ width:48px; height:48px; right:14px; bottom:14px; }
  .whatsapp svg{ width:24px; height:24px; }
}

/* ============================================================
   Páginas interiores — acrescentado ao sistema já existente
   ============================================================ */

[data-vista][hidden]{ display:none !important; }

/* Cabeçalho de página interior */
.topo-pagina{
  background:linear-gradient(180deg, var(--branco) 0%, var(--creme) 100%);
  padding:var(--e7) 0 var(--e6); border-bottom:1px solid var(--linha);
}
.topo-pagina h1{
  font-size:clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing:-.025em;
  max-width:20ch; margin-bottom:var(--e3);
}
.topo-pagina p{ color:var(--tinta-suave); font-size:1.075rem; max-width:60ch; }

/* Tabelas */
.tabela-envolve{ overflow-x:auto; border-radius:var(--raio); border:1px solid var(--linha); background:var(--branco); }
.tabela{ width:100%; border-collapse:collapse; min-width:520px; }
.tabela th, .tabela td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--linha); font-size:.95rem; }
.tabela tr:last-child td{ border-bottom:none; }
.tabela th{
  background:var(--creme2); font-size:var(--t-micro); font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-suave);
}
.tabela td strong{ color:var(--tinta); }
.tabela td:last-child{ font-family:var(--f-titulo); font-weight:800; color:var(--verde); white-space:nowrap; }

/* Indicadores */
.indicadores{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e4); }
.indicador{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e5) var(--e4); text-align:center;
}
.indicador b{
  display:block; font-family:var(--f-titulo); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.7rem,1.3rem+1.4vw,2.4rem); color:var(--verde); margin-bottom:4px;
}
.indicador span{ font-size:var(--t-peq); color:var(--tinta-suave); line-height:1.4; display:block; }

/* Formulários */
.duas-colunas{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e4); align-items:start; }
.cartao-form{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e5); box-shadow:var(--sombra);
}
.cartao-form{ position:relative; }
.titulo-cartao{ font-size:var(--t-h3); line-height:1.3; margin-bottom:6px; }
.cartao-form > p{ color:var(--tinta-suave); font-size:.95rem; margin-bottom:var(--e4); }
/* Estado de uma ficha que ainda não abriu: canto do cartão, não por cima do título */
.nota-fase{
  position:absolute; top:var(--e4); right:var(--e4);
  font-size:var(--t-micro); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dourado-texto); background:var(--dourado-vestigio);
  padding:4px 10px; border-radius:var(--raio-pill);
}
#ficha-artista .titulo-cartao{ padding-right:9rem; }
.nota-obrigatorios{ font-size:var(--t-peq); color:var(--tinta-suave); margin:0; }
/* O que acontece depois de enviar: aparece quando se chega por um botão de apoio */
.proximo-passo{
  background:var(--vestigio); border-radius:var(--raio-peq);
  padding:12px 16px; font-size:.95rem; color:var(--verde-escuro); margin-bottom:var(--e4);
}
.proximo-passo[hidden]{ display:none; }
.ficha-contacto-sub{ color:var(--tinta-suave); font-size:.95rem; margin-bottom:var(--e4); }
.formulario{ display:grid; gap:var(--e3); }
.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e3); }
.campo{ display:grid; gap:6px; }
.campo label{ font-size:var(--t-peq); font-weight:700; color:var(--tinta); }
.campo input, .campo select, .campo textarea{
  font-family:inherit; font-size:1rem; color:var(--tinta); background:var(--branco);
  border:1.5px solid var(--linha-forte); border-radius:var(--raio-peq);
  padding:12px 14px; width:100%; transition:border-color .15s ease, box-shadow .15s ease;
}
.campo textarea{ min-height:110px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px var(--vestigio);
}
.campo input::placeholder, .campo textarea::placeholder{ color:var(--placeholder); }
.obrigatorio{ color:var(--dourado-texto); }

.mensagem-obrigado{
  margin-top:var(--e4); background:var(--vestigio); border:1px solid var(--linha-forte);
  border-radius:var(--raio-peq); padding:14px 18px; font-size:.95rem; color:var(--verde-escuro);
}
.mensagem-obrigado[hidden]{ display:none; }

/* Consentimento RGPD */
.consentimento{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  font-size:var(--t-peq); line-height:1.5; color:var(--tinta-suave); cursor:pointer;
}
.consentimento input{ width:18px; height:18px; margin-top:2px; accent-color:var(--verde); cursor:pointer; }
.consentimento a{ color:var(--verde); font-weight:600; }

/* Armadilha para robôs: fora do ecrã, invisível para pessoas e leitores de ecrã */
.campo-armadilha{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.mensagem-erro{
  background:var(--erro-fundo); border:1px solid var(--erro-linha); border-radius:var(--raio-peq);
  padding:12px 16px; font-size:.95rem; color:var(--erro); margin:0;
}
.mensagem-erro[hidden]{ display:none; }
.campo [aria-invalid="true"]{ border-color:var(--erro-linha); }
.formulario button[disabled]{ opacity:.6; cursor:wait; }

/* Texto legal */
.texto-legal{ max-width:68ch; }
.texto-legal h2{ font-size:1.35rem; margin-top:var(--e6); margin-bottom:var(--e2); }
.texto-legal h2:first-child{ margin-top:0; }
.texto-legal p{ color:var(--tinta-suave); }
.texto-legal a:not(.btn){ color:var(--verde); font-weight:600; }
.por-preencher{
  margin-top:var(--e5); background:var(--dourado-vestigio); border:1px solid #ecd9a4;
  border-radius:var(--raio-peq); padding:14px 18px; font-size:var(--t-peq); color:#6b5310;
}

/* Perguntas frequentes */
.faq{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  margin-bottom:12px; overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:18px 22px; font-family:var(--f-titulo); font-weight:800;
  font-size:1.05rem; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:18px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; width:9px; height:9px; flex-shrink:0;
  border-right:2.5px solid var(--dourado); border-bottom:2.5px solid var(--dourado);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease;
}
.faq[open] summary::after{ transform:rotate(-135deg); }
.faq[open] summary{ color:var(--verde); }
.faq-corpo{ padding:0 22px 20px; color:var(--tinta-suave); font-size:.98rem; }

/* Bloco de contactos */
.ficha-contacto{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e5); box-shadow:var(--sombra);
}

/* ============================================================
   Movimento de resposta — curto, só quando algo muda por ação da pessoa
   ============================================================ */

/* Mudar de página: a nova página chega, em vez de aparecer de golpe.
   Só depois da primeira navegação, para não repetir o momento de entrada. */
@keyframes vista-chega{ from{ opacity:0; transform:translateY(8px); } }
.navegou main[data-vista]:not([hidden]){ animation:vista-chega .28s var(--ease-out); }

/* Mensagens de sucesso, erro e próximo passo */
.mensagem-obrigado, .mensagem-erro, .proximo-passo{
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
@starting-style{
  .mensagem-obrigado, .mensagem-erro, .proximo-passo{ opacity:0; transform:translateY(4px); }
}

/* Perguntas frequentes: a resposta desliza um pouco ao abrir */
@keyframes resposta-abre{ from{ opacity:0; transform:translateY(-4px); } }
.faq[open] .faq-corpo{ animation:resposta-abre .24s var(--ease-out); }
.faq summary::after{ transition:transform .2s var(--ease-out); }

/* Movimento reduzido: menos e mais suave, não zero. Fica o esbater; saem as deslocações. */
@keyframes so-esbate{ from{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .heroi-texto > *, .heroi-visual .im,
  .navegou main[data-vista]:not([hidden]),
  .faq[open] .faq-corpo{ animation:so-esbate .2s ease both; animation-delay:0s; }
  .btn:active, a.selo-parceiro:active, .whatsapp:active{ transform:none; }
  .pendente-lista, .menu, .mensagem-obrigado, .mensagem-erro, .proximo-passo{ transform:none !important; }
}

@media (max-width: 900px){
  .indicadores{ grid-template-columns:repeat(2,1fr); }
  .duas-colunas{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .dupla{ grid-template-columns:1fr; }
  .indicadores{ grid-template-columns:1fr; }
}

.visualmente-escondido{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
#menu a[aria-current="page"]{ color:var(--tinta); background:var(--vestigio); box-shadow:inset 0 -2px 0 var(--dourado); }