:root{
  --azul: #004a93;
  --escuro: #15141c;
  --acento: #0495cf;
  --quente: #a7144c;
  --cinza-claro: #c1c1c1;
  --cinza-texto: #434343;
  --branco: #ffffff;
  --borda: #c4c8cb;
  --claro: #f6f7f8;

  /* 1240 e o que o Figma diz e o que o cliente aprovou; 1305 era so a
     grelha da casa. Tarefa 4. */
  --largura: 1240px;
  --goteira: 24px;
  --seccao: 120px;
  --seccao-mobile: 60px;

  --corpo: 16px;
  --linha: 28px;

  --botao-altura: 56px;
  --raio: 2px;
  /* raio dos cartoes das grelhas (beneficios, solucoes, demo, bestech):
     10px no Figma, bem mais arredondado que o --raio de botoes/skip-link. */
  --raio-cartao: 10px;

  --titulo: 'Titulo', 'PP Telegraf', system-ui, sans-serif;
  --rotulo: 'Rotulo', 'Lato', system-ui, sans-serif;
  --texto: 'Texto', 'Varela', system-ui, sans-serif;

  --esp-1: 8px;
  --esp-2: 12px;
  --esp-3: 16px;
  --esp-4: 20px;
  --esp-5: 40px;
  /* Tarefa 10: o espacamento vertical de cada linha do acordeao, na escala
     8/16/32 do Figma. Nao ha ainda ficha para o 32: as existentes param no
     20 (--esp-4) e saltam para o 40 (--esp-5). */
  --esp-6: 32px;

  --letra-1: 14px;
  --letra-2: 15px;
  --letra-3: 16px;
  --letra-marca: 24px;

  /* h1 e h2 partilham a mesma escala "Titulo" do Figma: 45px, entrelinha
     45, espacamento -0.9. --titulo-3 (h3) fica por agora com o valor
     antigo, sem medida no Figma e sem uso visivel (so no caso, que nao
     emite ainda). Tarefa 4. */
  --titulo-1: 45px;
  --titulo-2: 45px;
  --titulo-3: 22px;
  --entrelinha-titulo: 45px;
  --tracking-titulo: -.9px;

  --tracking-1: .02em;
  --tracking-2: .04em;
  --tracking-3: .05em;

  /* etiqueta que abre cinco seccoes, medidas exatas do Figma */
  --entrelinha-rotulo: 18px;
  --tracking-rotulo: -.28px;

  /* Tarefa 7: intervalo entre os quatro cartoes da demo, extraido do Figma
     (tokens "width/302_5" e "width/1240"). E um valor proprio desta
     grelha, diferente da goteira geral (24px): 4 cartoes de 302,5px mais
     tres intervalos de 10px fecham exatamente nos 1240 do Figma. */
  --intervalo-demo: 10px;

  /* Tarefa 8: proporcao da imagem do bestech na linha com a grelha de
     cartoes, a partir dos 768px. Conta: 500 (a largura intrinseca do
     ficheiro bestech-ecra.webp, Tarefa 2) a dividir por 1192 (--largura
     menos as duas goteiras laterais, o contentor real da seccao) da
     41,9%, arredondado aos 42%. Se a imagem mudar de tamanho um dia, e
     esta conta que precisa de ser refeita, nao o numero a mao no CSS. */
  --bestech-imagem-proporcao: 42%;

  /* Ronda de correcao da Tarefa 8b: opacidade da camada que escurece a
     fotografia do heroi (.hero::before). Nao e um detalhe tecnico, e uma
     decisao de desenho calibrada para bater a meta de contraste AA
     (4,5:1) da media da foto, por isso ganhou ficha propria em vez de
     ficar a mao na regra. 0,45 da 18,81:1 de media — mas a media escondia
     os picos de luz das chispas do laser (ver comentario em .hero__selo,
     .hero__titulo, .hero__paragrafo mais abaixo: a defesa desses pontos
     e o text-shadow, nao mais opacidade aqui, que estragaria a foto
     inteira para tratar menos de 1% da area). */
  --hero-escurecimento: .45;

  /* Sombra do texto do heroi: a blindagem local contra os pontos da foto
     mais claros do que a camada uniforme acima consegue cobrir (as
     chispas do laser, medidas pixel a pixel na zona real de baixo do
     texto: ver tarefa-8b-relatorio.md). Ao contrario da opacidade do
     ::before, que escurece a FOTO inteira, esta sombra escurece só o
     CONTORNO das LETRAS, por isso protege sem lavar a fotografia. */
  --hero-texto-sombra: 0 2px 6px rgba(0, 0, 0, .7);

  /* Tarefa 10: a coluna do acordeao da FAQ e mais estreita do que o
     contentor de --largura (1240px), para ficar confortavel de ler em
     linhas de pergunta e resposta curtas. Sem uma medida propria no
     briefing para esta coluna, fica uma ficha propria em vez de um valor
     a mao: 800px, cerca de dois tercos de --largura. */
  --acordeao-largura: 800px;
}

