@charset "utf-8";
/*
 * CSS Document
 */

/* Fontes do Google e icons.css: carregados pelo Layout.php (app/hooks),
   com <link> no <head> e versão na URL. */

:root {
	--green: #2b7A68;
	--red: #9e424d;
	--blue: #42589e;
	--purple: #65429e;
	--yellow: #9e6c42;
	--cyan: #6d7587;
}

* {
	outline: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

img,
table {
	border: 0;
}

.page {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.content-page {
	margin: 60px auto 0 auto;
	padding: 0;
	width: 1040px;
	min-height: 650px;
}


/* Header */
#header {
	position: relative;
	width: 100%;
	height: 200px;
	background-color: transparent;
	z-index: 1;
}

/* Menu */
#menu {
	display: grid;
	grid-template-columns: repeat(5, minmax(10px, auto));
	grid-column-gap: 10px;
	padding: 0;
	width: 960px;
	height: 40px;
	margin: 20px auto 0 auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#menu .link {
	height: 36px;
	line-height: 32px;
	text-align: center;
}

#menu a {
	position: relative;
	font-family: 'Bangers', Verdana;
	font-size: 32px;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 1px;
	transition: all 0.35s ease 0s;
}

#menu a.active:hover {
	cursor: default;
}

#menu a:after {
	position: absolute;
	bottom: 1px;
	left: 0;
	right: 0;
	margin: auto;
	content: '';
	color: transparent;
	height: 3px;
	border-radius: 3px;
	transition: all .5s ease 0s;
}

#menu a.active:after,
#menu a.deactive:after {
	width: 0%;
}

#menu a.deactive:hover:after {
	width: 100%;
}

#menu a {
	text-shadow: 1px 1px 0 #FFFFFF;
}

#menu a.home {
	color: var(--green);
}

#menu a.about {
	color: var(--red);
}

#menu a.skills {
	color: var(--blue);
}

#menu a.portfolio {
	color: var(--purple);
}

#menu a.contact {
	color: var(--yellow);
}

#menu a.active:after {
	width: 100%;
	box-shadow: 1px 1px 0 0 #FFFFFF;
}

#menu a.active.home:after {
	background-color: var(--green);
}

#menu a.active.about:after {
	background-color: var(--red);
}

#menu a.active.skills:after {
	background-color: var(--blue);
}

#menu a.active.portfolio:after {
	background-color: var(--purple);
}

#menu a.active.contact:after {
	background-color: var(--yellow);
}

#menu a.deactive:after {
	box-shadow: 1px 1px 0 0 #FFFFFF;
}

#menu a.deactive.home:after {
	background-color: var(--green);
}

#menu a.deactive.about:after {
	background-color: var(--red);
}

#menu a.deactive.skills:after {
	background-color: var(--blue);
}

#menu a.deactive.portfolio:after {
	background-color: var(--purple);
}

#menu a.deactive.contact:after {
	background-color: var(--yellow);
}

/* Página atual numa pílula na cor da página (mesmo estilo da legenda da
   página Habilidades); as demais nas cores sólidas, com o sublinhado no
   hover/foco. */
#menu {
	list-style: none;
}

#menu a {
	display: inline-block;
}

#menu a.home { --c: var(--green); }
#menu a.about { --c: var(--red); }
#menu a.skills { --c: var(--blue); }
#menu a.portfolio { --c: var(--purple); }
#menu a.contact { --c: var(--yellow); }


#menu a.active,
.menu-sticky a.active {
	color: #FFFFFF;
	background-color: var(--c);
	border-radius: 32px;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
	box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.25);
	transform: rotate(-2deg);
	cursor: default;
}

#menu a.active {
	line-height: 1;
	padding: 6px 22px 3px 22px;
}

.menu-sticky a.active {
	padding: 3px 16px 1px 16px;
}

#menu a.active:after {
	display: none;
}

/* Foco pelo teclado: o mesmo sublinhado do hover, e o contorno na cor do
   link */
#menu a.deactive:focus-visible:after,
.menu-sticky a.deactive:focus-visible:after {
	width: 100%;
}

#menu a:focus-visible,
.menu-sticky a:focus-visible {
	outline-color: var(--c, #6d7587);
}

/* Barra fixa compacta (ver init_sticky_menu em default.js): desce do topo
   quando o menu principal sai da tela ao rolar. Fica no início do <body>,
   com o mesmo z-index do ícone do currículo/idiomas, que por virem depois
   no HTML continuam por cima dela; a tela "Carregando" (z-index 3) cobre tudo. */
.menu-sticky {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 44px;
	background-color: rgba(232, 225, 211, 0.95);
	border-bottom: 1px solid #CFC6B3;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-110%);
	visibility: hidden;
	transition: transform .35s ease, visibility 0s linear .35s;
}

.menu-sticky.visible {
	transform: none;
	visibility: visible;
	transition: transform .35s ease;
}

.menu-sticky ul {
	display: flex;
	gap: 34px;
	list-style: none;
}

.menu-sticky a {
	position: relative;
	display: inline-block;
	font-family: 'Bangers', Verdana;
	font-size: 25px;
	line-height: 30px;
	letter-spacing: 1px;
}

.menu-sticky-logo {
	font-size: 30px !important;
	transform: rotate(-1deg);
	text-shadow: 2px 2px 0 #B4B4B4;
}

.menu-sticky-logo .last {
	color: #FFFFFF;
}

.menu-sticky.home .menu-sticky-logo .first { color: var(--green); }
.menu-sticky.about .menu-sticky-logo .first { color: var(--red); }
.menu-sticky.skills .menu-sticky-logo .first { color: var(--blue); }
.menu-sticky.portfolio .menu-sticky-logo .first { color: var(--purple); }
.menu-sticky.contact .menu-sticky-logo .first { color: var(--yellow); }

.menu-sticky a.home { --c: var(--green); }
.menu-sticky a.about { --c: var(--red); }
.menu-sticky a.skills { --c: var(--blue); }
.menu-sticky a.portfolio { --c: var(--purple); }
.menu-sticky a.contact { --c: var(--yellow); }

.menu-sticky a.deactive {
	color: var(--c);
	text-shadow: 1px 1px 0 #FFFFFF;
}

.menu-sticky a.deactive:after {
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	margin: auto;
	content: '';
	width: 0;
	height: 3px;
	border-radius: 3px;
	background-color: var(--c);
	transition: width .35s ease;
}

.menu-sticky a.deactive:hover:after {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.menu-sticky,
	.menu-sticky.visible {
		transition: none;
	}
}

/* Foco pelo teclado em todo o site: o "* { outline: none }" do topo da
   folha escondia qual elemento estava em foco. :focus-visible só aparece na
   navegação por teclado, não no clique. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
	outline: 2px dashed currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

/* Social Media */
#social-media {
	position: fixed;
	z-index: 2;
	left: 1vw;
	top: 100vh;
	padding: 0;
	width: 45px;
	height: 180px;
	margin-top: calc(-1vh - 200px);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#social-media div {
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	text-shadow: 1px 1px 0 #FFFFFF;
}

#social-media .linkedin {
	color: #004b74;

	font-size: 22px;
}

#social-media .instagram {
	color: #f53737;

	font-size: 26px;
}

#social-media .twitter {
	color: #16A0E8;

	font-size: 26px;
}

#social-media .article {
	color: #FF5C5D;

	font-size: 26px;
}

.title-portfolio {
	width: 100%;
	font-family: 'Bangers';
	font-weight: normal;
	font-style: normal;
	text-align: center;
}

