@font-face {
        font-family: 'Poppins-Bold';
        src: url('https://www.grapphy.com//wp-content/themes/abletone/assets/fonts/Poppins-Bold.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
    } 
    @font-face {
        font-family: 'Poppins-ExtraBold';
        src: url('https://www.grapphy.com//wp-content/themes/abletone/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
    } 
    @font-face {
        font-family: 'Poppins-Light';
        src: url('https://www.grapphy.com//wp-content/themes/abletone/assets/fonts/Poppins-Light.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
    } @font-face {
        font-family: 'Poppins-Medium';
        src: url('https://www.grapphy.com//wp-content/themes/abletone/assets/fonts/Poppins-Medium.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
    } 
    @font-face {
        font-family: 'Poppins-Regular';
        src: url('https://www.grapphy.com//wp-content/themes/abletone/assets/fonts/Poppins-Regular.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
    }
    button,
    input,
    select,
    label,
    textarea, a,
    p, h1, h2,h3, h4, h5, div, span {
       font-family: 'Poppins-Regular';
    }

    body {
      margin: 0;
      background: #EDEDED;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Poppins', sans-serif !important;
      flex-direction: column;
     
    }
    .fullcontent {
      width: 100%;
      height: 450vh;
      display: flex;
      flex-direction: column;
    }
    .wrapper{
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100%;
    }
    .site{
        width: 100%;
    }
    .site-header {
        background-color: #ededed;
        z-index: 1000;
    }
    #primary-search-wrapper{
        display: none !important;
    }
    .menu-toggle-wrapper {
        padding: 24px 24px !important;
    }
    .menu-label {
        display: none !important;
    }
    
    .secOne{
        z-index: 1;
        width: 100%;
        height: 100vh;
        background-color: #EDEDED;
    }
    .secTwo{
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100vh;
        background-color: #EDEDED;
        display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }
    .spacer {
            height: 150vh;
            background-color: transparent;
        }    
    .secThree{
        display: flex;
        flex-direction: column;
        z-index: 1;
        width: 100%;
        height: 100vh;
        background: linear-gradient(0deg, rgba(237,237,237,1) 81%, rgba(255,255,255,0) 91%);
    } 
    .secFour{
        display: flex;
        flex-direction: row;
        z-index: 1;
        width: 100%;
        height: 100vh;
        background-color: #EDEDED;
        padding: 5rem 10rem;
    } 
    .fourTextBox{
        width: 40%;
        height: 80vh;
        padding-top: 60px;
        color: #4B369D;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        line-height: 50px;
    }
    .fourTextBoxPr1{
        font-size: 50px;
        font-family: 'Poppins-ExtraBold';
    }
    .fourTextBoxPr2{
        width: 140%;
        font-size: 48px;
        background-color: #ededed;
        z-index: 2;
        padding: 5px;
    }
    .fourTextBoxPr3{
        line-height: 1.3em;
        font-size: 20px;
    }
    .fourImgBox{
        width: 25%;
        height: 80vh;
        display: flex;
    }
    .fourImgBoxGif{
        
    }
    .fourLinkBox{
        width: 30%;
        height: 80vh;
        color: #FF007F;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .fourLinkBoxPr1{
        font-family: 'Poppins-Bold';
        font-size: 1.5rem;
    }
    .fourLinkBoxPr2{
        font-family: 'Poppins-Medium';
    }
    .fourLinkBoxPr3{
        background-color: #ff007f;
        color: white;
        border-radius: 1em;
        padding: 3px;
        text-decoration: none;
        width: 200px;
        text-align: center;
        font-family: 'Poppins-Bold';
    }
    .forward_wrapper {
      width: 80%; /* Ajuste solicitado */
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
    }

    .logo-container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo {
      z-index: 2;
      opacity: 0; /* Oculto al inicio */
      position: absolute;
     /* width: 80%;  Ajuste solicitado */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .side-img {
      position: absolute;
      /* width: 50%;  Ajuste solicitado */
      opacity: 0; /* Oculto al inicio */
      transition: opacity 1s, transform 1s;
    }
    .keyword-containerOut{
        margin: 100px;
     }
    .keywordText{
        
    }
    .keywordPg1, .keywordPg3{
        color: #4B369D;
        font-size: 36px;
        font-family: 'Poppins-Light';
    }
    .keywordPg2{
        color: #4B369D;
        font-weight: 700;
        font-size: 36px;
        font-family: 'Poppins-Bold';
    }
    .keyword-container {
      position: absolute;
      top: 12%;
      left: 5%;
      font-size: 2.5rem;
      font-weight: bold;
      color: #FF007F;
      overflow: hidden;
      width: 30%;
      height: 50px;
      display: flex;
      align-items: center;
    }

    .keyword {
      position: absolute;
      opacity: 0;
      transform: translateY(100%);
      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }
    
    .text-carousel0 {
      height: 4rem;
      overflow: hidden;
      position: relative;
      border: 1px solid red; /* Para debug */
    }
    .carousel-inner0 {
      position: absolute;
      width: 100%;
      animation: carousel-scroll 4s infinite;
    }
    .carousel-item0 {
      font-size: 3rem;
      font-weight: bold;
      color: #FF007F;
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @keyframes carousel-scroll {
      0% { transform: translateY(0); }
      50% { transform: translateY(-50%); }
      100% { transform: translateY(-100%); }
    }
    .scroll-icon{
        position: absolute;
        top: 17%;
        left: 50%;
    }
    .scroll-icon-img{
        width: 60%;
    }  
    
    
.interactive-section {
  display: flex;
  width: 100%;
  height: 85vh;
}
.bottomBaner{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none;
    z-index: 1000;
    transition: opacity 1s ease;
}
.bottomBanerIn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10vh;
    background-color: #f6f6f6;
}

.socialIcon{
    height: 6vh;
}
.inst, .linked, .behance{
    width: 30%;
}



.menu-panel {
    position: fixed;
    top: 30%;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.menu-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #4B369D;
    color: white;
    width: 50px;
    height: 50px;
    margin: 5px 0;
    border-radius: 0 25px 25px 0;
    transition: width 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    padding: 0 10px;
}

.menu-option:hover {
    width: 160px;
    padding-right: 20px;
}

.menu-option i {
    font-size: 20px;
    margin-right: 10px;
    min-width: 20px;
}

.menu-label {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.menu-option:hover .menu-label {
    opacity: 1;
}




.b1 {color: #fd007e;
     background-image: url("https://www.grapphy.com//wp-content/uploads/2025/04/ICONO_GRAFICA@2x.png");
     background-position: 10%;
    background-repeat: no-repeat;
    background-size: 10%;
}
.b1.active{
    background-color: #fd007e;
    color: #F6F6F6;    
}
.b2{color: #3cd3c4;
    background-image: url("https://www.grapphy.com//wp-content/uploads/2025/04/ICONO_DESARROLLO @2x.png");
     background-position: 10%;
    background-repeat: no-repeat;
    background-size: 10%;
}
.b2.active{
    background-color: #3cd3c4;
    color: #F6F6F6;    
}
.b3{color: #f7cf17;
    background-image: url("https://www.grapphy.com//wp-content/uploads/2025/04/ICONO_MULTIMEDIA@2x.png");
     background-position: 10%;
    background-repeat: no-repeat;
    background-size: 10%;
}
.b3.active{
    background-color: #f7cf17;
    color: #F6F6F6;    
}

.menu-option:hover {
  background-color: #bbb;
}

.content-display {
  width: 85%;
  transition: background-color 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-display.grafica {
  
}

.content-display.desarrollo {
  
}

.content-display.multimedia {
 
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2em;
  width: 100%;
  height: 100%;
  padding: 50px;
  box-sizing: border-box;
}

.box {
  background-color: #F6F6F6;
}

/* Div 1 */
.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* Div 2 y 6 unidos verticalmente */
.box2-6 {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

/* Div 3 y 4 unidos horizontalmente */
.box3-4 {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

/* Div 5 */
.box5 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

/* Div 7 */
.box7 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

/* Div 8 */
.box8 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}


/* Estilos para la sección "desarrollo" */
.content-display.desarrollo .box1-5 {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.content-display.desarrollo .box2 {
  grid-column: 2;
  grid-row: 1;
}

.content-display.desarrollo .box3-4 {
  grid-column: 3 / span 2;
  grid-row: 1;
}

.content-display.desarrollo .box6-7 {
  grid-column: 2 / span 2;
  grid-row: 2;
}

.content-display.desarrollo .box8 {
  grid-column: 4;
  grid-row: 2;
}

/* Multimedia - Estilo específico para unión de box7 y box8 */
.multimedia .box7-8 {
  grid-column: 3 / 5;
  grid-row: 2 / 2;
}

.prgbox{
    color: #878787;
    font-size: 23px;
    padding: 20px;
    font-family: 'Poppins-Light';
}
.angulo1, .angulo2{
    width: 50%;
    position: relative;
    top: 5%;
    left: -7%;
}
.angulo3{
    width: 25%;
    position: relative;
    top: 5%;
    left: -7%;
}