@font-face{
  font-family:'Titulo';
  src:url('/ativos/tipos/titulo-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:'Rotulo';
  src:url('/ativos/tipos/rotulo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:'Texto';
  src:url('/ativos/tipos/texto-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--texto);
  font-size:var(--corpo);
  line-height:var(--linha);
  color:var(--cinza-texto);
  background:var(--branco);
}

h1,h2,h3{
  font-family:var(--titulo);
  margin:0;
}
h1{ font-size:var(--titulo-1); }
h2{ font-size:var(--titulo-2); }
h3{ font-size:var(--titulo-3); }
h1,h2{
  line-height:var(--entrelinha-titulo);
  letter-spacing:var(--tracking-titulo);
}

/* Os h2 abrem centrados em todas as seccoes menos a solucion, que e a duas
   colunas com o texto a esquerda (a imagem entra na Tarefa 5). */
main>section h2{
  text-align:center;
}
.solucion__titulo{
  text-align:left;
}

main>section{
  position:relative;
  z-index:0;
  max-width:var(--largura);
  margin:0 auto;
  padding:var(--seccao-mobile) var(--goteira);
}
@media (min-width: 768px){
  main>section{
    padding-top:var(--seccao);
    padding-bottom:var(--seccao);
  }
}

/* O ritmo dos fundos: cada seccao pinta a toda a largura da janela, com o
   conteudo a continuar limitado a --largura (1240), sem mexer na
   marcacao. O ::before e absoluto a 100vw, centrado com left:50% mais a
   translacao de -50%, e fica atras do conteudo com z-index:-1 dentro do
   proprio contexto de empilhamento da seccao (por isso o z-index:0 acima). */
main>section::before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:-1;
}
.hero::before,
.bestech::before{
  background:var(--escuro);
}
/* Tarefa 8b: sobre a fotografia do heroi (.hero__imagem, mais atras ainda)
   o ::before deixa de ser um fundo solido para passar a camada que
   escurece a foto o suficiente para o texto branco continuar legivel.
   Fica a mesma ficha --escuro do fundo solido das outras seccoes (o
   contraste_teste.php le exatamente essa cor, sem saber que por cima ha
   uma fotografia), so que agora semi-transparente com --hero-escurecimento
   (ficha, ronda de correcao), para a foto continuar visivel por baixo.
   Contraste medido manualmente (nao ha teste automatico para texto sobre
   fotografia): branco sobre a MEDIA da zona onde o texto assenta, com
   esta camada por cima, da cerca de 18,8:1, bem acima do minimo AA de
   4,5:1 — mas a media escondia os picos de luz das chispas do laser (ver
   tarefa-8b-relatorio.md, ronda de correcao): pixel a pixel, ha pontos
   dentro da zona real de baixo do texto que ficam abaixo de 4,5:1. Nao se
   resolve aumentando esta opacidade (estragava a foto para tratar menos
   de 1% da area): a defesa desses pontos e o text-shadow no proprio
   texto, mais abaixo. */
.hero::before{
  opacity:var(--hero-escurecimento);
}
.beneficios::before,
.demo::before,
.caso::before,
.faq::before{
  background:var(--claro);
}
.solucion::before{
  background:var(--branco);
}
.soluciones::before,
.cta-final::before{
  background:var(--azul);
}

/* Sobre fundo escuro ou azul, o texto normal (herdado do body em cinza)
   inverte para branco. O heroi ainda nao tem fotografia (Tarefa 5): por
   agora o fundo escuro chega pelo ::before acima. */
.hero,
.soluciones,
.bestech,
.cta-final{
  color:var(--branco);
}

:focus-visible{
  outline:3px solid var(--acento);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.saltar{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--branco);
  color:var(--escuro);
  padding:var(--esp-2) var(--esp-4);
  border-radius:var(--raio);
}
.saltar:focus{
  left:var(--goteira);
  top:var(--goteira);
}

.cabecalho{
  background:var(--branco);
  border-bottom:1px solid var(--cinza-claro);
}
.cabecalho__caixa{
  max-width:var(--largura);
  margin:0 auto;
  padding:0 var(--goteira);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--goteira);
  min-height:calc(var(--botao-altura) * 1.6);
}
.cabecalho__marcas{
  display:flex;
  align-items:baseline;
  gap:var(--esp-2);
  font-family:var(--titulo);
}
.cabecalho__marca{
  font-size:var(--letra-marca);
  font-weight:800;
  color:var(--azul);
  letter-spacing:var(--tracking-1);
}
.cabecalho__selo{
  font-family:var(--rotulo);
  font-size:var(--letra-1);
  font-weight:700;
  color:var(--azul);
  letter-spacing:var(--tracking-3);
}
.cabecalho__acoes{
  display:flex;
  align-items:center;
  gap:var(--esp-2);
}

/* Branco sobre var(--acento) da 3,38:1 e o minimo AA para texto e 4,5:1.
   var(--azul) da 8,75:1, por isso e a cor de fundo do botao principal e do
   selo JETCAM. var(--acento) fica para acentos decorativos e para o anel de
   foco. A familia e a --titulo (PP Telegraf UltraBold), que so tem UM peso
   a serio, o 800: pedir outro peso a ela, ou pedir 700 a --texto, obriga o
   browser a sintetizar o negrito. */
.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--botao-altura);
  padding:0 var(--goteira);
  border-radius:var(--raio);
  font-family:var(--titulo);
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  border:2px solid transparent;
}
.botao--principal{
  background:var(--azul);
  color:var(--branco);
}
.botao--secundario{
  background:transparent;
  color:var(--azul);
  border-color:var(--azul);
}

