/* =========================================================================
   Tubo Forte Plásticos — folha de estilos única do site
   Recriação em HTML/CSS/JS puro do layout publicado em WordPress + Elementor.
   Breakpoints iguais aos do Elementor: tablet <= 1024px, celular <= 767px.
   Ícones: Font Awesome Free (https://fontawesome.com) — licença CC BY 4.0.
   ========================================================================= */

/* ---------- Fontes (arquivos locais, subsets latin + latin-ext) ---------- */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/open-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/rubik-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/rubik-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
	--azul: #1C4E8C;
	--azul-menu: #1B4E8F;
	--verde: #49A046;
	--verde-card: #469F3C;
	--preto: #000;
	--branco: #fff;
	--cinza-claro: #F4F4F4F4;
	--cinza-borda: #c4c4c4;
	--grafite: #1A1A1A;
	--rodape-copy: #E9E9E9;
	--texto-copy: #888;
	--sans: "Open Sans", sans-serif;
	--roboto: "Roboto", sans-serif;
	--conteudo: 1140px;
}

/* ---------- Base (equivalente ao reset do tema Hello Elementor) ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	background-color: #fff;
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
	margin-block: .5rem 1rem;
	color: inherit;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
}
p {
	margin-block: 0 .9rem;
}
a {
	background-color: transparent;
	color: #c36;
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
	border-style: none;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.titulo {
	margin: 0;
	padding: 0;
	line-height: 1;
}
.icone {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Contêiner "boxed": conteúdo centralizado com largura máxima de 1140px */
.box {
	width: 100%;
	max-width: min(100%, var(--conteudo));
	margin-inline: auto;
}

/* Botão padrão (mesma base do botão do Elementor) */
.botao {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 3px;
	color: #fff;
	fill: #fff;
	font-size: 15px;
	line-height: 1;
	text-align: center;
	transition: all .3s;
}
.botao:hover,
.botao:focus {
	color: #fff;
}

/* =========================================================================
   Cabeçalho
   ========================================================================= */
.cabecalho {
	position: relative;
	z-index: 99;
	padding-inline: 10px;
}
.cabecalho__inner {
	display: flex;
	padding-block: 10px;
}
.cabecalho__logo {
	display: flex;
	flex-direction: column;
	width: 25%;
	padding: 10px;
}
.cabecalho__logo a {
	display: block;
	line-height: 0;
}
.cabecalho__logo img {
	width: 200px;
}
.cabecalho__nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: 10px;
}

