/* rodrigobelo.pt: estilo. Cores, letra e escala vêm de tokens.css (fonte: design.md). */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--tinta); }
body {
  margin: 0; font-family: var(--letra); font-weight: var(--peso-corpo);
  font-size: var(--t-corpo); line-height: 1.6; letter-spacing: var(--track-corpo);
  color: var(--tinta); background: var(--branco); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; }
.escuro :focus-visible, .entrada :focus-visible, .painel :focus-visible { outline-color: #fff; }
.menu-redondo:focus-visible, .menu-aberto .menu-redondo:focus-visible { outline-color: #fff; outline-offset: -8px; }

/* Lenis (scroll suave só com rato) */
html.lenis-stopped, html.menu-aberto { overflow: hidden; }

.salto { position: fixed; left: 1rem; top: -4rem; z-index: 300; background: var(--tinta); color: #fff; padding: .75rem 1.25rem; border-radius: var(--r-pilula); transition: top .3s var(--e-saida); }
.salto:focus { top: 1rem; }

/* ---------- cortina de abertura (só com JS e sem movimento reduzido) ---------- */
.cortina { display: none; position: fixed; inset: 0; z-index: 200; place-items: center; background: var(--carvao); color: #fff; }
.cortina p { font-size: 3.375rem; font-weight: var(--peso-titulo); letter-spacing: var(--track-titulo); line-height: 1; }
.js .cortina { display: grid; animation: cortina-fim 0s 7s forwards; } /* rede de segurança se o JS falhar a meio */
@keyframes cortina-fim { to { visibility: hidden; } }

/* ---------- topo ---------- */
.topo { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 2rem var(--margem) 0; color: var(--tinta); }
.topo-links { display: none; gap: 2.6rem; }
.topo-links a, .menu-texto { position: relative; }
.topo-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .8s var(--e-nav); }
.topo-links a:hover::after, .topo-links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.menu-texto { display: none; align-items: center; gap: .6rem; background: none; border: 0; color: inherit; letter-spacing: inherit; padding: .75rem 0; min-height: 44px; cursor: pointer; }
.js .menu-texto { display: inline-flex; }
.menu-texto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@media (min-width: 768px) { .topo-links { display: flex; } .js .menu-texto { display: none; } .topo { padding-top: 2.4rem; } }

/* A caixa mostra/esconde (scale); o botão lá dentro é o que o magnético move: o GSAP reescreve o transform do elemento que anima e apagaria o scale. */
.menu-caixa { position: fixed; z-index: 30; top: 1.8rem; right: clamp(1.25rem, 2.5vw, 2.5rem); width: clamp(3.75rem, 5.5vw, 4.95rem); aspect-ratio: 1; display: none; scale: 0; visibility: hidden; transition: scale .4s var(--e-menu), visibility 0s .4s; }
.js .menu-caixa { display: block; }
.menu-caixa.visivel, .menu-aberto .menu-caixa { scale: 1; visibility: visible; transition-delay: 0s; }
.menu-aberto .menu-caixa { z-index: 60; }
.menu-redondo { width: 100%; height: 100%; border-radius: 50%; border: 0; background: var(--tinta); display: grid; place-content: center; gap: 7px; cursor: pointer; transition: background-color .4s var(--e-saida); }
.menu-redondo i { display: block; width: 22px; height: 1.5px; background: #fff; transition: transform .4s var(--e-saida); }
.menu-redondo.sobre-escuro { background: #2a2b2f; border: 1px solid rgb(255 255 255 / .25); }
@media (hover: hover) { .menu-redondo.sobre-escuro:hover { background: var(--azul); } }
.menu-aberto .menu-redondo { background: var(--azul); border-color: transparent; }
.painel:focus { outline: none; }
.menu-aberto .menu-redondo i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-aberto .menu-redondo i:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* ---------- entrada ---------- */
.entrada { position: relative; min-height: 640px; height: 100svh; background: var(--cinza); color: #fff; overflow: hidden; }
.foto { position: absolute; z-index: 1; bottom: 0; left: 50%; translate: -50% 0; height: 100%; }
.foto img { height: 100%; width: auto; max-width: none; }
@media (max-width: 767px) { .foto { height: 92%; translate: -53% 0; } }
@media (min-width: 768px) { .foto { left: 47%; height: 94%; } }

/* Parado (sem JS ou movimento reduzido): uma só vez e inteiro; a correr (classe "corre"): grupos repetidos com a barra. */
.nome { position: absolute; z-index: 3; left: 0; right: 0; bottom: 20%; margin: 0; padding-left: var(--margem); overflow: hidden; font-size: 15vw; font-weight: var(--peso-titulo); line-height: 1.25; letter-spacing: var(--track-nome); white-space: nowrap; }
.corre .nome { padding-left: 0; font-size: var(--t-nome); }
@media (min-width: 768px) { .nome { bottom: 1%; } }
.faixa { display: inline-flex; width: max-content; }
.grupo { display: inline-flex; align-items: center; }
.barra { display: none; width: .42em; height: .075em; background: currentColor; margin: 0 .3em; transform: translateY(.04em); }
.corre .barra { display: inline-block; }

.pastilha { position: absolute; z-index: 4; left: 0; top: 46%; display: none; align-items: center; gap: 1.6rem; padding: .9rem .9rem .9rem var(--margem); border-radius: 0 var(--r-pilula) var(--r-pilula) 0; background: var(--pastilha); line-height: 1.2; }
.hora-pastilha { max-width: 4.5em; }
.pastilha .globo { width: 70px; height: 70px; border-radius: 50%; background: var(--cinza); display: grid; place-content: center; }
@media (min-width: 768px) { .pastilha { display: flex; } }

.frase { position: absolute; z-index: 4; left: var(--margem); right: 6rem; bottom: 5%; font-size: clamp(1.25rem, 5vw, 1.5rem); line-height: 1.3; letter-spacing: var(--track-corpo); }
.frase svg { display: block; margin-bottom: 1.2rem; }
@media (min-width: 768px) { .frase { left: 70.5%; right: auto; bottom: auto; top: 33%; width: 22rem; font-size: clamp(1.5rem, 2vw, 2.15rem); } }

/* ---------- secções claras ---------- */
.seccao { position: relative; padding: var(--seccao-y) var(--margem); }
.sem-topo { padding-top: 0; }
.interior { padding-left: var(--recuo); padding-right: var(--recuo); }
.etiqueta-seccao { font-size: var(--t-etiqueta); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); margin-bottom: clamp(2rem, 4vw, 4rem); }
.titulo-frase { font-size: var(--t-frase); font-weight: var(--peso-corpo); line-height: 1.45; letter-spacing: -.02em; max-width: 26ch; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.pilula { display: inline-block; border: 1px solid var(--tinta); border-radius: var(--r-pilula); padding: .25rem 1rem; font-size: var(--t-pequeno); line-height: 1.5; letter-spacing: 0; white-space: nowrap; }

/* O que faço */
.oferta { display: grid; gap: 1.5rem 4rem; border-top: 1px solid var(--linha); padding: 2.75rem 0 3.5rem; }
.oferta:last-child { border-bottom: 1px solid var(--linha); }
.oferta h3 { font-size: var(--t-titulo); font-weight: var(--peso-titulo); line-height: 1.05; letter-spacing: var(--track-titulo); }
.oferta .lado { display: grid; gap: 1.25rem; align-content: start; justify-items: start; max-width: 24rem; }
.oferta .lado p { color: var(--texto-2); }
@media (min-width: 768px) { .oferta { grid-template-columns: 6fr 4fr; align-items: start; } }

/* Portefólio */
.linhas { border-top: 1px solid var(--linha); }
.linha { display: grid; gap: .9rem 3rem; padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--linha); transition: border-color .3s var(--e-linha); }
.linha .cartaz { order: -1; background: #fff; aspect-ratio: 8/5; overflow: hidden; }
.linha .cartaz img { width: 100%; height: 100%; object-fit: cover; }
.linha h3 { font-size: var(--t-linha); font-weight: var(--peso-titulo); line-height: 1.1; letter-spacing: var(--track-titulo); }
.linha .descr { color: var(--texto-2); max-width: 36ch; }
.linha .texto { display: grid; gap: .6rem; }
.linha .meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (max-width: 767px) { .linhas { border-top: 0; } .linha { padding: 0 0 2rem; margin-bottom: 2rem; } }
@media (min-width: 768px) {
  .linha { grid-template-columns: 6.5fr 3.5fr; align-items: center; padding: 2.4rem 0; }
  .linha .cartaz { grid-column: 1 / -1; }
  .linha .meta { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: .9rem; }
}
/* Com rato: a imagem sai da linha e aparece na prévia que segue o cursor (só quando o JS a montou). As etiquetas não esbatem: contraste sempre AA. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .previa-ligada .cartaz { display: none; }
  .previa-ligada .linhas:hover .linha:not(:hover) :is(h3, .descr) { opacity: .28; }
  .linha h3, .linha .descr { transition: opacity .3s var(--e-linha); }
  .linha:hover { border-bottom-color: var(--tinta); }
}
.previa { position: fixed; z-index: 40; left: 0; top: 0; width: 24rem; aspect-ratio: 1; background: var(--carvao); display: grid; place-items: center; pointer-events: none; }
.previa img { width: 86%; aspect-ratio: 8/5; object-fit: cover; }

/* Como funciona */
.passos { display: grid; gap: 3rem; }
.passo { border-top: 1px solid var(--tinta); padding-top: 1.5rem; display: grid; gap: 1.25rem; align-content: start; }
.passo h3 { font-size: clamp(1.75rem, 3vw, 3.25rem); font-weight: var(--peso-titulo); line-height: 1.08; letter-spacing: var(--track-titulo); }
.passo p { color: var(--texto-2); max-width: 28ch; }
@media (min-width: 768px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 3rem; } .passo:nth-child(2) { margin-top: 6vw; } .passo:nth-child(3) { margin-top: 12vw; } }

/* Porquê eu */
.razao { display: grid; gap: 1rem 3rem; padding: clamp(1.5rem, 3vw, 3rem) 0; }
.razao h3 { font-size: var(--t-grande); font-weight: var(--peso-titulo); line-height: 1; letter-spacing: var(--track-titulo); }
.razao p { color: var(--texto-2); max-width: 24ch; }
@media (min-width: 768px) { .razao { grid-template-columns: 7fr 3fr; align-items: end; } }

/* ---------- contacto + rodapé ---------- */
.escuro { position: relative; background: var(--tinta); color: #fff; padding: calc(var(--curva) * .31 + clamp(4rem, 8vw, 8rem)) var(--margem) 2.5rem; }
.escuro > .curva { position: absolute; left: 0; right: 0; top: 0; height: var(--curva); background: var(--branco); border-radius: 0 0 50% 50% / 0 0 100% 100%; transform-origin: top; transform: scaleY(.31); } /* .31 = estado final; o JS anima de 1 até aqui */
.contacto, .rodape { position: relative; }
.contacto { padding: 0 var(--recuo); }
.contacto h2 { font-size: var(--t-rodape); font-weight: var(--peso-titulo); line-height: 1.05; letter-spacing: var(--track-titulo); display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 0 1.5rem; }
@media (max-width: 767px) { .contacto h2 { font-size: 10.5vw; gap: 0 .75rem; } .avatar { width: 1.5em; } }
.avatar { flex: none; width: clamp(3rem, 5.2vw, 4.7rem); aspect-ratio: 1; border-radius: 50%; background: var(--cinza); overflow: hidden; position: relative; }
.avatar img { height: auto; position: absolute; width: 140%; left: -23%; top: -3%; max-width: none; }
.contacto .apoio { margin-top: 1.75rem; color: var(--claro-2); font-size: clamp(1.1rem, 1.5vw, 1.45rem); max-width: 34ch; }
.botao-redondo { position: relative; width: var(--botao-redondo); height: var(--botao-redondo); border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 800; letter-spacing: var(--track-corpo); overflow: hidden; }
.botao-redondo::before { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(101%); transition: transform .5s var(--e-saida); }
.botao-redondo span { position: relative; transition: color .35s var(--e-saida); }
.pilula-grande { display: inline-flex; align-items: center; height: 4.5rem; padding: 0 2.7rem; border: 1px solid var(--linha-esc); border-radius: var(--r-pilula); transition: background .4s var(--e-saida), color .4s var(--e-saida); }
.botao-redondo:focus-visible::before { transform: none; }
.botao-redondo:focus-visible span { color: var(--tinta); }
.botao-redondo:focus-visible { outline-offset: 6px; }
@media (hover: hover) {
  .botao-redondo:hover::before { transform: none; }
  .botao-redondo:hover span { color: var(--tinta); }
  .pilula-grande:hover { background: #fff; color: var(--tinta); }
}


/* ---------- formulário compacto (v2, design.md §5b): título único é "Vamos falar?" ---------- */
.corpo-contacto { margin-top: 2rem; }
.lateral { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; }
.lateral .botao-redondo { align-self: flex-end; }
.lateral .pilula-grande { justify-content: center; padding: 0 1rem; }
.coluna-form { margin-top: 3rem; }
.form-titulo { font-size: var(--t-corpo); font-weight: var(--peso-corpo); letter-spacing: var(--track-corpo); line-height: 1.4; }
.formulario { margin-top: 1.5rem; display: grid; gap: 1.5rem; container-type: inline-size; }
.linha-dupla { display: grid; gap: 1.5rem; }
@container (min-width: 600px) { .linha-dupla { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.pergunta { display: block; margin-bottom: .375rem; font-size: var(--t-pequeno); font-weight: var(--peso-corpo); line-height: 1.4; color: var(--claro-2); }
.controlo { display: block; width: 100%; height: 3rem; padding: 0; border: 0; border-bottom: 1px solid var(--campo-linha); border-radius: 0; background: transparent; color: #fff; font: inherit; font-size: var(--t-corpo); letter-spacing: var(--track-corpo); transition: box-shadow .2s var(--e-saida), border-color .2s var(--e-saida); }
textarea.controlo { height: auto; min-height: 6rem; padding: .75rem 0 0; resize: vertical; }
.controlo::placeholder { color: var(--claro-2); opacity: 1; }
.controlo:focus { outline: none; border-bottom-color: #fff; box-shadow: inset 0 -1px 0 #fff; }
.controlo[aria-invalid="true"], .controlo[aria-invalid="true"]:focus { border-bottom-color: var(--erro); box-shadow: inset 0 -1px 0 var(--erro); }
.opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcao { position: relative; cursor: pointer; }
.opcao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcao span { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--campo-linha); border-radius: var(--r-pilula); font-size: var(--t-pequeno); transition: background .3s var(--e-saida), color .3s var(--e-saida), border-color .3s var(--e-saida); }
.opcao input:checked + span { background: #fff; border-color: #fff; color: var(--tinta); }
.opcao input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.opcoes[aria-invalid="true"] .opcao span { border-color: var(--erro); }
@media (hover: hover) { .opcao:hover input:not(:checked) + span { border-color: #fff; } }
.erro { margin-top: .5rem; color: var(--erro); font-size: .875rem; }
.erro:empty { display: none; }
.erro:not(:empty)::before { content: "! "; font-weight: 800; }
.isco { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile:not(:empty) { margin-top: -.25rem; }
.falha { margin-bottom: -.5rem; color: var(--erro); font-size: var(--t-pequeno); }
.falha:empty { display: none; }
.falha::before { content: "! "; font-weight: 800; }
.falha a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.envio { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.botao-enviar { height: 3.5rem; padding: 0 2rem; border: 0; border-radius: var(--r-pilula); background: #fff; color: var(--tinta); font: inherit; font-size: 1.0625rem; font-weight: 800; letter-spacing: var(--track-corpo); cursor: pointer; transition: background .3s var(--e-linha), color .3s var(--e-linha), transform .15s var(--e-saida); }
.botao-enviar:active:not(:disabled) { transform: scale(.97); }
.botao-enviar:disabled { cursor: progress; }
.botao-enviar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .botao-enviar:hover:not(:disabled) { background: var(--azul); color: #fff; } }
.privacidade { color: var(--claro-2); font-size: .875rem; max-width: 36ch; }
.estado { font-size: var(--t-frase); letter-spacing: -.02em; line-height: 1.3; }
.estado:empty { display: none; }
.estado a { text-decoration: underline; text-underline-offset: .2em; }
.estado:focus { outline: none; }
@media (max-width: 767px) {
  .botao-enviar { width: 100%; }
  .privacidade { font-size: .75rem; }
}
@media (min-width: 768px) {
  .contacto { padding: 0; }
  .corpo-contacto { margin-top: 2.5rem; }
  .lateral { flex-direction: row; align-items: center; gap: 2rem; }
  .lateral .botao-redondo { align-self: auto; margin-bottom: 0; }
  .lateral .pilula-grande { padding: 0 2.7rem; }
  .coluna-form { max-width: 40rem; }
  .formulario { gap: 1.75rem; }
}
@media (min-width: 1200px) {
  .contacto { padding: 0 0 0 var(--recuo); }
  .corpo-contacto { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 1.5rem; align-items: start; margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--linha-esc); }
  .coluna-form { grid-column: 1 / 8; grid-row: 1; margin-top: 0; max-width: none; }
  .lateral { grid-column: 9 / 13; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}
.rodape { margin-top: clamp(5rem, 9vw, 9rem); padding: 2rem 0 0; border-top: 1px solid var(--linha-esc); display: grid; gap: 2rem; font-size: var(--t-pequeno); }
.rodape .quem { display: grid; gap: .35rem; }
.rodape .quem span { color: var(--claro-2); }
.rodape .ligas { display: grid; gap: .35rem; justify-items: start; }
.rodape .ligas a { position: relative; }
.rodape .ligas a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--e-saida); }
.rodape .ligas a:hover::after, .rodape .ligas a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.rodape .topo-link { justify-self: start; }
.rodape .topo-link .pilula-grande { height: 3.25rem; padding: 0 1.75rem; font-size: var(--t-pequeno); }
@media (min-width: 768px) { .rodape { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: start; } .rodape .topo-link { justify-self: end; } }

/* botão flutuante de WhatsApp (só telemóvel): some quando o Contacto aparece */
.flutuante { position: fixed; z-index: 25; right: 1rem; bottom: 1rem; width: 5.25rem; height: 5.25rem; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-size: .8125rem; font-weight: 800; letter-spacing: 0; transition: scale .3s cubic-bezier(.5, 1, .89, 1), opacity .3s cubic-bezier(.5, 1, .89, 1), visibility 0s; }
.flutuante.oculto { scale: .8; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, .3s; }
@media (min-width: 768px) { .flutuante { display: none; } }

/* ---------- menu aberto ---------- */
.vela { position: fixed; inset: 0; z-index: 45; background: rgb(28 29 32 / .3); opacity: 0; visibility: hidden; transition: opacity .5s var(--e-saida), visibility 0s .5s; }
.menu-aberto .vela { opacity: 1; visibility: visible; transition-delay: 0s; }
.painel { position: fixed; inset: 0 0 0 auto; width: min(100%, 33.75rem); z-index: 50; background: var(--tinta); color: #fff; padding: 9rem clamp(1.5rem, 4vw, 4rem) 2.5rem clamp(3rem, 6.5vw, 6.7rem); display: flex; flex-direction: column; justify-content: space-between; transform: translateX(100%); visibility: hidden; transition: transform .8s var(--e-nav), visibility 0s .8s; }
.menu-aberto .painel { transform: none; visibility: visible; transition-delay: 0s; }
.painel .titulo-menu { font-size: var(--t-etiqueta); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--claro-2); padding-bottom: 1.25rem; border-bottom: 1px solid var(--linha-esc); margin-bottom: 2rem; }
.painel nav { display: grid; }
.painel nav a { position: relative; display: block; clip-path: inset(0 -4rem); font-size: clamp(2.5rem, 4.2vw, 3.75rem); font-weight: var(--peso-titulo); letter-spacing: var(--track-titulo); line-height: 1.4; }
.painel nav a span { display: block; transform: translateY(100%); transition: transform .8s var(--e-nav) calc(var(--i) * .03s); }
.menu-aberto .painel nav a span { transform: none; }
.painel nav a:focus-visible { outline-offset: -3px; }
.painel nav a.ativa::before { content: ""; position: absolute; left: -2.4rem; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: #fff; }
.painel .fim { display: grid; gap: .5rem; justify-items: start; }

/* ---------- movimento reduzido: tudo visível, nada se mexe ---------- */
@media (prefers-reduced-motion: reduce) {
  .cortina { display: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .painel { transform: none; opacity: 0; transition: opacity .2s linear, visibility 0s .2s !important; }
  .menu-aberto .painel { opacity: 1; transition-delay: 0s !important; }
  .painel nav a span { transform: none; }
}
@media (min-width: 1200px) { .rodape { padding: 2rem var(--recuo) 0; } }
.formulario[hidden] { display: none; } /* o display:grid do formulário vencia o atributo hidden */
/* contacto no telemóvel (< 768 px): título, apoio, formulário, frase das alternativas; sem botão redondo, pílula nem frase de entrada */
.alternativas { display: none; }
.alternativas a { color: var(--azul-claro); }
.alternativas a.sub { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 767px) {
  .lateral, .form-titulo { display: none; }
  .coluna-form { margin-top: 0; }
  .corpo-contacto { margin-top: 1.75rem; }
  .formulario { margin-top: 0; }
  .alternativas { display: block; margin-top: 1.5rem; font-size: var(--t-pequeno); color: var(--claro-2); line-height: 1.5; }
}