/* Tarefa 9: o botao--principal inverte-se pelo CONTEXTO da seccao onde
   vive, nunca por uma classe nova na marcacao. Sobre fundo claro (a regra
   acima, cabecalho e demo) fica azul com texto branco. Sobre a foto
   escura do heroi, azul-sobre-azul deixa de fazer sentido como
   "invisivel numa foto escura": fica branco com texto escuro. Sobre o azul
   solido do cta-final, azul-sobre-azul E LITERALMENTE invisivel (o botao
   desaparece dentro da seccao, borda transparente incluida); fica escuro
   com texto branco, a mesma ficha --escuro do fundo do heroi e do
   bestech. Os tres pares medidos com contraste() em testes/comum.php: ver
   testes/contraste_teste.php. */
.hero .botao--principal{
  background:var(--branco);
  color:var(--escuro);
}
.cta-final .botao--principal{
  background:var(--escuro);
  color:var(--branco);
}

.rodape{
  background:var(--escuro);
  color:var(--branco);
}
.rodape__caixa{
  max-width:var(--largura);
  margin:0 auto;
  padding:var(--seccao-mobile) var(--goteira);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--esp-5);
}
@media (min-width: 768px){
  .rodape__caixa{
    grid-template-columns:2fr 1fr 1fr;
    padding-top:var(--seccao);
    padding-bottom:var(--seccao);
  }
}
.rodape__logo{
  font-family:var(--titulo);
  font-size:var(--letra-marca);
  font-weight:800;
  color:var(--branco);
}
.rodape__lema{
  margin-top:var(--esp-2);
  color:var(--cinza-claro);
  font-size:var(--letra-2);
  letter-spacing:var(--tracking-2);
  text-transform:uppercase;
}
.rodape__titulo{
  font-family:var(--titulo);
  font-size:var(--letra-3);
  color:var(--branco);
  margin:0 0 var(--esp-3);
}
.rodape__endereco,
.rodape__legais{
  margin:0;
  padding:0;
  list-style:none;
  font-style:normal;
}
.rodape__endereco p{
  margin:0 0 var(--esp-1);
}
.rodape__endereco a,
.rodape__legais a{
  color:var(--cinza-claro);
  text-decoration:none;
}
.rodape__endereco a:hover,
.rodape__legais a:hover{
  color:var(--branco);
}
.rodape__legais li{
  margin-bottom:var(--esp-1);
}
.rodape__base{
  border-top:1px solid var(--cinza-texto);
  padding:var(--esp-4) var(--goteira);
  text-align:center;
  font-size:var(--letra-1);
  color:var(--cinza-claro);
}

