@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
    list-style: none;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
}

:root {
    --text-color: #000000;
    --main-color: #83B735;
}

section{ padding: 50px 10%; }


body {
  background-color: var(--color-neutral-900);
  color: var(--color-light);
  font-size: var(--size-font);
  margin: 0;
  padding: 0;
}

/*Seccion 1 Navegador*/

 header {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 100px;
    background: #EDECEA;
    max-width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 18px 100px;
    background: #EDECEA;
 }

 .logo { font-size: 1.2rem; font-weight: 600; color: var(--text-color); white-space: nowrap;}
    .logo span { font-size:0.9rem; color: var(--main-color); }

 .navbar { position: relative; display: flex; list-style: none; gap: 20px;}
    .navbar a { font-size: 1rem; padding: 10px 20px; font-weight: 600; color: var(--text-color); transition: all .5s ease; }
        .navbar a:hover { color: var(--main-color); }
        .navbar a.special-link {
          color: white; /* Color del texto */
          background-color: #8FC53D; /* Color de fondo */
          padding: 10px 20px; /* Espaciado interno */
          border: 1px solid green;
          border-radius: 5px; /* Bordes redondeados */
          text-decoration: none; /* Quitar el subrayado */
          font-weight: bold; /* Texto en negrita */
          transition: background 0.3s ease; /* Efecto de transición */
          white-space: nowrap;
      }

      .navbar li {
        position: relative;
    }      
      .navbar a.special-link:hover {
          background-color: white; /* Color al pasar el mouse */
          color:#8FC53D;
      }
                
 #menu-icon { font-size: 2rem; cursor: pointer; display: none; }


/* Ocultar la sublista por defecto */
.submenu {
  display: none;
  position: fixed;
    top: 65px;
    left: 0;
  background: white;
  list-style: none;
  padding:  10px;
    width: 220px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  
}

.submenu.show {
  display: block; 
}

.dropdown:hover > a {
  color: green;
}

