/* Inter */
@font-face {
  font-family: 'Inter-Italic';
  src: url('../font/Inter-Regular.woff2') format('woff2'),
       url('../font/Inter-Regular.woff') format('woff'),
       url('../font/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter-Medium';
  src: url('../font/Inter-Medium.woff2') format('woff2'),
       url('../font/Inter-Medium.woff') format('woff'),
       url('../font/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Roboto (versões normais) */
@font-face {
  font-family: 'Roboto-Light';
  src: url('../font/Roboto-Light.woff2') format('woff2'),
       url('../font/Roboto-Light.woff') format('woff'),
       url('../font/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto-Medium';
  src: url('../font/Roboto-Medium.woff2') format('woff2'),
       url('../font/Roboto-Medium.woff') format('woff'),
       url('../font/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto-SemiBold';
  src: url('../font/Roboto-SemiBold.woff2') format('woff2'),
       url('../font/Roboto-SemiBold.woff') format('woff'),
       url('../font/Roboto-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto-Bold';
  src: url('../font/Roboto-Bold.woff2') format('woff2'),
       url('../font/Roboto-Bold.woff') format('woff'),
       url('../font/Roboto-Bold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

/* Roboto Flex – variable font (a mais importante para corrigir no iOS) */
@font-face {
  font-family: 'RobotoFlex';
  src: url('../font/RobotoFlex.woff2') format('woff2'),
       url('../font/RobotoFlex.woff') format('woff'),
       url('../font/RobotoFlex.ttf') format('truetype');
  font-weight: 200 800;          /* faixa de pesos suportada pela variable font */
  font-style: normal;
  font-display: swap;
  font-stretch: 75% 125%;        /* se você usa variação de largura – opcional */
}

/* Classes mantidas iguais – só mudam os @font-face acima */
.roboto-flex-light-italic {
  font-family: 'RobotoFlex';
  font-weight: 300;
  font-style: italic;
}

.roboto-flex-regular-italic {
  font-family: 'RobotoFlex';
  font-weight: 400;
  font-style: italic;
}

.roboto-flex-medium-italic {
  font-family: 'RobotoFlex';
  font-weight: 500;
  font-style: italic;
}

.roboto-flex-extralight-italic {
  font-family: 'RobotoFlex';
  font-weight: 200;
  font-style: italic;
}

.roboto-flex-semibold-italic {
  font-family: 'RobotoFlex';
  font-weight: 600;
  font-style: italic;
}

.roboto-flex-bold-italic {
  font-family: 'RobotoFlex';
  font-weight: 700;
  font-style: italic;
}

.roboto-flex-extrabold-italic {
  font-family: 'RobotoFlex';
  font-weight: 800;
  font-style: italic;
}

.roboto-bold {
  font-family: 'RobotoFlex';
  font-weight: 800;
  font-style: italic;
}

/* As outras classes permanecem iguais */
.inter-italic        { font-family: 'Inter-Italic'; }
.inter-medium        { font-family: 'Inter-Medium'; }
.roboto-light        { font-family: 'Roboto-Light'; }
.roboto-medium       { font-family: 'Roboto-Medium'; }
.roboto-semibold     { font-family: 'Roboto-SemiBold'; }
.roboto-bold         { font-family: 'Roboto-Bold'; }

:root {
  --black: #000000;
  --white: #ffffff;
  --primary: #EE222B;
  --secondary: #F08AE0;
  --orange: #FF4800;
  --blue: #214EB4;
  --beige: #F5C774;
  --purple: #4234CF;
  --green: #0CBC6C;
}

/* HTML GLOBAL */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* bloqueia scroll lateral */
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Verlag-Regular;
  font-style: normal;
  color: var(--black);
}

p,
span {
  font-family: Verlag-Regular;
  font-style: normal;
  font-size: 16px;
  color: var(--black);
}

/* CUSTON*/
.checkbtn {
	font-size: 30px;
	float: right;
	cursor: pointer;
	display: none;
}
#check {
	display: none;
}
nav ul li a {
	color: var(--gray-dark);
}

.shadow {
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2) ;
}

.click-red:hover {
  cursor: url('../icon/hand-click-red.svg') 12 6, pointer;
}

.click-purple:hover {
  cursor: url('../icon/hand-click-purple.svg') 12 6, pointer;
}

.logos-wrapper {
  overflow: hidden;
  /* width: 100%; */
}

.logos-track {
  width: max-content;
}

/* ---------- Direita → Esquerda ---------- */
.animate-scroll-right-to-left {
  animation: scrollRightToLeft 30s linear infinite;
}

@keyframes scrollRightToLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Esquerda → Direita ---------- */
.animate-scroll-left-to-right {
  animation: scrollLeftToRight 32s linear infinite;   /* um pouquinho mais lento */
}

@keyframes scrollLeftToRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Opcional - pausar ao passar o mouse */
.logos-wrapper:hover .logos-track {
  animation-play-state: paused;
}

/* TEXT COLORS*/
.text-black {
  color: var(--black);
}
.text-white {
  color: var(--white);
}
.text-primary {
  color: var(--primary);
}
.text-secondary {
  color: var(--secondary);
}
.text-orange {
  color: var(--orange);
}
.text-blue {
  color: var(--blue);
}
.text-beige {
  color: var(--beige);
}
.text-purple {
  color: var(--purple);
}
.text-green {
  color: var(--green);
}

/* BACKGROUND COLORS*/
.bg-black {
  background-color: var(--black);
}
.bg-white {
  background-color: var(--white);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-orange {
  background-color: var(--orange);
}
.bg-blue {
  background-color: var(--blue);
}
.bg-beige {
  background-color: var(--beige);
}
.bg-purple {
  background-color: var(--purple);
}
.bg-green {
  background-color: var(--green);
}

/* BORDER COLOR */
.border-black {
  border-color: var(--black);
}
.border-white {
  border-color: var(--white);
}
.border-primary {
  border-color: var(--primary);
}
.border-secondary {
  border-color: var(--secondary);
}
.border-orange {
  border-color: var(--orange);
}
.border-blue {
  border-color: var(--blue);
}
.border-beige {
  border-color: var(--beige);
}
.border-purple {
  border-color: var(--purple);
}
.border-green {
  border-color: var(--green);
}

/* UTILS */
.max-w-320 {
  width: 100%;
  max-width: 320px;
}
.max-w-410 {
  width: 100%;
  max-width: 410px;
}
.max-w-640 {
  width: 100%;
  max-width: 640px;
}
.max-w-768 {
  width: 100%;
  max-width: 768px;
}
.max-w-1024 {
  width: 100%;
  max-width: 1024px;
}
.max-w-1280 {
  width: 100%;
  max-width: 1280px;
}
.max-w-1536 {
  width: 100%;
  max-width: 1536px;
}

/* ANIME */
/* Base para elementos com animação */
[data-anime] {
  opacity: 0;
  animation-play-state: paused; /* Animação pausada até entrar na tela */
}

/* Tipos de animação */
[data-anime="top"] {
  animation-name: fromTop;
}

[data-anime="right"] {
  animation-name: fromRight;
}

[data-anime="left"] {
  animation-name: fromLeft;
}

[data-anime="bottom"] {
  animation-name: fromBottom;
}

[data-anime="center"] {
  animation-name: fromCenter;
}

/* Tempos de animação */
[data-time="fast"] {
  animation-duration: 0.2s;
  animation-delay: 0.2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="medium"] {
  animation-duration: 0.4s;
  animation-delay: 0.4s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow01"] {
  animation-duration: 0.6s;
  animation-delay: 0.6s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow02"] {
  animation-duration: 0.8s;
  animation-delay: 0.8s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow03"] {
  animation-duration: 1.0s;
  animation-delay: 1.0s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow04"] {
  animation-duration: 1.2s;
  animation-delay: 1.1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow05"] {
  animation-duration: 1.4s;
  animation-delay: 1.4s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow06"] {
  animation-duration: 1.6s;
  animation-delay: 1.6s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow07"] {
  animation-duration: 1.8s;
  animation-delay: 1.8s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow08"] {
  animation-duration: 2s;
  animation-delay: 2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow09"] {
  animation-duration: 2.2s;
  animation-delay: 2.2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow10"] {
  animation-duration: 2.4s;
  animation-delay: 2.4s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow11"] {
  animation-duration: 2.6s;
  animation-delay: 2.6s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow12"] {
  animation-duration: 2.8s;
  animation-delay: 2.8s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

[data-time="slow13"] {
  animation-duration: 3s;
  animation-delay: 3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Dispara a animação quando a classe 'visible' é adicionada */
[data-anime].visible {
  animation-play-state: running;
}

/* Definição das animações */
@keyframes fromTop {
  from { opacity: 0; transform: translate3d(0, -50px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fromRight {
  from { opacity: 0; transform: translate3d(50px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fromLeft {
  from { opacity: 0; transform: translate3d(-50px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fromBottom {
  from { opacity: 0; transform: translate3d(0, 50px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fromCenter {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}


/* Versão mais curta e moderna (funciona igual) */
.anime-rotate-inverted {
  animation: rotate-inverted 60s linear infinite;
}

@keyframes rotate-inverted {
  to {
    transform: rotate(-1turn);   /* 1 volta completa = 360° */
  }
}

.anime-rotate {
  animation: rotate 60s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(1turn);   /* 1 volta completa = 360° */
  }
}



/* MEDIA QUERYS */
@media (min-width: 1536px) {
  .rotate-5 {
    transform: rotate(-5deg);
  }
  .rotate-10 {
    transform: rotate(-10deg);
  }
}

@media (min-width: 1280px) {
  .rotate-5 {
    transform: rotate(-5deg);
  }
  .rotate-10 {
    transform: rotate(-10deg);
  }
}

@media (min-width: 1024px) and (max-width: 1279px){
  .rotate-5 {
    transform: rotate(-5deg);
  }
  .rotate-10 {
    transform: rotate(-10deg);
  }
}

@media (max-width: 1023px) {
  .logo-header {
    width: 88px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
	.checkbtn {
		display: flex;
	}
	ul{
		position: fixed;
		width: 100%;
		height: 100vh;
		background: var(--primary);
		top: 76px;
		left: -100%;
		text-align: center;
		transition: all .5s;
	}
	nav ul li{
		display: block;
	}
  nav ul li a {
    font-family: O;
    color: var(--blue-dark);
  }
	#check:checked ~ ul {
		left: 0;
	}

  .img-light {
    width: 200px;
    height: auto;
  }
  .img-statue-blowing-bubblegum-bubble {
    width: 230px;
    height: auto;
  }
  .img-maps {
    width: 450px;
    height: auto;
  }
  .img-statue-glasses {
    width: 350px;
    height: auto;
    flex-shrink: 1;
    margin-right: 20px;
  }
  .img-star {
    width: 350px;
    height: auto;
  }
  .rotate-5 {
    transform: rotate(-5deg);
  }
  .rotate-10 {
    transform: rotate(-10deg);
  }
}

@media (max-width: 767px) {
  .img-light {
    width: 200px;
    height: auto;
  }
  .img-statue-blowing-bubblegum-bubble {
    width: 230px;
    height: auto;
  }
  .img-maps {
    width: 450px;
    height: auto;
  }
  .img-statue-glasses {
    width: 300px;
    height: auto;
    flex-shrink: 1;
    margin-right: 20px;
  }
  .img-star {
    width: 350px;
    height: auto;
  }
  .rotate-5 {
    transform: rotate(-5deg);
  }
  .rotate-10 {
    transform: rotate(-10deg);
  }
}

@media (max-width: 639px) {
  .img-light {
    width: 150px;
    height: auto;
  }
  .img-statue-blowing-bubblegum-bubble {
    width: 300px;
    height: auto;
  }
  .img-maps {
    width: 310px;
    height: auto;
  }
  .img-statue-glasses {
    width: 400px;
    height: auto;
    flex-shrink: 1;
    margin-right: 20px;
  }
  .rotate-5 {
    transform: rotate(-5deg);
  }
  .rotate-10 {
    transform: rotate(-10deg);
  }
}

@media (max-width: 638px) {
  .img-light {
    width: 150px;
    height: auto;
  }
  .img-statue-blowing-bubblegum-bubble {
    width: 220px;
    height: auto;
  }
  .img-maps {
    width: 310px;
    height: auto;
  }
  .img-statue-glasses {
    width: 280px;
    height: 280px;
    flex-shrink: 1;
    margin-right: 20px;
  }
  .img-star {
    width: 300px;
    height: auto;
  }
  .rotate-5 {
    transform: rotate(-5deg);
  }
  .rotate-10 {
    transform: rotate(-10deg);
  }
}

@media (max-width: 500px) {
  .img-light {
    width: 150px;
    height: auto;
  }
  .img-statue-blowing-bubblegum-bubble {
    width: 145px;
    height: auto;
  }
  .img-maps {
    width: 200px;
    height: auto;
  }
  .img-statue-glasses {
    width: 190px;
    height: 190px;
    flex-shrink: 1;
    margin-right: 20px;
  }
  .img-star {
    width: 300px;
    height: auto;
  }
  .rotate-5 {
    transform: rotate(-5deg);
  }
  .rotate-10 {
    transform: rotate(-10deg);
  }
}