/* Etiqueta que abre cinco seccoes (beneficios, solucion, soluciones, bestech,
   faq): rotulo pequeno em caixa de contorno fino, encostado a esquerda, com
   um filete a estender-se dela ate a margem direita da seccao. O filete e o
   ::after do proprio .etiqueta, nunca um elemento vazio na marcacao. */
.etiqueta{
  display:flex;
  align-items:center;
  gap:var(--esp-3);
  margin-bottom:var(--esp-5);
}
.etiqueta::after{
  content:'';
  flex:1 1 auto;
  height:1px;
  background:var(--borda);
}
.etiqueta__texto{
  flex:0 0 auto;
  font-family:var(--rotulo);
  font-size:var(--letra-1);
  line-height:var(--entrelinha-rotulo);
  letter-spacing:var(--tracking-rotulo);
  font-weight:700;
  text-transform:uppercase;
  color:var(--escuro);
  border:1px solid var(--borda);
  padding:var(--esp-1) var(--esp-2);
  white-space:nowrap;
}

/* Sobre fundo escuro (as seccoes .soluciones e .bestech, ainda por vir na
   Tarefa 4) a etiqueta inverte: contorno e texto passam a branco, para
   continuar legivel. Escrito ja, para nao ser preciso voltar aqui. */
.soluciones .etiqueta__texto,
.bestech .etiqueta__texto{
  color:var(--branco);
  border-color:var(--branco);
}
.soluciones .etiqueta::after,
.bestech .etiqueta::after{
  background:var(--branco);
}

/* Tarefa 5: os cinco cartoes de beneficios, em tres-mais-dois centrados.
   cartao.php emite a mesma marcacao em todas as seccoes; o aspeto vem so
   daqui, do contexto ".beneficios .cartao", nunca de uma variante nova no
   componente.

   A grelha e flex, nao grid: com cinco itens em filas de tres, a ultima
   fila fica com dois, e display:grid so centra FILAS INTEIRAS, nao o resto
   de uma fila incompleta. Com flex-wrap e justify-content:center, o espaco
   sobrante da ultima fila reparte-se nas pontas dos proprios cartoes, e o
   par fica centrado sozinho. Em ecra estreito, sem @media, cada cartao
   ocupa 100% da linha: um por linha, sem precisar de regra propria. */