/* Estilo de los enlaces dentro del submenú */
.submenu li {
  position: relative;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.submenu li a {
  text-decoration: none;
    color: black;
    display: flex;
    padding: 8px 15px;
    transition: background 0.3s, color 0.3s;
    border-radius: 5px;
}

.submenu .desc {
  display: none;
    position:absolute;
    left: 110%; /* Posiciona la descripción fuera del submenú, a la derecha */
    top: 0;
    width: 200px; /* Ajusta el ancho según necesites */
    height: 200px;
    background: #f8f8f8;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    color: #333;
    white-space: normal;
}


.submenu li:hover .desc {
  display: block;
}
/* Efecto al pasar el mouse sobre los ítems del submenú */
.submenu li:hover {
  background: white;
}

.submenu li a:hover {
  background-color: #ddd;
  color: green;
}


 /*MEDIA QUERIES*/




@media (max-width: 816px) {
  header { padding: 11px 4%; }
  #menu-icon { display: initial; }

  .header, .navbar {
      position: absolute;
      top: -500px;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
      box-shadow: 0 4px 4px rgb(0, 0, 0 / 100%);
      transition: .2s ease;
      text-align: center;
  }

  /*.navbar a { padding: 1.5rem; display: block; }
      .navbar a:hover { color: #FFFFFF; background: var(--main-color); }
  .navbar.active { top: 100%; }

  .about { grid-template-columns: 1fr; text-align: center; }
  .about-img { padding-top: 1rem; }*/
}

/*Seccion 1 finaliza*/

/*Seccion 2 Home*/
 .home {
    width: 100%;
    min-height: 40vh;
    background-image: url(https://i.postimg.cc/gk0y86TL/Inicio1-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    }

 .home-text h1 { font-size: 50px; color: #EDECEA; padding: 60px 0px; line-height: 1.0 }
 .home-text p { font-size: 20px; margin: 300px 0 1.8rem; color: #EDECEA;}
 .home-text span { color: var(--main-color); }

 .btn {
    padding: 10px 14px;
    background: var(--main-color);
    color: #FFFFFF;
    border-radius: .3rem;
    font-size: 14px;
    transition: all .5s ease;}

    .btn:hover { background: #8FC53D; }

 .heading { text-align: center; }
    .heading span { font-size: 14px; font-weight: 500; color: var(--main-color); text-transform: uppercase; }

/*Seccion 2 finaliza*/

/*Seccion 3 CANVA Viewer*/
.xeokit{
  
  width: 100%;
  height: 600px;
}
Canvas{
    height: 100%;
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: 0px;
    background-color: transparent
  }

  #myNavCubeCanvas {
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: -267px;
    right: 150px;
    z-index: 200000;
    background-color: transparent;
    
  }

 
/*Seccion 3 finaliza*/


/*Seccion 4 Proximamente Nuevos Proyectos*/
/*Seccion 4 finaliza*/


/*Seccion 5 Nosotros*/

  @layer reset, base, utilities, components, layout, overrides;

  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
  
  @property --direction {
    syntax: '<number>';
    initial-value: 1;
    inherits: true;
  }
  
  @layer reset {
    *,
    ::before,
    ::after {
      box-sizing: border-box;
    }
  
    :where(:not(dialog)) {
      margin: 0;
    }
  
    :where(html) {
      -webkit-text-size-adjust: none;
  
      @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
      }
    }
  
    :where(body) {
      min-block-size: 100svb;
      -webkit-font-smoothing: antialiased;
    }
  }
  
  @layer base {
    html {
      --surface-1: oklch(20% 0.03 269);
      --surface-2: oklch(26% 0.04 269);
      --text-1: oklch(91% 0.03 61);
      --body: 400 1rem/1.5rem system-ui, sans-serif;
      --display: 400 3.562rem/4rem system-ui, sans-serif;
      --display-small: 400 2.25rem/2.75rem system-ui, sans-serif;
      --label: 500 0.875rem/1.25rem system-ui, sans-serif;
      --title: 400 1.375rem/1.75rem system-ui, sans-serif;
      color-scheme: dark;
    }
  
    body {
      background-color: var(--surface-1);
      color: var(--text-1);
      font: var(--body);
      color: white;
      overflow:scroll;
    }
  }
  
  @layer layout {
    .section {
      display: grid;
      max-inline-size: 100%;
      min-block-size: 100svb;
      overflow-x: clip;
      padding-block: 80px;
      place-items: center;
    }
  
    .section-wrapper {
      display: grid;
      place-items: center;
    }
 
    .hgroup {
      display: grid;
      place-items: center;
      gap: 8px;
      display: grid;
      place-items: center;
      gap: 16px;
      z-index: 2;
      /* lg-n-above */
      @media (width >=1024px) {
        /* Placing header and cards in the same grid cell to stack them */
        /* Both elements use grid-area: 1/1 to overlap within the same area */
        grid-area: 1/1;
        color: green;
      }
    }
  
    .headline {
      font: var(--display-small);
  
      /* lg-n-above */
      @media (width >=1200px) {
        font: var(--display);
      }
    }
  
    .section-link {
      color: var(--text-1);
      text-decoration: underline;
      font: var(--label);
  
      /* lg-n-below */
      @media (width < 1024px) {
        display: none;
      }
    }
  
    
    
    #card1 {
        --nth-child: 1;
    }
    #card2 {
        --nth-child: 2;
    }#card3 {
        --nth-child: 3;
    }#card4 {
        --nth-child: 4;
    }#card5 {
        --nth-child: 5;
    }#card6 {
        --nth-child: 6;
    }

    .cards {
      --nth-siblings: 5;
      list-style: none;
      padding: 0;
  
      /* lg-n-below */
      @media (width < 1024px) {
        display: grid;
        grid-auto-flow: column;
        gap: 32px;
        max-inline-size: 100%;
        overflow-x: scroll;
        padding-block: 32px;
        padding-inline: 32px;
      }
  
      /* lg-n-above */
      @media (width >=1024px) {
        --avatar-opacity: 1;
        --avatar-img-scale: 1;
        --tooltip-visibility: hidden;
        --tooltip-opacity: 0;
        --animation-state: running;
  
        display: grid;
        /* Placing header and cards in the same grid cell to stack them */
        /* Both elements use grid-area: 1/1 to overlap within the same area */
        grid-area: 1/1;
        min-block-size: 700px;
        place-items: center;
  
        &:has(.avatar-link-wrapper:is(:hover, :focus-visible, :active)) {
          --animation-state: paused;
          /* Reduces opacity of non-hovered avatars to create a layered effect */
          --avatar-opacity: 0.4;
        }
      }
    }
  
    .card {
      padding: 0;
  
      /* lg-n-above */
      @media (width >=1024px) {
        --radius: min(620px, 40cqi);
        --offset-per-child: calc(360deg / (var(--nth-siblings) + 1));
        --angle-offset: calc(var(--nth-child) * var(--offset-per-child));
        --inline-ratio: 1/1;
        /* Keeps the horizontal scaling unchanged */
        --block-ratio: 1/2;
        /* Reduces vertical scaling, making it an oval */
  
        /* Adjusts tooltip direction based on avatar position */
        /* Future improvement: Replace with the sign() CSS function when it becomes widely supported */
        /* Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/sign */
        --direction: min(max(calc(cos((var(--angle) + var(--angle-offset))) * -100), -1), 1);
  
        /* Stack all cards in the same grid cell */
        grid-area: 1/1;
  
        /* Based on Bramus' article, modified with inline/block ratios to create an oval shape */
        /* Source: https://web.dev/articles/css-trig-functions */
  
        translate: calc(cos((var(--angle) + var(--angle-offset))) * var(--radius) * var(--inline-ratio))
          calc(sin((var(--angle) + var(--angle-offset))) * var(--radius) * var(--block-ratio) * -1);
  
        animation: adjust-angle linear 40s infinite reverse var(--animation-state);
      }
    }
  
    /* Continuously rotates the avatars in a circular motion */
    @keyframes adjust-angle {
      to {
        --angle: 360deg;
      }
    }
  
    .avatar-link-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--text-1);
  
      &:is(:hover, :focus-visible, :active) {
        --avatar-img-scale: 1.1;
        --avatar-opacity: 1;
        --tooltip-opacity: 1;
        --tooltip-visibility: visible;
      }
  
      /* lg-n-below */
      @media (width < 1024px) {
        flex-direction: column;
        gap: 16px;
      }
    }
  
    .visual {
      aspect-ratio: 1;
      border-radius: 1rem;
      box-shadow: 0 2px 4px 0 oklch(0 0 0 / 10%);
      inline-size: 240px;
      opacity: var(--avatar-opacity);
      overflow: clip;
      transition: opacity 0.3s ease;
  
      /* lg-n-above */
      @media (width >=1024px) {
        inline-size: 144px;
        border-radius: 1e5px;
      }
    }
  
    .avatar-img {
      background-color: var(--surface-2);
      block-size: 100%;
      display: block;
      inline-size: 100%;
      object-fit: cover;
      scale: var(--avatar-img-scale, 1);
      transition: scale 0.3s ease;
    }
  
    .tooltiptext {
      display: grid;
      gap: 4px;
  
      /* lg-n-above */
      @media (width >=1024px) {
        position: absolute;
        /* Adjusts tooltip placement based on avatar position */
        /* Moves the tooltip to the left or right depending on the avatar's location */
        /* --direction is either 1 (right) or -1 (left) */
        max-inline-size: 20ch;
        opacity: var(--tooltip-opacity);
        transition-duration: 0.3s;
        transition-property: opacity, visibility;
        transition-timing-function: ease;
        translate: 110% 0;
        visibility: var(--tooltip-visibility);
        max-width: 100%;
  
        /* make the tooltips non-interactive */
        pointer-events: none;
        user-select: none;
  
        /* Adjusts text alignment based on avatar position */
        /* Ensures the tooltip text aligns properly when shifted left or right */
        @container style(--direction: --1) {
          text-align: end;
          translate: -110% 0;
        }
      }
    }
  
    .team-name {
      font: var(--title);
    }
  }

