/* ==========================================================================
   JF Bebidas 2027 — sistema de design (brief "C · Premium")

   Tudo o que é visual usa classes jf-*: as páginas atuais não mudam até serem
   refeitas. Só duas regras são globais: o foco do teclado e o movimento reduzido.

   1. Tokens          5. Componentes
   2. Global (a11y)   6. Movimento
   3. Base .jf        7. Movimento reduzido
   4. Layout
   ========================================================================== */


/* 0. Fontes (no próprio site: nenhum pedido à Google) ----------------------
   Instrument Serif e Instrument Sans, SIL Open Font License. A Sans é variável (400–700). */

@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-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: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-italic-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: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/instrument-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: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/instrument-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 1. Tokens ---------------------------------------------------------------- */

:root {
	/* Cor */
	--jf-pedra: #EDECE8;
	--jf-superficie: #FFFFFF;
	--jf-texto: #141416;
	--jf-texto-2: #5F5E5C;
	--jf-linha: rgba(20, 20, 22, .16);
	--jf-linha-forte: rgba(20, 20, 22, .42);
	--jf-acento: #C8102E;
	--jf-acento-hover: #E0152F;
	--jf-sobre-acento: #FFFFFF;

	/* Tipos */
	--jf-serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--jf-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--jf-texto-base: 1.0625rem; /* 17px */
	--jf-altura-linha: 1.6;
	--jf-t-display: clamp(2.75rem, 1.55rem + 5.4vw, 6.25rem);
	--jf-t-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
	--jf-t-h2: clamp(1.875rem, 1.4rem + 2.1vw, 3.25rem);
	--jf-t-h3: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
	--jf-t-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
	--jf-t-pequeno: .875rem;
	--jf-t-micro: .8125rem;

	/* Forma */
	--jf-raio: 4px;          /* botões e campos */
	--jf-raio-painel: 8px;   /* painéis */

	/* Espaço */
	--jf-e-1: .25rem;
	--jf-e-2: .5rem;
	--jf-e-3: .75rem;
	--jf-e-4: 1rem;
	--jf-e-5: 1.5rem;
	--jf-e-6: 2rem;
	--jf-e-7: 3rem;
	--jf-e-secao: clamp(4rem, 2.6rem + 6vw, 8.5rem);
	--jf-largura: 1320px;
	--jf-largura-texto: 62ch;
	--jf-gutter: clamp(16px, 4vw, 48px);

	/* Movimento */
	--jf-dur: .8s;
	--jf-dur-curta: .2s;
	--jf-ease: cubic-bezier(.2, .7, .2, 1);
}


/* 2. Global: foco visível no teclado ---------------------------------------
   currentColor acompanha a cor do texto, por isso funciona no cabeçalho escuro e nas
   secções claras. !important porque o CSS atual do site tira o contorno aos links. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
}


/* 3. Base: dentro de .jf (contentor Elementor com a classe "jf") ----------- */

/* As regras visuais levam "html body" à frente: o Kit do Elementor estiliza h1–h4, links e
   botões com .elementor-kit-N (especificidade 0,1,1); assim ganhamos sem depender da ordem. */


html body .jf {
	font-family: var(--jf-sans);
	font-size: var(--jf-texto-base);
	line-height: var(--jf-altura-linha);
	color: var(--jf-texto);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html body .jf--pedra { background-color: var(--jf-pedra); }
html body .jf--superficie { background-color: var(--jf-superficie); }

html body .jf :is(h1, h2, h3, h4) {
	font-family: var(--jf-serif);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--jf-texto);
	text-wrap: balance;
	margin: 0;
}

html body .jf p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

/* O Kit do Elementor dá Inter a todos os links: dentro de .jf herdam a fonte do pai (título = serifa). */
html body .jf a { font-family: inherit; }

html body .jf a:not([class]) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}


/* 4. Layout ---------------------------------------------------------------- */

html body .jf-contentor {
	width: 100%;
	max-width: var(--jf-largura);
	margin-inline: auto;
	padding-inline: var(--jf-gutter);
	box-sizing: border-box;
}

html body .jf-secao {
	padding-block: var(--jf-e-secao);
}

html body .jf-secao + .jf-secao {
	border-top: 1px solid var(--jf-linha);
}

html body .jf-grelha {
	display: grid;
	gap: var(--jf-e-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--jf-col, 280px)), 1fr));
}

html body .jf-pilha > * + * {
	margin-top: var(--jf-e, var(--jf-e-5));
}


/* 5. Componentes ----------------------------------------------------------- */

