:root {
    --background: #fff;
    --black: #000000;
    --grey: #707070;

    --green: #58DF84;
    --blue: #537DFF;
    --pink: #AF0355;
    --red: #FF391E;
    --brown: #CFA56E;
    --brightGreen: #C2FF35;

    --margin: 40px;
    --gutter: 20px;
    --columns: 12;
}

* {
    margin: 0;
    padding: 0;
}


body {
    background-color: var(--background);
    font-family: 'Sul-Sans-Light';
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap20px);
}

.span-1 {
    grid-column: span 1;
}

.span-2 {
    grid-column: span 2;
}

.span-3 {
    grid-column: span 3;
}

.span-4 {
    grid-column: span 4;
}

.span-5 {
    grid-column: span 5;
}

.span-6 {
    grid-column: span 6;
}

.span-7 {
    grid-column: span 7;
}

.span-8 {
    grid-column: span 8;
}

.span-9 {
    grid-column: span 9;
}

.span-10 {
    grid-column: span 10;
}

.span-11 {
    grid-column: span 11;
}

.span-12 {
    grid-column: span 12;
}

/*font*/
@font-face {
    font-family: "Sul-Sans-Bold";
    src: url("../fonts/Sul_Sans_Bold.otf") format("opentype");
}

@font-face {
    font-family: "Sul-Sans-Light";
    src: url("../fonts/Sul_Sans_Light.otf") format("opentype");
}

strong {
    font-family: 'Sul-Sans-Bold';
}

h1{
    font-size: 260px;
    line-height: auto;
}

h2{
    font-size: 65px;
    line-height: auto;
}

p{
    font-size: 20px;
    line-height: auto;
}



/*header*/
header {
    padding: calc(var(--margin) / 2) var(--margin);
    border-bottom: 1px solid var(--grey);
}

#header-logo {
    height: 25px;
    width: auto;
}

/*footer*/
footer{
    padding: var(--margin) var(--margin) calc(var(--margin) / 2) var(--margin);
}

.footer-links{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.footer-links a{
    color: var(--black);
    text-decoration: none;
}

.footer-links a:hover{
    text-decoration: underline;
}

.footer-logo{
    width: 125px;
}


/*landing page*/
.landing{
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
.landing-row{
    display: grid;
    grid-template-columns: repeat(40, 1fr);
    column-gap: 0;
    height: calc((100vh - 65px) / 3);
}

.landing-column{
    display: flex;
    flex-direction: column;
    gap:0;
    width: calc(100% / 40);
}

.landing-column-bot {
    transform: translateY(calc(1 * (100vh - 65px) / 6));
}

.landing-column-top {
    transform: translateY(calc(-1 * (100vh - 65px) / 6));
}



.landing-text{
    position: absolute;
    width: 100%;
}

.landing-column .rect {
    height: calc( (100vh - 65px) / 3);
}

.rect-green {
    grid-column: span 1;
    background-color: var(--green);
}

.rect-blue{
    grid-column: span 1;
    background-color: var(--blue);
}

.rect-pink{
    grid-column: span 1;
    background-color: var(--pink);
}

.rect-red{
    grid-column: span 1;
    background-color: var(--red);
}

.rect-brown{
    grid-column: span 1;
    background-color: var(--brown);
}

.rect-brightGreen{
    grid-column: span 1;
    background-color: var(--brightGreen);
}

.landing-text-1{
    grid-column: 2 / span 13;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-text-1 img{
    width: 80%;
}

.landing-text-2{
    grid-column: 25 / span 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-text-2 img{
    width: 80%;
}

.landing-text-3{
    grid-column: 11 / span 14;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-text-3 img{
    width: 80%;
}

  .landing-desktop{
    display: flex;
  }

  .landing-mobile{
    display: none;
  }

    .landing-text-desktop{
    display: block;
  }

  .landing-text-mobile{
    display: none;
  }

  .rect {
    position: relative;
    overflow: hidden; /* garante que o inner nunca sai da barra */
}

.rect-inner {
    width: 100%;
    height: 100%;
    transform-origin: bottom; /* cresce para cima */
    background: inherit; /* herda a cor da rect */
}



@media (max-width: 768px) {

    p {
    font-size: 18px;
    line-height: auto;
}

.footer-logo {
    width: 100px;
}

    .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--gap20px);
}

.span-m-1 {
    grid-column: span 1;
}

.span-m-2 {
    grid-column: span 2;
}

.span-m-3 {
    grid-column: span 3;
}

.span-m-4 {
    grid-column: span 4;
}

.span-m-5 {
    grid-column: span 5;
}

.span-m-6 {
    grid-column: span 6;
}


/*header*/
    header {
    padding: calc(var(--margin) / 2) calc(var(--margin) / 2);
    border-bottom: 1px solid var(--grey);
}

#header-logo {
    height: 20px;
    width: auto;
}

/*index*/
  .landing-text-desktop{
    display: none;
  }

  .landing-text-mobile{
    display: block;
  }

    .landing-desktop{
    display: none;
  }

  .landing-mobile{
    display: flex;
  }


  .landing-row {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    column-gap: 0;
    height: calc((100vh - 65px) / 5);
}

.landing-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: calc(100% / 20);
}

.landing-text-1{
    grid-column: 3 / span 12;
}

.landing-text-2{
    grid-column: 12 / span 7;
}

.landing-text-3{
    grid-column: 2 / span 15;
}

.landing-column .rect {
    height: calc((100vh - 65px) / 5);
}

.landing-column-bot {
    transform: translateY(calc(1 * (100vh - 65px) / 10));
}

.landing-column-top {
    transform: translateY(calc(-1 * (100vh - 65px) / 10));
}

.landing-text-3 img {
    width: 70%;
}


/*footer*/
footer {
    padding:calc(var(--margin)) calc(var(--margin) / 2) calc(var(--margin) / 2) calc(var(--margin) / 2);
}

.footer-links {
    margin-top: calc(var(--margin) / 2);
    gap: 10px;
    justify-content: flex-start;
}

}