/*Seccion 5 Finaliza*/



/*Seccion 6 Grupo de Empresas*/

 .brands-container { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
 }

 .brands-container img { width: 100px; filter: grayscale(1); transition: all .5s ease; }
    .brands-container img:hover { width: 125px; filter: grayscale(0); }

/*Seccion 6 finaliza*/

/*Seccion 7 Suscribirse*/

 .newsletter { 
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('https://i.postimg.cc/Hk7P7KWY/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
 }

    .newsletter h2 { color: #FFFFFF; }

 .news-box { display: flex; align-items: center; margin-top: 2rem; }
    .news-box input { 
        width: 260px;
        height: 44px;
        border: none;
        outline: none;
        background: #FFFFFF;
        padding: 10px; 
    }

    .news-box .btn {
        height: 44px;
        padding: 11px;
        border-radius: 0;
        font-weight: 500;
        text-transform: uppercase;
    }
/*Seccion 7 finaliza*/


/*Seccion 8 Informacion*/

 .footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, auto)); gap: 1rem;}
 .footer-box h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
 .footer-box h3 { font-weight: 500; margin-bottom: 10px; }
 .footer-box span { color: var(--main-color); }
 .footer-box p { font-size: .938rem; margin-bottom: 10px; }
 .footer-box li a { color: var(--text-color); }
    .footer-box li a:hover { color: var(--main-color); }
 .social { display: flex; align-items: center; }
    .social a { font-size: 24px; margin-right: 10px; color: var(--text-color); }
        .social a:hover { color: var(--main-color); }
 .contact-info { display: flex; flex-direction: column; }
    .contact-info span { color: var(--text-color); }
 .copyright { padding: 20px; text-align: center; font-family: 'Turret Road';font-weight: bold; color: gray;}
    .copyright span { padding: 10px;color: gray;}

/*Seccion 8 finaliza*/