.title-portfolio span.red {
	font-size: 48px;
	margin-left: 3px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.title-portfolio span.black {
	font-size: 42px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
}

.title-contact {
	width: 100%;
	font-family: 'Bangers';
	font-weight: normal;
	font-style: normal;
	text-align: center;
	margin-bottom: 28px;
}

.title-contact span.red {
	font-size: 46px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.title-contact span.black {
	font-size: 42px;
	margin-left: 6px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
}

.title-page {
	width: 100%;
	text-align: left;
	font-family: 'Bangers';
	font-weight: normal;
	font-style: normal;
	font-size: 28px;
	color: #1f1f1f;
	text-shadow: 1px 1px 0 #FFF;
	padding: 0 18px;
	margin-top: -26px;
	letter-spacing: 1px;
}

.subtitle-page {
	width: 100%;
	text-align: left;
	font-family: 'Verdana';
	font-weight: bold;
	font-style: italic;
	font-size: 13px;
	line-height: 24px;
	color: #1F1F1F;
	text-shadow: 1px 1px 0 #FFF;
	text-transform: uppercase;
	padding: 0 16px;
	margin-top: -8px;
}

footer {
	background-color: #1c1d25;
	background-image: url('../image/background-article-title.png');
	background-repeat: repeat;
}

.footer-main {
	width: 100%;
	min-height: 340px;
}

.footer-logo {
	margin: 0 auto;
	width: 980px;
	height: 180px;
	color: #FFFFFF;
	padding-top: 56px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: all 0.15s ease 0s;
}

.footer-logo .up {
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-family: 'Bangers', Verdana;
	font-size: 56px;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-shadow: 3px 2px 0 #000;
}

.footer-logo .first-name {
	text-align: right;
	position: relative;
	transform: rotate(-1deg);
}

.footer-logo .last-name {
	text-align: left;
	position: relative;
	transform: rotate(-1deg);
}

.footer-logo .up span {
	font-size: 66px;
}

.footer-menu {
	width: 770px;
	height: 56px;
	line-height: 36px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, minmax(30px, auto));
	grid-column-gap: 50px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.footer-menu>div {
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 3px 2px 0 #000;
}

.footer-menu a {
	position: relative;
	color: #FFFFFF;
	transition: all 0.35s ease 0s;
}

.footer-menu a:hover {
	cursor: pointer;
}

.footer-menu a:after {
	position: relative;
	bottom: 6px;
	left: 0;
	right: 0;
	margin: 0 auto 0 10px;
	content: '';
	color: transparent;
	height: 3px;
	width: 0;
	border-radius: 3px;
	transition: all .5s ease 0s;
	display: block;
	box-shadow: 3px 2px 0 0 #000;
}

.footer-menu .twitter a:after {
	color: #16A0E8;
	background-color: #16A0E8;
}

.footer-menu .twitter i {
	font-size: 20px;
	margin-right: -3px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu .linkedin a:after {
	color: #004b74;
	background-color: #004b74;
}

.footer-menu .linkedin i {
	font-size: 18px;
	margin-right: -2px;
	vertical-align: 2px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu .dribbble a:after {
	color: #bf2460;
	background-color: #bf2460;
}

.footer-menu .dribbble i {
	font-size: 18px;
	margin-right: -2px;
	vertical-align: 1px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu .github a:after {
	color: #ecc4ab;
	background-color: #ecc4ab;
}

.footer-menu .github i {
	font-size: 24px;
	margin-right: -8px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu .codepen a:after {
	color: #FFFFFF;
	background-color: #FFFFFF;
}

.footer-menu .codepen i {
	font-size: 18px;
	margin-right: -2px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu a:hover:after {
	width: 90%;
}

.footer-copyright {
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	color: #FFFFFF;
	height: 56px;
	line-height: 56px;
	text-align: center;
	text-shadow: 1px 1px 0 #000;
}

.footer-copyright span {
	font-size: 20px;
	transform: rotate(180deg);
	display: inline-block;
	vertical-align: -2px;
	padding: 0 2px;
}

.text-bottom {
	width: auto;
	min-height: 60px;
	margin-top: 96px;
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 16px;
	font-weight: 600;
	font-style: italic;
	color: #253A44;
	text-shadow: 1px 1px 0 #FFF, 2px 2px 0 #CCC;
	line-height: 36px;
	text-align: center;
	padding: 0px 90px;
}

.text-bottom span {
	font-family: 'Bangers', Verdana;
	font-size: 26px;
	font-weight: normal;
	font-style: normal;
	padding: 0 4px;
	vertical-align: -4px;
}

.text-bottom .designer {
	color: var(--green);
}

.text-bottom .developer {
	color: var(--blue);
}

.text-bottom .quality {
	color: var(--red);
}

#transition-one {
	background-color: #FFF;
}

#transition-two {
	background-color: #FFF;
}

#transition-three {
	background-color: #FFF;
}

#transition-four {
	background-color: #FFF;
}

#transition-five {
	background-color: #FFF;
}

.line-page {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 16px 1fr;
	grid-column-gap: 18px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-top: 14px;
}

.line-page>div:nth-child(1) {
	width: auto;
	height: 0;
	border: none;
	border-top: 2px dotted #666;
	margin: 20px 0 0 30px;
}

.line-page>div:nth-child(2) {
	font-size: 16px;
	color: #FF5C5D;
	height: 30px;
	line-height: 38px;
}

.line-page>div:nth-child(3) {
	width: auto;
	height: 0;
	border: none;
	border-top: 2px dotted #666;
	margin: 20px 30px 0 0;
}

.contact-page {
	width: 100%;
	min-height: 580px;
	display: grid;
	grid-template-columns: 270px 1fr;
	grid-column-gap: 120px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page>div {
	padding-top: 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* Coluna do formulário: folga à direita só no desktop (antes era um
   style inline na view, que o CSS do celular não conseguia zerar e deixava
   o formulário deslocado para a esquerda). */
.contact-page .contact-form {
	padding-right: 32px;
}

.contact-page .div-two-input {
	width: 100%;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-column-gap: 24px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page .div-input {
	width: 100%;
	padding: 15px 5px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page fieldset {
	width: 100%;
	border: 1px solid #CCCCCC;
	border-radius: 6px;
	padding: 3px 6px 12px 6px;
	background-color: transparent;
	background-color: rgba(255, 255, 255, 0.1);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page legend {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	color: #ff5c5d;
	text-decoration: none;
	text-shadow: 1px 1px 0 #FFFFFF;
	margin-left: 6px;
	padding: 0 6px;
	letter-spacing: 1px;
}

.contact-page .div-input input {
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 15px;
	font-weight: 600;
	color: #585D6A;
	width: 100%;
	border: none;
	outline: none;
	padding: 4px 5px 2px 5px;
	display: block;
	background-color: transparent;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-shadow: 1px 1px 0 #FFFFFF;
}

.color_white {
	color: #FFFFFF !important;
}

.contact-page .div-input textarea {
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 15px;
	font-weight: 600;
	color: #585D6A;
	width: 100%;
	height: 100px;
	background-color: transparent;
	border: none;
	padding: 4px 5px 2px 5px;
	outline: none;
	resize: none;
	display: block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-shadow: 1px 1px 0 #FFFFFF;
}

.contact-page button {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 1px;
	color: #FFFFFF;
	border: none;
	padding: 6px 24px;
	margin-top: 8px;
	margin-right: 10px;
	border-radius: 32px;
	background-color: #FF5C5D;
	text-shadow: 2px 2px 0px #FF2829;
	box-shadow: inset 2px 2px 1px #FF2829;
	transition: all 0.35s ease 0s;
}

.contact-page button:hover {
	cursor: pointer;
	text-shadow: 3px 3px 1px #FF2829;
	box-shadow: inset 4px 4px 2px #FF2829;
}

.contact-page button[disabled="disabled"] {
	cursor: default !important;
	color: #CCCCCC !important;
	text-shadow: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.contact-page .div-button-send {
	padding: 5px 0 5px 5px;
	margin-left: 55px;
	margin-top: 10px;
	margin-bottom: 25px;
	text-align: right;
}

.contact-page .item-contact-page {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 0 60px;
	grid-column-gap: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0 0 50px 0;
}

.icon-required {
	font-size: 18px;
	color: #ff5c5d;
	vertical-align: 4px;
	margin-left: 3px;
	text-shadow: 1px 1px 0 #FFF;
	display: none;
}

/* Validação do formulário de contato (classes do required() do tools.js +
   home.js): borda vermelha, tremor e o aviso escrito na própria legend. */
.contact-page fieldset {
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-page .fieldset-error {
	border-color: #ff5c5d;
	box-shadow: 0 0 0 3px rgba(255, 92, 93, 0.12);
}

.contact-page fieldset.is-shaking {
	animation: contact-shake 0.4s ease;
}

@keyframes contact-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

/* O required() anima um ícone com o efeito "drop" do jQuery UI, que insere
   um .ui-effects-placeholder (display:block) dentro da legend e quebra a
   linha. O aviso aqui é só o texto do ::after, então nada mais aparece nela. */
.contact-page legend {
	white-space: nowrap;
}

.contact-page legend > * {
	display: none !important;
}

.contact-page .legend-error::after {
	content: ' obrigatório';
}

.contact-page .legend-error.legend-invalid::after {
	content: ' inválido';
}

.contact-page:lang(en) .legend-error::after {
	content: ' required';
}

.contact-page:lang(en) .legend-error.legend-invalid::after {
	content: ' invalid';
}

@media (prefers-reduced-motion: reduce) {
	.contact-page fieldset.is-shaking {
		animation: none;
	}
}

.contact-page .item-contact-page>div:nth-child(1) {
	text-align: right;
	padding-right: 22px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page .item-contact-page>div:nth-child(2) {
	margin: 2px 0 2px 0;
	border-right: 2px dotted #666;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page .item-contact-page>div:nth-child(3) {
	font-size: 28px;
	color: #9E6C42;
	line-height: 60px;
	text-align: center;
	text-shadow: 1px 1px 0 #FFF;
}

.title-icon {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	color: #6d7587;
	text-decoration: none;
	text-shadow: 1px 1px 0 #FFFFFF;
	text-align: right;
	letter-spacing: 1px;
	margin-top: 26px;
}

.item-contact {
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 16px;
	color: #5a5d64;
	font-style: italic;
	font-weight: 600;
	text-shadow: 1px 1px 0 #FFF;
	text-align: right;
	letter-spacing: -1px;
	margin-bottom: 38px;
	margin-top: 4px;
	padding-right: 4px;
}

.phone-small {
	font-size: 13px;
	margin-right: 4px;
	vertical-align: 1px;
}

.item-contact.text {
	font-size: 16px;
}

/* Telefone e e-mail são links (tel:/mailto:): no celular, tocar já abre a
   ligação ou o app de e-mail. Mesma aparência do texto, com destaque no hover. */
a.item-contact {
	display: block;
	transition: color 0.3s ease;
}

a.item-contact:hover,
a.item-contact:focus-visible {
	color: #db4551;
}

/* Retorno do envio do formulário de contato (substitui os alertas) */
.send-feedback {
	display: none;
	clear: both; /* o captcha (.QapTcha) é float:left */
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 14px;
	line-height: 1.6;
	color: #5a5d64;
	text-shadow: 1px 1px 0 #FFF;
	margin: 16px 5px 0 5px;
	padding: 10px 14px;
	border-left: 4px solid currentColor;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.35);
}

.send-feedback.success,
.send-feedback.error {
	display: block;
	animation: feedback-in 0.4s ease;
}

.send-feedback.success {
	color: var(--green);
}

.send-feedback.error {
	color: var(--red);
}

.send-feedback a {
	color: inherit;
	font-weight: bold;
}

@keyframes feedback-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.send-feedback.success,
	.send-feedback.error {
		animation: none;
	}
}

/* Confirmação de envio: o formulário some e no lugar aparece um envelope de
   correio aéreo (bordas listradas, selo, carimbo e um aviãozinho de papel).
   Montado por show_success() no home.js. */
.contact-form.is-sent > *:not(.contact-success) {
	display: none !important;
}

.contact-success {
	position: relative;
	margin: 20px 5px 30px 5px;
	padding: 34px 34px 30px 34px;
	background-color: transparent;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(31, 35, 48, 0.12);
	font-family: 'Montserrat', Verdana, Arial;
	color: #4e5566;
	text-shadow: none;
	overflow: hidden;
	animation: success-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Bordas de correio aéreo (topo e base) */
.contact-success::before,
.contact-success::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 8px;
	background: repeating-linear-gradient(-45deg, #e85a4c 0 14px, #fffdf8 14px 20px, #42589e 20px 34px, #fffdf8 34px 40px);
}

.contact-success::before {
	top: 0;
}

.contact-success::after {
	bottom: 0;
}

/* Selo com borda picotada */
.success-stamp {
	position: absolute;
	top: 24px;
	right: 28px;
	width: 62px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 30px;
	letter-spacing: 1px;
	color: #FFFFFF;
	background-color: #ff5c5d;
	border: 4px dotted #fffdf8;
	outline: 1px solid #e3ddd0;
	transform: rotate(6deg);
	animation: stamp-press 0.5s 0.35s ease-out both;
}

/* Carimbo postal sobre o selo */
.success-postmark {
	position: absolute;
	top: 60px;
  	right: 92px;
	width: 92px;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 12px;
	line-height: 1.25;
	letter-spacing: 1px;
	color: #42589e;
	border: 2px solid #42589e;
	border-radius: 50%;
	transform: rotate(-14deg);
	animation: stamp-press 0.5s 0.6s ease-out both;
}

/* Aviãozinho de papel com rastro tracejado */
.success-plane {
	display: block;
	width: 150px;
	height: 70px;
	margin: -6px 0 6px -10px;
	overflow: visible;
}

.success-plane .trail {
	fill: none;
	stroke: #9aa0aa;
	stroke-width: 2;
	stroke-dasharray: 6 6;
	stroke-dashoffset: 120;
	animation: plane-trail 1.2s 0.2s ease-out forwards;
}

.success-plane .plane {
	fill: #FFFFFF;
	stroke: #4e5566;
	stroke-width: 2;
	stroke-linejoin: round;
	animation: plane-fly 1.2s 0.2s ease-out both;
}

.success-title {
	font-family: 'Bangers', Verdana, Arial;
	font-weight: normal;
	line-height: 1.1;
	margin: 0 90px 16px 0;
}

.success-title .black {
	font-size: 34px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
}

.success-title .red {
	font-size: 38px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.contact-success p {
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 12px 0;
}

.contact-success strong {
	color: #2b7A68;
}

.success-sign {
	margin-top: 20px !important;
}

.success-sign span {
	display: block;
	font-family: 'Dancing Script', cursive;
	font-size: 30px;
	line-height: 1.2;
	color: #1F1F1F;
	margin-top: 2px;
}

/* .contact-page .success-again: vence o .contact-page button (pílula vermelha do Enviar) */
.contact-page .success-again {
	margin-top: 18px;
	margin-right: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	letter-spacing: 0;
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 14px;
	font-weight: bold;
	color: #42589e;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.contact-page .success-again:hover {
	color: #db4551;
	box-shadow: none;
	text-shadow: none;
}

@keyframes success-in {
	from { opacity: 0; transform: translateY(20px) scale(0.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stamp-press {
	0% { opacity: 0; scale: 1.6; }
	70% { opacity: 1; scale: 0.95; }
	100% { opacity: 1; scale: 1; }
}

@keyframes plane-fly {
	from { opacity: 0; transform: translate(-60px, 30px); }
	to { opacity: 1; transform: translate(0, 0); }
}

@keyframes plane-trail {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.contact-success,
	.success-stamp,
	.success-postmark,
	.success-plane .plane,
	.success-plane .trail {
		animation: none;
		stroke-dashoffset: 0;
	}
}

.contact-page .title {
	font-family: 'Roboto Mono', Arial;
	font-size: 16px;
	font-weight: bold;
	color: #1F1F1F;
	text-transform: uppercase;
	height: 36px;
	line-height: 40px;
}

.contact-page .item {
	font-family: 'Roboto Mono', Arial;
	font-size: 15px;
	color: #1F1F1F;
	height: 24px;
	line-height: 16px;
}

.contact-page .captch-text {
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 14px;
	color: #6d7587;
	font-style: italic;
	font-weight: 600;
	height: 24px;
	line-height: 16px;
	padding: 0 30px;
	text-align: center;
	text-shadow: 1px 1px 0 #FFFFFF;
}

/* *** BACKGROUND *** */

#page-home,
#page-about,
#page-skills,
#page-portfolio,
#page-curriculum,
#page-contact {
	background-color: #E8E1D1;
	background-image: url('../image/c.png');
	background-repeat: repeat;
}

#page-curriculum {
	background-color: #232323 !important;
}

.div-curriculum {
	margin-top: -70px;
	margin-bottom: 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* *** LOGOTIPO *** */

.logo {
	margin: 0 auto;
	width: 980px;
	height: 180px;
	color: #FFFFFF;
	padding-top: 40px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: all 0.15s ease 0s;
}

.logo .up {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 2;
	font-family: Bangers;
	font-size: 86px;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.logo .first-name {
	text-align: right;
	position: relative;
	transform: rotate(-1deg);
}

.logo .last-name {
	text-align: left;
	position: relative;
	transform: rotate(-1deg);
}

.logo .up span {
	font-size: 96px;
}

.logo .down {
	text-align: center;
	font-family: 'Dancing Script';
	font-size: 50px;
	text-decoration: none;
	margin-top: -19px;
}

#header .logo .first-name {
	text-shadow: 3px 2px 0 #B4B4B4;
}

#header .logo .last-name {
	color: #FFFFFF;
	text-shadow: 3px 2px 0 #B4B4B4;
}

#header .logo .down {
	color: #1F1F1F;
	text-shadow: 2px 2px 0 #C3C3C3;
}

.load .logo .first-name,
.load .logo .last-name,
.load .logo .down {
	text-shadow: 3px 2px 0 #3c3d3f;
}

/* *** HEADER PAGE *** */

.home .logo .first-name {
	color: var(--green);
}

.about .logo .first-name {
	color: var(--red);
}

.skills .logo .first-name {
	color: var(--blue);
}

.portfolio .logo .first-name {
	color: var(--purple);
}

.contact .logo .first-name {
	color: var(--yellow);
}

.curriculum .logo .first-name {
	color: var(--white);
	text-shadow: none !important;
}

.curriculum .logo .last-name {
	color: var(--white);
	text-shadow: none !important;
}

.curriculum .logo .down {
	color: #FFFFFF !important;
	text-shadow: none !important;
}

#page-curriculum .open-menu i {
  color: #FFF !important;
  text-shadow: none !important;
}

/* *** PAGE LOADING *** */

.load {
	position: absolute;
	background-color: #63666A;
	background-image: url('../image/c.png');
	background-repeat: repeat;
	left: 0;
	top: 0;
	width: 100vw;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.load .logo {
	padding-top: 0;
	opacity: 0.8;
	height: 250px !important;
}

.load-down {
	height: 0;
	animation: load-down .5s forwards 0s ease-in-out;
}

@keyframes load-down {
	0% {
		height: 0;
	}

	100% {
		height: 100vh;
	}
}

.load-up {
	height: 100vh;
	animation: load-up .5s forwards 1s ease-in-out;
}

@keyframes load-up {
	0% {
		height: 100vh;
	}

	100% {
		height: 0;
	}
}

.text-load {
	width: auto;
	height: 120px;
	line-height: 120px;
	text-align: center;
	font-family: 'Dancing Script';
	font-size: 28px;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #3c3d3f;
	text-decoration: none;
	position: relative;
	transform: rotate(-4deg);
}

.text-load i {
	font-size: 24px;
	margin-right: -8px;
	vertical-align: 12px;
}

.text-load .point-one {
	font-size: 76px;
	animation: text-point 1s infinite 0s ease-in-out;
}

.text-load .point-two {
	font-size: 76px;
	animation: text-point 2s infinite 0s ease-in-out;
	margin-left: -12px;
}

.text-load .point-three {
	font-size: 76px;
	animation: text-point 3s infinite 0s ease-in-out;
	margin-left: -12px;
}

@keyframes text-point {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.layer-front {
	margin: 40px auto 60px auto;
	width: 600px;
	height: 300px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 90px solid #b1c570;
	border: 90px solid transparent;
	border-bottom: none;
	border-radius: 300px 300px 0 0;
}

.layer-back {
	width: 400px;
	height: 200px;
	margin: 10px auto 0 auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 80px solid #49a6c5;
	border: 80px solid transparent;
	border-bottom: none;
	border-radius: 200px 200px 0 0;
}

.layer-database {
	width: 220px;
	height: 110px;
	margin: 10px auto 0 auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 70px solid #e85a4c;
	border: 70px solid transparent;
	border-bottom: none;
	border-radius: 110px 110px 0 0;
}

/* Ícone em SVG inline (o escudo do JavaScript, que a fonte de ícones não
   tem): mesmo tamanho de um ícone da fonte (1em) e a cor vem do color do
   pai (currentColor). O drop-shadow faz o papel do text-shadow dos outros. */
.icon-svg {
	display: inline-block;
	width: 0.75em;
	height: 0.84em;
	vertical-align: -0.05em;
	filter: drop-shadow(1px 1px 0 #FFF);
}

.layer-skills {
	margin: 40px auto 60px -2%;
	width: 1000px;
	height: 360px;
	min-height: 360px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
}

.layer-skills .html {
	position: absolute;
	left: 18%;
	top: 53%;
	font-size: 62px;
	color: #e45126;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-html 6s infinite alternate ease-in-out;
	--rot: 7deg;
	transform: rotate(var(--rot));
}

.layer-skills .css {
	position: absolute;
	left: 78%;
	top: 79%;
	font-size: 62px;
	color: #0c73b8;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-css 7s infinite alternate ease-in-out;
	--rot: -7deg;
	transform: rotate(var(--rot));
}

.layer-skills .js {
	position: absolute;
	left: 47%;
	top: 85%;
	font-size: 62px;
	color: #E5C02C;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-js 8s infinite alternate ease-in-out;
	--rot: -13deg;
	transform: rotate(var(--rot));
}

.layer-skills .sass {
	position: absolute;
	left: 88%;
	top: 53%;
	font-size: 54px;
	color: #c76494;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-sass 6.5s infinite alternate ease-in-out;
	--rot: -5deg;
	transform: rotate(var(--rot));
}

.layer-skills .less {
	position: absolute;
	left: 65%;
	top: 16%;
	font-size: 56px;
	color: #1F1F1F;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-less 7.5s infinite alternate ease-in-out;
	--rot: 8deg;
	transform: rotate(var(--rot));
}

.layer-skills .angular {
	position: absolute;
	left: 9%;
	top: 36%;
	font-size: 60px;
	color: #bd002e;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-angular 8.5s infinite alternate ease-in-out;
	--rot: -2deg;
	transform: rotate(var(--rot));
}

.layer-skills .react {
	position: absolute;
	left: 78%;
	top: 9%;
	font-size: 44px;
	color: #5ed3f3;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-react 9s infinite alternate ease-in-out;
	--rot: 4deg;
	transform: rotate(var(--rot));
}

.layer-skills .python {
	position: absolute;
	left: 49%;
	top: 36%;
	font-size: 62px;
	color: #336e9d;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-python 7.2s infinite alternate ease-in-out;
	--rot: 3deg;
	transform: rotate(var(--rot));
}

.layer-skills .php {
	position: absolute;
	left: 30%;
	top: 3%;
	font-size: 80px;
	color: #4d588e;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-php 6.8s infinite alternate ease-in-out;
	--rot: -4deg;
	transform: rotate(var(--rot));
}

.layer-skills .node {
	position: absolute;
	left: 68%;
	top: 53%;
	font-size: 52px;
	color: #13672a;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-node 8.2s infinite alternate ease-in-out;
	--rot: -6deg;
	transform: rotate(var(--rot));
}

.layer-skills .django {
	position: absolute;
	left: 53%;
	top: 66%;
	font-size: 70px;
	color: #0c2d1f;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-django 7.8s infinite alternate ease-in-out;
	--rot: 2deg;
	transform: rotate(var(--rot));
}

.layer-skills .laravel {
	position: absolute;
	left: 30%;
	top: 77%;
	font-size: 60px;
	color: #f72718;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-laravel 8.8s infinite alternate ease-in-out;
	--rot: -8deg;
	transform: rotate(var(--rot));
}

.layer-skills .codeigniter {
	position: absolute;
	left: 54%;
	top: 1%;
	font-size: 44px;
	color: #e84023;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-codeigniter 6.2s infinite alternate ease-in-out;
	--rot: -8deg;
	transform: rotate(var(--rot));
}

.layer-skills .nginx {
	position: absolute;
	left: 15%;
	top: 12%;
	font-size: 80px;
	color: #1F1F1F;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-nginx 7.3s infinite alternate ease-in-out;
	--rot: -3deg;
	transform: rotate(var(--rot));
}

.layer-skills .github {
	position: absolute;
	left: 14%;
	top: 86%;
	font-size: 64px;
	color: #191c20;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-github 7.6s infinite alternate ease-in-out;
	--rot: 13deg;
	transform: rotate(var(--rot));
}

.layer-skills .unity {
	position: absolute;
	left: 35%;
	top: 56%;
	font-size: 60px;
	color: #162733;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-unity 8.4s infinite alternate ease-in-out;
	--rot: -5deg;
	transform: rotate(var(--rot));
}

.layer-skills .wordpress {
	position: absolute;
	left: 92%;
	top: 26%;
	font-size: 58px;
	color: #21759b;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-wordpress 7.9s infinite alternate ease-in-out;
	--rot: -12deg;
	transform: rotate(var(--rot));
}

.layer-skills .photoshop {
	position: absolute;
	left: 29%;
	top: 34%;
	font-size: 69px;
	color: #3aa29c;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-photoshop 8.7s infinite alternate ease-in-out;
	--rot: 10deg;
	transform: rotate(var(--rot));
}

.layer-skills .npm {
	position: absolute;
	left: 75%;
	top: 37%;
	font-size: 58px;
	color: #c53636;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-npm 8.7s infinite alternate ease-in-out;
	--rot: 10deg;
	transform: rotate(var(--rot));
}

@keyframes move-html {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(18px, 18px); }
}
@keyframes move-css {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(-12px, 16px); }
}
@keyframes move-js {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(-18px, 18px); }
}
@keyframes move-sass {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(18px, -18px); }
}
@keyframes move-less {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(-20px, 20px); }
}
@keyframes move-angular {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(20px, -20px); }
}
@keyframes move-react {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(0px, 25px); }
}
@keyframes move-python {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(-25px, 0px); }
}
@keyframes move-php {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(0px, -25px); }
}
@keyframes move-node {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(25px, 25px); }
}
@keyframes move-django {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(15px, 0px); }
}
@keyframes move-laravel {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(0px, -15px); }
}
@keyframes move-codeigniter {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(-15px, 15px); }
}
@keyframes move-nginx {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(15px, -15px); }
}
@keyframes move-github {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(18px, 0px); }
}
@keyframes move-unity {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(0px, -18px); }
}
@keyframes move-wordpress {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(-18px, 18px); }
}
@keyframes move-photoshop {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(18px, -18px); }
}
@keyframes move-npm {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(calc(var(--rot) + var(--sway, 4deg))) translate(18px, -18px); }
}