.menu {
	position: relative;
}
.menu__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.menu__link {
	display: flex;
	align-items: center;
	padding: 15px 13px;
	color: #000;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}
.menu__link:hover,
.menu__link:focus,
.menu__link[aria-current="page"] {
	color: var(--azul-menu);
}
.menu__toggle {
	display: none;
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: none;
	color: #494c4f;
	font-family: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.menu__toggle-icone {
	display: inline-block;
	padding: .35em;
}
.menu__toggle .icone {
	width: 25px;
	height: 25px;
	fill: #000;
	vertical-align: baseline;
}
.menu__toggle .icone--fechar {
	display: none;
}
.menu.aberto .menu__toggle .icone--abrir {
	display: none;
}
.menu.aberto .menu__toggle .icone--fechar {
	display: inline-block;
}

/* =========================================================================
   Home — Hero
   ========================================================================= */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	gap: 20px;
	min-height: 724px;
	padding: 10px;
	background-image: url("../img/tubo-forte-site-MEDIA-1.png");
	background-position: 0 -230px;
	background-size: 100% auto;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: .69;
}
.hero > * {
	position: relative;
	align-self: center;
}
.hero__titulo {
	width: 75%;
	margin-bottom: -15px;
	color: #fff;
	font-family: var(--sans);
	font-size: 3.9vw;
	font-weight: 800;
	text-align: center;
}
.hero__rotativo {
	width: 68%;
	margin-bottom: -15px;
}
.rotativo {
	display: block;
	margin: 8px 0 16px;
	color: #fff;
	font-family: var(--sans);
	font-size: 50px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}
.rotativo__palavras {
	position: relative;
	display: inline-block;
	perspective: 300px;
	text-align: start;
	vertical-align: bottom;
	transition: width .5s;
}
.rotativo__palavra {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: inline-block;
	color: #fff;
	font-weight: 800;
	white-space: nowrap;
	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: 50% 100%;
}
.rotativo__palavra.ativa {
	position: relative;
	opacity: 1;
	transform: rotateX(0deg);
	animation: rotativo-entra 1.2s;
}
.rotativo__palavra.inativa {
	transform: rotateX(180deg);
	animation: rotativo-sai 1.2s;
}
@keyframes rotativo-entra {
	0% { opacity: 0; transform: rotateX(180deg); }
	35% { opacity: 0; transform: rotateX(120deg); }
	65% { opacity: 0; }
	to { opacity: 1; transform: rotateX(1turn); }
}
@keyframes rotativo-sai {
	0% { opacity: 1; transform: rotateX(0deg); }
	35% { opacity: 1; transform: rotateX(-40deg); }
	65% { opacity: 0; }
	to { opacity: 0; transform: rotateX(180deg); }
}
.hero__texto {
	width: 45%;
	color: #fff;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 400;
	text-align: center;
}
.hero__acao {
	margin-top: -15px;
	text-align: center;
}
.hero__botao {
	border: 1px solid #fff;
	background-color: var(--verde);
	font-family: var(--sans);
	font-weight: 600;
}
.hero__botao:hover,
.hero__botao:focus {
	background-color: var(--azul);
}

/* =========================================================================
   Home — Cards de destaque (sobrepostos ao hero)
   ========================================================================= */
.destaques {
	padding-inline: 10px;
}
.destaques__inner {
	display: flex;
	flex-wrap: wrap;
	padding-block: 10px;
}
.destaques__coluna {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 25%;
	padding: 10px;
}
.destaques__coluna--primeira {
	margin-top: -50px;
}
.destaque {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 20px;
	width: 250px;
	padding: 10px;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}
.destaque--claro {
	justify-content: center;
	min-height: 275px;
}
.destaque--claro.destaque--sombra-cinza {
	box-shadow: 0 0 10px 0 rgba(85, 85, 85, .97);
}
.destaque--verde {
	background-color: var(--verde-card);
}
.destaque__miolo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
	border: 0 solid;
	border-radius: 0;
	transition: border .3s, border-radius .3s;
}
.destaque__miolo:hover {
	border-width: 1px;
	border-radius: 20px;
}
.destaque--verde .destaque__miolo:hover {
	border-color: #fff;
}
.caixa-icone {
	align-self: center;
	width: 89%;
	margin-top: 20px;
	text-align: center;
}
.caixa-icone__icone {
	line-height: 0;
}
.caixa-icone__icone span {
	display: inline-block;
	color: var(--verde-card);
	font-size: 30px;
	line-height: 1;
}
.caixa-icone__icone .icone {
	display: inline;
	width: 30px;
	height: 30px;
}
.caixa-icone__titulo {
	color: #000;
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 800;
	line-height: 25px;
}
.caixa-icone__texto {
	margin: 0;
	color: #000;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 400;
}
.destaque--verde .caixa-icone__icone span,
.destaque--verde .caixa-icone__titulo,
.destaque--verde .caixa-icone__texto {
	color: #fff;
}
.destaque__acao {
	text-align: center;
}
/* O botão "Saiba mais" tem texto da mesma cor do fundo (como no site original) */
.destaque__botao {
	border: 1px solid var(--verde-card);
	background-color: var(--verde-card);
	color: var(--verde-card);
	font-family: var(--roboto);
	font-weight: 600;
}

/* =========================================================================
   Home — Por que escolher
   ========================================================================= */
