/* ===========================================================================
   Metin2 LAT - base
   ---------------------------------------------------------------------------
   Aqui moram SO tokens, reset e utilitarios usados por mais de um componente.
   Aparencia de componente vive em css/c-<nome>.css, cada arquivo declarando
   apenas seletores sob a propria raiz (.c-hero, .c-header, ...). Assim mexer em
   um nao alcanca o outro, sem precisar de build.
   =========================================================================== */

/* ===========================================================================
   ESCADA DE BREAKPOINTS (convencao -- @media nao aceita var()).
   Use SOMENTE estes valores em qualquer c-*.css. Sempre max-width, desktop-first.
     480   phone (retrato)        640   phone grande / phablet
     768   tablet retrato         900   tablet paisagem / laptop pequeno
    1024   laptop
   Regra: nada de valores novos soltos. Se precisar de outro corte, promova um
   tier aqui primeiro. Foi o "zoo" de 14 breakpoints sem coordenacao que fazia o
   tablet retrato (768) herdar layout de desktop.
   =========================================================================== */

:root {
	/* --- superficies --- */
	--bg:            #0a0a0c;
	--bg-alt:        #0f0f13;
	--surface:       #14141a;
	--surface-2:     #1a1a22;
	--linha:         #26262f;
	--linha-forte:   #363641;

	/* --- texto --- */
	--ink:           #f2f0ec;
	--ink-2:         #b9b6b0;
	--ink-3:         #837f79;

	/* --- acento ---
	   O dourado vem da identidade que o logo do servidor ja tinha; e o unico
	   pedaco do visual antigo que continua. */
	--ouro:          #d9b45a;
	--ouro-claro:    #f0d68f;
	--ouro-escuro:   #8f7229;
	--brasa:         #c8552f;

	/* --- tipografia --- */
	--fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	         "Helvetica Neue", Arial, sans-serif;
	--fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	              "Liberation Mono", monospace;

	/* --- ritmo ---
	   Uma escala so, para as secoes respirarem igual. */
	--e-1: 0.5rem;
	--e-2: 1rem;
	--e-3: 1.5rem;
	--e-4: 2.5rem;
	--e-5: 4rem;
	--e-6: 6rem;
	--e-7: 9rem;

	--largura: 1200px;
	--raio:    14px;
	--raio-sm: 8px;

	--transicao: 200ms cubic-bezier(0.2, 0, 0.2, 1);

	/* --- responsivo ---
	   --tap:    alvo minimo de toque (WCAG 2.5.5); usado por hamburguer, fechar do
	             modal, etc.
	   --gutter: recuo lateral fluido. O topo do clamp e 1.5rem = --e-3, entao no
	             desktop e pixel-identico ao que era; em 360px relaxa para ~16px.
	   --altura-header: altura real da barra fixa (0.875rem*2 + logo 32px). Fim do
	             "64px" magico que o painel usava para o sticky. */
	--tap:           44px;
	--gutter:        clamp(1rem, 4vw, 1.5rem);
	--altura-header: 60px;
}

/* --------------------------------------------------------------- reset ---- */

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

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--fonte);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--ouro);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------ estrutura --- */

.faixa {
	padding: var(--e-7) var(--gutter);
}

.faixa--alt { background: var(--bg-alt); }

.envelope {
	width: 100%;
	max-width: var(--largura);
	margin: 0 auto;
}

.pular {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--e-2) var(--e-3);
	background: var(--ouro);
	color: #12100c;
	font-weight: 600;
}
.pular:focus { left: var(--e-2); top: var(--e-2); }

/* ----------------------------------------------------------- tipografia --- */

/* Rotulo pequeno acima do titulo da secao. */
.olho {
	display: inline-block;
	margin: 0 0 var(--e-2);
	color: var(--ouro);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.titulo-secao {
	max-width: 22ch;
	font-size: clamp(1.9rem, 4.4vw, 3.1rem);
}

.titulo-secao--largo { max-width: 34ch; }

.texto-secao {
	max-width: 62ch;
	margin-top: var(--e-3);
	color: var(--ink-2);
	font-size: 1.0625rem;
}

/* --------------------------------------------------------------- botoes --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--transicao), border-color var(--transicao),
	            color var(--transicao), transform var(--transicao);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ouro {
	background: var(--ouro);
	color: #14110a;
}
.btn--ouro:hover { background: var(--ouro-claro); }

.btn--linha {
	border-color: var(--linha-forte);
	color: var(--ink);
}
.btn--linha:hover {
	border-color: var(--ouro);
	background: rgba(217, 180, 90, 0.08);
}

.btn--fantasma {
	color: var(--ink-2);
	padding: 0.8rem 1rem;
}
.btn--fantasma:hover { color: var(--ink); }

/* --------------------------------------------------------------- cartao --- */

.cartao {
	padding: var(--e-3);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
}

/* ------------------------------------------------------------ aparecer ----
   Usado por varias secoes: o elemento sobe e aparece quando entra na tela.
   O JS (c-revelar.js) so adiciona .esta-visivel; sem JS tudo fica visivel. */

.revelar {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}
.revelar.esta-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.revelar { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ responsivo --- */

@media (max-width: 900px) {
	:root {
		--e-6: 4rem;
		--e-7: 5rem;
	}
}