.beneficios__grelha{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--goteira);
}
.beneficios .cartao{
  flex:1 1 100%;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio-cartao);
  padding:var(--esp-4);
}
@media (min-width: 768px){
  .beneficios .cartao{
    flex:0 1 calc((100% - 2 * var(--goteira)) / 3);
  }
}
/* O rotulo carrega o significado (ver comentario de cartao.php): sem
   icone, maiusculas na ficha --rotulo, como o resto do desenho. */
.beneficios .cartao__titulo{
  font-family:var(--rotulo);
  font-size:var(--letra-1);
  letter-spacing:var(--tracking-rotulo);
  text-transform:uppercase;
  color:var(--escuro);
}
/* beneficios.php passa 'texto' vazio a todos os cartoes (a copy so tem
   titulo); o <p> fica vazio no HTML e nao deve ocupar espaco visual. */
.beneficios .cartao__texto:empty{
  display:none;
}

/* Tarefa 6: os quatro cartoes de solucoes, dois por dois sobre o fundo
   azul. Ao contrario dos de beneficios, esta grelha e sempre completa (um
   numero par de itens, sem fila incompleta para centrar), por isso e
   grid a serio: uma coluna em ecra estreito, duas a partir do breakpoint
   de tablet. */
.soluciones__grelha{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--goteira);
}
@media (min-width: 768px){
  .soluciones__grelha{
    grid-template-columns:repeat(2, 1fr);
  }
}
.soluciones .cartao{
  background:var(--branco);
  color:var(--cinza-texto);
  border-radius:var(--raio-cartao);
  overflow:hidden;
}
.soluciones .cartao__imagem{
  display:block;
  width:100%;
  height:auto;
}
.soluciones .cartao__titulo{
  text-transform:uppercase;
  padding:var(--esp-4) var(--esp-4) 0;
}
.soluciones .cartao__texto{
  font-size:var(--letra-2);
  margin:0;
  padding:var(--esp-3) var(--esp-4) var(--esp-4);
}

/* Tarefa 7: os quatro cartoes da demo, numa linha so no breakpoint maior
   la em baixo. Ao contrario de beneficios (flex sempre completo em filas
   de tres) e solucoes (grid par), aqui o numero de itens (quatro) e
   sempre par em qualquer divisao por 1, 2 ou 4, por isso flex-wrap chega
   sem precisar de grid: nunca ha fila incompleta para centrar.

   A grelha reclama a goteira lateral da propria seccao (margin negativo)
   so nesse breakpoint maior, para o seu contentor chegar aos 1240
   inteiros do Figma nesse ponto: e essa a conta que fecha ao pixel, 4
   cartoes vezes 302,5 mais 3 intervalos de 10 fecham nos 1240. Em ecras
   mais estreitos (1 ou 2 colunas) a grelha fica dentro da goteira normal,
   como todas as outras. */
.demo__grelha{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--intervalo-demo);
}
@media (min-width: 1024px){
  .demo__grelha{
    margin-left:calc(var(--goteira) * -1);
    margin-right:calc(var(--goteira) * -1);
  }
}
.demo .cartao{
  flex:1 1 100%;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio-cartao);
  padding:var(--esp-4);
  text-align:center;
}
@media (min-width: 768px){
  .demo .cartao{
    flex:0 1 calc((100% - var(--intervalo-demo)) / 2);
  }
}
@media (min-width: 1024px){
  .demo .cartao{
    flex:0 1 calc((100% - 3 * var(--intervalo-demo)) / 4);
  }
}
/* Ao contrario de beneficios e solucoes (rotulo/icone a esquerda), na demo
   o rotulo e o espaco do icone ficam ambos centrados: o text-align:center
   do proprio .cartao acima ja centra tudo o que e inline/texto la dentro. */
.demo .cartao__titulo{
  font-family:var(--rotulo);
  font-size:var(--letra-1);
  letter-spacing:var(--tracking-rotulo);
  text-transform:uppercase;
  color:var(--escuro);
  text-align:center;
}
/* demo.php passa 'texto' vazio a todos os cartoes (a copy so tem titulo);
   o <p> fica vazio no HTML e nao deve ocupar espaco visual. */
