@charset "UTF-8";

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/archivo-latin-900-normal.woff2") format("woff2");
}

:root {
	--azul: #177b9e;
	--vermelho: #b02a30;
	--azul-escuro: #0f3f52;
	--texto: #10222b;
	--texto-suave: #3d525c;
	--fundo-card: #eef4f6;
	--fundo: #ffffff;
	--margem: 56px;
}

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

body {
	margin: 0;
	font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: var(--texto);
	background: var(--fundo);
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
p,
dl,
dd {
	margin: 0;
}

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

a:focus-visible {
	outline: 3px solid var(--texto);
	outline-offset: 3px;
}

.apresentacao a:focus-visible,
.rodape a:focus-visible {
	outline-color: #ffffff;
}

.conteudo {
	max-width: 1192px;
	margin: 0 auto;
	padding: 0 var(--margem);
}

.so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.botao {
	display: inline-block;
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
}

.botao--vermelho {
	background: var(--vermelho);
}

.botao--azul {
	background: var(--azul);
}

.botao--claro {
	background: #ffffff;
	color: var(--azul-escuro);
}

.botao:hover {
	filter: brightness(0.9);
}

/* Cabeçalho */

.topo__linha {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 22px;
	padding-bottom: 22px;
}

.topo__marca {
	display: block;
	flex-shrink: 0;
}

.topo__marca img {
	display: block;
	width: auto;
	height: 54px;
}

.topo__acoes {
	display: flex;
	align-items: center;
	gap: 18px;
}

.topo__idioma {
	padding: 8px 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--texto);
	text-decoration: underline;
	text-decoration-color: var(--vermelho);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Bloco de apresentação */

.apresentacao {
	position: relative;
	overflow: hidden;
	background: var(--azul);
	color: #ffffff;
}

.apresentacao .conteudo {
	position: relative;
	padding-top: 70px;
	padding-bottom: 78px;
}

.apresentacao__setas {
	position: absolute;
	top: -8%;
	right: -40px;
	height: 116%;
	fill: none;
	stroke: var(--azul-escuro);
	stroke-width: 46;
	opacity: 0.3;
}

.apresentacao h1 {
	position: relative;
	max-width: 14ch;
	font-size: clamp(2.25rem, 1.2rem + 4.6vw, 3.625rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.025em;
	overflow-wrap: break-word;
}

.apresentacao p {
	position: relative;
	max-width: 50ch;
	margin-top: 24px;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

.apresentacao .apresentacao__outro-idioma {
	margin-top: 44px;
}

/* Produto */

.produto .conteudo {
	padding-top: 48px;
	padding-bottom: 60px;
}

.rotulo {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vermelho);
}

.produto__card {
	display: grid;
	grid-template-columns: 190px 1fr auto;
	gap: 32px;
	align-items: center;
	margin-top: 14px;
	padding: 28px;
	background: var(--fundo-card);
}

.produto__card img {
	display: block;
	width: 150px;
}

.produto__card h3 {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.2;
}

.produto__card p {
	max-width: 46ch;
	margin-top: 6px;
	color: var(--texto-suave);
}

.selo {
	display: inline-block;
	margin-left: 8px;
	padding: 4px 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	vertical-align: middle;
	color: #ffffff;
	background: var(--texto);
}

/* Rodapé */

.rodape {
	background: var(--azul-escuro);
	color: #ffffff;
}

.rodape .conteudo {
	padding-top: 36px;
	padding-bottom: 40px;
}

.rodape__dados {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.rodape__dados dt {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8fcbe0;
}

.rodape__dados dd {
	font-size: 15px;
	overflow-wrap: anywhere;
}

.rodape__dados a {
	color: inherit;
}

@media (max-width: 900px) {

	.produto__card {
		grid-template-columns: 190px 1fr;
	}

	.produto__card .botao {
		grid-column: 2;
		justify-self: start;
	}

	.rodape__dados {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {

	:root {
		--margem: 20px;
	}

	.topo__linha {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.topo__marca img {
		height: 40px;
	}

	.topo__acoes {
		gap: 10px;
	}

	.topo__acoes .botao {
		white-space: nowrap;
	}

	.botao {
		padding: 11px 14px;
		font-size: 14px;
	}

	.apresentacao .conteudo {
		padding-top: 48px;
		padding-bottom: 56px;
	}

	.apresentacao__setas {
		right: -150px;
	}

	.produto .conteudo {
		padding-top: 36px;
		padding-bottom: 44px;
	}

	.produto__card {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px 20px;
	}

	.produto__card .botao {
		grid-column: auto;
	}

	.rodape__dados {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}