/* ------------------------------------------------------------------
   CleanRia -- direccao B, expressiva e memoravel.
   Folha definitiva do site. Os tokens em :root sao a fonte de verdade
   da marca; o guia em docs/marca/guia-de-marca.md descreve-os.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ao avaliar contrastes, medir sempre contra o fundo REAL do elemento e nao
     contra branco. Sobre --fundo (#f4f7fa) os racios descem cerca de 0.3. */
  /* Cores extraidas do logo. Ver guia de marca. */
  --azul-claro: #62aee1;   /* 2.42:1 sobre branco -- so decorativo, nunca texto */
  --azul: #3179b5;         /* 4.63:1 -- links e botoes */
  --azul-escuro: #1f5580;  /* 7.87:1 -- hover e titulos */
  --tinta: #1a1a1a;        /* 17.4:1 -- texto corrente */
  --tinta-suave: #5a6570;  /* 5.95:1 -- texto secundario */
  --fundo: #f4f7fa;
  --superficie: #ffffff;
  --borda: #dce5ed;

  --fonte-titulos: "Jost", "Century Gothic", "Trebuchet MS", sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;

  --largura-max: 1100px;
  --largura-texto: 68ch;
  --raio: 10px;
  --sombra: 0 1px 2px rgb(26 26 26 / 6%), 0 6px 20px rgb(31 85 128 / 8%);

  /* Direcao B: cantos amplos, velo fotografico assertivo, texto sobre azul. */
  --raio-caixa: 1.25rem;
  --raio-pill: 999px;
  --sombra-caixa: 0 14px 36px rgb(31 85 128 / 16%);
  --foto-velo: 0.34;
  --flor-opacidade: 0.1;
  --azul-noite: #163e5c;
  --tinta-invertida: #ffffff;
  --tinta-suave-invertida: #d5e4ef;
  --onda: 3.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulos);
  font-weight: 600;
  line-height: 1.15;
  color: var(--azul-escuro);
  margin: 0 0 var(--e4);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
}

h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
}

h3 {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}

p,
ul {
  margin: 0 0 var(--e4);
}

/* Os links usam o azul escuro e nao o --azul da marca: medido sobre --fundo,
   #3179b5 da 4.31:1 e fica abaixo do minimo de 4.5:1. O --azul continua a ser
   a cor da marca em preenchimentos e filetes, onde o texto e branco por cima e
   o contraste e 4.63:1. Ao passar o rato o link escurece para quase preto,
   como acontecia no site de 2014. */
a {
  color: var(--azul-escuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
  color: var(--tinta);
}

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

img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   Camada de componentes -- direcao B, expressiva e memoravel.
   Heroi fotografico, flor de grande escala, blocos de cor e ondas.
   ------------------------------------------------------------------ */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  background: var(--azul-escuro);
}

h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.9rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.interior {
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--e5);
}

.saltar {
  position: absolute;
  left: -9999px;
  background: var(--azul-noite);
  color: #fff;
  padding: var(--e3) var(--e4);
  z-index: 20;
}

.saltar:focus {
  left: var(--e4);
  top: var(--e4);
}

/* ---------------------------- Cabecalho ---------------------------- */

.cabecalho {
  background: var(--superficie);
  border-bottom: none;
  border-top: 5px solid var(--azul);
  box-shadow: 0 1px 0 rgb(31 85 128 / 12%);
}

.cabecalho__interior {
  max-width: var(--largura-max);
  margin-inline: auto;
  padding: var(--e4) var(--e5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e5);
}

.marca {
  display: inline-flex;
  flex: 0 0 auto;
}

.marca img {
  width: min(200px, 68vw);
  height: auto;
}

.navegacao {
  flex: 1 1 auto;
}

.navegacao ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navegacao a {
  font-family: var(--fonte-titulos);
  font-weight: 600;
  font-size: 1rem;
  color: var(--azul-escuro);
  text-decoration: none;
  padding: var(--e2) var(--e4);
  border-bottom: none;
  display: block;
  border-radius: var(--raio-pill);
}

.navegacao a:hover,
.navegacao a:focus-visible {
  color: var(--azul-escuro);
  background: var(--fundo);
}

.navegacao a[aria-current="page"] {
  color: #fff;
  background: var(--azul-escuro);
}

.navegacao a[aria-current="page"]:hover,
.navegacao a[aria-current="page"]:focus-visible {
  color: #fff;
  background: var(--azul-noite);
}

/* ----------------------------- Botoes ------------------------------ */

.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fonte-titulos);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.85rem 1.4rem;
  border-radius: var(--raio-pill);
  border: 2px solid var(--azul-escuro);
  color: var(--azul-escuro);
  background: var(--superficie);
  text-decoration: none;
  max-width: 100%;
  white-space: nowrap;
}

.botao:hover,
.botao:focus-visible {
  border-color: var(--azul-noite);
  color: var(--azul-noite);
  background: var(--superficie);
}

