/* filipegoncalves.me, versão 7.
   Uma só malha de pontos. O nome, as áreas e as empresas são pontos dessa malha, maiores.
   O desenho dos pontos é feito em canvas (site.js); o texto é HTML por cima. */

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

:root {
	--papel: #F7F6F3;
	--tinta: #1D1F24;
	--cinza: #6B6E76;
	--linha: #D9D9D6;
	--sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--apagado: #C2C1BD;      /* texto fora de foco, quando outra área está sob o rato */
	--margem: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* etiquetas em monoespaçada, como legendas de um desenho */
.topo, .base, .voltar, .trocar, .desc, .no span, .co span, .co i { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); margin-right: 16px; vertical-align: 0; }

/* ------------------------------------------------------------ sem JavaScript: uma página simples, legível */
#campo { display: none; }
.topo, main, .base { max-width: 720px; margin: 0 auto; padding: 28px 24px; }
.topo { display: flex; gap: 28px; align-items: center; }
.topo nav { margin-left: auto; display: flex; gap: 22px; }
.lingua { margin: 0; display: flex; gap: 10px; }
.lingua a { color: var(--cinza); }
.lingua a[aria-current] { color: var(--tinta); }
.etis { display: none; }
main h1.sr { position: static; width: auto; height: auto; clip-path: none; font-size: 44px; letter-spacing: -.03em; margin: 30px 0; }
.areas { display: none; }
.voltar, .trocar { display: none; }
.area { margin: 0 0 34px; }
.desc { margin: 0 0 12px; color: var(--cinza); }
.desc span { white-space: nowrap; }
.area h2.sr { position: static; width: auto; height: auto; clip-path: none; font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); margin: 0 0 10px; }
.co { display: block; padding: 12px 0; border-top: 1px solid var(--linha); }
.co b { display: block; font: 600 26px/1.15 var(--sans); letter-spacing: -.02em; }
.co span { display: block; color: var(--cinza); margin-top: 6px; }
.co i { display: inline-block; font-style: normal; margin-top: 8px; }
a.co i { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.base { color: var(--cinza); }
.base p { margin: 0 0 14px; }
.form label { display: block; font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); margin-bottom: 18px; }
.form input, .form textarea { display: block; width: 100%; margin-top: 8px; padding: 9px 0; font: 400 16px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; }
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--tinta); }
.form button { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); background: none; border: 0; border-bottom: 1px solid var(--tinta); padding: 6px 0; cursor: pointer; }
.form .par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estado { display: none; margin: 0 0 20px; padding: 12px 16px; border-left: 2px solid var(--tinta); font-size: 15px; }
[data-msg="sent"] .estado.ok, [data-msg="error"] .estado.erro { display: block; }
.byn { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.byn img { height: 15px; width: auto; }

/* ------------------------------------------------------------ com JavaScript: o campo de pontos */
.js body { height: 100dvh; min-height: 560px; overflow: hidden; }
.js #campo { display: block; position: fixed; inset: 0; width: 100%; height: 100%; }
.js .topo, .js main, .js .base { max-width: none; margin: 0; padding: 0; }
.js main h1.sr, .js .area h2.sr { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); margin: 0; }

.js .topo { position: fixed; right: var(--margem); top: 30px; z-index: 3; flex-direction: column; align-items: flex-end; gap: 9px; }
.js .topo a:hover { opacity: .6; }
.js .topo nav { gap: 30px; margin-left: 0; }
.js .lingua { gap: 12px; }
.js .local { white-space: nowrap; }
.js .local .pt { margin-right: 12px; }
.js .local .cidade, .js .local .coord { display: block; }
.js .local .coord { color: var(--cinza); }

.js .base { position: fixed; left: var(--margem); right: var(--margem); bottom: 34px; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; justify-items: start; pointer-events: none; }
.js .base > * { pointer-events: auto; }      /* cada legenda ocupa só o seu texto: a malha aparece entre elas */
.js .base p { margin: 0; line-height: 1.7; }
.js .base .local { text-align: right; justify-self: end; }
.js .byn { margin: 0; opacity: .75; transition: opacity .2s; }
.js .byn:hover { opacity: 1; }
.js .base, .js .lema { transition: opacity .3s; }

/* Os nós das áreas, na página inicial. O ponto é desenhado no canvas; aqui fica a legenda. */
.js .areas { display: block; }
.js .no, .js .sat, .js .desc, .js .co, .js .voltar, .js .trocar { position: fixed; z-index: 2; opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .18s; }
.js .no { padding: 14px 14px 14px 62px; margin: -24px 0 0 -28px; }
.js .no b { display: block; font: 600 13px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 9px; transition: color .2s; }
.js .no span { display: block; text-transform: none; letter-spacing: .04em; font-size: 12px; line-height: 1.55; color: var(--cinza); margin-top: 0; white-space: nowrap; transition: color .2s; }
.js .no .e { display: none; }
.js[data-state="home"] .no { opacity: 1; visibility: visible; transition: opacity .45s .35s, visibility 0s; }

/* As empresas, à volta da sua área: um nó mais pequeno e o nome. Abrem a área, não o site. */
.js .sat { padding: 9px 10px 9px 26px; margin: -18px 0 0 -12px; font: 500 13px/18px var(--mono); letter-spacing: .02em; white-space: nowrap; transition: opacity .18s, visibility 0s .18s, color .2s; }
.js .sat.esq { transform: translateX(-100%); padding: 9px 26px 9px 10px; margin-left: 12px; }      /* o nome à esquerda do nó */
.js .sat.mais { font-weight: 400; font-size: 12px; color: var(--cinza); }
.js[data-state="home"] .sat { opacity: 1; visibility: visible; transition: opacity .45s .5s, visibility 0s, color .2s; }