/* Nuvem de ícones: cada ícone começa num ponto diferente do ciclo e alterna
   o sentido do balanço, para não andarem sincronizados (efeito "bolhas"). */
.layer-skills a:nth-child(3n+1) {
	animation-delay: -1.5s;
}

.layer-skills a:nth-child(3n+2) {
	animation-delay: -3s;
}

.layer-skills a:nth-child(even) {
	--sway: -4deg;
}

/* Legenda por categoria: passar o mouse (ou tocar) destaca os ícones da
   categoria e esmaece os demais. Clicar/tocar fixa o destaque; de novo, solta.
   Controlado por init_skills_legend() no default.js. */
.skills-legend {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px auto 0 auto;
}

.skills-legend button {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 22px;
	letter-spacing: 1px;
	color: #FFFFFF;
	background-color: var(--cat);
	border: none;
	border-radius: 32px;
	padding: 6px 20px 4px 20px;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
	box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

.skills-legend .front { --cat: var(--green); }
.skills-legend .back { --cat: var(--blue); }
.skills-legend .tools { --cat: var(--red); }

.skills-legend button:hover,
.skills-legend button.active {
	transform: translateY(-2px) rotate(-2deg);
	box-shadow: inset 4px 4px 2px rgba(0, 0, 0, 0.25);
}

.skills-legend[data-active] button:not(.active) {
	opacity: 0.45;
}

.layer-skills a {
	transition: opacity 0.35s ease, filter 0.35s ease, scale 0.35s ease;
}

.layer-skills[data-active] a {
	opacity: 0.15;
	filter: grayscale(1);
}

.layer-skills[data-active="front"] a[data-category="front"],
.layer-skills[data-active="back"] a[data-category="back"],
.layer-skills[data-active="tools"] a[data-category="tools"] {
	opacity: 1;
	filter: none;
	scale: 1.15;
}

@media (prefers-reduced-motion: reduce) {
	.layer-skills a {
		animation: none;
	}
}

.other-skills {
	width: auto;
	min-height: 400px;
	margin-bottom: 120px;
}

.title-other-skills {
	font-family: 'Bangers';
	color: #6d7587;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	padding-right: 32px;
}

.title-other-skills span.red {
	font-size: 40px;
	margin-left: 2px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.title-other-skills span.black {
	font-size: 38px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
}

.chart {
	margin: 0 35px 0 30px;
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-column-gap: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.line-right {
	font-family: 'Bangers';
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
	text-transform: uppercase;
	height: 100px;
	line-height: 100px;
	padding-right: 26px;
	text-align: right;
	border-right: 1px solid #AAA;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	letter-spacing: 1px;
}

.line-dotted {
	border-top: 1px dotted #666;
}

.column {
	position: relative;
	z-index: 2;
	width: 875px;
	height: 400px;
	margin-top: -400px;
	margin-left: 130px;
	border-bottom: 1px solid #AAA;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: flex-end;
}

/* Barras do gráfico "Outras Habilidades".
   A cor fica num ::before que cresce de baixo para cima (scaleY(--grow)) e a
   porcentagem acompanha o topo da barra. O --grow (0 → 1) e o número são
   animados juntos por init_skills_chart() no default.js; sem JS, --grow
   fica em 1 e o gráfico aparece pronto. */
.column>div {
	--grow: 1;
	width: 156px;
	height: var(--h);
	text-align: center;
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.column>div::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--bar);
	box-shadow: inset 1px 1px 32px 0px rgba(0, 0, 0, 0.1);
	transform-origin: bottom;
	transform: scaleY(var(--grow));
}

.column .aqua { --h: 380px; --bar: #01b8aa; }
.column .green { --h: 360px; --bar: #b1c570; }
.column .yellow { --h: 380px; --bar: #f9d156; }
.column .blue { --h: 240px; --bar: #49a6c5; }
.column .red { --h: 80px; --bar: #e85a4c; }

/* A porcentagem "anda" junto com o topo da barra (66px abaixo dele) */
.column .percent {
	position: absolute;
	left: 0;
	right: 0;
	bottom: max(4px, calc(var(--h) * var(--grow) - 66px));
	white-space: nowrap;
	font-family: 'Bangers', Verdana;
	font-size: 52px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.column .percent span {
	font-size: 26px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* Nome da habilidade abaixo do eixo */
.column .text {
	position: absolute;
	top: 100%;
	left: -6px;
	right: -6px;
	margin-top: 26px;
	line-height: 1.1;
	font-family: 'Bangers', Verdana;
	font-size: 26px;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -1px -1px 0 #585b62;
}

/* MENU MOBILE */

.open-menu {
	position: absolute;
	top: 2vh;
	right: 2vw;
	width: 8vh;
	height: 8vh;
	line-height: 8vh;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
	z-index: 1;
	display: none;
}

#menu-mobile .close-menu {
	position: absolute;
	top: 2vh;
	right: 2vw;
	width: 8vh;
	height: 8vh;
	line-height: 8vh;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
	z-index: 10;
}

.open-menu i {
	font-size: 4rem;
	color: #2D2D2D;
	text-shadow: 1px 1px 0 #C3C3C3;
	transition: all 0.35s ease 0s;
}

.open-menu:hover i {
	cursor: pointer;
	color: #2b7A68;
}

.close-menu i {
	font-size: 4rem;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 #5f5f5f;
	transition: all 0.35s ease 0s;
}

.close-menu:hover i {
	cursor: pointer;
	color: #FF5C5D;
}

#menu-mobile {
	position: fixed;
	background-color: #63666A;
	background-image: url('../image/c.png');
	background-repeat: repeat;
	left: 100%;
	top: 0;
	width: 100vw;
	min-height: 100vh;
	height: 100vh;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow-y: auto;
	z-index: 100;
	padding: 2vw;
	transition: left 0.5s ease;
}

#menu-mobile.open-menu-mobile {
	animation: open-menu-mobile .5s forwards 0s ease-in-out;
}

@keyframes open-menu-mobile {
	0% { left: 100%; }
	100% { left: 0; }
}

#menu-mobile .link {
	height: 14vh;
  	line-height: 14vh;
	text-align: center;
}

/* Menu mobile só com texto: os ícones ao lado (traço fino, posição variando
   com a largura de cada palavra) ficavam desalinhados e destoavam do Bangers. */
#menu-mobile .link i {
	display: none;
}

#menu-mobile a {
	position: relative;
	font-family: 'Bangers', Verdana;
	font-size: 10vmin;
	letter-spacing: 3px;
	transition: all 0.35s ease 0s;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 #5F5F5F;
}

/* Item ativo: "marca-texto" vermelho atrás da metade de baixo da palavra */
#menu-mobile a.active {
	display: inline-block;
	line-height: 1;
	padding: 4px 10px 0 10px;
	background-image: linear-gradient(transparent 42%, rgba(255, 92, 93, 0.9) 42%, rgba(255, 92, 93, 0.9) 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

#menu-mobile a.active:hover {
	cursor: default;
}

#menu-mobile a.deactive:hover {
	color: #BBBBBB;
}




.div-title-article {
	font-family: 'Bangers';
	text-decoration: none;
	width: 1060px;
	height: 60px;
	margin-top: 50px;
	margin-bottom: 34px;
	text-align: center;
}

.div-title-article span.red {
	font-size: 50px;
	margin-left: 3px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.div-title-article span.black {
	font-size: 44px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
}

.div-button-article {
	width: 1060px;
	height: 80px;
	text-align: right;
	padding: 0 34px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.div-button-article button {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 22px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 1px;
	color: #FFFFFF;
	border: none;
	padding: 6px 24px;
	border-radius: 32px;
	background-color: #FF5C5D;
	text-shadow: 2px 2px 0px #FF2829;
	box-shadow: inset 2px 2px 1px #FF2829;
	transition: all 0.35s ease 0s;
}

.div-button-article button:hover {
	cursor: pointer;
	text-shadow: 3px 3px 1px #FF2829;
	box-shadow: inset 4px 4px 2px #FF2829;
}

/* Últimos Artigos (home): os 2 mais recentes, lado a lado */
.div-articles {
	width: auto;
	margin: 0 40px 36px 40px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 64px;
	grid-row-gap: 34px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-bottom: 36px;
}

.div-articles .title {
	display: block;
	text-decoration: none;
	font-family: 'Bangers', Arial;
	font-size: 25px;
	line-height: 28px;
	text-align: left;
	color: #6d7587;
	margin: 0 0 8px 0;
	text-shadow: 1px 1px 0 #FFF;
	transition: all 0.25s ease 0s;
}

.div-articles .title:hover {
	cursor: pointer;
	color: #db4551;
}

.div-articles .description {
	font-family: 'Montserrat';
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: #5a5d64;
	text-shadow: 1px 1px 0 #FFF;
	margin: 12px 0 0 0;
	text-align: left;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.div-about {
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-column-gap: 26px;
	padding: 0 26px;
	margin-bottom: 40px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.div-about img {
	border: 0;
	width: 300px;
}

/* A linha do tempo deixa o texto mais alto que a caricatura: ela ocupa a
   largura toda da coluna e fica centralizada na altura do texto, em vez de
   presa no topo com um vão embaixo. */
.div-about .div-about-image {
	align-self: center;
}

/* Caricatura com aceno: o antebraço é uma camada à parte, na frente do
   corpo (no desenho ele passa na frente da manga), que gira pelo cotovelo.
   Na camada do corpo, o espaço que o braço cobria já vem pintado de manga.
   O transform-origin é o cotovelo na imagem original de 320x700: x=245, y=330. */
.div-about .caricature {
	position: relative;
	width: 300px;
	cursor: pointer;
}

.div-about .caricature img {
	display: block;
	margin-top: 0;
}

.div-about .caricature .arm {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transform-origin: 76.5% 47.1%;
}

.div-about .caricature.waving .arm {
	animation: caricature-wave 1.6s ease-in-out;
}

@keyframes caricature-wave {
	0%   { transform: rotate(0); }
	14%  { transform: rotate(-16deg); }
	28%  { transform: rotate(5deg); }
	42%  { transform: rotate(-14deg); }
	56%  { transform: rotate(4deg); }
	72%  { transform: rotate(-8deg); }
	86%  { transform: rotate(1deg); }
	100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
	.div-about .caricature.waving .arm {
		animation: none;
	}
}

.div-about .title {
	font-family: 'Bangers', Verdana, Arial;
	line-height: 50px;
	text-align: center;
	color: #6d7587;
	text-shadow: 1px 1px 0 #FFF;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-bottom: 24px;
}

.div-about .title span.red {
	font-size: 48px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.div-about .title span.black {
	font-size: 42px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
	margin-right: 4px;
}

/* Títulos de seção entalhados no papel (o logo, acima, é o que fica em
   relevo, com sombra). A cor é recortada no formato das letras
   (background-clip: text) e a sombra clara, deslocada para baixo e para a
   direita, cobre a letra menos uma borda no topo/esquerda: essa borda escura
   é a parede do entalhe na sombra. O drop-shadow claro de 1px embaixo é a
   luz batendo na borda de baixo do corte. Substitui o efeito antigo (texto
   branco translúcido com sombra colorida), que parecia só um contorno. */
.title-portfolio span.red,
.title-portfolio span.black,
.title-contact span.red,
.title-contact span.black,
.title-other-skills span.red,
.title-other-skills span.black,
.div-title-article span.red,
.div-title-article span.black,
.div-about .title span.red,
.div-about .title span.black {
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	text-shadow: 2px 2px 1px rgba(255, 255, 255, 0.4);
	/* O background só pinta dentro da caixa do span e a Bangers é inclinada:
	   a ponta de cima da última letra ("?" de "Vamos bater um papo?") passa
	   do fim da caixa e saía cortada. O padding estica a caixa; o clone
	   repete o padding em cada linha quando o título quebra no celular. */
	padding-right: 0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.title-portfolio span.black,
.title-contact span.black,
.title-other-skills span.black,
.div-title-article span.black,
.div-about .title span.black {
	background-color: #3d4047;
}

.title-portfolio span.red,
.title-contact span.red,
.title-other-skills span.red,
.div-title-article span.red,
.div-about .title span.red {
	background-color: #c4232a;
	text-shadow: 2px 2px 1px rgba(255, 255, 255, 0.25);
}

.title-portfolio,
.title-contact,
.title-other-skills,
.div-title-article,
.div-about .title {
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7));
}

/* Texto da página Sobre: cinza escuro sólido e alinhado à esquerda (antes era
   branco translúcido com sombra, justificado, de leitura cansativa e baixo
   contraste com o fundo bege). */
.div-about .description {
	font-family: 'Montserrat';
	font-size: 14px;
	font-weight: 500;
	font-style: normal;
	line-height: 22px;
	text-align: left;
	color: #4a505b;
}

.div-about .description .intro {
	font-size: 15px;
	line-height: 22px;
	font-style: italic;
	font-weight: 500;
	margin-bottom: 26px;
}

/* Linha do tempo: marco em Bangers à esquerda, ponto colorido sobre uma
   linha pontilhada (o mesmo traço dos conectores do portfólio) e o texto. */
.about-timeline {
	list-style: none;
	margin-bottom: 10px;
}

.about-timeline li {
	position: relative;
	display: grid;
	grid-template-columns: 112px 1fr;
	grid-column-gap: 34px;
	padding-bottom: 22px;
	--dot: var(--purple);
}

.about-timeline li:nth-child(2) { --dot: var(--red); }
.about-timeline li:nth-child(3) { --dot: var(--blue); }
.about-timeline li:nth-child(4) { --dot: var(--green); }

.about-timeline li::before {
	content: '';
	position: absolute;
	top: 8px;
	bottom: -8px;
	left: 128px;
	border-left: 2px dotted #AAA;
}

.about-timeline li:last-child::before {
	display: none;
}

.about-timeline li::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 122px;
	width: 10px;
	height: 10px;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	background-color: var(--dot);
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.about-timeline .when {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 1px;
	text-align: right;
	color: var(--dot);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.div-about .about-timeline p {
	margin: 0;
	text-indent: 0;
}

.div-portfolio {
	width: auto;
	padding: 0 18px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* Conector entre os itens do portfólio: linha pontilhada que desce do item
   de cima, cruza e desce até o de baixo, sempre pelos mesmos dois pontos
   (218px à esquerda e 786px, o espelho, à direita). Assim a linha entra e
   sai de cada card no mesmo x e forma uma "cobra" contínua que acompanha o
   zigue-zague. O 1º span faz a descida + metade da travessia e o 2º a outra
   metade + a descida final; cada um arredonda a sua curva. */
.div-portfolio .connector {
	position: relative;
	height: 72px;
}

.div-portfolio .connector span {
	position: absolute;
	top: 0;
	height: 37px;
	border: 0 dotted #AAA;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.div-portfolio .connector span:last-child {
	top: 35px;
}

/* Esquerda (218px) -> direita (786px) */
.div-portfolio .connector.ltr span:first-child {
	left: 218px;
	width: 284px;
	border-left-width: 2px;
	border-bottom-width: 2px;
	border-bottom-left-radius: 16px;
}

.div-portfolio .connector.ltr span:last-child {
	left: 500px;
	width: 288px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-top-right-radius: 16px;
}

/* Direita (786px) -> esquerda (218px) */
.div-portfolio .connector.rtl span:first-child {
	left: 500px;
	width: 288px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-bottom-right-radius: 16px;
}

.div-portfolio .connector.rtl span:last-child {
	left: 218px;
	width: 284px;
	border-top-width: 2px;
	border-left-width: 2px;
	border-top-left-radius: 16px;
}

/* Título -> 1º item: o título em português começa em 218px, então é uma
   descida reta; o inglês é mais curto e começa em 332px. */
.div-portfolio .connector.first span:first-child {
	left: 218px;
	height: 72px;
	border-left-width: 2px;
}

.div-portfolio .connector.first span:last-child {
	display: none;
}

.div-portfolio .connector.first.en span:first-child {
	left: 273px;
	width: 61px;
	height: 37px;
	border-left-width: 0;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-bottom-right-radius: 16px;
}

.div-portfolio .connector.first.en span:last-child {
	display: block;
	left: 218px;
	width: 57px;
	border-top-width: 2px;
	border-left-width: 2px;
	border-top-left-radius: 16px;
}

/* Animação (data-aos="draw-line"): a linha é "desenhada" no sentido do
   percurso. O AOS só adiciona/remove .aos-animate e o delay vem de
   --aos-delay (ver set_aos_delay em default.js); o clip-path de cada span
   revela primeiro a descida e depois a travessia (ou o contrário). */
.div-portfolio .connector span {
	clip-path: inset(0 100% 100% 0);
}

.div-portfolio .connector.rtl span:first-child,
.div-portfolio .connector.first.en span:first-child {
	clip-path: inset(0 0 100% 100%);
}

.div-portfolio .connector.rtl span:last-child,
.div-portfolio .connector.first.en span:last-child {
	clip-path: inset(0 0 100% 100%);
}

.div-portfolio .connector.aos-animate span {
	animation: connector-down-across .45s ease-in forwards;
	animation-delay: var(--aos-delay, 0s);
}

.div-portfolio .connector.aos-animate span:last-child {
	animation-name: connector-across-down;
	animation-timing-function: ease-out;
	animation-delay: calc(var(--aos-delay, 0s) + .45s);
}

.div-portfolio .connector.rtl.aos-animate span:first-child,
.div-portfolio .connector.first.en.aos-animate span:first-child {
	animation-name: connector-down-across-rtl;
}

.div-portfolio .connector.rtl.aos-animate span:last-child,
.div-portfolio .connector.first.en.aos-animate span:last-child {
	animation-name: connector-across-down-rtl;
}

.div-portfolio .connector.first.aos-animate span:first-child {
	animation-name: connector-down;
}

.div-portfolio .connector.first.en.aos-animate span:first-child {
	animation-name: connector-down-across-rtl;
}

@keyframes connector-down {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@keyframes connector-down-across {
	0%   { clip-path: inset(0 calc(100% - 2px) 100% 0); }
	50%  { clip-path: inset(0 calc(100% - 2px) 0 0); }
	100% { clip-path: inset(0 0 0 0); }
}

@keyframes connector-across-down {
	0%   { clip-path: inset(0 100% calc(100% - 2px) 0); }
	50%  { clip-path: inset(0 0 calc(100% - 2px) 0); }
	100% { clip-path: inset(0 0 0 0); }
}

@keyframes connector-down-across-rtl {
	0%   { clip-path: inset(0 0 100% calc(100% - 2px)); }
	50%  { clip-path: inset(0 0 0 calc(100% - 2px)); }
	100% { clip-path: inset(0 0 0 0); }
}

@keyframes connector-across-down-rtl {
	0%   { clip-path: inset(0 0 calc(100% - 2px) 100%); }
	50%  { clip-path: inset(0 0 calc(100% - 2px) 0); }
	100% { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
	.div-portfolio .connector span,
	.div-portfolio .connector.aos-animate span {
		clip-path: none;
		animation: none;
	}
}

/* Card = print inteiro em cima + faixa do título (85px) embaixo. O ::before
   reserva a altura do print na proporção dele (1600x882) e o padding-bottom
   reserva a faixa. Ao trocar ou incluir um print, exporte nesse tamanho (o
   dobro do card, para telas retina).
   O margin-left dos cards ímpares (65px) e dos pares (139px, classe .even
   posta por views/portfolio_cards.php) deixa os dois pontos dos conectores
   (218px e 786px) dentro do card e faz o zigue-zague. */
.div-portfolio .item {
	position: relative;
	width: 800px;
	padding-bottom: 85px;
	margin-left: 65px;
	border: 5px solid #DDD5C1;
	border-radius: 18px;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-shadow: inset 0 2px 80px 0 rgba(0, 0, 0, 0.3);
	z-index: 1;
}

.div-portfolio .item.even,
.div-portfolio .portfolio-more.even {
	margin-left: 139px;
}

.div-portfolio .item::before {
	content: '';
	display: block;
	aspect-ratio: 1600 / 882;
}

.div-portfolio .item:last-of-type {
	margin-bottom: 80px;
}

.div-portfolio .item:hover {
	cursor: pointer;
}

.div-portfolio .item:focus-visible {
	outline: 3px solid #333333;
	outline-offset: 4px;
}

/* Painel colorido: fechado, é a faixa abaixo do print com número e título,
   para quem só rola a página saber o que é cada projeto. No hover, no toque
   (.touch-open, ver default.js) e no foco pelo teclado (:focus-within, os
   cards têm tabindex) ele sobe por cima do print só até a altura do texto:
   descrição curta deixa boa parte da imagem à vista. */
.div-portfolio .item > div:first-child {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	max-height: 85px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.18) 100%);
	transition: max-height .45s ease 0s;
	z-index: 3;
}

.div-portfolio .item > div:first-child > div:first-child {
	height: 85px;
}

.div-portfolio .item:hover > div:first-child,
.div-portfolio .item:focus-within > div:first-child,
.div-portfolio .item.touch-open > div:first-child {
	max-height: 100%;
}

.div-portfolio .item:hover > div:first-child .description,
.div-portfolio .item:hover > div:first-child .button,
.div-portfolio .item:focus-within > div:first-child .description,
.div-portfolio .item:focus-within > div:first-child .button,
.div-portfolio .item.touch-open > div:first-child .description,
.div-portfolio .item.touch-open > div:first-child .button {
	visibility: visible;
	opacity: 1;
	transition: opacity .3s ease .3s, visibility 0s linear .3s;
}

@media (prefers-reduced-motion: reduce) {
	.div-portfolio .item > div:first-child,
	.div-portfolio .item .description,
	.div-portfolio .item .button {
		transition: none !important;
	}
}

.div-portfolio .number {
	width: 90px;
	line-height: 85px;
	text-align: right;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	float: right;
	font-size: 56px;
	padding-right: 25px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.div-portfolio .title {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 36px;
	line-height: 85px;
	text-align: left;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 0 24px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.div-portfolio .description {
	font-family: 'Montserrat';
	font-size: 15px;
	font-weight: 600;
	font-style: italic;
	line-height: 24px;
	text-align: left;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 0 36px 24px 36px;
	visibility: hidden;
	opacity: 0;
	transition: none;
}

.div-portfolio .description span {
	display: inline-block;
	text-indent: 16px;
}

.div-portfolio .description span:not(:last-child) {
	margin-bottom: 12px;
}

.div-portfolio .button {
	width: 100%;
	text-align: right;
	padding: 0 32px 24px 24px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	visibility: hidden;
	opacity: 0;
	transition: none;
}

.div-portfolio .button a {
	display: inline-block;
	text-decoration: none;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 1px;
	border: none;
	padding: 6px 24px;
	border-radius: 32px;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.div-portfolio .button a:hover,
.div-portfolio .button a:focus-visible {
	cursor: pointer;
	box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
}

/* Link para o projeto no ar (abre em nova aba) */
.div-portfolio .button a::after {
	content: ' \2197';
}

/* Selo "À venda" encaixado na borda entre o print e a faixa do título,
   acima do número, metade em cada um: projetos hospedados aqui que estão
   disponíveis para compra. Fica fora do painel (que tem overflow:hidden)
   e some quando ele abre, para não cobrir a descrição. */
.div-portfolio .for-sale {
	position: absolute;
	right: 24px;
	bottom: 92px;
	padding: 4px 20px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 28px;
	letter-spacing: 1px;
	line-height: 1.2;
	color: #FFFFFF;
	background-color: var(--red);
	border: 3px solid #FFFFFF;
	border-radius: 10px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	transform: translateY(50%) rotate(-4deg);
	z-index: 4;
	pointer-events: none;
	transition: opacity .2s ease 0s;
}

.div-portfolio .item:hover .for-sale,
.div-portfolio .item:focus-within .for-sale,
.div-portfolio .item.touch-open .for-sale {
	opacity: 0;
}

/* Print e cor de cada projeto (lista em views/{idioma}/portfolio_items.php). */

/* Glooom Tools: vermelho dos botões do próprio produto */
.div-portfolio .toools {
	background-image: url('../portfolio/toools.webp');
}

.div-portfolio .toools > div:first-child {
	background-color: #c8313a;
}

.div-portfolio .toools .button a {
	color: #c8313a;
}

/* Glooom: magenta, puxado das cores do próprio produto */
.div-portfolio .glooom {
	background-image: url('../portfolio/glooom.webp');
}

.div-portfolio .glooom > div:first-child {
	background-color: #8e3f8a;
}

.div-portfolio .glooom .button a {
	color: #8e3f8a;
}

.div-portfolio .trackone {
	background-image: url('../portfolio/trackone.webp');
}

.div-portfolio .trackone > div:first-child {
	background-color: var(--purple);
}

.div-portfolio .trackone .button a {
	color: var(--purple);
}

/* Artigos: azul-petróleo, versão sóbria do ciano do tema quadrinhos */
.div-portfolio .artigos {
	background-image: url('../portfolio/sandro.webp');
}

.div-portfolio .artigos > div:first-child {
	background-color: #2a7f90;
}

.div-portfolio .artigos .button a {
	color: #2a7f90;
}

/* Urna: vermelho da própria urna (tema rubber hose) */
.div-portfolio .urna {
	background-image: url('../portfolio/urna.webp');
}

.div-portfolio .urna > div:first-child {
	background-color: #c23b28;
}

.div-portfolio .urna .button a {
	color: #c23b28;
}

.div-portfolio .fotografia {
	background-image: url('../portfolio/fotografia.webp');
}

.div-portfolio .fotografia > div:first-child {
	background-color: var(--cyan);
}

.div-portfolio .fotografia .button a {
	color: var(--cyan);
}

.div-portfolio .advogados {
	background-image: url('../portfolio/advogados.webp');
}

.div-portfolio .advogados > div:first-child {
	background-color: #343434;
}

.div-portfolio .advogados .button a {
	color: #343434;
}

.div-portfolio .artzan {
	background-image: url('../portfolio/artzan.webp');
}

.div-portfolio .artzan > div:first-child {
	background-color: var(--red);
}

.div-portfolio .artzan .button a {
	color: var(--red);
}

.div-portfolio .agendar {
	background-image: url('../portfolio/agendar.webp');
}

.div-portfolio .agendar > div:first-child {
	background-color: var(--green);
}

.div-portfolio .agendar .button a {
	color: var(--green);
}

.div-portfolio .ademotos {
	background-image: url('../portfolio/ademotos.webp');
}

.div-portfolio .ademotos > div:first-child {
	background-color: var(--yellow);
}

.div-portfolio .ademotos .button a {
	color: var(--yellow);
}

.div-portfolio .mcmeng {
	background-image: url('../portfolio/mcmeng.webp');
}

.div-portfolio .mcmeng > div:first-child {
	background-color: var(--blue);
}

.div-portfolio .mcmeng .button a {
	color: var(--blue);
}

/* Jogos: preto do fundo das telas dos jogos. Dois botões, um para cada jogo. */
.div-portfolio .games {
	background-image: url('../portfolio/games.webp');
}

.div-portfolio .games > div:first-child {
	background-color: #141414;
}

.div-portfolio .games .button a {
	color: #141414;
}

/* Tentação VIP: vermelho da marca. O selo "À venda" também é vermelho, então
   aqui ele fica grafite para não sumir na faixa. */
.div-portfolio .tentacaovip {
	background-image: url('../portfolio/tentacaovip.webp');
}

.div-portfolio .tentacaovip > div:first-child {
	background-color: #b9282e;
}

.div-portfolio .tentacaovip .button a {
	color: #b9282e;
}

.div-portfolio .tentacaovip .for-sale {
	background-color: #2b2b2b;
}

/* Selo de cada card em cor que contraste com a faixa dele. */
.div-portfolio .fotografia .for-sale {
	background-color: #d9822b;
}

.div-portfolio .advogados .for-sale {
	background-color: #d4a72c;
	color: #1d1612;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35);
}

.div-portfolio .games .button {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px 14px;
}

/* Fim de cada página do portfólio, na posição do próximo card (onde o
   conector termina): o mesmo card, com a borda bege e a faixa colorida em
   degradê, no roxo do Portfólio do menu. Na última página fecha com "Por
   enquanto é só" e, nas outras, chama para a próxima. */
.div-portfolio .portfolio-more {
	position: relative;
	width: 800px;
	margin: 0 0 80px 65px;
	padding: 44px 40px 36px;
	border: 5px solid #DDD5C1;
	border-radius: 18px;
	background-color: var(--purple);
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.18) 100%);
	box-shadow: inset 0 2px 80px 0 rgba(0, 0, 0, 0.3);
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* Título e texto como os da faixa e da descrição dos cards */
.div-portfolio .more-title {
	margin: 0 0 22px 0;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 44px;
	line-height: 1.1;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.div-portfolio .more-text {
	margin: -8px 0 24px 0;
	font-family: 'Montserrat';
	font-size: 15px;
	font-weight: 600;
	font-style: italic;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

/* Pílula branca, igual ao "Ver portfólio" dos cards */
.div-portfolio .more-button {
	display: inline-block;
	padding: 6px 28px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 30px;
	letter-spacing: 1px;
	text-decoration: none;
	color: var(--purple);
	background-color: #FFFFFF;
	border-radius: 32px;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.div-portfolio .more-button span {
	display: inline-block;
	animation: more-nudge 1.4s ease-in-out infinite;
}

.div-portfolio .more-button:hover,
.div-portfolio .more-button:focus-visible {
	box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
}

.div-portfolio .more-button:focus-visible,
.div-portfolio .more-back:focus-visible,
.div-portfolio .more-pages a:focus-visible,
.div-portfolio .recap-link:focus-visible {
	outline: 3px solid #333333;
	outline-offset: 4px;
}

/* Seta cheia (SVG nas views): inclinada como as letras da Bangers e
   girada conforme a direção. */
.div-portfolio .more-arrow {
	width: 0.95em;
	height: 0.95em;
	vertical-align: -0.12em;
	filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
	transform: skewX(-10deg);
}

.div-portfolio .more-arrow.left {
	transform: scaleX(-1) skewX(-10deg);
}

.div-portfolio .more-arrow.up {
	transform: rotate(-90deg) skewY(10deg);
}

@keyframes more-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(6px); }
}

.div-portfolio .more-back {
	display: block;
	width: fit-content;
	margin: 20px auto 0 auto;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 22px;
	letter-spacing: 1px;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.div-portfolio .more-back:hover {
	text-decoration: underline;
}

/* Números das páginas: a atual na pílula branca inclinada, como o item
   ativo do menu; as outras só o número, sublinhado no hover. */
.div-portfolio .more-pages {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 26px;
	line-height: 1;
}

.div-portfolio .more-pages a {
	color: #FFFFFF;
	text-decoration: none;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.div-portfolio .more-pages a:hover {
	text-decoration: underline;
}

.div-portfolio .more-pages span {
	padding: 5px 16px 3px 16px;
	color: var(--purple);
	background-color: #FFFFFF;
	border-radius: 32px;
	box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.25);
	transform: rotate(-2deg);
}

/* Topo da página 2 em diante (sem o título): a volta para a página
   anterior na pílula roxa do menu. */
.div-portfolio .portfolio-recap {
	margin: 0 0 36px 0;
	text-align: center;
}

.div-portfolio .recap-link {
	display: inline-block;
	padding: 6px 20px 3px 20px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 1;
	text-decoration: none;
	color: #FFFFFF;
	background-color: var(--purple);
	border-radius: 32px;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
	box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.25);
	transform: rotate(-2deg);
}

.div-portfolio .recap-link:hover {
	box-shadow: inset 3px 3px 2px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
	.div-portfolio .more-button span {
		animation: none;
	}
}

.busines-card {
	margin: 0 auto;
	width: 588px;
	display: grid;
	grid-template-columns: 134px 52px 252px 150px;
	column-gap: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;

	margin-top: 120px;
	margin-bottom: 120px;
}

.busines-card>div {
	font-family: 'Bangers', Verdana;
	font-size: 48px;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -1px -1px 0 #585b62;
}

.separate {
	margin-top: 60px;
	width: auto;
	height: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 1px 1px 2px #C1B7AE, inset -1px -1px 2px #FFF;
	box-shadow: inset 1px 1px 2px #C1B7AE, inset -1px -1px 2px #FFF;
}

.quote {
	width: auto;
	padding-right: 30px;
	text-align: right;
	font-family: 'Montserrat', Arial;
	font-size: 13px;
	font-weight: 600;
	font-style: italic;
	color: #7e828b;
}

.author {
	width: auto;
	margin-top: 4px;
	margin-bottom: 60px;
	padding-right: 38px;
	text-align: right;
	font-family: 'Montserrat', Arial;
	font-size: 11px;
	font-weight: 600;
	font-style: italic;
	color: #6d7587;
}

/* Frase da página Sobre digitada como numa máquina de escrever (ver
   init_quote em default.js). O .rest guarda o que falta digitar, invisível,
   para o bloco já nascer com o tamanho final. */
.div-quote .quote {
	cursor: pointer;
}

.div-quote.waiting .rest,
.div-quote.typing .rest {
	color: transparent;
}

/* Cursor: inline vazio com borda (sem largura e sem criar ponto de quebra) */
.div-quote .typed::after {
	content: '';
	margin-right: -2px;
	border-left: 2px solid currentColor;
	opacity: 0;
}

.div-quote.typing .typed::after {
	opacity: 1;
}

.div-quote.typed-done .typed::after {
	animation: quote-caret 1s steps(1) 4 forwards;
}

@keyframes quote-caret {
	0%   { opacity: 1; }
	50%  { opacity: 0; }
	100% { opacity: 0; }
}

.div-quote .author {
	transition: opacity .6s ease, transform .6s ease;
}

.div-quote.waiting .author,
.div-quote.typing .author {
	opacity: 0;
	transform: translateY(4px);
}

@media (max-width: 1024px) {
	#menu,
	.menu-sticky {
		display: none;
	}

	/* .separate e .div-article (Últimos Artigos da home) eram escondidos aqui;
	   a seção agora aparece também no tablet/celular (ajustes mais abaixo). */
	.div-icon-code {
		display: none;
	}

	.separate {
		margin: 40px 6% 0 6%;
	}

	.open-menu {
		display: block;
	}

	/* .page vira grid (regra mais abaixo) só com grid-template-ROWS definido.
	   Sem declarar as colunas, a única coluna implícita usa largura "auto"
	   e se ajusta ao maior conteúdo interno (ex.: elementos com largura
	   fixa em px, como o logo do header/footer) em vez de travar na
	   largura da tela — isso é o que fazia texto e ilustrações vazarem
	   para fora da viewport. minmax(0, 1fr) trava a coluna em 100% da
	   largura disponível e ainda permite que os itens encolham. */
	.page {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.content-page, .div-title-article {
		width: 100% !important;
		padding: 0 6% !important;
		height: auto !important;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	/* Logo do header: sempre foi fixo em 980px/86-96px, nunca teve um
	   ajuste para telas <=1024px. vw mantém a proporção em toda a faixa
	   tablet/celular sem precisar de mais um breakpoint. */
	.logo {
		width: 100%;
		height: auto;
		padding-top: 20px;
	}

	.logo .up {
		font-size: 9vw;
	}

	.logo .up span {
		font-size: 10vw;
	}

	.logo .down {
		font-size: 4.5vw;
	}

	/* Mesmo problema no logo do footer. */
	.footer-logo {
		width: 100%;
		height: auto;
		padding-top: 24px;
	}

	.footer-logo .up {
		font-size: 6.5vw;
	}

	.footer-logo .up span {
		font-size: 7.5vw;
	}

	/* Menu de redes sociais do footer: 770px fixos em 5 colunas, também
	   nunca ajustado. Quebra em 2 colunas e libera a altura fixa (56px)
	   para poder empilhar as linhas. */
	.footer-menu {
		width: 100%;
		height: auto;
		padding: 0 6%;
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: 16px;
		grid-column-gap: 20px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	/* Nuvem de ícones de tecnologia da página Skills: os ícones já usam
	   left/top em %, então só a largura fixa do container (1000px)
	   precisa ceder para a nuvem inteira acompanhar a tela. */
	.layer-skills {
		width: 100%;
	}

	#full-stack {
		display: grid;
		grid-template-columns: 1fr 1fr !important;
		gap: 16px !important;
	}

	#full-stack .text-designer {
		text-align: center !important;
		grid-column-start: 1 !important;
  		grid-column-end: 3 !important;
		order: 1 !important;
	}

	#full-stack .icons-designer {
		order: 2 !important;
		margin-left: 140px;
	}

	/* Acima de ~600px (tablet) o valor fixo de 140px funciona; abaixo disso
	   a coluna do grid encolhe e esse offset fixo empurra o cluster de
	   ícones para fora da área visível. Ver bloco <=600px mais abaixo. */

	#full-stack .designer {
		order: 3 !important;
	}

	#full-stack .text-developer {
		grid-column-start: 1 !important;
  		grid-column-end: 3 !important;
		order: 4 !important;
	}

	#full-stack .developer {
		order: 5 !important;
	}

	#full-stack .icons-developer {
		order: 6 !important;
	}

	#full-stack .text-designer .title,
	#full-stack .text-developer .title {
		width: 100% !important;
		text-align: center !important;
		padding: 0 10% !important;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	#full-stack .text-designer .text,
	#full-stack .text-developer .text {
		width: 100% !important;
		text-align: center !important;
		padding: 0 10% !important;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.div-articles {
		width: 100% !important;
		margin: 0 0 10px 0;
		padding: 0 14% !important;
		grid-template-columns: 1fr !important;
		grid-row-gap: 28px !important;
	}

	.div-articles .title, .div-articles .description {
		text-align: center !important;
	}

	/* Botão "Mais..." (leva para /article): centralizado em vez de escondido */
	.div-article .div-button-article {
		width: 100%;
		height: auto;
		padding: 6px 0 40px 0;
		text-align: center;
	}

	/* Linhas pontilhadas decorativas entre os itens do portfólio: usam
	   largura/margin-left fixos em px calculados para o layout desktop
	   (nunca sobrescritos), então em qualquer tela <=1024px ficam fora
	   de posição. Mais simples e seguro escondê-las. */
	.div-portfolio .connector {
		display: none !important;
	}

	.div-about {
		grid-template-columns: 1fr;
	}

	.div-about .div-about-image {
		display: none !important;
	}

	.title-portfolio {
		padding: 0 6% !important;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	/* Nuvem de ícones: o left% de cada ícone posiciona a borda esquerda, então a
	   nuvem pendia para a direita (o margin-left:-5% antigo compensava torto).
	   Aqui o left% vira o CENTRO do ícone (translate -50%; o transform continua
	   livre para a animação) e a área fica centralizada com folga nas laterais. */
	.layer-skills {
		margin: 40px auto 60px auto;
		width: 86% !important;
	}

	.layer-skills a {
		translate: -50% 0;
	}

	.other-skills {
		width: 100% !important;
	}

	.other-skills .column {
		width: auto !important;
	}

	.other-skills .column > div {
		width: 18% !important;
	}

	/* Cards empilhados: imagem (fundo do .item) em cima, na proporção das
	   capturas, e o painel colorido com o texto sempre visível embaixo. No
	   touch não há hover, e tocar para abrir um overlay que cobria a imagem
	   escondia justamente o print do projeto. */
	.div-portfolio .item {
		width: auto !important;
		height: auto !important;
		margin: 0 0 28px 0 !important;
		padding-bottom: 0;
		border-width: 4px;
		border-radius: 14px;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
		cursor: default;
	}

	.div-portfolio .item > div:first-child,
	.div-portfolio .item:hover > div:first-child,
	.div-portfolio .item:focus-within > div:first-child,
	.div-portfolio .item.touch-open > div:first-child {
		position: relative;
		width: 100%;
		max-height: none;
		transition: none;
	}

	.div-portfolio .item .number,
	.div-portfolio .item .title,
	.div-portfolio .item .description,
	.div-portfolio .item .button {
		visibility: visible !important;
		opacity: 1 !important;
		transition: none !important;
	}

	/* No desktop a faixa do título tem 85px fixos (título em 1 linha). No
	   mobile títulos longos quebram em 2 linhas, então ela cresce. */
	.div-portfolio .item > div:first-child > div:first-child {
		height: auto;
	}

	.div-portfolio .number {
		width: auto;
		font-size: 32px;
		line-height: normal;
		padding: 10px 16px 0 0;
	}

	.div-portfolio .title {
		font-size: 26px;
		line-height: 1.3;
		padding: 14px 16px 6px 16px;
		white-space: normal;
	}

	.div-portfolio .description {
		font-size: 13px;
		line-height: 1.5;
		padding: 0 16px 20px 16px;
	}

	.div-portfolio .button {
		height: auto;
		padding: 0 16px 20px 16px;
	}

	.div-portfolio .button a {
		font-size: 22px;
	}

	/* No mobile o painel fica abaixo do print com altura variável, então o
	   card vira grid: o selo divide a célula do print (::before) e se alinha
	   à borda de baixo dela. Sempre visível, já que o painel não cobre nada. */
	.div-portfolio .item:has(.for-sale) {
		display: grid;
		grid-template-columns: 1fr;
	}

	.div-portfolio .item:has(.for-sale)::before {
		grid-area: 1 / 1;
	}

	.div-portfolio .for-sale,
	.div-portfolio .item:hover .for-sale,
	.div-portfolio .item:focus-within .for-sale,
	.div-portfolio .item.touch-open .for-sale {
		position: relative;
		right: auto;
		bottom: auto;
		grid-area: 1 / 1;
		align-self: end;
		justify-self: end;
		margin-right: 62px;
		padding: 2px 14px;
		font-size: 21px;
		border-width: 2px;
		transform: translateY(30%) rotate(-4deg);
		opacity: 1;
	}

	.div-portfolio .item:last-of-type {
		margin-bottom: 30px !important;
	}

	.div-portfolio .portfolio-more {
		width: auto;
		margin: 0 0 30px 0 !important;
		padding: 30px 16px 26px;
		border-width: 4px;
		border-radius: 14px;
	}

	.div-portfolio .more-title {
		font-size: 30px;
	}

	.div-portfolio .more-text {
		font-size: 13px;
	}

	.div-portfolio .more-button {
		font-size: 24px;
	}


	.contact-page {
		grid-template-columns: 1fr !important;
		grid-column-gap: 20px !important;
	}

	.contact-page .contact-form {
		padding-right: 0;
	}

	.contact-page > div {
		margin-top: 1vh;
		margin-bottom: 2vh;
	}

	.contact-page .div-button-send {
		margin-bottom: 2vh;
		margin-left: 0;
		padding-left: 0;
		text-align: center;
	}

	/* Captcha deslizante centralizado (no desktop ele flutua à esquerda):
	   trilho de 252px + 5px + status de 40px */
	.contact-page .QapTcha {
		float: none;
		width: 297px;
		margin: 18px auto 0 auto;
	}

	.text-bottom {
		font-size: 1.4rem;
		line-height: 2.2rem;
		padding: 0 1vw;
		margin-top: 6vh;
		margin-bottom: 4vh;
	}

	.contact-page .captch-text {
		font-size: 1rem;
		line-height: 1.2rem;
	}

	.title-icon {
		font-size: 2rem;
		text-align: center;
	}

	.item-contact.text,
	.item-contact {
		font-size: 1.5rem;
		text-align: center;
	}

	/* O e-mail (ex.: contato@sandrojordao.com.br) é uma única "palavra"
	   sem espaço para quebrar — o grid-template-columns:"1fr 0 60px" de
	   .item-contact-page não tem largura definida (o "1fr" também sofre
	   do min-width:auto padrão do grid), então o texto empurra a coluna
	   para caber inteiro numa linha só e vaza da tela. Deixando quebrar
	   a palavra resolve sem precisar mudar a estrutura do grid. Achado
	   testando com Playwright em viewport de 375px. */
	.item-contact {
		overflow-wrap: anywhere;
	}

	.text-bottom span {
		font-size: 2rem;
	}

	.page {
		min-height: 100vh !important;
		display: grid;
		grid-template-rows: minmax(100px, auto) 0 minmax(100px, auto) 1fr;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.div-about .title span.black {
		font-size: 3.5rem;
	}

	.div-about .title span.red {
		font-size: 4rem;
	}

	.div-about .description {
		font-size: 1.5rem;
		line-height: 2rem;
	}

	.div-about .description .intro {
		font-size: 1.6rem;
		line-height: 2.2rem;
	}

	/* Linha do tempo em uma coluna: marco em cima do texto, linha à esquerda */
	.about-timeline li {
		grid-template-columns: 1fr;
		padding-left: 28px;
	}

	.about-timeline li::before {
		left: 6px;
	}

	.about-timeline li::after {
		left: 0;
	}

	.about-timeline .when {
		text-align: left;
		margin-bottom: 6px;
		font-size: 2rem;
		line-height: 2.2rem;
	}

	.quote, .author {
		display: none !important;
	}

	.footer-copyright {
		font-size: 1.2rem;
	}

	.title-contact span.black,
	.title-other-skills span.black,
	.title-portfolio span.black {
		font-size: 2.8rem;
	}

	.title-contact span.red,
	.title-other-skills span.red,
	.title-portfolio span.red {
		font-size: 3rem;
	}

	.other-skills {
		margin-top: 6vh;
    	margin-bottom: 8vh;
	}

	.div-portfolio {
		height: auto !important;
	}

	.translator {
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 2px solid #81868c;
		margin-top: 2vh;
	}

	.languages {
		margin-top: 2vh;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 2vw;
		font-family: 'Bangers', Verdana;
		letter-spacing: 3px;
		font-size: 6vmin;
		color: #FFFFFF;
		text-shadow: 2px 2px 0 #5F5F5F;
	}

	.languages .actived {
		color: rgba(255, 255, 255, 0.3);
		text-shadow: none;
	}
}

/* Ajustes específicos para celulares (o breakpoint de 1024px acima trata
   tablet e celular como se fossem a mesma largura; vários offsets em px
   ali foram calibrados para tablet e estouram em telas menores). */
@media (max-width: 600px) {
	/* Cards do portfólio aproveitam a largura: só o respiro do .content-page. */
	.div-portfolio {
		padding: 0 4px;
	}

	/* #full-stack (home) em 2 colunas de ~1fr cada não sobra espaço para
	   o boneco de 192px (#designer/#developer) nem para o cluster de
	   ícones (~200px): o item do grid não encolhe abaixo do conteúdo
	   (min-width:auto padrão), então o grid "estoura" e empurra tudo para
	   fora da tela. Em vez de forçar 2 colunas apertadas, empilha em 1
	   coluna só, com folga de sobra para centralizar cada peça. */
	#full-stack {
		grid-template-columns: 1fr !important;
	}

	#full-stack .text-designer,
	#full-stack .text-developer {
		grid-column: 1 / 2 !important;
	}

	/* O boneco (#designer/#developer) é posicionado com position:relative
	   nele mesmo, então basta centralizar o item do grid ao redor dele —
	   as partes internas (rosto, cabelo etc.) se movem juntas. */
	#full-stack .designer,
	#full-stack .developer {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	/* Tentei encaixar o cluster de ícones perto do boneco (colado, como
	   no desktop) de duas formas — com espaço embaixo (ficava um vão
	   grande, parecendo 2 blocos soltos) e sobrepondo (os ícones caíam
	   em cima do rosto, bagunçado). No desktop os ícones ficam do LADO
	   do boneco, não embaixo/em cima — empilhados numa coluna só, essa
	   relação lateral não existe. Em vez de forçar uma posição vertical
	   que sempre bate em algum problema, esconde o cluster solto de
	   ícones no mobile (o título + texto já dizem do que se trata) e
	   fica só com o boneco, que sozinho não tem esse conflito. Mesmo
	   padrão já usado em .quote/.author/.div-about-image nesta folha. */
	#full-stack .icons-designer,
	#full-stack .icons-developer {
		display: none !important;
	}

	/* Gráfico de barras da página Skills no celular.
	   A .column fica sobreposta à .chart (margin-top:-400px) e seu margin-left
	   precisa ser igual à margem esquerda da .chart + a largura da coluna de
	   rótulos (Jedi/Ninja/...). No desktop: 30px + 100px = 130px. Aqui a coluna
	   de rótulos encolhe para 58px e a margem para 10px: 10 + 58 = 68px.
	   Se mudar um desses valores, recalcule o margin-left da .column. */
	.chart {
		margin: 0;
		grid-template-columns: 58px 1fr;
	}

	.other-skills .column {
		margin-left: 68px;
		margin-right: 10px;
	}

	.line-right {
		font-size: 0.95rem;
		padding-right: 8px;
		letter-spacing: 0;
	}

	/* Legenda de categorias: os 3 botões numa linha só */
	.skills-legend {
		gap: 8px;
		margin-top: 20px;
	}

	.skills-legend button {
		font-size: 17px;
		padding: 5px 13px 3px 13px;
	}

	/* Barras a 16% (em vez dos 18% do bloco de 1024px): com 18% as 5 barras
	   quase se encostavam e os nomes embaixo encavalavam uns nos outros. */
	.other-skills .column > div {
		width: 16% !important;
	}

	/* Porcentagem sem quebrar linha ("90" e "%" ficavam em linhas separadas) */
	.column .percent {
		font-size: 1.4rem;
	}

	.column .percent span {
		font-size: 0.75rem;
	}

	/* Nome da habilidade: abaixo do eixo, limitado à largura da própria barra
	   (left/right 0) e quebrando em linhas, para não invadir o vizinho */
	.column .text {
		font-size: 0.72rem;
		line-height: 1.15;
		margin-top: 8px;
		left: 0;
		right: 0;
	}

	.other-skills {
		margin-bottom: 90px;
	}

	/* Logo do header: em 9vw (~35px num celular de 390px) ficava pequeno
	   demais. O margin-top:-19px do subtítulo foi calibrado para o logo de
	   86px do desktop e encavalava o "Full-Stack Developer" no nome. */
	.logo {
		padding-top: 18px;
	}

	.logo .up {
		font-size: 12.5vw;
	}

	.logo .up span {
		font-size: 14vw;
	}

	.logo .down {
		font-size: 6vw;
		margin-top: -1.5vw;
	}

	/* #header tem height:200px fixo (do desktop): no celular sobrava um vão
	   enorme entre o logo e o conteúdo. */
	#header {
		height: auto;
		padding-bottom: 10px;
	}

	.content-page {
		margin-top: 20px;
		padding: 0 2% !important;
	}

	/* Botão de abrir/fechar o menu: 8vh + ícone de 4rem (64px) ficava
	   gigante ao lado do logo. Tamanho fixo de toque (44px). */
	.open-menu,
	#menu-mobile .close-menu {
		top: 14px;
		right: 12px;
		width: 44px;
		height: 44px;
		line-height: 44px;
	}

	.open-menu i {
		font-size: 1.9rem;
	}

	/* O "X" do ícone tem traço mais pesado que o hambúrguer: menor fica equivalente */
	.close-menu i {
		font-size: 1.3rem;
	}

	/* Menu mobile: cada .link tinha height:14vh (6 itens = 84% da tela), o que
	   espalhava demais os itens. Itens com altura natural e o grupo centralizado
	   na tela (margin:auto no primeiro item e no seletor de idioma). */
	#menu-mobile {
		display: flex;
		flex-direction: column;
		padding: 24px 16px;
	}

	#menu-mobile .link {
		height: auto;
		line-height: 1.2;
		padding: 12px 0;
	}

	#menu-mobile .link:first-child {
		margin-top: auto;
	}

	#menu-mobile a {
		font-size: 10vmin;
	}

	#menu-mobile .translator {
		margin-top: 24px;
		margin-bottom: auto;
		padding-top: 4px;
	}

	/* Footer: logo, links e copyright em tamanhos de celular. Os links viram
	   uma linha centralizada que quebra sozinha (em vez de 2 colunas largas). */
	.footer-main {
		min-height: 0;
		padding-bottom: 8px;
	}

	.footer-logo {
		padding-top: 30px;
		padding-bottom: 14px;
	}

	.footer-logo .up {
		font-size: 9vw;
	}

	.footer-logo .up span {
		font-size: 10vw;
	}

	.footer-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 22px;
		padding: 0 16px;
		line-height: 28px;
	}

	.footer-menu > div {
		font-size: 14px;
	}

	.footer-copyright {
		font-size: 13px;
		height: auto;
		line-height: 1.5;
		padding: 18px 16px 26px 16px;
	}

	.footer-copyright span {
		font-size: 16px;
	}

	/* Página Sobre: o bloco de 1024px aumenta o texto para 1.5rem (24px) e os
	   títulos para 3.5rem/4rem. Numa coluna de celular, 24px justificado abre
	   buracos enormes entre as palavras. Tamanho de leitura + alinhado à esquerda. */
	.div-about {
		padding: 0 6px;
	}

	.div-about .title {
		line-height: 1.1;
	}

	.div-about .title span.black {
		font-size: 2.6rem;
	}

	.div-about .title span.red {
		font-size: 3rem;
	}

	.div-about .description {
		font-size: 15px;
		line-height: 1.75;
		text-align: left;
	}

	.div-about .description .intro {
		font-size: 16px;
		line-height: 1.7;
	}

	.about-timeline .when {
		font-size: 24px;
		line-height: 26px;
	}

	/* Contato e títulos de seção: mesmos tamanhos inflados em rem do bloco de 1024px */
	.title-contact span.black,
	.title-other-skills span.black,
	.title-portfolio span.black {
		font-size: 2.2rem;
	}

	.title-contact span.red,
	.title-other-skills span.red,
	.title-portfolio span.red {
		font-size: 2.4rem;
	}

	.title-icon {
		font-size: 1.6rem;
	}

	.item-contact.text,
	.item-contact {
		font-size: 1.15rem;
	}

	.text-bottom {
		font-size: 1.1rem;
		line-height: 1.7;
	}

	.text-bottom span {
		font-size: 1.5rem;
	}

	/* Últimos Artigos (home): menos recuo lateral que no tablet e títulos menores */
	.div-articles {
		padding: 0 6% !important;
		grid-row-gap: 24px !important;
	}

	.div-articles .title {
		font-size: 22px;
	}

	.div-articles .description {
		font-size: 13px;
		line-height: 1.6;
	}

	.div-title-article span.black {
		font-size: 30px;
	}

	.div-title-article span.red {
		font-size: 34px;
	}

	/* Confirmação de envio (envelope): selo e carimbo menores no celular */
	.contact-success {
		margin: 10px 0 30px 0;
		padding: 30px 20px 26px 20px;
	}

	.success-stamp {
		top: 20px;
		right: 16px;
		width: 48px;
		height: 58px;
		font-size: 24px;
	}

	.success-postmark {
		top: 38px;
		right: 46px;
		width: 74px;
		height: 74px;
		font-size: 10px;
	}

	.success-plane {
		width: 120px;
		height: 56px;
	}

	.success-title {
		margin-right: 70px;
	}

	.success-title .black {
		font-size: 28px;
	}

	.success-title .red {
		font-size: 32px;
	}

	/* Formulário de contato: Email (2fr) + Telefone (1fr) lado a lado ficam
	   apertados no celular; empilha os dois. */
	.contact-page .div-two-input {
		grid-template-columns: 1fr;
	}

	/* O texto do captcha tem height:24px fixo (1 linha no desktop); no
	   celular ele quebra em 4 linhas e invadia o controle deslizante. */
	.contact-page .captch-text {
		height: auto;
		padding: 0 10px;
		line-height: 1.5;
	}

	.layer-skills {
		margin: 0 !important;
		width: 100% !important;
	}
}

/* Título visível apenas para leitores de tela / buscadores, sem alterar o layout visual */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}