/* @import url(''); */
a {text-decoration: none;color: inherit;}
img {max-width: 100%;height: auto;display: block;}
ul {list-style: none;}

header {background-color: #fff;position: fixed;top: 0;z-index: 100000;box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);width: 100%;}

header::before{content:"";position: absolute;filter: blur(0.5rem);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);background-color: rgb(229, 233, 255);}
.header-container{margin: 0 auto;width: 80%;display: flex;align-items: center;justify-content: space-between;padding:12px 0;}
#logo img {max-width: 100px;height: auto;}

nav {display: flex;flex-direction: row;gap: 20px;padding: 8px 0;}
.btn-menu {display: flex;align-items: center;justify-content: center;text-decoration: none;text-align: center;padding: 4px 12px;border-radius: 12px;font-size: 17px;font-weight: 700;cursor: pointer;border: 2px solid #fff;transition: all 0.4s ease-in-out;width: 120px;}
.active{background-color: #F09225;left:0;}
.btn-menu span{font-size: 16px;margin-right:4px;}

.btn-menu:not(#avixID) {background-color: #0779B8;color: #ffffff;}
.btn-menu:not(#avixID):hover {background-color: #7F1826;border-color: #7F1826;color: #ffffff;}
#avixID {background-color: #E60023;color: #ffffff;border-color: #ffffff;}
#avixID:hover {background-color: #ffffff;color: #E60023;border-color: #E60023;}
.btn-menu.active {color:#ffffff;width:80px;background-color:#F09225;}
@media screen and (max-width: 480px) {
    .header{padding-top:14px;width:100%;}
    .logo {margin-left:15px; }
    .btn {font-size: 0.8rem;padding: 5px 10px; }
    .btn-avix{width:70px;
    }.btn-menu{width:100px;color: #fff;}
    .btn-menu.active{color: #fff;}
    .buttons {margin-right: 0;}
}





main{width: 100%;max-width: 1400px;display: flex;flex-direction: column;justify-content: center;gap:28px;align-items: center;line-height: 1.7;color: var(--dark)}

.hero {border-radius: 20px; background: radial-gradient(var(--primary), var(--primary-dark)); color: #fff; padding: 20px; display: flex; flex-direction: row; overflow: hidden; justify-content: center; align-items: center; box-shadow: inset 0 8px 40px 0 rgba(85, 85, 85, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.4s ease-in-out; gap: 80px; position: relative; }
.hero:hover{box-shadow: inset 0 8px 40px 0 rgba(163, 163, 163, 0.425);}

.hero::before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 30px;background-color:var(--accent);border-top-right-radius: 4px;z-index: -1;opacity: 0;transform: scaleX(0);transform-origin: left;transition: transform 0.7s ease-out, opacity 0.7s ease-in-out;pointer-events: none;}
.hero:hover::before {opacity: 1;transform: scaleX(1);}

.hero div{width: 60%;}
.hero div h2{text-align: left;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 38px;font-weight: 900;cursor: pointer;text-transform: uppercase;line-height: 1.5;}
.hero div p span {padding: 3px 4px;background-color: var(--accent);border-radius: 4px;cursor: pointer;text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.336);}
.hero div h2:hover::before {transform: scaleX(1.2);}

.hero img {background-color: var(--secondary);padding: 4px;border-radius: 28px;cursor: pointer;width:15%;transform: translateY(80px);transition: all 0.4s ease-in-out;}
.hero  img:hover{transform: translateY(50px);}

.destacados{width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;gap:28px;}
.infoCards {position: relative;z-index: 1;width: 100%;height: 180px;padding: 20px;border-radius: 20px;overflow: hidden;display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;color: var(--secondary-dark);background-color: #eaf4fa;box-shadow: inset 0 8px 40px rgba(247, 208, 208, 0.425);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);cursor:pointer;transition: all 0.4s ease-in-out;}
.infoCards::before {content: "";position: absolute;inset: 0;z-index: -1;opacity: 0.5;filter: grayscale(20%) blur(3px);mix-blend-mode: multiply;transition: all 0.4s ease-in-out;background-position: center center;background-size: cover;background-repeat: no-repeat;}
#cardControl::before {background-image: url('images/gallinas.webp');background-position: center bottom;}
#cardSoftware::before {background-image: url('images/cerditos.webp');}
#cardControl:hover::before,
#cardSoftware:hover::before {filter: grayscale(5%) blur(1px);box-shadow: inset 0 0 24px 12px #b6e4ff91;}
.infoCards > * {position: relative;z-index: 3;}
.infoCards h3{font-weight:700;background-color:var(--secondary);color:#fff;border-radius: 8px;padding: 4px;font-size: 18px;text-transform:uppercase;letter-spacing: 1.2px;}
.infoCards div {text-align: left;display: flex;flex-direction: row;}


.line-line{width: 100%;height: auto;background: linear-gradient(to bottom,var(--primary), var(--primary-dark));align-items: center;padding: 14px 0;cursor: default;}
.line-line h4{margin: 0;color:#fff;font-size: 32px;align-self: center;white-space: nowrap;animation: moverTexto 36s linear infinite;font-weight: 800;text-transform: uppercase;}
@keyframes moverTexto {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}}

.bento-glass {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 40px;
}

.bento-card {
position: relative;
padding: 20px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.356);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease;
}

.bento-card:hover {
transform: translateY(-6px);
}

.bento-card h2 {
font-size: 20px;
/* margin-bottom: 10px; */
/* background: linear-gradient(20deg, var(--primary),var(--primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}

.bento-card p {
font-size: 0.95rem;
line-height: 1.4rem;
color: #333;
}

/* Variantes de tamaño */
.bento-card.wide {
grid-column: span 2;
}

.bento-card.tall {
grid-row: span 3;
}
.bento-card.dual {
grid-column: span 2;
grid-row: span 2;

}






  /* svg { background: white; } */

  /* Movimiento del celular con ondas */
  #phone {
    animation: movePhone 6s ease-in-out infinite;
  }

  /* Ondas siempre pegadas al celular */
  .wave {
    animation: waveAnim 1s ease-in-out infinite;
  }
  .wave:nth-of-type(1) { animation-delay: 1s; }
  .wave:nth-of-type(2) { animation-delay: 1.5s; }

  /* Keyframes */
  @keyframes movePhone {
    0%   { transform: translateX(0); }
    30%  { transform: translateX(250px); }
    60%  { transform: translateX(250px); }
    100% { transform: translateX(0); }
  }

  @keyframes waveAnim {
    0%,20% { stroke-dashoffset: 100; opacity: 0; }
    30%,50% { stroke-dashoffset: 0; opacity: 1; }
    60%,100% { opacity: 0; }
  }














.ecosystem-container{display: grid;grid-template-columns: repeat(4, 1fr);gap: 28px;margin: auto;padding:12px 0;transition: transform 0.3s ease-in-out;}
@media (max-width: 1000px) {.ecosystem-container {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 500px) {.ecosystem-container {grid-template-columns: 1fr;}}
.ecosystem-card {background: #ffffff;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);padding: 20px;text-align: left;transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out, opacity 0.3s ease-in-out;}
.ecosystem-card:nth-child(-n+4) {transform: translateX(-20px);}
.ecosystem-card:nth-child(n+5) {transform: translateX(20px);}
.ecosystem-container:hover .ecosystem-card {transform: translateX(0);}
.ecosystem-card:hover {cursor: pointer;transform: scale(1.5);z-index: 200;opacity: 1;}
.ecosystem-container:hover .ecosystem-card:not(:hover) {opacity: 0.4;}
.ecosystem-card img {width: 80px;margin-bottom: 0;}
.ecosystem-card h3 {font-size: 20px;font-weight: 900;color: #b3261e;}
.ecosystem-card p {color: var(--gray);text-align: left;font-weight: 400;font-size: 15px;}
.highlight {background-color: #0779B8;color: white;padding: 2px 6px;border-radius: 4px;}
.highlight:hover {background-color: #F09225;}
.ecosystem-card a {display: inline-block;color: #F09225;font-weight: bold;text-decoration: none;}
.ecosystem-card a:hover {text-decoration: underline;}




    .float-section {position: relative;width: 100%;height: 70vh;display: flex;justify-content: center;align-items: center;text-align: center;/* padding: 12px 0; */}
    .float-section div {z-index: 2;}

    .float-subtitle {
      font-size: 16px;
      margin-bottom: 0.8rem;
      color: #808080e8;
    }

    .float-title {
      font-size: 60px;
      font-weight: bold;
      line-height: 1.3;
      /* text-transform: uppercase; */
      color:var(--primary-dark);
      /* text-decoration:line-through 2px #055A8C; */
      /* text-shadow: 4px 12px 12px #fff, 0 2px 0 #fff, 0 0 8px #b3261e6b, 0 0 2px #fff; */
      /* color: #7f1826; */
      /* text-align: left; */
    }

    .float-logo {
      position: absolute;
      width: 100%;
      max-width: 180px;
      height: auto;
      object-fit: contain;
      opacity: 0.9;
      z-index: 1;
      filter: grayscale(0.9);
    }

    @keyframes floatDynamic {
      0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
      25%  { transform: translate(20px, -15px) rotate(6deg) scale(1.05); }
      50%  { transform: translate(-15px, 20px) rotate(-4deg) scale(0.98); }
      75%  { transform: translate(10px, 10px) rotate(3deg) scale(1.03); }
      100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    }


    /* Variaciones para cada logo */
    .float-1 {top:5%; left: 20%; animation: floatDynamic 12s ease-in-out infinite; }
    .float-2 {top: 25%; right: 15%; animation: floatDynamic 15s ease-in-out infinite; animation-delay: 2s; }
    .float-3 {bottom: 20%; left: 10%; animation: floatDynamic 18s ease-in-out infinite; animation-delay: 1s; }
    .float-4 {bottom: 10%; right: 15%; animation: floatDynamic 14s ease-in-out infinite; animation-delay: 3s; }
    /* .float-5 { top: 5%; right: 40%; animation: floatDynamic 16s ease-in-out infinite; animation-delay: 4s; } */











.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
    flex-direction: column;
    justify-content: space-between;
    height: 24px;
    width: 32px;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--dark);
    transition: all 0.3s ease;
}





  footer{background-color:var(--primary-dark);color:#fff;width:100%}.footer-container{max-width:1200px;margin:0 auto;padding:2rem;display:flex;flex-direction:column;/*gap:2rem*/}.footer-title{font-size:1.5rem;margin-bottom:1rem;text-align:center}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}.footer-links h3,.footer-contact h3{font-size:1.1rem;margin-bottom:1rem;color:#fff}.footer-links ul,.footer-contact ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.footer-links a,.footer-contact a{text-decoration:none;color:#fff;opacity:.8;transition:opacity .3s,color .3s}.footer-links a:hover,.footer-contact a:hover{opacity:1;color:#5eead4}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1rem 2rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}.footer-legal{display:flex;gap:1.5rem;flex-wrap:wrap}.footer-legal a{font-size:.9rem;color:#fff;opacity:.7;transition:opacity .3s}.footer-legal a:hover{opacity:1}@media (min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between;text-align:left}}