.demo .cartao__texto:empty{
  display:none;
}

/* Tarefa 8: o bestech, imagem a esquerda e os quatro cartoes de prova em
   dois por dois a direita, sobre o fundo escuro (".bestech{color:var(--branco)}",
   ja definido na Tarefa 4). Em ecra estreito a imagem fica em cima (e a
   primeira no HTML) e os cartoes em baixo, numa coluna so. */
.bestech__conteudo{
  display:flex;
  flex-direction:column;
  gap:var(--esp-5);
}
@media (min-width: 768px){
  .bestech__conteudo{
    flex-direction:row;
    align-items:flex-start;
  }
}
.bestech__imagem{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--raio-cartao);
}
@media (min-width: 768px){
  /* min-width:0 tira o minimo automatico dos elementos substituidos (a
     imagem, pelo width/height do proprio ficheiro) que impede um item
     flex de encolher abaixo do seu tamanho intrinseco: sem isto a imagem
     ficava com 500px fixos e empurrava a grelha para fora da seccao. */
  .bestech__imagem{
    flex:0 1 var(--bestech-imagem-proporcao);
    min-width:0;
  }
}
.bestech__grelha{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--goteira);
  flex:1 1 auto;
}
@media (min-width: 768px){
  .bestech__grelha{
    grid-template-columns:repeat(2, 1fr);
    flex:1 1 0%;
  }
}
/* Contorno claro (--borda, a mesma ficha dos outros cartoes) para se ver
   sobre o fundo escuro; o texto NAO fixa cor propria, herda o branco de
   .bestech (ja provado em contraste_teste.php) em vez de repetir a ficha,
   para nunca poder divergir dela. */
.bestech .cartao{
  border:1px solid var(--borda);
  border-radius:var(--raio-cartao);
  padding:var(--esp-4);
}
.bestech .cartao__texto{
  margin:0;
}
.bestech__logos{
  display:flex;
  align-items:center;
  gap:var(--esp-3);
  margin-top:var(--esp-3);
}
.bestech__logos img{
  display:block;
  max-width:100%;
  height:auto;
}
.bestech__link{
  display:inline-block;
  margin-top:var(--esp-3);
  color:var(--branco);
}

/* Tarefa 8b: a fotografia do heroi, a fundo da seccao. Usa a mesma tecnica
   de "full bleed" do main>section::before (left:50% + width:100vw +
   translateX(-50%), Tarefa 4). z-index:-2 poe a foto atras do ::before
   (z-index:-1, a camada escura logo acima) e atras do texto (z-index
   automatico, no topo). object-fit:cover recorta a foto sem a distorcer,
   qualquer que seja a altura real da seccao.
   height:100% (excecao aceite, nao precisa de ficha) e obrigatorio: um
   <img> com width/height no HTML (aqui 2480x1655, exigidos para o CLS)
   ganha do proprio browser um rácio intrinseco que, com height:auto,
   ganha SEMPRE a top/bottom para calcular a altura column a partir da
   largura (100vw dividido pelo racio 2480:1655), transbordando a seccao
   inteira em vez de caber nela. Um height explicito corta essa conta.
   Ao contrario de todas as outras imagens da pagina, esta NAO leva
   loading="lazy": e a primeira coisa que se ve. */
.hero__imagem{
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  height:100%;
  transform:translateX(-50%);
  z-index:-2;
  object-fit:cover;
}

/* Ronda de correcao da Tarefa 8b: a camada uniforme do ::before (acima)
   resolve o contraste NA MEDIA da foto, mas nao os picos de luz locais
   (as chispas do laser), medidos pixel a pixel na zona real de baixo do
   texto (ver tarefa-8b-relatorio.md). Uma media nunca revela um pico, e
   escurecer a foto inteira para tratar um ponto local estragava-a para
   tratar menos de 1% da area. O text-shadow e a blindagem certa porque
   atua so no CONTORNO das letras, exatamente onde o contraste importa,
   em vez de na foto inteira. Aplica-se aos tres elementos de texto
   corrido sobre a foto (nao ao CTA: desde a Tarefa 9 o botao--principal
   do heroi tem fundo solido --branco com texto --escuro, por isso nunca
   perde contraste contra a foto, seja a foto o que for; testado em
   contraste_teste.php, 18,28:1). */