.porque {
	background-color: #fff;
}
.porque__inner {
	display: flex;
	align-items: center;
	padding-block: 100px;
}
.porque__coluna {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 50%;
	padding: 10px;
}
.porque__miolo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
}
.porque__miolo--texto {
	min-height: 352px;
}
.porque__chamada {
	color: #000;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
}
.porque__titulo {
	color: #000;
	font-family: var(--sans);
	font-size: 33px;
	font-weight: 800;
}
.porque__texto {
	color: #000;
	font-family: var(--sans);
	font-weight: 400;
}
.porque__imagem {
	text-align: center;
	line-height: 0;
}
.porque__imagem img {
	display: inline-block;
	border: 3px solid #fff;
	border-radius: 15px;
	vertical-align: middle;
}

/* =========================================================================
   Home — Nosso propósito (fundo com efeito de movimento ao rolar)
   ========================================================================= */
.proposito {
	position: relative;
	min-height: 716px;
	background-color: #fff;
}
.proposito__fundo {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.proposito__camada {
	--tx: 0px;
	--ty: 0px;
	--escala: 1;
	--desfoque: 7px;
	position: absolute;
	top: 0;
	left: 0;
	width: 140%;
	height: 140%;
	background-color: #fff;
	background-image: url("../img/Imagem-Quem-Somos.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	transform: translateY(var(--ty)) translateX(var(--tx)) scale(var(--escala));
	filter: blur(var(--desfoque));
	transition: transform 1s cubic-bezier(0, .33, .07, 1.03), opacity 1s cubic-bezier(0, .33, .07, 1.03);
}
.proposito__camada::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000000C4;
}
.proposito__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 716px;
	max-width: min(100%, 1600px);
	margin-inline: auto;
	padding-block: 50px;
}
.proposito__coluna {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 50%;
	padding: 10px;
}
.proposito__miolo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
}
.proposito__titulo {
	color: #fff;
	font-family: var(--sans);
	font-size: 26px;
	font-weight: 700;
}
.proposito__chamada {
	color: var(--verde-card);
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
}
.proposito__texto {
	color: #fff;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
}
.item-icone {
	display: flex;
	align-items: center;
	gap: 10px;
}
.item-icone__icone {
	display: inline-block;
	color: var(--verde-card);
	font-size: 20px;
	line-height: 1;
}
.item-icone__icone .icone {
	display: inline;
	width: 20px;
	height: 20px;
}
.item-icone__titulo {
	flex-grow: 1;
	color: #fff;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
}

/* Vídeo com capa (toca o YouTube no lugar da imagem ao clicar) */
.video {
	overflow: hidden;
	border: 3px solid #fff;
	border-radius: 15px;
}
.video__quadro {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.video__quadro iframe {
	display: flex;
	width: 100%;
	height: 100%;
	border: 0;
	background-color: #000;
}
.video__capa {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.video__capa img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.video__play .icone {
	display: inline;
	width: 100px;
	height: 100px;
	fill: #fff;
	filter: drop-shadow(1px 0 6px rgba(0, 0, 0, .3));
	opacity: .8;
	transition: all .5s;
}
.video__capa:hover .video__play .icone,
.video__capa:focus-visible .video__play .icone {
	opacity: 1;
}

/* =========================================================================
   Home — Produtos
   ========================================================================= */
.produtos-topo {
	padding-top: 50px;
}
.produtos-topo__inner {
	padding: 10px;
}
.produtos-topo__miolo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
}
.produtos-topo__titulo {
	color: #000;
	font-family: var(--sans);
	font-size: 33px;
	font-weight: 800;
	text-align: center;
}
.produtos-topo__texto {
	color: #000;
	font-family: var(--sans);
	font-weight: 400;
	text-align: center;
}
.produtos {
	padding-bottom: 100px;
}
.produtos__grade {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.produto {
	width: 25%;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 4px 7px 18px 0 rgba(0, 0, 0, .43);
}
.produto__cartao {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}
.produto__imagem {
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: 200px;
	overflow: hidden;
}
.produto__imagem img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.5s;
}
.produto:hover .produto__imagem img {
	transform: scale(1.2);
}
.produto__conteudo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	min-height: 100px;
	padding: 24px;
	background-color: #f9fafa;
}
.produto__conteudo--compacto {
	padding: 20px;
}
.produto__titulo {
	width: 100%;
	margin: 0;
	color: #000;
	font-family: var(--sans);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.2;
}