/* Títulos */
html body .jf-display,
html body .jf-titulo-1,
html body .jf-titulo-2,
html body .jf-titulo-3 {
	font-family: var(--jf-serif);
	font-weight: 400;
	letter-spacing: -.015em;
	color: var(--jf-texto);
	text-wrap: balance;
	margin: 0;
}
html body .jf-display { font-size: var(--jf-t-display); line-height: .98; }
html body .jf-titulo-1 { font-size: var(--jf-t-h1); line-height: 1.02; }
html body .jf-titulo-2 { font-size: var(--jf-t-h2); line-height: 1.06; }
html body .jf-titulo-3 { font-size: var(--jf-t-h3); line-height: 1.15; letter-spacing: 0; }
html body .jf-display em,
html body .jf-titulo-1 em,
html body .jf-titulo-2 em { font-style: italic; }

/* Sobretítulo */
html body .jf-sobretitulo {
	display: block;
	font-family: var(--jf-sans);
	font-size: var(--jf-t-micro);
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jf-texto-2);
	margin-bottom: var(--jf-e-4);
}

/* Texto de apresentação */
html body .jf-lead {
	font-size: var(--jf-t-lead);
	line-height: 1.5;
	color: var(--jf-texto-2);
	max-width: var(--jf-largura-texto);
}

html body .jf-secundario { color: var(--jf-texto-2); }
html body .jf-pequeno { font-size: var(--jf-t-pequeno); }

/* Botões: .jf-btn em HTML, ou a classe jf-botao-* no widget Botão do Elementor. */
html body .jf-btn,
html body :is(.jf-botao-primario, .jf-botao-contorno) .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 48px;
	padding: .8125rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--jf-raio);
	font-family: var(--jf-sans);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .005em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--jf-dur-curta) ease, color var(--jf-dur-curta) ease, border-color var(--jf-dur-curta) ease;
}

html body .jf-btn--primario,
html body .jf-botao-primario .elementor-button {
	background-color: var(--jf-acento);
	color: var(--jf-sobre-acento);
}
html body .jf-btn--primario:hover,
html body .jf-botao-primario .elementor-button:hover {
	background-color: var(--jf-acento-hover);
	color: var(--jf-sobre-acento);
}

html body .jf-btn--contorno,
html body .jf-botao-contorno .elementor-button {
	background-color: transparent;
	color: var(--jf-texto);
	border-color: var(--jf-texto);
}
html body .jf-btn--contorno:hover,
html body .jf-botao-contorno .elementor-button:hover {
	background-color: var(--jf-texto);
	color: var(--jf-superficie);
}

html body .jf-btn--seta::after {
	content: "→";
	transition: transform var(--jf-dur-curta) ease;
}
html body .jf-btn--seta:hover::after { transform: translateX(3px); }

html body .jf-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jf-e-3);
}

/* Link de texto com seta */
html body .jf-link {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-family: var(--jf-sans);
	font-weight: 500;
	color: var(--jf-texto);
	text-decoration: none;
	border-bottom: 1px solid var(--jf-linha-forte);
	padding-bottom: 2px;
	transition: border-color var(--jf-dur-curta) ease;
}
html body .jf-link:hover { border-bottom-color: var(--jf-texto); }

/* Painel */
html body .jf-painel {
	background-color: var(--jf-superficie);
	border: 1px solid var(--jf-linha);
	border-radius: var(--jf-raio-painel);
	padding: clamp(var(--jf-e-5), 3vw, var(--jf-e-7));
}

/* Linha divisória */
html body .jf-linha {
	display: block;
	height: 1px;
	border: 0;
	margin: 0;
	background-color: var(--jf-linha);
}

/* Factos (+1.800 produtos, horário, entregas) */
html body .jf-factos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	border-top: 1px solid var(--jf-linha);
}
html body .jf-facto {
	padding: var(--jf-e-6) var(--jf-e-5) var(--jf-e-6) 0;
	border-bottom: 1px solid var(--jf-linha);
}
html body .jf-facto__valor {
	display: block;
	font-family: var(--jf-serif);
	font-size: var(--jf-t-h1);
	line-height: 1;
	margin-bottom: var(--jf-e-3);
}
html body .jf-facto__rotulo {
	color: var(--jf-texto-2);
	font-size: var(--jf-t-pequeno);
}