.botao--principal {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  color: #fff;
}

.botao--principal:hover,
.botao--principal:focus-visible {
  background: var(--azul-noite);
  border-color: var(--azul-noite);
  color: #fff;
}

/* Medido: o botao do telefone sai da linha do menu a 766px de janela. */
@media (max-width: 766px) {
  .cabecalho .botao--principal {
    display: none;
  }
}

.botao--facebook {
  border-color: var(--borda);
  color: var(--azul-escuro);
}

/* No rodape o fundo e escuro e a regra .rodape a pinta todas as ligacoes de
   branco. Sem esta regra, o botao do Facebook ficava com texto branco sobre o
   fundo branco que herda de .botao -- invisivel. */
.rodape .botao--facebook {
  background: transparent;
  border-color: #cfe2f1;
  color: #fff;
}

.rodape .botao.botao--facebook:hover,
.rodape .botao.botao--facebook:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--azul-escuro);
}

/* ------------------------------ Heroi ------------------------------ */

.heroi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--azul-escuro);
  color: var(--tinta-invertida);
  min-height: 0;
}

.heroi__interior {
  max-width: var(--largura-max);
  margin-inline: auto;
  padding: var(--e8) var(--e5) calc(var(--e8) + var(--onda));
  display: grid;
  gap: var(--e5);
}

.heroi__interior > div {
  position: relative;
  z-index: 2;
  max-width: 36rem;
}

.heroi h1 {
  color: var(--tinta-invertida);
  margin-bottom: var(--e5);
}

.heroi p {
  max-width: 32ch;
  font-size: 1.2rem;
  color: var(--tinta-suave-invertida);
}

.heroi__accoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e5);
}

.heroi .botao {
  border-color: #fff;
  color: #fff;
  background: transparent;
}

.heroi .botao:hover,
.heroi .botao:focus-visible {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  border-color: #fff;
}

.heroi .botao--principal {
  background: #fff;
  border-color: #fff;
  color: var(--azul-escuro);
}

.heroi .botao--principal:hover,
.heroi .botao--principal:focus-visible {
  background: var(--tinta-suave-invertida);
  border-color: var(--tinta-suave-invertida);
  color: var(--azul-escuro);
}

.heroi__figura {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.heroi__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
  box-shadow: none;
}

.heroi__figura::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Gradiente e nao veu chato: denso onde assenta o texto, leve do lado
     direito para a fotografia se ver. Um veu uniforme forte que chegasse para
     o texto passar os 4.5:1 apagava a imagem por completo. */
  background: linear-gradient(
    100deg,
    rgb(31 85 128 / 0.97) 0%,
    rgb(31 85 128 / 0.95) 52%,
    rgb(31 85 128 / 0.70) 74%,
    rgb(31 85 128 / 0.40) 100%
  );
  pointer-events: none;
}

.heroi::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--onda);
  z-index: 3;
  pointer-events: none;
  /* A onda pinta a cor da superficie que vem a seguir. No inicio, a
     seccao institucional clara. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V36c150 36 350-36 600 0s450-36 600 0v44z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@media (min-width: 62rem) {
  .heroi {
    min-height: 34rem;
  }

  .heroi__interior {
    padding-block: var(--e9) calc(var(--e9) + var(--onda));
  }
}

/* ----------------------------- Seccoes ----------------------------- */

.seccao {
  position: relative;
  overflow: hidden;
  padding: var(--e8) 0 calc(var(--e8) + var(--onda));
  background: var(--azul-escuro);
  color: var(--tinta-invertida);
}

.seccao h1,
.seccao h2,
.seccao h3 {
  color: var(--tinta-invertida);
}

.seccao a {
  color: var(--tinta-invertida);
}

.seccao a:hover,
.seccao a:focus-visible {
  color: var(--tinta-invertida);
  text-decoration-thickness: 2px;
}

.seccao::before {
  content: "";
  position: absolute;
  top: -7rem;
  right: -9rem;
  width: 32rem;
  height: 26rem;
  background-image: url("../img/flor.svg");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: var(--flor-opacidade);
  pointer-events: none;
}

.seccao::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--onda);
  pointer-events: none;
  /* Por omissao a seccao e a ultima do main e o rodape vem a seguir. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V36c150 36 350-36 600 0s450-36 600 0v44z' fill='%23163e5c'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.seccao--clara:has(+ .seccao)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V36c150 36 350-36 600 0s450-36 600 0v44z' fill='%231f5580'/%3E%3C/svg%3E");
}

.seccao:not(.seccao--clara):has(+ .seccao--clara)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V36c150 36 350-36 600 0s450-36 600 0v44z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.seccao--clara {
  background: var(--superficie);
  color: var(--tinta);
}

.seccao--clara h1,
.seccao--clara h2,
.seccao--clara h3 {
  color: var(--azul-escuro);
}

.seccao--clara a {
  color: var(--azul-escuro);
}

.seccao--clara a:hover,
.seccao--clara a:focus-visible {
  color: var(--tinta);
}

.seccao--clara::before {
  top: auto;
  right: auto;
  bottom: -8rem;
  left: -10rem;
  opacity: 0.07;
}

.texto {
  max-width: var(--largura-texto);
}

/* ----------------------------- Cartoes ----------------------------- */