/* =========================================================================
   Home — Compromisso com inovação sustentável
   ========================================================================= */
.compromisso__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 350px;
	padding-bottom: 60px;
}
.compromisso__coluna {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: 50px;
}
.compromisso__coluna--titulo {
	align-self: center;
	width: 40%;
}
.compromisso__coluna--texto {
	width: 50%;
}
.compromisso__titulo {
	color: #000;
	font-family: var(--sans);
	font-size: 35px;
	font-weight: 800;
}
.compromisso__subtitulo {
	color: #000;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 400;
}
.compromisso__texto {
	color: #000;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 400;
}

/* =========================================================================
   Home — Missão, visão e valores (cartões que viram ao passar o mouse)
   ========================================================================= */
.mvv__grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 40px 0 150px;
}
.mvv__coluna {
	padding: 10px;
}
.virar {
	box-shadow: 0 9px 30px 0 rgba(0, 0, 0, .5);
}
.virar__caixa {
	position: relative;
	height: 280px;
	overflow: hidden;
	perspective: 1000px;
	transform-style: preserve-3d;
}
.virar__face {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: all .6s ease-in-out;
}
.virar__face--frente {
	z-index: 1;
	background-color: #FDFDFD;
	transform: none;
}
.virar__face--verso {
	background-color: var(--azul);
	transform: translateX(0) translateY(-100%);
}
.virar__caixa:hover .virar__face--frente,
.virar__caixa:focus-visible .virar__face--frente {
	transform: translateX(0) translateY(100%);
}
.virar__caixa:hover .virar__face--verso,
.virar__caixa:focus-visible .virar__face--verso {
	transform: none;
}
.virar__conteudo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	height: 100%;
	padding: 35px;
	color: #fff;
	text-align: center;
}
.virar__icone {
	margin-bottom: 20px;
}
.virar__icone span {
	display: inline-block;
	color: #000;
	font-size: 50px;
	line-height: 1;
}
.virar__icone .icone {
	display: inline;
	width: 50px;
	height: 50px;
}
.virar__titulo {
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--roboto);
	font-size: 21px;
	font-weight: 600;
	line-height: 1;
}
.virar__texto {
	font-family: var(--roboto);
	font-size: 14px;
	font-weight: 400;
}
.virar__face--frente .virar__titulo,
.virar__face--frente .virar__texto {
	color: #000;
}

/* =========================================================================
   Home — Perguntas frequentes (acordeão)
   ========================================================================= */
