.container-1280{
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
}
/* Tipografía Inter */
  body {
    font-family: 'Inter', sans-serif;
  }
html { scroll-behavior: smooth; }

/* Que el scroll no quede tapado por el navbar fixed-top */
section[id]{
  scroll-margin-top: 96px; /* ajusta a la altura real de tu navbar (72–112px) */
}
  /* ===== NAVBAR ===== */
  .navbar {
    height: 65px;
    padding: 0 !important;
  }
  .navbar .container {
    height: 100%;
  }
  .navbar .navbar-brand img {
    height: 50px;   
    width: 77px;    
    display: block;
  }
  .navbar .nav-link {
    margin-left: 1rem;
    font-weight: 200;
    color: #00101d;
    transition: color 0.2s ease;
  }
  .navbar .nav-link:hover {
    color: #00baf9;
  }
  .btn-gradient {
    background: linear-gradient(90deg, #00baf9, #2A81FF);
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 110px;
    height: 35px;
    padding:  .3rem 1.2rem !important;
    font-weight: 200;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease;
    margin-bottom: 6rem;
  }
  .btn-gradient:hover {
    opacity: 0.9;
    color: #fff;
    text-decoration: none;
  }
  /* ===== HERO ===== */

  #hero {
    background: linear-gradient(120deg, #00baf9, #5d35d4);
    min-height: 767px;  
    display: flex;
    align-items: center; 
    padding: 3rem 0;
    color: #fff;
    overflow: hidden;
  }

  .text-white h1 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 6rem !important;
  }
  .text-white span {
    color: #00f1f9;
  }

  .btn-gradient {
    background: linear-gradient(90deg, #00f1f9, #00baf9);
    color: #fff !important;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    width: 147px;   
    height: 35px;   
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: 6rem;
  }
  .btn-gradient i {
    font-size: .95rem; 
    line-height: 1;
  }
  .footer-menu a{
  display:flex; align-items:center; gap:10px;
  color:#fff; text-decoration:none;
}
.footer-menu .menu-icon{
  width:18px; height:18px; object-fit:contain; 
  display:block;
}

  .stat-box{
    width: 141px;
    height: 95px;
    background: rgba(255, 255, 255, 0.2);
    width: 141px;
    height: 95px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 10px;
    padding: 0.8rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
  }
  .stat-box img {
    display: block;
    margin: auto 0.5rem;
  }
  .stat-box p {
    font-size: 1.5rem;
  }
  .stat-box span {
    font-size: 0.6rem;
    color: #fff;
  }

  .value--cyan   { color: #00f1f9; }
  .value--orange { color: #FF9f05; }
  .value--white  { color: #00c36a; }

  .hero-stack{
    position: relative;
    width: clamp(320px, 46vw, 580px);  
    aspect-ratio: 0.79;                
    overflow: visible;
  }

  .hero-stack .art{
    position: absolute;
    display: block;
    max-width: none;
    user-select: none;
    pointer-events: none;
  }

  .art-bg{
    left: 30%;
    width: 70%;              
    height: 70%;            
    z-index: 1;
    filter: drop-shadow(0 16px 40px rgba(0,0,0,0.12));
    margin-top: 9rem !important;
  }

  .art-top-square{
    height: 10% !important;
    width: 11% !important;
    right: 30%;
    z-index: 5;
    margin-top: 10.2rem !important;
  }

  .art-bottom-arrow{
    right: 5%;
    width: 14%;
    z-index: 3;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.18));
    bottom: 5.5rem !important;
  }

  .art-devices{
    left:  20%;
    bottom: 20%;
    width: 95%;
    height: auto;
    z-index: 5;
    filter: drop-shadow(0 24px 60px rgba(0,0,0,0.28));
  }

 /* ====== SECTORES ====== */

 .section-metrics{
  position: relative;
  background: white;
  padding-top: 5%;
  padding-bottom: 6%;
  min-height: 567px;
}

.section-metrics .sectors-grid{
  display: grid;
  gap: 24px;
  margin: 0; padding: 0;
  list-style: none;
  grid-template-columns: 1fr;              
}
.section-metrics .sectors-grid > li{
  display: flex;              
  justify-content: center;
}
.section-metrics .sectors-grid{
    grid-template-columns: repeat(5, 1fr);
  }

.metrics-title{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  justify-content: center; 
}

.title-pill{
  padding: 6px 16px !important;
  border-radius: 20px !important;
  color: #fff !important;
  font-size: 3rem !important;
  background: linear-gradient(180deg, #00101D, #0A0A0F) !important ;
  align-content: center !important;
}

.title-accent{
  background: linear-gradient(90deg, #00BAF9, #2A81FF);
  font-size: 6rem;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.title-pill,
.title-accent{
  display: inline-block;
}

.sectors-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2.2vw, 24px);
  grid-template-columns: 1fr;               
}

.section-metrics .c-card{
  width: 211px;
  height: 273px;
  padding: 24px;
  border-radius: 28px;
  background: #f6f7fb;
  border: 1px solid rgba(20,26,40,0.06);
  box-shadow: 0 6px 22px rgba(20, 26, 40, 0.06);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.section-metrics .c-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(20, 26, 40, 0.12);
  border-color: rgba(20,26,40,0.1);
}
.section-metrics .c-card__icon{
  width: clamp(72px, 8vw, 120px);
  height: clamp(72px, 8vw, 120px);
  margin-inline: auto;
  margin-bottom: 
  clamp(12px, 2vw, 20px);
  display: grid; 
  place-items: center;
}
.section-metrics .c-card__icon img{
  width: 100%; 
  height: 100%; 
  object-fit: contain;
  padding-top: 30%;
}

.c-card h3{
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  padding-top: 10%;
}

.c-card--gov{ background: color-mix(in srgb, #5D35D4 10%, white) !important; }
.c-card--gov h3{ color: #5B37F2 !important;  }

.c-card--ind{ background:  color-mix(in srgb, #FF9F05 10%, white) !important; }
.c-card--ind h3{ color: #FF9900; }

.c-card--serv{ background:  color-mix(in srgb, #00BAF9 10%, white) !important; }
.c-card--serv h3{ color: #00A9F2; }

.c-card--com{ background: color-mix(in srgb, #00C36A 10%, white) !important; }
.c-card--com h3{ color: #15B06E; }

.c-card--edu{ background:  color-mix(in srgb, #C3003E 10%, white) !important; }
.c-card--edu h3{ color: #C01743; }

.section-metrics > .container-1280{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 18px;
}
.section-metrics .metrics-title{ grid-row: 1; }
.section-metrics .metrics-cta{   grid-row: 2; justify-self: center; }
.section-metrics .sectors-grid{  grid-row: 3; }
.section-metrics #countriesGrid{ grid-row: 3; } /* ocupa el mismo lugar si lo usas */
.section-metrics #extraCards{    grid-row: 4; }

.metrics-cta{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin: 0 auto 6px;
}

.btn-chip{
  --pad-x:16px; --pad-y:10px;
  display:inline-flex; align-items:center; gap:8px;
  padding:var(--pad-y) var(--pad-x);
  border-radius:999px;
  background:#eef2f6;
  color:#00101d;
  text-decoration:none;
  font-weight:700;
  box-shadow:inset 0 0 0 1px #e5e7eb;
  transition:.2s ease;
}
.btn-chip__icon{ opacity:.55; transition:opacity .2s, transform .2s; }
.btn-chip:hover{ transform: translateY(-1px); }
.btn-chip:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(42,129,255,.2), inset 0 0 0 1px #2A81FF;
}

.btn-chip.is-active{
  color:#fff;
  background: linear-gradient(90deg, #00BAF9, #2A81FF);
  box-shadow: 0 12px 32px rgba(42,129,255,.28);
}
.btn-chip.is-active .btn-chip__icon{
  opacity:1; 
  transform: translateX(2px);
}

.btn-chip[aria-pressed="true"]:not(.is-active){
  box-shadow: inset 0 0 0 2px #2A81FF33;
}

.section-metrics .countries-grid{
  list-style: none;
  padding: 0;
  margin: 6px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 320px));
  justify-content: center;
  gap: 22px;
}

.section-metrics .flag-card{
  background:#fff;
  border:1px solid rgba(16,24,40,.08);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  padding:28px 24px;
  min-height:140px;
  display:flex; 
  flex-direction:column;
  align-items:center; 
  justify-content:center; 
  gap:12px;
  text-align:center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.section-metrics .flag-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(15,23,42,.12);
  border-color:rgba(16,24,40,.14);
}
.section-metrics .flag-card__icon{
  width:56px; height:56px; border-radius:12px;
  display:grid; place-items:center;
  font-size:28px;
  background:linear-gradient(135deg,#e9f0ff,#e7fbff);
  box-shadow:inset 0 0 0 1px #e6eefc;
}
.section-metrics .flag-card h3{
  margin:6px 0 0; font-weight:800; font-size:18px; color:#0A0A0F;
}

.section-metrics .extra-cards{
  display:grid; gap:20px;
  grid-template-columns:repeat(2, minmax(320px,1fr));
  max-width:980px;
  margin:18px auto 0;
}
.section-metrics .extra-card{
  background:#fff;
  border:1px solid rgba(16,24,40,.08);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
  padding:18px 20px;
  display:flex; 
  align-items:flex-start; 
  gap:12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
.section-metrics .extra-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  border-color: rgba(16,24,40,.14);
}
.section-metrics .extra-card__icon{
  width:46px; 
  height:46px; 
  border-radius:12px;
  display:grid; 
  place-items:center; 
  font-size:22px;
  background:linear-gradient(135deg,#e9f7ff,#eef1ff);
  box-shadow:inset 0 0 0 1px #e6eefc;
}
.section-metrics .extra-card h4{ 
  margin:2px 0 2px; 
  font:800 20px/1 Inter,system-ui; 
  color:#0A0A0F; 
}

.section-metrics .extra-card p{ 
  margin:0; 
  color:#667085; 
}

.section-metrics [hidden]{ display:none !important; }


/* ===== CLIENTES ===== */
.section-clients{
 background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(56,189,248,.35),
      rgba(99,102,241,.22) 60%,
      rgba(99,102,241,.10) 100%);
  position: relative;
}

.clients-title{
  display:flex; 
  justify-content:center; 
  text-align:center; 
}
.title{
  background: linear-gradient(90deg, #00BAF9, #2A81FF);
  font-size: 6rem;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-top: 4%;
}

.clients-title .title-pill::before{
  content:""; 
  display:inline-block; 
  vertical-align:middle; 
  margin-right:.5ch;
  width:0; height:0; 
}

.clients-carousel{ position: relative; }

.clients-carousel .track{
  --card-w: 260px;
  --card-h: 250px;
  --gap: 24px;
  --sidepad: 48px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  inline-size: min(100%, max-content);
  margin-inline: auto;
  scroll-padding: 0;
  scroll-padding-left:  calc(50% - (var(--card-w)/2) + var(--sidepad));
  scroll-padding-right: calc(50% - (var(--card-w)/2) + var(--sidepad));
  padding: 8px var(--sidepad);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--sidepad),#000 calc(100% - var(--sidepad)), transparent 100%);
}
.clients-carousel .track::-webkit-scrollbar{ height: 0; }

.client-card{
  height: var(--card-h);
  background: #fff;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  scroll-snap-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.client-card h3{
  margin: 12px 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: #101828;
}
.client-card:hover{ 
  transform: translateY(-2px); 
  box-shadow: 0 16px 40px rgba(0,0,0,.10); }

.logo-wrap{ 
  height: 120px; 
  width: 100%; 
  display:grid; 
  place-items:center; 
  margin-bottom: 12px; }
.logo-wrap img{ 
  max-width: 85%; 
  max-height: 100%; 
  object-fit: contain; }

.clients-carousel .nav{
  position: absolute; 
  top: 50%; 
  transform: 
  translateY(-50%);
  width: 44px; 
  height: 44px; 
  border-radius: 50%;
  border: 0; 
  background: #fff; 
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  display:grid; 
  place-items:center; 
  font-size: 26px; 
  cursor: pointer; 
  z-index: 2;
}
.clients-carousel .prev{ left: 6px; }
.clients-carousel .next{ right: 6px; }
.clients-carousel .nav:disabled{ opacity:.4; cursor: default; box-shadow:none; }

.clients-note{
  display: grid;
  grid-template-columns: 56px 1fr; 
  gap: 16px;
  align-items: start; 
  max-width: 600px; 
  margin: 28px auto 0;
  padding-bottom: 4%;
}
.clients-note .note-icon{
  width:66px; 
  height:76px; 
  border-radius:16px;
  background:  color-mix(in srgb, #00BAF9 10%, white) !important; 
  display:grid; 
  place-items:center;
}
.clients-note .note-icon img{ 
  width: 42px; 
  height: 42px; 
  object-fit: contain; 
}
.clients-note p{ 
  margin:0; 
  color:#101828; 
}
.clients-note strong{ 
  font-weight: 800; 
}


/* ===== ENFOQUE ===== */

.section-enfoque{
  background: linear-gradient(90deg, #00baf9, #5D35D4);
  color:#fff;
  min-height: 690px !important; 
  padding-block: clamp(40px, 7vw, 88px);
  padding-top: 4.5%;
}
.enfoque-wrap{
  display: grid;
  gap: clamp(18px, 4vw, 28px);
  grid-template-columns: 1.1fr .9fr; 
}
.enfoque-text h2{
  font-weight: 600;
  font-size: 7rem;
  line-height: 1.05;
  margin: 0 0 8px;
}
.enfoque-text h1 {
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.05;
  margin: 0 0 8px;
}
 .txt-grad{
  color: #00F1F9; 
}
.enfoque-text p{
  font-size: 1.1rem;
  padding: 2% 1%;
}
.enfoque-chips{
  list-style:none; 
  padding:0; 
  margin: 12px 0 0;
  display: grid; 
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);;
} 
.enfoque-chips .chip{
  display: flex;                 
  flex-direction: column;        
  align-items: center;           
  justify-content: center;       
  text-align: center;            
  gap: 14px;                    
  min-height: 180px;            
  padding: 20px 24px;
}
.chip{
  display:flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  padding: 12px 14px;
  backdrop-filter: blur(2px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.chip:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.chip img{ 
  width: 55px; 
  height: 55px; 
  object-fit: contain; 
}
.chip span{ 
  font-weight: 600; 
  font-size: 1.1rem;
  line-height: 1.2;
  }

  /* ===== SOLUCIONES ===== */

.section-soluciones{
  background: linear-gradient(90deg, #00baf9, #5D35D4);
  margin-top: -200px;
  color:#fff;
  position: relative;
  z-index: 2;
}
.section-soluciones .soluciones-top{ 
  padding-block: clamp(16px, 4vw, 40px)100px !important;
  text-align: center;
}

.section-soluciones .soluciones-title{
  font-weight: 800;
  font-size: 4rem;
  line-height: 1.02;
  margin: 0;
  color: #00F1F9;
}
.section-soluciones .soluciones-bottom{
  background:white;           
  padding-block: clamp(32px, 6vw, 64px);
}
.solutions-grid{
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
  grid-template-columns: repeat(3, 1fr);
  margin-top: -138px; 
}

.s-card{
  background: #fff;
  color: #101828;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(16,24,40,.10);
  padding: clamp(18px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.s-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(16,24,40,.16);
}
.s-icon{
  width: 70px  !important;
  height: 70px !important;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #00BAF9 12%, white);

}
.s-icon img{
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain;
  display: block;
}
.s-card header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.s-icon{
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: #2A81FF;
  background: color-mix(in srgb, #2A81FF 12%, white);
}
.s-card h3{
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0A0A0F;
}
.s-card ul{
  margin: 10px 0 0 1.05rem;
  padding: 0;
}
.s-card li{
  margin: .5rem 0;
}
.s-card .btn-contact{
  align-self: center;   
  margin-top: auto;     
}
.btn-contact{
  align-self: start;
  margin-top: auto;
  background: linear-gradient(90deg, #00BAF9, #2A81FF);
  color: #fff !important;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: .55rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}
.btn-contact:hover{
  opacity: .95;
  color: #fff;
  text-decoration: none;
}

/* ===== CONFÍA EN NOSOTROS ===== */
.section-trust{
background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(56,189,248,.35),
      rgba(99,102,241,.22) 60%,
      rgba(99,102,241,.10) 100%);
  padding-block: clamp(18px,5vw,56px);
  position: relative;
}

.section-trust .trust-title{
  display:flex; 
  gap:12px; 
  align-items:baseline;
  justify-content:center;        
  margin: 0 0 
  clamp(18px,4vw,28px);
}
.section-trust .trust-title .title-pill{
   padding: 6px 16px !important;
  border-radius: 20px !important;
  color: #fff !important;
  font-size: 3.5rem !important;
  background: linear-gradient(180deg, #00101D, #0A0A0F) !important ;
  align-content: center !important;
}
.section-trust .trust-title .title-accent{
  background: linear-gradient(90deg, #00BAF9, #2A81FF);
  font-size: 5.5rem;
  font-weight: 700;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust-grid{
  display:grid; 
  gap: clamp(20px,4vw,36px);
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
}

.trust-copy p{
  max-width: 420px; 
  color:#00101D;
  font-size: 1.1rem; 
  font-weight: 200;
  line-height: 2;
  padding-top: 10%;
}
.trust-copy strong{ 
  font-size: 1.2rem; 
  font-weight: 900; }

.trust-icons{
  margin-top: 18px; 
  display:flex; 
  gap:12px;
}
.ti{
  width: 20% !important; 
  height: 40% !important; 
  border-radius: 16px; 
  display:grid; 
  place-items:center; 
  background: rgba(255,255,255,.85); 
  border:1px solid rgba(16,24,40,.10);
  box-shadow: 0 8px 20px rgba(16,24,40,.10);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ti:hover{ 
  transform: translateY(-4px); 
  box-shadow: 0 12px 32px rgba(16,24,40,.16); 
}
.ti img{ 
  width: 70% !important; 
  height: 70% !important; 
  object-fit: contain; 
  display:block; 
}
.ti--blue   { background: color-mix(in srgb, #00baf9 18%, white); }
.ti--orange { background: color-mix(in srgb, #FF9F05 22%, white); }
.ti--purple { background: color-mix(in srgb, #5D35D4 18%, white); }

.t-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: min(92vw, 600px);
  margin: 0 auto;
}

.t-arrow {
  background: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.t-arrow:hover {
  transform: scale(1.1);
}
.t-prev {
  left: 10px;
}
.t-next {
  right: 10px;
}

.t-arrow:hover {
  transform: translateY(-50%) scale(1.1);
}

.t-slider {
  overflow: hidden;
  width: 100%;
  border-radius: 20px;
  display: flex;
  justify-content: center;
}
.t-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.t-card {
  flex: 0 0 80%;
  max-width: 80%;
  margin-inline: 10%; 
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 44px rgba(16, 24, 40, 0.08);
  text-align: left;
}
.t-stars {
  color: #f7c948;
  font-size: 20px;
  margin-bottom: 12px;
}
.t-card p {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 12px;
}
.t-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.t-user img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.t-user strong {
  font-size: 15px;
  color: #00101d;
}

.t-user span {
  font-size: 13px;
  color: #6b6b6b;
}
.t-sep{
  border: 0;
  border-top: 1px solid #000000; 
  margin: 10px 0; 
}

/* ===== LENGUAJE ===== */

.section-tecnologias {
  background: #fff;
  padding-bottom: 4%;

}

.container-1280 {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
}

.tecnologias-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.tecnologias-left {
  position: relative;
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-image {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding-top: 11%;
}

.fondocuadros {
  width: 90%;
  height: auto;
  display: block;
  z-index: 1;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.08));
}

.laptop-img {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 100% !important;
  height: auto;
  max-width: 400px;
  z-index: 2;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.15));
}

.tecnologias-right {
  flex: 1 1 50%;
}

.tecnologias-right h2 {
  font-size: clamp(28px, 3vw, 50px);
  font-weight: 500;
  padding-top: 10%;
}

.azul {
  background: linear-gradient(90deg, #00BAF9, #2A81FF);
  -webkit-background-clip: text;
  background-clip: text;      
  color: transparent;            
  -webkit-text-fill-color: transparent;
  display: inline-block; 
  font-weight: 700 !important;
}

.tecnologias-right p {
  font-size: 16px;
  color: #000000;
  line-height: 1.6;
  margin-bottom: 32px;
}

.tech-grid{
  display: grid;
  grid-template-columns: repeat(4, 133px); 
  grid-auto-rows: 124px;                   
  gap: 16px;
  justify-content: center;                
}

.tech-item{
  background: #f4f7fb;
  border-radius: 12px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px; 
}

.tech-item img{
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.tech-item span{
  display: block;
  font-size: 15px;
  color: #00101d;
  font-weight: 500;
}

.tech-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
}
.te--blue   { background: color-mix(in srgb, #00baf9 10%, white); }
.te--orange { background: color-mix(in srgb, #FF9F05 10%, white); }
.te--green { background: color-mix(in srgb, #00C36A 10%, white); }

/* ===== FOOTER ===== */

.footer{
  background: linear-gradient(90deg, #00BAF9 0%, #2A81FF 55%, #5D35D4 100%);
  color:#fff;
  height:271px;
  display:flex;
  align-items:center;   
  padding:0;
  box-sizing:border-box;
  overflow:hidden;
}
.container-1280 {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
}

.footer-container{
  --wrap: clamp(1000px, 78vw, 1140px);
  --gap: clamp(28px, 3.6vw, 48px);
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    minmax(180px, 1.7fr)
    minmax(150px, 1.2fr)
    minmax(340px, 2.4fr)
    minmax(240px, 1.7fr);
  column-gap: var(--gap);
  align-items: center;     
  justify-items: start;    
  position: relative;
}

.footer-container > div:nth-child(1)::after{
  height: 86% !important;             
}
.footer-container > div:nth-child(2)::after{
  right: calc(-1 * var(--gap) / 2 - 10px); 
  height: 86%;                              
}
.footer-container > div{ position: relative; }
.footer-container > div:nth-child(-n+3)::after{
  content:"";
  position:absolute;
  right: calc(-1 * var(--gap) / 2);
  top:50%;
  width:1px;
  height:72%;
  background: rgba(255,255,255,.28);
  transform: translateY(-50%);
}

/* ===== LOGO ===== */

.footer-logo img{
  width: clamp(130px, 14vw, 165px);
  height: auto;
  display: block;
}

/* ===== MENÚ-FOOTER ===== */
.footer-menu ul{ list-style:none; margin:0; padding:0; }
.footer-menu li{ margin:10px 0; }
.footer-menu a{ color:#fff; text-decoration:none; opacity:.9; }
.footer-menu a:hover{ opacity:1; }

/* ===== FORMULARIO ===== */

.footer-form{ width:100%; }
.footer-form h4{ margin:0 0 10px; font-weight:600; }
.footer-form form{ display:flex; flex-direction:column; gap:10px; }
.footer-form input{
  width:100%;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  padding:10px 12px;
  color:#fff; font-size:14px; outline:none;
}
.footer-form input::placeholder{ color:#cfe8ff; }
.footer-form button{
  width:100%;
  background: linear-gradient(90deg, #00E2F5, #2A81FF);
  border:none; border-radius:10px; color:#fff; font-weight:700;
  padding:10px; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

/* ===== CONTACTO ===== */

.footer-contacto{ display:flex; flex-direction:column; gap:12px; }
.contact-item{ display:flex; align-items:center; gap:10px; font-size:14px; }
.contact-item i{
  width:36px; height:36px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(0,234,255,.22);
  color:#fff; font-size:18px;
}


  @media (max-width: 950px) {

  /* ===== MENU ===== */

  .custom-toggler i {
    font-size: 1.8rem;
    background: linear-gradient(90deg, #00baf9, #2A81FF);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }

  .navbar-collapse {
    background: #fff;
  }

  .navbar-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navbar .nav-link {
    text-align: center;
    padding: 0.75rem 0;
    font-weight: 200;
    color: #00101d;
  }

  .navbar .nav-link:hover {
    color: #00baf9; 
  }

  .navbar-nav .btn-gradient {
    display: inline-block;
    width: auto !important;
    margin-bottom: 1rem;
    margin-left: 1.5rem;
    margin-top: -1rem;
  }

/* ===== HERO ===== */

  #hero{
    min-height: 100vh;
    padding: 16px 0 20px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
  }

  #hero .row{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "stack"
      "cta"
      "metrics";
    row-gap: 12px;
  }

  #hero .col-lg-6.text-white{ display: contents; }

  #hero .text-white h1{
    grid-area: title;
    font-size: clamp(34px, 6.2vw, 30px);
    line-height: 1.15;
    margin: 4px;
    font-weight: 700;
    text-align: center;
  }

  #hero .col-lg-6.d-flex{ 
    grid-area: stack; 
    justify-content: center !important; 
    margin: 0 !important; 
  }
  .hero-stack{
    position: relative;
    width: min(92vw, 520px);
    aspect-ratio: 0.78;
    margin: 6px auto 0;
  }
  .hero-stack .art{ 
    position:absolute; 
    max-width:none; 
    user-select:none; 
    pointer-events:none; 
  }

  .art-bg{
    top: 7%;
    left: 7%;
    width: 86%;
    height: 72%;
    margin: 0 !important;
    filter: drop-shadow(0 16px 40px rgba(0,0,0,.12));
    z-index:1;
  }

  .art-top-square{
    top: 9%;
    right: 43%;
    width: 14% !important;
    height: auto !important;
    margin: 0 !important;
    z-index:5;
  }
  
  .art-bottom-arrow{
    right: 12%;
    top: 63%;
    width: 18%;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.18));
    z-index:3;
  }

  .art-devices{
    left: 2%;
    bottom: 32%;
    width: 96%;
    height: auto;
    filter: drop-shadow(0 24px 60px rgba(0,0,0,.28));
    z-index:5;
  }

  #hero .text-white .btn-gradient{
    grid-area: cta;
    position: static !important;
    justify-self: center;
    margin: -80px 0 8px !important; 
  }

  #hero .text-white .d-flex.flex-wrap{ 
    grid-area: metrics; 
    justify-content: space-between; 
    gap: 8px;
    margin-top: 8px;
    padding: 0 10px;
  }
  .stat-box{
    width: calc(32.5% - 8px);
    min-width: 96px;
    padding: 2px;
  }
  .stat-box img {
    width: 32% !important;
    height: 40% !important;
  }

/* ===== SECTORES Y PAÍSES ===== */

.section-metrics{
    padding-top: 28px;
    padding-bottom: 32px;
    min-height: unset;
  }

  .metrics-title{
  flex-direction: column;
  gap: 0;               
  position: relative;
  --overlap: 18px;       
  }
  .title-pill{ 
    font-size: clamp(44px, 5.6vw, 40px) !important;  
    position: relative; 
    z-index: 1; 
  }
  .title-accent{
  font-size: clamp(60px,10.5vw, 57px) !important;
  position: relative; 
  z-index: 2; 
  margin-top: calc(-1 * var(--overlap));  
  }

  .section-metrics .sectors-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center;   
    gap: 16px;
  }
  .section-metrics .sectors-grid > li{
    display: flex;
    justify-content: center;
  }

  .section-metrics .sectors-grid > li:last-child{
    grid-column: 1 / -1;  
    justify-self: center;
  }

  .section-metrics .c-card{
    width: 190px;
    height: 146px;
    padding: 14px;
    border-radius: 20px;
  }
  .section-metrics .c-card__icon{
    width: 88px;
    height: 88px;
    margin-bottom: 8px;
  }
  .section-metrics .c-card__icon img{
    padding-top: 0;          
  }
  .c-card h3{
    font-size: 17px;
    margin: 0;
    padding-top: 6px;
  }
  .section-metrics .countries-grid{
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
    justify-content: center;
    max-width: 420px;  
    gap: 16px;
  }

  .section-metrics .flag-card{
    padding: 18px;
  }

  .section-metrics .extra-cards{
    grid-template-columns:1fr;
    max-width:600px;
  }

  /* ===== CLIENTES ===== */

  .clients-title{ justify-content: center; }
  .clients-title .title{
    font-size: clamp(74px, 12vw, 48px);   
    line-height: 1.02;
    padding-top: 18px !important;                    
  }


  .clients-carousel .track{
    --card-w: 210px;          
    --card-h: 190px;          
    --gap: 12px;              
    --sidepad: 38px;          
    padding: 6px var(--sidepad);
    gap: var(--gap);
    scroll-padding-left:  calc(50% - (var(--card-w)/2) + var(--sidepad));
    scroll-padding-right: calc(50% - (var(--card-w)/2) + var(--sidepad));
    mask-image: linear-gradient(90deg,
                   transparent 0,
                   #000 var(--sidepad),
                   #000 calc(100% - var(--sidepad)),
                   transparent 100%);
  }
  .logo-wrap{ 
    height: 96px; 
    margin-bottom: 8px; 
  }
  .client-card h3{ 
    font-size: 16px; 
    margin: 8px 0 2px; 
  }
  .client-card p{ 
    font-size: 12px; 
    margin: 0; 
    color:#667085; 
  }

  .clients-note{
    grid-template-columns: 56px 1fr;
    max-width: 92vw;
    margin: 18px auto 0;
    gap: 12px;
  }
  .clients-note .note-icon{
  width:66px; 
  height:75px; 
}
.clients-note .note-icon img{ 
  width: 38px; 
  height: 38px; 
}
  .clients-note p{ 
    font-size: 11px; 
    line-height: 1.5;
    padding: 5px; 
  }

  /* ===== ENFOQUE ===== */

:root{
    --cola-morada: 10px;  
    --solape:      130px;  
  }
.section-enfoque{
    min-height: auto !important;
    padding-bottom: calc(24px + var(--cola-morada)) !important;
    padding: 20px 0 18px;
    position: relative;
    z-index: 0;
  }
  .enfoque-wrap{
    grid-template-columns: 1fr;   
    gap: 14px;
  }
  .enfoque-text h2{                 
    font-size: clamp(28px, 9vw, 36px);
    margin-bottom: 6px;
  }
  .enfoque-text h1{                
    font-size: clamp(15px, 4.6vw, 18px);
    line-height: 1.18;
    margin-bottom: 6px;
  }
  .enfoque-text p{
    font-size: 15px;
    line-height: 1.45;
    margin-top: 6px;
  }

  .enfoque-chips{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .enfoque-chips .chip{
    min-height: 112px;
    padding: 14px;
    gap: 10px;
    border-radius: 14px;
  }
  .chip img{ width: 40px; height: 40px; }
  .chip span{ font-size: 13px; }

  /* ===== SOLUCIONES ===== */

  :root{ --overlap: 60px; }

  .section-soluciones{
    position: relative; 
    z-index: 2; 
    margin-top: -2px;
  }
  .section-soluciones .soluciones-top{
    padding-block: 8px calc(var(--solape) + 24px) !important;
    text-align: center;              
  }
  .section-soluciones .soluciones-title{
    font-size: clamp(56px, 9vw, 34px);
    line-height: 1.02;
    margin: 0;
    color: #00F1F9;
  }
  .section-soluciones .soluciones-bottom{
    padding-block: 14px 22px;
  }

  .solutions-grid{
    grid-template-columns: 1fr;
    position: relative;
    justify-items: center;
    gap: 12px;
    margin-top: calc(-1 * var(--solape));
    z-index: 3;
  }
  .s-card{
    width: min(82vw, 480px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 16px 44px rgba(16,24,40,.10);
  }
  .s-card header{ 
    gap: 10px; 
    margin-bottom: 6px; 
  }
  .s-icon{
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px;
  }
  .s-card h3{ 
    font-size: 1.5rem; 
  }
  .s-card ul{ 
    margin: 10px 1.5rem 0 1.5rem; 
    padding: 0; 
  }
  .s-card .btn-contact{
    margin-top: 12px;
    padding: .5rem .9rem;
  }

  /* ===== CONFÍA EN NOSOTROS ===== */

  .section-trust{
    padding-block: 16px 20px;
  }

  .section-trust .trust-title{
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 10px;
    position: relative;
    --overlap: 17px;              
  }
  .section-trust .trust-title .title-pill{
    font-size: clamp(38px, 5.6vw, 24px) !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    line-height: 1;
    align-self: center !important;
  }
  .section-trust .trust-title .title-accent{
    display: block;
    font-size: clamp(32px, 10vw, 40px);
    line-height: 1.02;
    margin-top: calc(-1 * var(--overlap));
    align-self: center !important;
  }

  .trust-grid{
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .trust-copy p{
    max-width: none;
    font-size: 12px;
    line-height: 1.45;
    margin: 10px !important;
    padding-top: 0;
    align-self: center !important;
  }
  .trust-copy strong{ 
    font-size: 13px; 
  }
  .trust-icons{
    margin-top: 10px;
    justify-content: center;
    gap: 10px;
  }
  .ti{
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px;
  }
  .ti img{ 
    width: 60% !important; 
    height: 60% !important; 
  }

  .t-slider{ border-radius: 16px; }
  .t-card{
    flex: 0 0 86%;
    max-width: 76%;
    margin-inline: 12%;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(16,24,40,.10);
  }
  .t-stars{ font-size: 16px; margin-bottom: 8px; }
  .t-card p{ font-size: 13px; }
  .t-user img{ 
    width: 40px; 
    height: 40px; 
  }
  .t-arrow{
    width: 30px; 
    height: 30px; 
    font-size: 16px;
    top: 50%; 
    transform: translateY(-50%);
  }
  .t-prev{ left: -7px; }
  .t-next{ right: -7px; }
  .t-arrow:hover{ 
    transform: translateY(-50%) scale(1.05); }


  /* ===== LENGUAJES ===== */

  .tecnologias-container{
    display: grid;
    grid-template-areas:
      "h2"
      "p"
      "art"
      "grid";
    row-gap: 10px;
  }

   .tecnologias-right{ display: contents; }
  .tecnologias-right h2{ grid-area: h2; }
  .tecnologias-right p { grid-area: p;  }
  .tecnologias-left{     grid-area: art; justify-content: center; }
  .tech-grid{            grid-area: grid; }


  .tecnologias-right h2{
    font-size: clamp(50px, 6.2vw, 30px);
    text-align: center !important;
    font-weight: 700;
    padding-top: 10%; margin: 0 0 4px;
  }
  .tecnologias-right p{
    font-size: 18px; 
    line-height: 1.45; 
    margin: 0 0 8px;
    text-align: center !important;
  }

  .bg-image{
    width: 82vw; 
    max-width: 360px; 
    margin: 6px auto 4px; 
    padding-top: 0; 
    position: relative;
  }
  .fondocuadros{ 
    width: 100%; 
    height: auto; 
  }
  .laptop-img{
    top: 48%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 96% !important; 
    max-width: 360px;
  }
 .tech-grid{
    --tile-w: 106px;
    --tile-h: 110px;
    --gap: 12px;
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center;
    max-width: calc(3 * var(--tile-w) + 2 * var(--gap));
    margin-inline: auto;
    max-height: none !important;
    overflow: visible !important;
  }

  .tech-item{
    flex: 0 0 var(--tile-w);
    height: var(--tile-h);
    border-radius: 12px;
    padding: 10px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .tech-item img{ 
    width: 28px; 
    height: 28px; 
    margin-bottom: 6px; }
  .tech-item span{ 
    font-size: 12px; }

  /* ===== FOOTER ===== */
  .footer{
    height: auto;                 
    padding: 18px 0 26px;
    align-items: flex-start;      
  }

  /* logo / menú  /  form  /  contacto  */
  .footer-container{
    --gap: 18px;
    width: 100%;
    grid-template-columns: max-content max-content;
    grid-template-areas:
      "logo menu"
      "form form"
      "contact contact";
    column-gap: 12px;
    row-gap: 16px;
    align-items: start;
    justify-items: center;
    align-items: center;
    justify-content: center;
  }

  .footer-logo{ grid-area: logo;
  justify-self: center;    
    align-self: center; }
  .footer-menu{
    grid-area: menu;
    justify-self: center;    
    align-self: center;
    text-align: center;      
  } 
  .footer-form{ grid-area: form; }
  .footer-contacto{ grid-area: contact; }

  .footer-container > div:nth-child(-n+3)::after{ display: none !important; }

  .footer-logo img{
    display:block;
    margin-inline:auto; 
    width: 140px;

  }

  /* ===== MENU FOOTER ===== */
  .footer-menu ul{
    display: inline-block;   
    margin: 0; padding: 0; list-style: none;
  }
  .footer-menu li{ margin: 6px 0; }
  .footer-menu a{ font-size: 14px; opacity: .95; }

  .footer-form{
    width: 100%;
    max-width: 520px;
    justify-self: center;
  }
  .footer-form h4{
    text-align: left;            
    font-size: 18px;
    margin-bottom: 8px;
  }
  .footer-form form{ gap: 8px; }
  .footer-form input{ height: 40px; font-size: 14px; }
  .footer-form button{ height: 40px; font-weight: 700; }

  .footer-contacto{
    max-width: 520px;
    justify-self: center;
    gap: 10px;
  }
  .contact-item{ font-size: 14px; }
  .contact-item i{
    width: 34px; height: 34px; font-size: 16px;
    background: rgba(0,234,255,.22);
  }

}