.cartoes {
  display: grid;
  gap: var(--e5);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cartao {
  background: var(--superficie);
  border: 0;
  border-radius: var(--raio-caixa);
  padding: var(--e6);
  box-shadow: var(--sombra-caixa);
}

.cartao::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--e4);
  background-repeat: no-repeat;
  background-size: contain;
}

.cartoes .cartao:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%2362AEE1'%3E%3Cpath d='M30 8c0 0-14 18-14 30a14 14 0 0028 0C44 26 30 8 30 8z'/%3E%3Cpath d='M48 14l1.8 5.2L55 21l-5.2 1.8L48 28l-1.8-5.2L41 21l5.2-1.8L48 14z'/%3E%3Cpath d='M52 32l1.2 3.4 3.4 1.2-3.4 1.2L52 41l-1.2-3.4L47.4 36l3.4-1.2L52 32z'/%3E%3C/svg%3E");
}

.cartoes .cartao:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%2362AEE1'%3E%3Cpath d='M50 8C34 10 18 22 14 40c18 10 36-2 42-20-8 3-16 2-22-2 10-4 14-8 16-10z'/%3E%3Cpath d='M29 32c2 8 6 18 8 26h-5c-2-8-6-17-8-26z'/%3E%3C/svg%3E");
}

.cartoes .cartao:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%2362AEE1'%3E%3Cpath d='M26 6h12v5l5 7v32a8 8 0 01-8 8H29a8 8 0 01-8-8V18l5-7V6z'/%3E%3Crect x='24' y='2' width='16' height='7' rx='2'/%3E%3C/svg%3E");
}

.cartao h3 {
  margin-bottom: var(--e2);
  color: var(--azul-escuro);
}

.cartao p {
  color: var(--tinta-suave);
  margin-bottom: var(--e3);
}

@media (min-width: 40rem) {
  .cartoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cartao {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .cartao:hover,
  .cartao:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgb(31 85 128 / 22%);
  }
}

/* ---------------------------- Servicos ----------------------------- */

.servico {
  display: grid;
  gap: var(--e6);
  align-items: center;
  padding-block: var(--e7);
  border-top: none;
}

.servico:first-of-type {
  padding-top: 0;
}

.servico ul {
  padding-left: var(--e5);
}

.servico li {
  margin-bottom: var(--e3);
}

.servico li::marker {
  color: var(--azul-claro);
}

.servico__figura {
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--raio);
  margin: 0;
  box-shadow: var(--sombra-caixa);
}

.servico__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  box-shadow: none;
  filter: saturate(0.62) contrast(1.08);
}

.servico__figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azul-escuro);
  mix-blend-mode: color;
  opacity: var(--foto-velo);
  pointer-events: none;
}

@media (min-width: 62rem) {
  .servico {
    grid-template-columns: 3fr 2fr;
    gap: var(--e8);
    padding-block: var(--e8);
  }

  .servico:nth-of-type(even) {
    grid-template-columns: 2fr 3fr;
  }

  .servico:nth-of-type(even) .servico__figura {
    order: -1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .servico__figura img {
    transition: transform 0.7s ease;
  }

  .servico:hover .servico__figura img,
  .servico:focus-within .servico__figura img {
    transform: scale(1.05);
  }
}

/* ---------------------------- Contactos ---------------------------- */

.contactos {
  display: grid;
  gap: var(--e4) var(--e6);
  margin: 0 0 var(--e6);
}

.contactos dt {
  font-family: var(--fonte-titulos);
  font-weight: 600;
  /* As etiquetas vivem em seccao--clara. --tinta-suave-invertida e para
     fundos escuros e sobre branco fica a 1.3:1. */
  color: var(--tinta-suave);
}

.contactos dd {
  margin: 0 0 var(--e4);
  font-size: 1.25rem;
  font-family: var(--fonte-titulos);
  font-weight: 600;
}

@media (min-width: 40rem) {
  .contactos {
    grid-template-columns: max-content 1fr;
  }

  .contactos dd {
    margin-bottom: var(--e2);
  }
}

/* ----------------------------- Rodape ------------------------------ */

.rodape {
  background: var(--azul-noite);
  color: #fff;
  padding-block: var(--e7);
  margin-top: 0;
}

.rodape a {
  color: #fff;
}

.rodape a:hover,
.rodape a:focus-visible {
  color: #fff;
}

.rodape__interior {
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--e5);
  display: grid;
  gap: var(--e5);
}

.rodape__legal {
  color: #cfe2f1;
  font-size: 1rem;
  margin: 0;
}

@media (min-width: 40rem) {
  .rodape__interior {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}