.faq {
	padding: 30px 0 100px;
	background-color: var(--cinza-claro);
}
.faq__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.faq__caixa {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 869px;
	max-width: 100%;
	padding: 10px;
	border-radius: 38px;
	background-color: var(--cinza-claro);
}
.faq__miolo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding: 10px;
}
.faq__titulo {
	color: var(--azul);
	font-family: var(--sans);
	font-size: 33px;
	font-weight: 700;
	text-align: center;
}
.faq__texto {
	align-self: center;
	color: #000;
	font-family: var(--sans);
	font-weight: 400;
}
.acordeao__item {
	display: flex;
	flex-direction: column;
}
.acordeao__pergunta {
	display: flex;
	align-items: center;
	gap: 0 10px;
	padding: 12px 10px 10px;
	border: 1px solid #d5d8dc;
	border-radius: 15px;
	color: #1f2124;
	list-style: none;
	cursor: pointer;
}
.acordeao__pergunta::-webkit-details-marker {
	display: none;
}
.acordeao__icone {
	display: flex;
	align-items: center;
	line-height: 0;
}
.acordeao__icone .icone {
	width: 13.125px;
	height: 15px;
}
.acordeao__icone .icone--menos,
.acordeao__item[open] .acordeao__icone .icone--mais {
	display: none;
}
.acordeao__item[open] .acordeao__icone .icone--menos {
	display: inline-block;
}
.acordeao__texto-pergunta {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 24px;
}
.acordeao__item[open] > .acordeao__pergunta {
	background-color: var(--azul);
	color: #fff;
}
.acordeao__item[open] .acordeao__texto-pergunta {
	text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.acordeao__resposta {
	display: flex;
	flex-direction: column;
	padding: 10px;
	overflow: hidden;
	border: 1px solid #d5d8dc;
}
.acordeao__resposta-miolo {
	padding: 10px;
}
.acordeao__resposta p {
	color: #000;
	font-family: var(--roboto);
	font-weight: 400;
}

/* =========================================================================
   Home — Mapa
   ========================================================================= */
.mapa {
	padding: 10px;
	background-color: var(--cinza-claro);
}
.mapa iframe {
	display: block;
	width: 100%;
	height: 279px;
	border: 0;
}

/* =========================================================================
   Rodapé
   ========================================================================= */
.rodape {
	background-color: var(--grafite);
}
.rodape__colunas {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 40px;
}
.rodape__coluna {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 25%;
	padding: 10px;
}
.rodape__logo {
	text-align: center;
	line-height: 0;
}
.rodape__logo a {
	display: inline-block;
}
.rodape__logo img {
	vertical-align: middle;
}
.rodape__texto {
	color: #fff;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 400;
}
.rodape__titulo {
	color: var(--verde);
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 700;
}
.rodape__menu a {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	color: #fff;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}
.rodape__menu a:hover,
.rodape__menu a:focus,
.rodape__menu a[aria-current="page"] {
	color: var(--azul);
}
.lista-icones__item {
	position: relative;
	display: flex;
	align-items: center;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}
.lista-icones__item:not(:last-child) {
	padding-block-end: 2.5px;
}
.lista-icones__item:not(:first-child) {
	margin-block-start: 2.5px;
}
.lista-icones__item > a {
	display: flex;
	align-items: center;
	width: 100%;
}
.lista-icones__icone {
	position: relative;
	display: flex;
	flex-shrink: 0;
}
.lista-icones__icone .icone {
	width: 20px;
	height: 20px;
	margin-inline-end: 5px;
	fill: var(--azul);
	transition: fill .3s;
}
.lista-icones__texto {
	align-self: center;
	padding-inline-start: 5px;
	color: #fff;
	transition: color .3s;
}

.rodape__social {
	padding-inline: 10px;
}
.rodape__social-inner {
	display: flex;
	justify-content: center;
	gap: 20px;
	max-width: min(100%, 975px);
	margin-inline: auto;
	padding-block: 10px;
}
.rodape__social-coluna {
	width: 88%;
	padding: 10px;
}
.social a {
	display: flex;
	align-items: center;
	font-family: var(--roboto);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}
.social .lista-icones__icone .icone {
	width: 30px;
	height: 30px;
	margin-inline-end: 7.5px;
}
.social .lista-icones__texto {
	color: var(--verde);
}

.copyright {
	padding-inline: 10px;
	background-color: var(--rodape-copy);
}
.copyright__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 10px;
}
.copyright__coluna {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 20px;
	width: 75%;
	padding: 10px;
}
.copyright__linha p {
	margin: 0;
	color: var(--texto-copy);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}
.copyright__linha + .copyright__linha p {
	margin-top: -15px;
}

/* =========================================================================
   Página Tubo Forte — Nossa história
   ========================================================================= */
.historia-video__inner {
	padding: 10px;
}
.historia-video__miolo {
	padding: 10px;
}
.historia-video .video {
	border: 0;
}
.historia {
	padding-bottom: 50px;
}
.historia__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.historia__titulo {
	color: var(--azul);
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 800;
	text-align: center;
}
.historia__miolo {
	display: flex;
	flex-direction: column;
	padding: 10px;
}
.historia__texto {
	align-self: center;
	width: 80%;
	color: #000;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	text-align: center;
}

/* =========================================================================
   Página Relatório de transparência e igualdade salarial
   ========================================================================= */
.relatorio__imagem {
	padding: 10px;
	text-align: center;
	line-height: 0;
}
.relatorio__imagem img {
	display: inline-block;
	vertical-align: middle;
}
.relatorio__acao-inner {
	padding-bottom: 20px;
}
.relatorio__acao-miolo {
	padding: 10px;
	text-align: center;
}
.botao--azul {
	border-radius: 10px;
	background-color: var(--azul);
	font-family: var(--roboto);
	font-weight: 500;
}
/* Relatórios anteriores: lista em card branco sobre fundo cinza; cada linha baixa o PDF */
.historico {
	padding: 98px 10px 110px;
	background-color: #f5f5f5;
}
.historico__lista {
	background-color: #fff;
	box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .08);
}
.historico__lista li + li {
	border-top: 1px solid #f5f5f5;
}
.historico__link {
	display: block;
	padding: 40px 20px;
	color: #333;
	font-family: "Rubik", var(--roboto);
	font-size: 26px;
	font-weight: 600;
	line-height: 30px;
	text-align: center;
	transition: color .3s;
}
.historico__link:hover,
.historico__link:focus-visible {
	color: var(--azul);
}