/* Com o rato sobre uma área, o resto do mapa recua (o canvas faz o mesmo aos pontos). */
.js[data-sobre] .no:not(.foco) b, .js[data-sobre] .no:not(.foco) span, .js[data-sobre] .sat:not(.foco), .js[data-sobre] .eti { color: var(--apagado); }
.js .no.foco span, .js .sat.mais.foco { color: var(--tinta); }

/* Etiquetas secundárias: um ponto pequeno e uma palavra, sem ligação. */
.js .etis { display: block; margin: 0; padding: 0; list-style: none; }
.js .eti { position: fixed; z-index: 1; margin: -9px 0 0 0; padding-left: 18px; font: 400 12px/18px var(--mono); letter-spacing: .06em; color: #8B8D93; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .18s, color .2s; }
.js[data-state="home"] .eti { opacity: 1; visibility: visible; transition: opacity .45s .45s, visibility 0s, color .2s; }

/* Uma área aberta: o nome dos pontos passa a ser o da área, e as empresas são os nós. */
.js .area { margin: 0; }
.js .co { padding: 12px 12px 12px 62px; margin: -30px 0 0 -28px; border: 0; }
.js .co b { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.1; }
.js .co span { margin-top: 10px; }
.js .co i { margin-top: 12px; }
.js a.co:hover b { opacity: .6; }
.js .co.prod b { font-size: clamp(19px, 1.9vw, 26px); }      /* produto de uma empresa da área: um degrau abaixo */
.js .desc { margin: 0; padding-right: 16px; letter-spacing: .14em; line-height: 1.7; }
.js .area.ativa .desc, .js .area.ativa .co, .js:not([data-state="home"]) .voltar, .js:not([data-state="home"]) .trocar { opacity: 1; visibility: visible; transition: opacity .45s .5s, visibility 0s; }
.js .lista .co { padding: 6px 8px 6px 40px; margin: -16px 0 0 -18px; }
.js .lista .co b { font-size: clamp(16px, 1.45vw, 20px); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js .lista .co i { display: block; margin-top: 3px; font-size: 10px; line-height: 1.45; letter-spacing: .12em; color: var(--cinza); border: 0; padding: 0; }
.js .lista a.co i { color: var(--tinta); }
.js .co.form { padding-top: 0; margin-top: -8px; }
.js .co.form button span { display: inline; margin: 0; color: inherit; }
.co em { font-style: normal; }
.co .dom { text-transform: none; letter-spacing: .08em; }      /* domínios em minúsculas */
.js .voltar { display: block; padding: 8px 0; }
.js .voltar:hover, .js .trocar a:hover { opacity: .6; }
.js .trocar { left: var(--margem); bottom: 34px; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.js .trocar a { color: var(--cinza); padding: 4px 0; }
.js .trocar a[aria-current="page"] { color: var(--tinta); border-bottom: 1px solid var(--tinta); }
.js:not([data-state="home"]) .lema { opacity: 0; }

@media (max-width: 1099px) {
	.js .trocar { bottom: 66px; }
}

@media (max-width: 719px) {
	:root { --margem: 22px; }
	.topo, .base, .voltar, .trocar { font-size: 10px; letter-spacing: .1em; }
	.js .topo { top: 18px; gap: 7px; }
	.js .topo nav { gap: 14px; }
	.js .lingua { gap: 8px; }
	.js .topo .pt { margin-right: 9px; }
	.js .base { bottom: 18px; grid-template-columns: 1fr auto; row-gap: 10px; }
	.js .base .lema { grid-row: 1; grid-column: 1 / -1; }
	.js .byn { grid-row: 2; grid-column: 1; }
	.js .base .local { grid-row: 2; grid-column: 2; }
	.js .trocar { bottom: 68px; right: var(--margem); gap: 4px 14px; flex-wrap: nowrap; }
	.js:not([data-state="home"]) .lema { display: none; }
	.js .no { padding-left: 50px; margin-left: -22px; }
	.js .no .d, .js .sat { display: none; }
	.js .no .e { display: block; }
	.js .desc { font-size: 9.5px; letter-spacing: .05em; }
	.js .co { padding-left: 50px; margin-left: -22px; }
	.js .lista .co { padding: 6px 0 6px 24px; margin-left: -12px; }
	.js .lista .co b { font-size: 14px; }
	.js .lista .co i { font-size: 9px; letter-spacing: .05em; line-height: 1.35; }
	.js .lista .co em { display: none; }
	.form .par { grid-template-columns: 1fr; }
	.form label { margin-bottom: 12px; }
	.js .eti { font-size: 11px; letter-spacing: .04em; }
}

/* Cursor: um ponto, como os do campo; um ponto com anel sobre o que é clicável.
   É uma imagem de cursor do próprio sistema (não um elemento que segue o rato), por isso não atrasa. */
@media (hover: hover) and (pointer: fine) {
	.js, .js body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='4.5' fill='%231D1F24' stroke='%23F7F6F3' stroke-width='1.5'/%3E%3C/svg%3E") 10 10, auto; }
	.js a, .js button { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12.5' fill='%231D1F24' fill-opacity='.08' stroke='%231D1F24' stroke-width='1.2'/%3E%3Ccircle cx='16' cy='16' r='4.5' fill='%231D1F24'/%3E%3C/svg%3E") 16 16, pointer; }
	.js input, .js textarea { cursor: text; }
}

@media (prefers-reduced-motion: reduce) {
	.js .no, .js .no b, .js .no span, .js .sat, .js .eti, .js .desc, .js .co, .js .voltar, .js .trocar, .js .base, .js .lema { transition: none !important; }
}