.hero__selo,
.hero__titulo,
.hero__paragrafo{
  text-shadow:var(--hero-texto-sombra);
}

/* Tarefa 8b: solucion passa a duas colunas no desktop, texto a esquerda e
   imagem a direita (o h2 ja alinhava a esquerda desde a Tarefa 4, nao
   mexido aqui). .solucion__texto agrupa a etiqueta, o h2 e os tres
   paragrafos numa coluna so: sem este agrupador nao ha como dar a imagem
   uma coluna propria ao lado de varios elementos soltos, so ao lado de um
   deles. Em ecra estreito fica uma coluna so, sem @media nenhuma para
   isso: flex-direction:column (o padrao) mais a imagem ser a ultima no
   HTML ja bastam para ela cair para baixo do texto. */
.solucion{
  display:flex;
  flex-direction:column;
  gap:var(--esp-5);
}
@media (min-width: 768px){
  .solucion{
    flex-direction:row;
    align-items:center;
  }
  .solucion__texto{
    flex:1 1 0%;
  }
  .solucion__imagem{
    flex:1 1 0%;
    /* min-width:0 tira o minimo automatico que a largura intrinseca da
       imagem (1024px) impunha ao item flex: sem isto a imagem nao
       encolhia e empurrava a coluna de texto para fora da seccao, o
       mesmo problema ja visto (e resolvido do mesmo jeito) no
       bestech__imagem, Tarefa 8. */
    min-width:0;
  }
}
.solucion__imagem{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--raio-cartao);
}

/* Tarefa 10: o acordeao da FAQ. Coluna estreita e centrada (--acordeao-largura,
   menor que --largura), pergunta a esquerda com um sinal de mais a direita
   que passa a cruz ao abrir, filete --borda a separar as linhas, resposta
   em texto mais pequeno que o corpo. Peca de SEO/GEO (ver comentario em
   app/componentes/acordeao.php): o indicador e so pseudo-elemento sobre o
   estado nativo [open] do <details>, sem uma linha de JavaScript. Se
   falhar, o pior que acontece e o sinal nao mudar de + para ×; o details
   continua a abrir e fechar por si so.

   list-style:none tira o triangulo nativo do <summary> (Firefox trata-o
   como item de lista) e ::-webkit-details-marker tira o equivalente do
   Chrome/Safari. Nenhum dos dois tira o <summary> do mapa do teclado: e um
   elemento interativo por definicao do proprio HTML, focavel e ativavel
   por Enter e barra de espaco independentemente do list-style ou do
   display, e o anel de :focus-visible (ja definido acima) continua a
   aparecer a volta dele. Provado a serio no browser, com Tab e o rato
   desligado: ver tarefa-10-relatorio.md. */
.acordeao{
  max-width:var(--acordeao-largura);
  margin:0 auto;
}
.acordeao__item{
  border-bottom:1px solid var(--borda);
}
.acordeao__pergunta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--esp-3);
  padding:var(--esp-6) 0;
  list-style:none;
  cursor:pointer;
}
.acordeao__pergunta::-webkit-details-marker{
  display:none;
}
.acordeao__pergunta-texto{
  font-size:var(--letra-3);
}
.acordeao__pergunta::after{
  content:'+';
  flex:0 0 auto;
  font-family:var(--titulo);
  font-size:var(--titulo-3);
  color:var(--azul);
}
.acordeao__item[open] .acordeao__pergunta::after{
  content:'×';
}
.acordeao__resposta{
  padding-bottom:var(--esp-6);
}
.acordeao__resposta p{
  margin:0;
  font-size:var(--letra-2);
}