/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: Tema filho do Blocksy. Use este tema para fazer personalizações sem perder as atualizações do tema pai.
Author: CreativeThemes
Author URI: https://creativethemes.com
Template: blocksy
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-child
*/

/* Estilos personalizados */

/* Fontes Proxima Nova do Adobe Fonts */
body,
html {
	font-family: "proxima-nova", sans-serif !important;
}

/* Aplicar Proxima Nova a todos os elementos de texto */
* {
	font-family: "proxima-nova", sans-serif !important;
}

/* Restaurar fonte padrão do WordPress para texto da barra de administração */
#wpadminbar {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* Restaurar fonte de ícones apenas para os ícones da barra de administração */
#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before {
	font-family: dashicons !important;
}

/* Estilos específicos para diferentes pesos e estilos */
.proxima-nova-regular {
	font-family: "proxima-nova", sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
}

.proxima-nova-regular-italic {
	font-family: "proxima-nova", sans-serif !important;
	font-weight: 400 !important;
	font-style: italic !important;
}

.proxima-nova-bold {
	font-family: "proxima-nova", sans-serif !important;
	font-weight: 700 !important;
	font-style: normal !important;
}

.proxima-nova-bold-italic {
	font-family: "proxima-nova", sans-serif !important;
	font-weight: 700 !important;
	font-style: italic !important;
}

/* Fade preto diagonal sobre imagem banner */
.image-banner {
	position: relative !important;
	overflow: visible !important;
}

.image-banner::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(to bottom right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%) !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

.image-banner > * {
	position: relative !important;
	z-index: 2 !important;
}

/* Texto "The Emerging Future" com tamanho responsivo em vw */
.image-banner .stk-2547f48 .stk-block-text__text {
	font-size: 6vw !important;
	font-size: 9vw !important;
}


/* Retângulo no canto inferior direito da imagem banner */
.image-banner::after {
	content: "" !important;
	position: absolute !important;
	bottom: -10px !important;
	right: 0 !important;
	width: 33% !important;
	height: 15px !important;
	background-color: #CE0E2D !important;
	z-index: 3 !important;
	pointer-events: none !important;
	transform-origin: right center !important;
	animation: growRedBar 1.5s ease-out 0.5s both !important;
}

/* Animação da barra vermelha crescendo da direita para a esquerda */
@keyframes growRedBar {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* Estilos e animações para text-banner */
.text-banner {
	color: #000000 !important;
}

.text-banner * {
	color: #000000 !important;
}

.text-banner a {
	color: #000000 !important;
	text-decoration: none !important;
	position: relative !important;
	display: inline !important;
	background-image: linear-gradient(to right, #000000 0%, #000000 100%) !important;
	background-size: 0 2px !important;
	background-position: 0 100% !important;
	background-repeat: no-repeat !important;
	transition: background-size 0.4s ease !important;
}

/* Sublinhado animado que cresce da esquerda para a direita em todas as linhas */
.text-banner a:hover {
	background-size: 100% 2px !important;
}

/* ===================================
   ESTILOS RESPONSIVOS PARA MOBILE
   =================================== */

@media screen and (max-width: 782px) {
	/* Image banner ocupa largura total em mobile */
	.image-banner {
		max-width: 100vw !important;
		width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	.image-banner .stk-2547f48 .stk-block-text__text {
	    font-size: 17vw !important;
	}
	.image-banner::after {
	    content: "" !important;
	    position: absolute !important;
	    bottom: -10px !important;
	    right: 0 !important;
	    width: 55% !important;
	    height: 15px !important;
	    background-color: #CE0E2D !important;
	    z-index: 3 !important;
	    pointer-events: none !important;
	    transform-origin: right center !important;
	    animation: growRedBar 1.5s ease-out 0.5s both !important;
	}
}
@media screen and (min-width: 1920px) {
	.image-banner .stk-2547f48 .stk-block-text__text {
	    font-size: 150px !important;
	}
}