@import url("https://fonts.googleapis.com/css?family=Cabin");
body, html {
  font-family: 'Cabin', sans-serif;
  background-color: white;
  margin: 0;
}

/* Estilo base para Desktop */
h1 {
    font-size: 3.2rem;
}

/* Forzar ajuste para celulares (Pantallas menores a 768px) */
@media only screen and (max-width: 768px) {
    h1 {
        font-size: 1.8rem !important; /* Bajamos a 1.8 para asegurar margen en In-App Browsers */
        line-height: 1.2;
    }
}

/* Limpieza base para evitar el espacio blanco lateral */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Evita que aparezca el scroll horizontal */
}

/* Forzar que todas las secciones principales ocupen el 100% real */
section, header, footer {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
}

body a, html a {
  text-decoration: none;
}

header {
  padding: 2em;
}

header .logo {
  color: black;
  font-weight: bold;
}

header .menu-btn {
  width: 18px;
  float: right;
  cursor: pointer;
     z-index: 3; /* Por encima del overlay y del video */
}

.casos-exito, .metricas-totales, .cta-simple {
    background-color: #000 !important;
    width: 100% !important;
    margin: 0;
    padding-left: 10%; /* Ajusta esto según el diseño original */
    padding-right: 10%;
}





section {
  padding: 4em;
}

section h1 {
  font-size: 4em;
  margin: 1em auto;
  width: 70%;
  text-transform: uppercase;
}

section h1::before {
  content: '';
  border-top: 6px solid black;
  display: block;
}




nav {
  position: fixed; /* Cambiado de absolute a fixed para que siga la pantalla */
  top: 0;
  left: 0;
  background: black;
  padding: 2em;
  width: 100%; /* Cubre todo el ancho */
  height: 100vh; /* Cubre todo el alto de la pantalla */
  box-sizing: border-box; /* Para que el padding no sume al ancho */
  z-index: 1000; /* Asegura que esté por encima del video y del logo */
  display: none;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right;
  transform-origin: right;
}



nav .close-button {
  width: 18px;
  float: right;
  cursor: pointer;
  opacity: 0;
}


/* Esto afecta a como se ven los elementos dentro del menú */
nav ul {
  list-style-type: none;
  margin: 10% auto 0 auto;
  padding: 0;
  display: flex; /* Cambiado de grid a flex para mejor control */
  flex-direction: row; /* Horizontal por defecto (Desktop) */
  justify-content: space-around;
  align-items: flex-start;
  width: 90%;
}



/* --- ESTILO DE LOS SPAN (Elegante y Sutil) --- */
nav ul span {
    color: #a0a0a0; /* Un gris plata suave que contrasta con el blanco del título */
    display: block;
    font-size: .8em;
    margin-top: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.5;
    text-transform: none;
    transition: color 0.3s ease; /* Para que cambie suavemente si lo necesitas */
}

/* --- EFECTO HOVER (Contraste Minimalista) --- */
nav ul li a {
    transition: all 0.3s ease;
    color: #ffffff; /* Blanco base */
}

nav ul li a:hover {
    color: #d4d4d4; /* Un gris muy claro en lugar de cian */
}

nav ul li a:hover span {
    color: #ffffff; /* Al pasar el mouse, la descripción se ilumina un poco más */
}

/* --- AJUSTE PARA MÓVIL --- */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column; /* Se vuelve vertical en celulares */
    margin-top: 20%;
    gap: 30px; /* Espacio entre botones */
  }
  
  nav ul a {
    font-size: 1.2em; /* Un poco más pequeño para que quepa bien */
  }

  .hero-content h1 {
    font-size: 2.2em; /* Evita que el título se rompa en móvil */
    width: 90%;
  }
}

nav ul a {
  color: white;
  font-weight: bold;
 
}

nav ul span {
  color: gray;
  display: block;
  font-size: .75em;
  margin-top: 20px;
}

nav ul li {
  opacity: 0;
}

.show-menu {
  display: block;
  -webkit-animation: slide-menu 1s ease-in forwards;
          animation: slide-menu 1s ease-in forwards;
}