/* Passos (preços só para clientes) */
html body .jf-passos {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: jf-passo;
	display: grid;
	gap: var(--jf-e-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
html body .jf-passos > li {
	counter-increment: jf-passo;
	border-top: 1px solid var(--jf-texto);
	padding-top: var(--jf-e-5);
}
html body .jf-passos > li::before {
	content: counter(jf-passo, decimal-leading-zero);
	display: block;
	font-family: var(--jf-serif);
	font-size: var(--jf-t-h2);
	line-height: 1;
	color: var(--jf-acento);
	margin-bottom: var(--jf-e-4);
}

/* Mural de logótipos */
html body .jf-logos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
	border-left: 1px solid var(--jf-linha);
	border-top: 1px solid var(--jf-linha);
}
html body .jf-logos > * {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	padding: var(--jf-e-5);
	border-right: 1px solid var(--jf-linha);
	border-bottom: 1px solid var(--jf-linha);
	background-color: var(--jf-superficie);
}
html body .jf-logos img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Cadeado (preços para clientes) */
html body .jf-cadeado {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-weight: 500;
	color: var(--jf-texto);
}
html body .jf-cadeado::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background-color: var(--jf-acento);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Etiqueta / estado ativo */
html body .jf-etiqueta {
	display: inline-block;
	padding: .25em .7em;
	border: 1px solid var(--jf-linha-forte);
	border-radius: 999px;
	font-size: var(--jf-t-micro);
	font-weight: 500;
	color: var(--jf-texto);
	background: transparent;
}
html body .jf-etiqueta[aria-pressed="true"],
html body .jf-etiqueta.is-ativo {
	background-color: var(--jf-acento);
	border-color: var(--jf-acento);
	color: var(--jf-sobre-acento);
}

/* Campos de formulário */
html body .jf-campo {
	display: grid;
	gap: var(--jf-e-2);
}
html body .jf-campo > label {
	font-size: var(--jf-t-pequeno);
	font-weight: 500;
}
html body .jf-campo :is(input, select, textarea) {
	width: 100%;
	min-height: 48px;
	padding: .75rem .875rem;
	border: 1px solid var(--jf-linha-forte);
	border-radius: var(--jf-raio);
	background-color: var(--jf-superficie);
	color: var(--jf-texto);
	font: inherit;
	box-sizing: border-box;
}
html body .jf-campo textarea { min-height: 140px; resize: vertical; }
html body .jf-campo :is(input, select, textarea):focus-visible {
	border-color: var(--jf-texto);
	outline-color: var(--jf-texto) !important;
}

/* Imagem em largura total (foto do armazém) */
html body .jf-imagem-total {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--jf-raio-painel);
	background-color: var(--jf-texto);
}
html body .jf-imagem-total img {
	display: block;
	width: 100%;
	height: clamp(320px, 62vw, 760px);
	object-fit: cover;
}


/* 6. Movimento -------------------------------------------------------------
   Regra: o conteúdo é visível por defeito. As animações só existem dentro de
   @media (prefers-reduced-motion: no-preference) e, as de scroll, dentro de
   @supports (animation-timeline: view()). Sem suporte, nada fica escondido. */

@keyframes jf-subir { from { transform: translateY(105%); } }
@keyframes jf-entrar { from { opacity: 0; transform: translateY(28px); } }
@keyframes jf-desenhar { from { transform: scaleX(0); } }
@keyframes jf-abrir {
	from { clip-path: inset(6% 9% 6% 9% round var(--jf-raio-painel)); }
	to   { clip-path: inset(0 0 0 0 round var(--jf-raio-painel)); }
}
@keyframes jf-aproximar { from { transform: scale(1.14); } }

/* Título linha a linha (máscara), ao carregar a página.
   HTML: <h1 class="jf-titulo-linhas"><span class="jf-l"><span>Linha 1</span></span>…</h1> */
.jf-titulo-linhas .jf-l {
	display: block;
	overflow: hidden;
	padding-bottom: .06em;
	margin-bottom: -.06em;
}
.jf-titulo-linhas .jf-l > span { display: block; }

@media (prefers-reduced-motion: no-preference) {
	.jf-titulo-linhas .jf-l > span {
		animation: jf-subir 1s var(--jf-ease) both;
	}
	.jf-titulo-linhas .jf-l:nth-child(2) > span { animation-delay: .09s; }
	.jf-titulo-linhas .jf-l:nth-child(3) > span { animation-delay: .18s; }
	.jf-titulo-linhas .jf-l:nth-child(4) > span { animation-delay: .27s; }
	.jf-titulo-linhas .jf-l:nth-child(5) > span { animation-delay: .36s; }

	/* O que vem logo a seguir ao título (frase, botões) entra depois. */
	.jf-apos-titulo {
		animation: jf-entrar .9s var(--jf-ease) .45s both;
	}
}

/* Entradas ao fazer scroll. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.jf-revelar,
		.jf-revelar-grupo > * {
			animation: jf-entrar linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 70%;
		}

		.jf-linha--desenhar {
			transform-origin: left center;
			animation: jf-desenhar linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 35%;
		}

		/* Foto do armazém: abre e aproxima ao fazer scroll. */
		.jf-imagem-total.jf-abrir {
			animation: jf-abrir linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
		}
		.jf-imagem-total.jf-abrir img {
			animation: jf-aproximar linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 60%;
		}
	}
}


/* 7. Movimento reduzido: desliga tudo, incluindo animações do Elementor. ---- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}