.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*/
  /* Fondo degradado del 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;
  }
  /* Botón */
  .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;
}

  /* Stats */
  .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; }

  /* Contenedor de la composición */
  .hero-stack{
    position: relative;
    width: clamp(320px, 46vw, 580px);  /* ajusta si quieres más grande/pequeño */
    aspect-ratio: 0.79;                /* proporción aprox de tu canvas */
    overflow: visible;
  }

  /* base para cada capa */
  .hero-stack .art{
    position: absolute;
    display: block;
    max-width: none;
    user-select: none;
    pointer-events: none;
  }

  /* 1) Fondo/cuadros: anclado a la derecha, ocupa gran parte vertical */
  .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;
  }

  /* 3) Cuadro azul (arriba derecha) */
  .art-top-square{
    height: 10% !important;
    width: 11% !important;
    right: 30%;
    z-index: 5;
    margin-top: 10.2rem !important;
  }

  /* 4) Flecha/tarjeta verde (abajo derecha) */
  .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;
  }

  /* 2) Dispositivos (frente y centro-derecha) */
  .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));
  }

 /*cifras*/
 /* ====== Sección ====== */
 .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;               /* móvil */
}
.section-metrics .sectors-grid > li{
  display: flex;              /* para centrar la tarjeta fija dentro de la celda */
  justify-content: center;
}
.section-metrics .sectors-grid{
    grid-template-columns: repeat(5, 1fr);
  }

/* Título con “pill” + texto en gradiente azul */
.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;
}

/* ====== Grid de sectores ====== */
.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%;
}

/* ====== Variantes de color (tinte suave + texto acento) ====== */
.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; }

/* 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; 
}
/* ===== Clientes: carrusel centrado con recorrido completo ===== */
.clients-carousel{ position: relative; }

.clients-carousel .track{
  /* Tamaño de tarjeta + espaciamientos */
  --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; }

/* Nota inferior */
.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;
  }

  /* =======================
   SECCIÓN: 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; 
}

/* Tarjeta */
.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;   /* ← centra en el eje cruzado (horizontal) */
  margin-top: auto;     /* ← sigue empujado al fondo de la tarjeta */
}
.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 (estilo imagen 1)
======================= */
.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;
}

/* Título alineado a la izquierda (pill negro + gradiente) */
.section-trust .trust-title{
  display:flex; 
  gap:12px; 
  align-items:baseline;
  justify-content:center;        /* ← izquierda */
  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); }

/* === Reseñas: 1 sola tarjeta visible, loop suave (como mock) === */
.t-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: min(92vw, 600px);
  margin: 0 auto;
}

/* === Flechas === */
.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);
}
/* === Slider === */
.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;
}

/* === Tarjeta === */
.t-card {
  flex: 0 0 80%;
  max-width: 80%;
  margin-inline: 10%; /* centra la tarjeta dentro del 100% */
  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;
}


/* ====== FONDO DE CUADROS + LAPTOP ====== */
.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));
}


/* --- DERECHA (texto y tecnologías) --- */
.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;
}

/* --- GRID DE TECNOLOGÍAS --- */
.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;   /* centra verticalmente todo */
  padding:0;
  box-sizing:border-box;
  overflow:hidden;
}
.container-1280 {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
}

/* Contenedor central con ancho “controlado” y columnas proporcionales */
.footer-container{
  /* ancho del bloque: entre 1000 y 1140, escalando con el viewport */
  --wrap: clamp(1000px, 78vw, 1140px);
  /* separación entre columnas proporcional */
  --gap: clamp(28px, 3.6vw, 48px);

  width: min(var(--wrap), 100%);
  margin-inline: auto;

  display: grid;
  /* proporciones: logo 1.7 | menú 1.2 | form 2.4 | contacto 1.7 */
  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;     /* centra verticalmente cada columna */
  justify-items: start;    /* contenido pegado a la izquierda */
  position: relative;
}