.show-menu .close-button {
  -webkit-animation: show-x 1s 1s forwards;
          animation: show-x 1s 1s forwards;
}

.show-menu li:nth-of-type(1) {
  -webkit-animation: menu-item-anim .6s forwards 1s ease-in-out;
          animation: menu-item-anim .6s forwards 1s ease-in-out;
}

.show-menu li:nth-of-type(2) {
  -webkit-animation: menu-item-anim .6s forwards 1.2s ease-in-out;
          animation: menu-item-anim .6s forwards 1.2s ease-in-out;
}

.show-menu li:nth-of-type(3) {
  -webkit-animation: menu-item-anim .6s forwards 1.6s ease-in-out;
          animation: menu-item-anim .6s forwards 1.6s ease-in-out;
}

.show-menu li:nth-of-type(4) {
  -webkit-animation: menu-item-anim .6s forwards 1.8s ease-in-out;
          animation: menu-item-anim .6s forwards 1.8s ease-in-out;
}

@-webkit-keyframes slide-menu {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes slide-menu {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@-webkit-keyframes show-x {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes show-x {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes menu-item-anim {
  from {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes menu-item-anim {
  from {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
/*# sourceMappingURL=style.css.map */



/* Call to Action Minimalista */
.cta-simple {
    padding: 5em 2em;
    text-align: center;
    background: #000; /* Fondo negro para máximo contraste */
    color: #fff;
}
.cta-simple p {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.boton-negro {
    position: relative;
    display: inline-block;
    background: #ffffff; /* Fondo blanco para contraste total */
    color: #000000;
    padding: 18px 45px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    overflow: hidden; /* Crucial para que el brillo no se salga */
    transition: 0.4s all ease;
    border: 1px solid #ffffff;
}

/* El destello de acero que recorre el botón */
.boton-negro::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(160, 160, 160, 0.4), /* Tu gris plata */
        transparent
    );
    transition: 0.6s;
}

.boton-negro:hover::after {
    left: 100%; /* El brillo cruza de izquierda a derecha */
}

.boton-negro:hover {
    background: #000000;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(160, 160, 160, 0.3); /* Resplandor plata sutil */
}

/* El Video: al fondo de todo */
.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: 1; /* Capa 1 */
    filter: grayscale(100%) brightness(30%);
    object-fit: cover;
}

/* El Filtro: sobre el video, bajo el texto */
.overlay-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2; /* Capa 2 */
}

.hero-content {
    position: relative;
    z-index: 1; /* El texto arriba de TODO */
    text-align: center;
    color: white;
    width: 70%; /* Para que no se pegue a los bordes */
}


.hero-video-container {
    position: relative;
    width: 100%;
    height: 80vh; /* Altura controlada */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000; /* Fondo de respaldo */
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 3; /* Por encima del overlay y del video */
    text-align: center;
    color: white;
}

.hero-content h1 {
    color: white;
    border-top: 6px solid white; /* Cambiamos a blanco para que resalte sobre el video */
}

.cta-directo {
    display: inline-block;
    margin-top: 2em;
    padding: 15px 40px;
    background: white;
    color: black;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    
    
    
    }
 
 
 .bloque-ingenieria {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 40px; /* Espacio entre los items */
     max-width: 1200px;
     margin: 0 auto;
 }
 
 .bloque-ingenieria .item {
     flex: 1; /* Hace que los 3 midan lo mismo */
     text-align: left;
 }
 
 .bloque-ingenieria h2 {
     font-size: 1.5em;
     margin-bottom: 15px;
     border-bottom: 3px solid black;
     display: inline-block;
     padding-bottom: 5px;
}


/* Contenedor de la sección */
.metodologia {
    padding: 6em 10%;
    background-color: #fff;
}

/* Flexbox para alinear los 3 items en una fila */
.bloque-ingenieria {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px; /* Espacio entre cada punto */
}

/* Estilo de cada item individual */
.item {
    flex: 1;
    border-top: 1px solid #e0e0e0; /* Línea superior sutil */
    padding-top: 25px;
    transition: transform 0.3s ease;
}

.item:hover {
    transform: translateY(-5px); /* Pequeño efecto al pasar el mouse */
}

.item h2 {
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #000;
}

.item p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

/* --- SECCIÓN CASOS DE ÉXITO --- */
.casos-exito {
    background-color: #000; /* Fondo negro para que resalten los resultados */
    color: #fff;
    padding: 6em 10%;
}

.titulo-seccion h2 {
    font-size: 2.5em;
    text-transform: uppercase;
    margin-bottom: 0.5em;
}

.titulo-seccion p {
    color: #a0a0a0; /* El gris plata elegante */
    margin-bottom: 3em;
}

.grid-casos {
    display: flex;
    gap: 30px;
}

.caso-card {
    flex: 1;
    background: #111; /* Un negro ligeramente más claro */
    padding: 30px;
    border: 1px solid #333;
    transition: 0.3s;
}

.caso-card:hover {
    border-color: #a0a0a0; /* Brillo plata al pasar el mouse */
}

.resultado {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    margin: 15px 0;
}

.caso-info p {
    color: #a0a0a0;
    font-size: 0.9em;
}




/* --- SECCIÓN MÉTRICAS: VERSIÓN FINAL SIN PARCHES --- */
.metricas-totales {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 8em 10%;
    background-color: #000;
    border-top: 1px solid #222;
    box-sizing: border-box;
}

.metrica-item {
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrado horizontal absoluto */
    text-align: center;
    padding: 0 20px;
}

.metrica-item .numero {
    font-size: 4em;
    font-weight: 800;
    color: #ffffff !important;
    line-height: 1;
    margin: 0 0 15px 0;
    display: flex; /* Alinea el + y el número en el mismo eje */
    align-items: center;
    justify-content: center;
    min-height: 1.2em;
}

/* El símbolo "+" limpio, sin duplicados */
.metrica-item .numero::before {
    content: '+';
    font-size: 0.5em;
    color: #a0a0a0; /* Gris plata */
    margin-right: 8px;
    font-weight: 400;
}

.metrica-item .label {
    color: #a0a0a0;
    font-size: 0.8em;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Ajuste Responsivo Móvil unificado */
@media (max-width: 768px) {
    .metricas-totales {
        flex-direction: column;
        gap: 60px;
        padding: 5em 1.5em;
    }
    
    .metrica-item .numero {
        font-size: 3.5em;
    }
}

/* seccion reto */


.seccion-reto {
    padding: 6em 10%;
    background-color: #ffffff;
    color: #000;
}

.tag-silver {
    color: #a0a0a0;
    letter-spacing: 3px;
    font-size: 0.8em;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
}

.header-reto h2 {
    font-size: 2.5em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.contenedor-pasos {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 4em;
}

.paso-card {
    flex: 1;
    border-top: 2px solid #000;
    padding-top: 25px;
    position: relative;
}

.timeline {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
    color: #a0a0a0;
    margin-bottom: 10px;
    display: block;
}

.paso-card h4 {
    font-size: 1.3em;
    margin-bottom: 15px;
}

.header-reto, .contenedor-pasos, .bloque-ingenieria {
    max-width: 1200px; /* O el ancho que prefieras */
    margin: 0 auto;    /* Esto las centra perfectamente */
    width: 100%;
}


.seccion-detalle-negro {
    background-color: #000;
    color: #fff;
    padding: 8em 10%;
    text-align: center;
}

.grid-ingenieria {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 4em;
}

.card-detalle {
    flex: 1;
    text-align: left;
    background: #111;
    padding: 40px;
    border: 1px solid #222;
    transition: 0.3s;
}

.card-detalle:hover {
    border-color: #a0a0a0; /* Tu gris plata */
}

.icono-tech {
    font-size: 0.8em;
    color: #a0a0a0;
    border: 1px solid #a0a0a0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}



/* Autoridad */

.seccion-detalle-blanco {
    background-color: #ffffff;
    color: #000;
    padding: 8em 10%;
    text-align: center;
}

.grid-autoridad {
    display: flex;
    justify-content: space-between;
    margin-top: 5em;
    gap: 0;
}

.col-detalle {
    flex: 1;
    padding: 0 40px;
    border-right: 1px solid #eee; /* Línea divisoria entre columnas */
    text-align: left;
}

.col-detalle:last-child {
    border-right: none; /* Quitamos la línea a la última columna */
}

.col-detalle h4 {
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #000;
}

.col-detalle p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95em;
}





/* Formulario */




.lead-magnet-final {
    background-color: #000;
    padding: 5em 10%;
    border-top: 1px solid #222;
}

.magnet-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.magnet-info h3 {
    color: #fff;
    font-size: 1.8em;
    margin-bottom: 10px;
}

.magnet-info p {
    color: #a0a0a0;
    font-size: 1em;
}

.form-horizontal {
    display: flex;
    gap: 15px;
}

.form-horizontal input {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 15px 20px;
    width: 300px;
    outline: none;
}

.form-horizontal input:focus {
    border-color: #a0a0a0; /* El gris plata de La Chambita */
}

.boton-brillo-plata {
    background: #fff;
    color: #000;
    border: none;
    padding: 15px 30px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.4s;
}

.boton-brillo-plata:hover {
    background: #a0a0a0; /* Efecto plata al pasar el mouse */
    box-shadow: 0 0 15px rgba(160, 160, 160, 0.4);
}




/* Autoridad digital */





.grid-autoridad-robusta {
    display: flex;
    gap: 30px;
    margin-top: 50px;
    border-bottom: 1px solid #eee;
    padding-bottom: 50px;
}

.lo-que-no-somos {
    margin-top: 80px;
    padding: 40px;
    background-color: #fcfcfc;
    border: 1px solid #eee;
}

.lo-que-no-somos h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.resaltado-negro {
    background-color: #000;
    color: #fff;
    padding: 2px 10px;
}

.grid-no-somos {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.item-no {
    flex: 1;
    text-align: left;
}

.item-no strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #d93025; /* Un rojo sutil para el "No" */
}

.item-no p {
    font-size: 0.9em;
    color: #666;
}

@media (max-width: 768px) {
    .grid-autoridad-robusta, .grid-no-somos {
        flex-direction: column;
    }
}



/* Reto */

/* Contenedor del Bono/Video */
.bono-infraestructura {
    background: #111 !important; /* Asegura un fondo oscuro sólido */
    border: 1px solid #a0a0a0 !important; /* Borde plata para resaltar */
    padding: 30px;
    margin-bottom: 20px;
}

/* Etiqueta ACTIVO INCLUIDO */
.tag-bono {
    background-color: #a0a0a0 !important; /* Fondo plata */
    color: #000000 !important; /* Texto negro para contraste */
    display: inline-block;
    padding: 5px 15px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.75em;
    margin-bottom: 20px;
}

/* Título: Video promocional */
.bono-infraestructura h4 {
    color: #ffffff !important; /* Blanco puro */
    font-size: 1.4em;
    margin-bottom: 10px;
    display: block;
}

/* Descripción del video y "Costo $0" */
.bono-infraestructura p {
    color: #e0e0e0 !important; /* Gris muy claro, casi blanco */
    font-size: 1em;
    line-height: 1.5;
}

.bono-infraestructura strong {
    color: #ffffff !important; /* Resalte para el "Costo $0" */
    font-weight: 800;
}

.grid-inversion-clara {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.caja-pago {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid #222;
    padding: 40px;
    text-align: left;
}

.highlight-silver {
    border-color: #a0a0a0;
}

/* El número grande que sí ves */
.caja-pago .monto {
    font-size: 2.5em;
    font-weight: 800;
    display: block;
    margin-bottom: 15px;
    color: #ffffff !important; /* Blanco total */
}


/* LA CORRECCIÓN: Texto que no se ve */
.caja-pago strong {
    display: block;
    color: #a0a0a0; /* Gris plata para el título del paso */
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.caja-pago p {
    color: #cccccc !important; /* Gris claro para que sea legible sobre negro */
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0;
}

/* Resalte para el cuadro de liquidación */
.highlight-silver {
    border: 1px solid #a0a0a0 !important;
}

@media (max-width: 768px) {
    .grid-inversion-clara { flex-direction: column; }
}