/* =========================================================================
   Página Produtos — em construção
   ========================================================================= */
.pagina-construcao {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	color: var(--azul);
	font-family: var(--sans);
	text-align: center;
}
.construcao {
	padding-inline: 10px;
}
.construcao__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: 10px;
}
.construcao__logo a {
	display: inline-block;
}
.construcao__logo img {
	display: inline-block;
	vertical-align: middle;
}
/* A engrenagem gira dentro de um bloco largo alinhado à esquerda, como no original */
.construcao__aviso {
	text-align: start;
}
.construcao__engrenagem {
	margin: 20px 0;
	font-size: 3rem;
	animation: construcao-gira 2s linear infinite;
}
.construcao__titulo {
	margin-bottom: 10px;
	font-size: 2.5rem;
	animation: construcao-desce 1s ease-in-out;
}
.construcao__texto {
	font-size: 1.2rem;
	animation: construcao-sobe 1.5s ease-in-out;
}
@keyframes construcao-gira {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes construcao-desce {
	0% { opacity: 0; transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes construcao-sobe {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Tablet (<= 1024px)
   ========================================================================= */
@media (max-width: 1024px) {
	/* Menu vira botão hambúrguer com lista suspensa em largura total */
	.cabecalho__nav {
		justify-content: center;
	}
	.menu {
		align-self: flex-end;
		width: 52px;
		max-width: 52px;
	}
	.menu__toggle {
		display: block;
	}
	/* A lista ocupa a largura da tela; o JS alinha "left" com a borda esquerda */
	.menu__painel {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 9999;
		display: none;
		width: 100vw;
		background-color: #fff;
	}
	.menu.aberto .menu__painel {
		display: block;
	}
	.menu__lista {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.menu__lista li:not(:last-child) {
		border-bottom: 1px solid var(--cinza-borda);
	}
	.menu__link {
		background-color: #fff;
	}

	.hero {
		min-height: 560px;
		background-position: 0 0;
	}

	.destaques__inner {
		align-items: center;
	}
	.destaques__coluna {
		align-items: center;
		width: 50%;
	}
	.destaques__coluna:nth-child(even) {
		width: 49%;
	}
	.destaques__coluna--primeira {
		margin-top: 0;
	}
	.destaque--claro {
		padding: 0;
	}

	.produtos {
		padding: 80px 40px;
	}
	.produto {
		width: 47%;
	}
	.produto__conteudo--compacto {
		padding: 24px;
	}
	.produto__titulo {
		font-size: 28px;
	}
}

/* =========================================================================
   Celular (<= 767px)
   ========================================================================= */
@media (max-width: 767px) {
	.cabecalho__inner {
		flex-wrap: wrap;
	}
	.cabecalho__logo,
	.cabecalho__nav {
		width: 50%;
	}

	.hero {
		min-height: 500px;
		background-repeat: repeat;
		background-size: 1000px auto;
	}
	.hero__titulo {
		width: 350px;
		max-width: 350px;
		margin-bottom: 0;
		font-size: 30px;
	}
	.hero__rotativo {
		width: 350px;
		max-width: 350px;
		margin-bottom: 0;
	}
	.rotativo {
		font-size: 20px;
		line-height: .1em;
	}
	.hero__texto {
		width: 300px;
		max-width: 300px;
		margin-bottom: -20px;
	}
	.hero__acao {
		width: 209px;
		max-width: 209px;
		margin: 30px 0 -10px;
	}

	.destaques__inner {
		flex-wrap: wrap;
	}
	.destaques__coluna,
	.destaques__coluna:nth-child(even) {
		width: 100%;
	}
	.destaque {
		width: 100%;
	}
	.caixa-icone__texto {
		font-size: 15px;
	}
	.destaque__botao {
		font-size: 13px;
	}

	.porque__inner {
		flex-wrap: wrap;
		padding-block: 40px;
	}
	.porque__coluna {
		width: 100%;
	}
	.porque__titulo {
		font-size: 32px;
	}
	.porque__texto {
		font-size: 15px;
	}

	.proposito__inner {
		flex-wrap: wrap;
	}
	.proposito__coluna {
		width: 100%;
	}
	.proposito__video {
		align-items: flex-start;
	}
	.proposito__video .video {
		width: 342.344px;
		max-width: 100%;
	}
	.proposito__titulo {
		font-size: 32px;
	}
	.item-icone__titulo {
		font-size: 12px;
	}

	.produtos-topo__titulo {
		font-size: 32px;
	}
	.produtos-topo__texto {
		font-size: 15px;
	}
	.produtos {
		padding: 60px 24px;
	}
	.produto {
		width: 100%;
	}
	.produto__titulo {
		font-size: 20px;
	}

	.compromisso__inner {
		flex-wrap: wrap;
		max-width: min(100%, 500px);
	}
	.compromisso__coluna {
		width: 100%;
	}
	.compromisso__coluna--titulo {
		padding: 0 0 24px;
	}
	.compromisso__coluna--texto {
		align-items: center;
		padding: 0;
	}
	.compromisso__titulo,
	.compromisso__subtitulo,
	.compromisso__texto {
		align-self: center;
		width: 300px;
		max-width: 300px;
	}
	.compromisso__titulo {
		font-size: 32px;
	}
	.compromisso__subtitulo {
		font-size: 15px;
		line-height: 1.6em;
	}
	.compromisso__texto {
		font-size: 15px;
	}

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

	.mapa iframe {
		height: 250px;
	}

	.rodape__colunas {
		flex-wrap: wrap;
	}
	.rodape__coluna,
	.rodape__social-coluna,
	.copyright__coluna {
		width: 100%;
	}
	.rodape__social-inner {
		flex-wrap: wrap;
	}

	.historia__texto {
		width: 327px;
		max-width: 327px;
		font-size: 14px;
	}

	.historico {
		padding: 60px 10px;
	}
	.historico__link {
		padding: 28px 16px;
		font-size: 20px;
		line-height: 24px;
	}
}