/*
 * Tema Exauttec sobre o Bootstrap 5.3. Aqui só ficam as fontes, as cores da
 * marca e as exceções em que o Bootstrap não atende (faixa de cards em
 * movimento contínuo, espaçamento fluido das seções). Todo o resto é classe
 * do Bootstrap na blade.
 */

/* ───────────── Fontes (hospedadas aqui; subconjunto latino) ───────────── */

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("../fonts/nunito-sans.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

/* Inter: só na seção de tipos de aparelho. */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ───────────── Tema ───────────── */

:root {
	--fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;

	--bs-body-font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-body-font-size: 1.0625rem;
	--bs-body-line-height: 1.6;

	--bs-body-bg: #faf8f4;
	--bs-body-bg-rgb: 250, 248, 244;
	--bs-body-color: #121a30;
	--bs-body-color-rgb: 18, 26, 48;
	--bs-secondary-color: rgba(18, 26, 48, .75);
	--bs-border-color: #ddd6c7;

	--bs-primary: #023e8a;
	--bs-primary-rgb: 2, 62, 138;
	--bs-primary-text-emphasis: #012d66;
	--bs-dark: #0a1330;
	--bs-dark-rgb: 10, 19, 48;
	--bs-light: #f1ede5;
	--bs-light-rgb: 241, 237, 229;

	--bs-link-color: #023e8a;
	--bs-link-color-rgb: 2, 62, 138;
	--bs-link-hover-color: #012d66;
	--bs-link-hover-color-rgb: 1, 45, 102;

	--bs-border-radius: .25rem;
	--bs-border-radius-sm: .2rem;
	--bs-border-radius-lg: .375rem;
}

/* A âncora para logo abaixo do menu fixo (mesma medida que a 1ª seção desconta). */
html { scroll-padding-top: var(--altura-menu); }

/* O Bootstrap não tem variável de fonte para títulos. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.fonte-titulo {
	font-family: var(--fonte-titulo);
	font-variant-numeric: lining-nums;
}

/* O Bootstrap fixa o azul padrão dentro de cada componente; aqui vai o da marca. */
.btn-primary {
	--bs-btn-bg: #023e8a;
	--bs-btn-border-color: #023e8a;
	--bs-btn-hover-bg: #012d66;
	--bs-btn-hover-border-color: #012d66;
	--bs-btn-active-bg: #012d66;
	--bs-btn-active-border-color: #012d66;
	--bs-btn-disabled-bg: #023e8a;
	--bs-btn-disabled-border-color: #023e8a;
	--bs-btn-focus-shadow-rgb: 2, 62, 138;
}

.btn-outline-primary {
	--bs-btn-color: #023e8a;
	--bs-btn-border-color: #023e8a;
	--bs-btn-hover-bg: #023e8a;
	--bs-btn-hover-border-color: #023e8a;
	--bs-btn-active-bg: #023e8a;
	--bs-btn-active-border-color: #023e8a;
	--bs-btn-disabled-color: #023e8a;
	--bs-btn-disabled-border-color: #023e8a;
	--bs-btn-focus-shadow-rgb: 2, 62, 138;
}

.form-control:focus,
.form-select:focus {
	border-color: #023e8a;
	box-shadow: 0 0 0 .25rem rgba(2, 62, 138, .3);
}

/* Botão do menu (hambúrguer): nada em volta ao tocar; o anel só aparece para quem navega pelo teclado. */
.navbar-toggler {
	-webkit-tap-highlight-color: transparent;
}

.navbar-toggler:focus { box-shadow: none; }

.navbar-toggler:focus-visible { box-shadow: 0 0 0 .25rem rgba(2, 62, 138, .3); }

/* Exceção: o Bootstrap não tem espaçamento fluido. */
.secao { padding-block: clamp(56px, 8vw, 104px); }

/* Sombra dos cartões do topo, também usada no menu para separá-lo da página. */
:root { --sombra-cartao: 0 2px 4px rgba(10, 19, 48, .04), 0 12px 32px rgba(10, 19, 48, .1); }

/* ───────────── Menu ───────────── */

/* Altura do menu (py-1 + logo de 32px); a 1ª seção desconta isso da altura da tela. */
:root { --altura-menu: 50px; }

.cabecalho { box-shadow: var(--sombra-cartao); }

.cabecalho .nav-link { font-size: .9375rem; }

/* Nome da marca no menu: encolhe no celular para caber ao lado do hambúrguer. */
.marca-nome { font-size: clamp(1rem, 4vw, 1.25rem); }

/* ───────────── Topo (1ª seção) ───────────── */

.topo { min-height: calc(100svh - var(--altura-menu)); }

/*
 * Foto do topo. A foto é posicionada pelo ar-condicionado, que fica a 47% da
 * largura e 26% da altura da imagem (proporção da imagem: 1,509 x 1).
 */
.topo__foto {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.topo__foto img {
	position: absolute;
	width: auto;
	max-width: none;
}

/*
 * Celular e telas até 1199px (título e cartões na largura toda): foto de fundo
 * inteira, sem recorte. Ela tem 125% da altura da tela e sobe 25%, o que põe
 * o ar-condicionado perto do topo (centro a ~7% da altura), acima do título; e
 * encostado no canto direito (16px da borda). Se a tela for larga demais para
 * isso, a foto encosta na esquerda para não abrir vão. Em tela baixa, onde o
 * conteúdo passa da altura da tela, a foto cresce para cobrir até embaixo.
 */
@media (max-width: 1199.98px) {
	.topo__foto img {
		--altura-foto: calc(1.25 * (100svh - var(--altura-menu)));
		top: calc(-.25 * (100svh - var(--altura-menu)));
		height: max(var(--altura-foto), calc(100% + .25 * (100svh - var(--altura-menu))));
		/* canto direito do ar = borda - 16px; 0,845 = 47% da largura da imagem + metade do ar */
		left: min(0px, calc(100% - 16px - .845 * var(--altura-foto)));
	}
}

/*
 * Computador (título e cartões à esquerda): foto recortada em diagonal, só à
 * direita da linha que sai do rodapé a 24% da largura e sobe até o topo a 68%;
 * o ar-condicionado fica a 68% da largura, inteiro, acima dos cartões. A altura
 * mínima de 62vw garante que a foto cubra o recorte até em tela bem larga.
 */
@media (min-width: 1200px) {
	.topo__foto { clip-path: polygon(24% 100%, 68% 0, 100% 0, 100% 100%); }

	.topo__foto img {
		top: calc(-3% - 30px);
		left: 68%;
		/* altura cobre a subida de 30px para não abrir vão embaixo em tela mais alta */
		height: max(calc(103% + 30px), 62vw);
		transform: translateX(-47%);
	}
}

/* Título grande e de linhas juntas (quebra em duas linhas na metade esquerda). */
.topo__titulo {
	font-size: clamp(3.2rem, 5.6vw, 5.5rem); /* no celular vale o mínimo, 3.2rem */
	line-height: .95;
	margin-bottom: 1.2rem; /* até os cartões */
}

.topo__cta { margin-top: 2rem; } /* dos cartões até o "Pedir orçamento" */
/* Cartão no tom do fundo, com borda fina e sombra larga e suave (estilo apple.com). */
.numero {
	border: 1px solid rgba(18, 26, 48, .08);
	border-radius: 1.25rem;
	box-shadow: var(--sombra-cartao);
	container-type: inline-size;
}

/*
 * Número acompanha a largura do próprio cartão (container query): "+40 mil"
 * mede ~4,2 vezes o font-size, então 23cqi cabe sem quebrar até no cartão
 * estreito da metade esquerda; o teto é o tamanho de antes.
 */
.numero__valor {
	font-size: min(2.875rem, 23cqi);
	line-height: .95;
}

/* Link de texto com seta que anda um pouco no hover. */
.link-seta {
	text-decoration: none;
}

/* No topo o link cai sobre a foto: halo no tom do fundo para continuar legível. */
.topo .link-seta {
	text-shadow: 0 0 6px #faf8f4, 0 0 12px #faf8f4, 0 0 18px #faf8f4;
}

.topo .link-seta svg { filter: drop-shadow(0 0 4px #faf8f4) drop-shadow(0 0 8px #faf8f4); }

/* Celular e telas até 1199px (foto de fundo inteira): título e link em branco, sem o halo. */
@media (max-width: 1199.98px) {
	.topo__titulo,
	.topo .link-seta,
	.topo .link-seta:hover { color: #fff; }

	/* Sombra leve no título branco, para destacar da foto. */
	.topo__titulo { text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

	.topo .link-seta { text-shadow: none; }

	.topo .link-seta svg { filter: none; }
}

.link-seta:hover { text-decoration: underline; }

.link-seta svg { transition: transform .2s ease; }

.link-seta:hover svg { transform: translateX(4px); }

/* Seção "Atendemos todos os tipos". */
.tipos-secao {
	background-color: #03071e;
	color: #fff;
}

/* Toda a seção em Inter. */
.tipos-secao {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: -.01em;
}

/* Títulos de seção em Inter (tipos e marcas); no resto do site é Playfair.
   Um pouco maior que o fs-2 do Bootstrap (que para em 2rem). */
.titulo-inter {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: -.01em;
	font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.375rem);
}

/* ───────────── Mosaico do Sobre ───────────── */

/*
 * Exceção: o Bootstrap não tem mosaico. Janela de altura fixa; dentro dela o
 * trilho de fotos sobe sem parar (o exauttec.js monta as peças e move o
 * trilho). As fotos são só fundo: escurecidas, sem hover e sem clique; o
 * texto por cima é o único que recebe o mouse (dá para selecionar).
 */
.mosaico { min-height: 760px; }

.mosaico__trilho {
	will-change: transform;
	pointer-events: none;
	user-select: none;
}

.mosaico__bloco { position: relative; }

/* 1px de respiro em cada peça = 2px entre duas vizinhas. */
.mosaico__foto {
	position: absolute;
	padding: 1px;
}

.mosaico__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mosaico__foto::after {
	content: "";
	position: absolute;
	inset: 1px;
	background-color: rgba(10, 19, 48, .5);
}

.mosaico__ruido { --ruido: .2; }

/* Título do Sobre: tamanho do display-5 do Bootstrap, com teto de 3.5rem; .4rem até o 1º parágrafo. */
.sobre__titulo {
	font-size: min(calc(1.425rem + 2.1vw), 3.5rem);
	line-height: 1.15;
	margin-bottom: .4rem;
}

/* 2rem entre os parágrafos (o último tem mb-0). */
.sobre__textos p { margin-bottom: 2rem; }

/* O 3º parágrafo fica em outra linha da grade: a margem dele faz os mesmos 2rem. */
.row > .sobre__ultimo { margin-top: 2rem; }

/* Logo do Sobre: até 200px, centralizado na coluna da direita. */
.sobre__logo {
	width: 100%;
	max-width: 200px;
	height: auto;
}

/* Nome sob o logo: 4rem, uma palavra por linha, sem entrelinha (no celular estreito encolhe para "Climatização" caber). */
.sobre__marca {
	font-size: min(4rem, 15vw);
	line-height: 1;
}

/* Celular (Sobre empilhado): logo e nome um pouco menores (~15%). */
@media (max-width: 991.98px) {
	.sobre__logo { max-width: 170px; }
	.sobre__marca { font-size: min(3.4rem, 12.75vw); }
}

/* Parágrafos do Sobre em Inter, 1px acima do corpo (o título continua Playfair). */
.mosaico__texto p {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.125rem;
	letter-spacing: -.01em;
}

/* Escurece quase a seção toda (o texto vai até perto do fim); clareia só no finzinho. */
.mosaico__degrade {
	background: linear-gradient(to bottom, rgba(10, 19, 48, .85) 0%, rgba(10, 19, 48, .75) 60%, rgba(10, 19, 48, .45) 88%, rgba(10, 19, 48, 0) 100%);
	pointer-events: none;
}

@media (min-width: 992px) {
	.mosaico { min-height: 680px; }
}

/* ───────────── Tipos de aparelho (foto sem fundo sob um refletor) ───────────── */

/*
 * Exceção: o Bootstrap não tem efeito de luz. Um cone claro desce do topo do
 * palco, estreito em cima e aberto embaixo, e acaba numa poça de luz onde o
 * aparelho "pousa". Tudo leve e desfocado; a foto fica por cima. (A luz é um
 * elemento próprio porque o ::before do .ratio é o que dá a proporção.)
 */
/* O desfoque fica aqui, no pai: no próprio cone o recorte (clip-path) cortaria o desfoque. */
.tipo__luz {
	pointer-events: none;
	filter: blur(12px);
}

.tipo__luz::before,
.tipo__luz::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

/* Cone de luz. */
.tipo__luz::before {
	top: 0;
	width: 100%;
	height: 100%;
	/* Luz quente (tom de lâmpada amarelada), mais forte perto do refletor e sumindo devagar. */
	background: linear-gradient(to bottom, rgba(255, 236, 200, 0) 0%, rgba(255, 236, 200, .5) 8%, rgba(255, 214, 160, .3) 35%, rgba(255, 200, 135, .12) 70%, rgba(255, 200, 135, 0) 100%);
	clip-path: polygon(45% 0, 55% 0, 94% 100%, 6% 100%);
}

/* Poça de luz no "chão". */
.tipo__luz::after {
	bottom: 2%;
	width: 85%;
	height: 22%;
	background: radial-gradient(ellipse at center, rgba(255, 210, 150, .3) 0%, rgba(255, 200, 135, .1) 45%, rgba(255, 200, 135, 0) 72%);
}

/* A foto fica em pé no palco, abaixo da metade, com sombra suave embaixo. */
.tipo__chao { padding: 0 8% 10%; }

/* Celular (empilhados, abaixo de 576px): cada tipo com no máximo 360px, centralizado. */
@media (max-width: 575.98px) {
	.tipos > .col { max-width: 360px; margin-inline: auto; }
}

.tipo__foto {
	max-width: 100%;
	max-height: 62%;
	object-fit: contain;
	filter: drop-shadow(0 10px 12px rgba(10, 19, 48, .18));
}

/* ───────────── Ruído sobre as fotos ───────────── */

/*
 * Exceção: o Bootstrap não tem grão de filme. A camada fica acima da foto e
 * do escurecimento (abaixo dele o grão some) e continua lá quando a foto
 * clareia no hover. Intensidade em --ruido (0 = sem grão, 1 = máximo).
 */
.ruido {
	--ruido: .4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
	opacity: var(--ruido);
	pointer-events: none;
}

/* ───────────── Orçamento em etapas ───────────── */

.orcamento__intro { max-width: 640px; }

/* ───────────── WhatsApp flutuante ───────────── */

/* Exceção: o Bootstrap não tem botão flutuante. Verde oficial do WhatsApp. */
.whats-flutuante {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1030;
	width: 60px;
	height: 60px;
	background-color: #25d366;
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	transition: transform .2s ease, box-shadow .2s ease;
}

.whats-flutuante:hover,
.whats-flutuante:focus-visible {
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

/* ───────────── Dúvidas frequentes (acordeão do Bootstrap) ───────────── */

/* Só as variáveis do acordeão: sem fundo, linhas finas, sem recuo lateral. */
.duvidas {
	--bs-accordion-bg: transparent;
	--bs-accordion-color: var(--bs-body-color);
	--bs-accordion-border-color: var(--bs-border-color);
	--bs-accordion-btn-padding-x: 0;
	--bs-accordion-btn-padding-y: 1.25rem;
	--bs-accordion-body-padding-x: 0;
	--bs-accordion-body-padding-y: 0;
	--bs-accordion-active-bg: transparent;
	--bs-accordion-active-color: var(--bs-body-color);
	--bs-accordion-btn-focus-box-shadow: none;
}

/* Nada em volta nem embaixo da pergunta ao clicar ou aberta (o BS põe borda de foco e uma linha sob a aberta). */
.duvidas .accordion-button,
.duvidas .accordion-button:focus,
.duvidas .accordion-button:not(.collapsed) {
	box-shadow: none;
	outline: 0;
}

/* Só quem navega pelo teclado vê onde está o foco. */
.duvidas .accordion-button:focus-visible { text-decoration: underline; }

/*
 * Resposta colada na pergunta, sem salto ao abrir/fechar: nenhum espaçamento
 * depende de a pergunta estar aberta (o BS troca a classe "collapsed" no
 * instante do clique, antes da animação). A pergunta tem pouca folga embaixo e
 * a folga até a linha fica no próprio item, fora da parte que anima.
 */
.duvidas .accordion-button { padding-bottom: .25rem; }

.duvidas .accordion-item { padding-bottom: 1rem; }

/* Pergunta 1.125rem (era 1.25rem) e resposta 1rem (era 1.0625rem). */
.duvidas .accordion-button { font-size: 1.125rem; }

.duvidas .accordion-body { font-size: 1rem; }

/* Animação de altura um pouco mais macia que a padrão do BS (.35s ease). */
.duvidas .collapsing { transition: height .3s cubic-bezier(.4, 0, .2, 1); }

/* A 1ª pergunta de cada coluna também ganha a linha de cima. */
.duvidas .accordion-item:first-child { border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); }

/* Botão de enviar o orçamento: sobe e desce devagar, poucos pixels. */
.botao-flutua { animation: flutua 2.4s ease-in-out infinite; }

@keyframes flutua {
	50% { transform: translateY(-5px); }
}

/* Lista dos seletores (problema e bairro): rola por dentro; a dos 94 bairros não passa de 260px. */
.seletor__menu {
	max-height: 260px;
	overflow-y: auto;
	--bs-dropdown-link-active-bg: #023e8a;
}

/* Perguntas do formulário: 1.2rem em qualquer tela, entrelinha curta, alinhadas à esquerda, coladas nas opções. */
.pergunta {
	font-size: 1.2rem;
	line-height: 1.2;
}
.orcamento__form { max-width: 720px; }

/* Cartão de escolha (serviço e tipo). O estado marcado vem do .btn-check do Bootstrap. */
.escolha {
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(10, 19, 48, .08), 0 8px 24px rgba(10, 19, 48, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}

.escolha:hover { transform: translateY(-3px); }

.btn-check:checked + .escolha {
	box-shadow: 0 0 0 2px var(--bs-primary), 0 10px 26px rgba(2, 62, 138, .2);
}

.btn-check:focus-visible + .escolha {
	outline: 3px solid rgba(2, 62, 138, .5);
	outline-offset: 2px;
}

/* ───────────── Faixa de marcas ───────────── */

/*
 * Exceção: o carousel do Bootstrap mostra um slide por vez; aqui a faixa
 * desliza sem parar. O trilho tem dois grupos iguais e anda 50%, então o laço
 * fecha sem emenda. Não para com o mouse.
 */
.faixa { --faixa-duracao: 50s; }

.faixa__trilho {
	width: max-content;
	animation: faixa var(--faixa-duracao) linear infinite;
}

@keyframes faixa {
	to { transform: translateX(-50%); }
}

/* Cards em pé. Com 10 marcas, um grupo (10 × 24vw) já passa da largura da tela. */
.faixa__item {
	--bs-aspect-ratio: 126.667%; /* 95% da altura do 3:4 (133,333%), mesma largura */
	width: clamp(200px, 24vw, 320px);
}

.faixa {
	background-color: #0a1330;
	padding-top: 6rem;
}

/* 6rem acima (padding da seção) e 5rem até os cards. */
.faixa__titulo { margin-bottom: 5rem; }

/* Logo no centro do card branco: ocupa no máximo 70% da largura e 22% da altura. */
.faixa__logo {
	max-width: 70%;
	max-height: 22%;
	object-fit: contain;
}

/* Movimento reduzido: sem animação; a faixa vira rolagem manual, sem a cópia. */
@media (prefers-reduced-motion: reduce) {
	.faixa { overflow-x: auto !important; }
	.faixa__trilho,
	.botao-flutua { animation: none; }
	.faixa__grupo[aria-hidden="true"] { display: none !important; }

	.link-seta svg,
	.whats-flutuante,
	.escolha { transition: none; }

	.link-seta:hover svg,
	.whats-flutuante:hover,
	.escolha:hover { transform: none; }
}