/* Separadores verticales en medio del gap (como la referencia) */
.footer-container > div:nth-child(1)::after{
  height: 86% !important;             /* antes ~68–72% */
}
.footer-container > div:nth-child(2)::after{
  right: calc(-1 * var(--gap) / 2 - 10px); /* empújala 10px más a la derecha */
  height: 86%;                              /* opcional: igualar altura */
}
.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-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;
  }

  /* Reordena SOLO con CSS: title → stack → cta → metrics */
  #hero .row{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "stack"
      "cta"
      "metrics";
    row-gap: 12px;
  }

  /* El bloque de texto “se desarma” para poder mover sus hijos como áreas */
  #hero .col-lg-6.text-white{ display: contents; }

  /* 1) Título */
  #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;
  }

  /* 2) Stack centrado */
  #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; 
  }

  /* Fondo de cuadros */
  .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;
  }
  /* Cuadro azul (arriba) */
  .art-top-square{
    top: 9%;
    right: 43%;
    width: 14% !important;
    height: auto !important;
    margin: 0 !important;
    z-index:5;
  }
  /* Flecha/tarjeta verde (abajo dcha) */
  .art-bottom-arrow{
    right: 12%;
    top: 63%;
    width: 18%;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.18));
    z-index:3;
  }
  /* 4) Computadores */
  .art-devices{
    left: 2%;
    bottom: 32%;
    width: 96%;
    height: auto;
    filter: drop-shadow(0 24px 60px rgba(0,0,0,.28));
    z-index:5;
  }

  /* 3) Botón debajo del stack y centrado */
  #hero .text-white .btn-gradient{
    grid-area: cta;
    position: static !important;
    justify-self: center;
    margin: -80px 0 8px !important; 
  }

  /* 4) Tarjetas de métricas al fondo (3 por fila) */
  #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;
  }
/* CIFRAS */

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

  /* Título: pill arriba, “respaldan” debajo */
  .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));  
  }

  /* Grid: 2 columnas + la última centrada en su propia fila */
  .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;
  }
  /* quinta tarjeta centrada abajo (nueva fila) */
  .section-metrics .sectors-grid > li:last-child{
    grid-column: 1 / -1;     /* ocupa la fila completa */
    justify-self: center;
  }

  /* Tarjetas más compactas (como el mock) */
  .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;
  }

  /* CLIENTES */
  /* Título grande, centrado */
  .clients-title{ justify-content: center; }
  .clients-title .title{
    font-size: clamp(74px, 12vw, 48px);   /* antes 6rem */
    line-height: 1.02;
    padding-top: 18px !important;                     /* menos aire arriba */
  }

  /* Carrusel: 2 tarjetas visibles como en la foto */
  .clients-carousel .track{
    --card-w: 210px;          /* ancho tarjeta móvil */
    --card-h: 190px;          /* alto tarjeta móvil */
    --gap: 12px;              /* separación móvil */
    --sidepad: 38px;          /* espacio para flechas y gradiente */
    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; 
  }

  /* Nota inferior como en el mock: icono + texto, ancho contenido */
  .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;  /* cuánto se alarga la franja morada bajo ENFOQUE */
    --solape:      130px;  /* cuánto se montan las tarjetas sobre lo morado   */
  }
.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;   /* 1 columna */
    gap: 14px;
  }
  .enfoque-text h2{                 /* "Enfoque" */
    font-size: clamp(28px, 9vw, 36px);
    margin-bottom: 6px;
  }
  .enfoque-text h1{                 /* "Tecnología con propósito…" */
    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;
  }

  /* 6 chips en 2 columnas */
  .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;
  }

  /* Título */
  .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;
  }

  /* Layout: texto arriba, tarjeta abajo */
  .trust-grid{
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  /* Texto compacto */
  .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;
  }
  /* aplanamos para poder mover h2/p/grid sin tocar el HTML */
   .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{
    /* medidas que caben bien en 375px: 3*106 + 2*12 = 342 */
    --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;                 /* ya no fijo */
    padding: 18px 0 26px;
    align-items: flex-start;      /* deja que el grid controle el centrado */
  }

  /* Grid con áreas:  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;
  }

  /* asignación de áreas */
  .footer-logo{ grid-area: logo;
  justify-self: center;    
    align-self: center; }
  .footer-menu{
    grid-area: menu;
    justify-self: center;    /* centra el bloque dentro de su columna */
    align-self: center;
    text-align: center;      /* truco para poder centrar el <ul> inline-block */
  } 
  .footer-form{ grid-area: form; }
  .footer-contacto{ grid-area: contact; }

  /* separadores: ocultar en móvil */
  .footer-container > div:nth-child(-n+3)::after{ display: none !important; }

  /* logo más pequeño */
  .footer-logo img{
    display:block;
    margin-inline:auto; 
    width: 140px;

  }

  /* menú a la derecha y más compacto */
.footer-menu ul{
    display: inline-block;   /* el bloque del menú se vuelve “contenido centrable” */
    text-align: left;        /* …pero su texto sigue alineado a la izquierda */
    margin: 0; padding: 0; list-style: none;
  }
  .footer-menu li{ margin: 6px 0; }
  .footer-menu a{ font-size: 14px; opacity: .95; }

  /* formulario centrado y ancho controlado */
  .footer-form{
    width: 100%;
    max-width: 520px;
    justify-self: center;
  }
  .footer-form h4{
    text-align: left;             /* si lo prefieres centrado: center */
    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; }

  /* contacto debajo del form, centrado con ancho similar */
  .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);
  }

}