/* HTML scroll suave */
html {
    scroll-behavior: smooth; /* Esto hace que la página se deslice con elegancia */
}


/* base de la pagina*/
* {
    margin: 0; /* Quita el espacio exterior que los navegadores traen por defecto */
    padding: 0; /* Quita el espacio interior por defecto */
    box-sizing: border-box; /* Evita que los rellenos aumenten el tamaño real de los elementos */
}

/* base del body */
body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #001122; /* Azul marino profundo original */
    color: #ffffff;
    margin: 0;
    padding: 0;
}

/* Selecciona las etiquetas principales del documento (la estructura base) */
html, body {
    /* Define que el ancho máximo de la página nunca sea mayor que la pantalla del dispositivo */
    max-width: 100%;
    /* ¡LA CLAVE!: Oculta y corta cualquier elemento que intente salirse por el borde derecho, evitando el molesto scroll horizontal */
    overflow-x: hidden;
    /* Obliga al navegador a calcular los tamaños incluyendo los bordes y rellenos dentro del ancho asignado */
    box-sizing: border-box;
}

/* El selector universal (*) aplica esta regla a absolutamente todas las etiquetas, antes y después de ellas */
*, *:before, *:after {
    /* Fuerza a que todos los elementos hereden el cálculo inteligente de tamaño (box-sizing) del body */
    box-sizing: inherit;
}


/* Eliminamos cualquier rastro del difuminado anterior */
body::before {
    display: none;
    content: none;
}

/* estilo MAIN ----------------------------------------------------------------------------------------------------------------*/
main {
    background-color: #001122; /* Azul profundo de la marca */
    padding: 100px 5%;
    width: 100%;
    overflow: hidden;
}

/* Unificación de secciones con color sólido */
main, .seccion-servicios, .referencias {
    background-color: #001122;
    padding: 25px 5%;
    width: 100%;
}

/* header uso flexbox para organizar todas los espacios*/
.main-header {
    display: flex; /* Convierte el header en un contenedor flexible */
    justify-content: space-between; /* Empuja el logo a la izquierda y el botón a la derecha */
    align-items: center; /* Centra todo verticalmente para que el botón no quede más arriba que el logo */
    padding: 5px 2%; /* Da aire: 15px arriba/abajo y 5% a los costados */
    border-bottom: 3px solid #d4af37; /* La línea dorada que separa el menú del resto */
    /*position: sticky; /* El menú se queda pegado arriba aunque bajes en la página */
    top: 0; /* Indica que se pegue justo al inicio (0 píxeles) */
    background-color: #001122; /* azulde la marca para el fondo del nav*/
    width: 100%; /* el ancho se ajuste para no deformar la iamgen */
}



/* HOME APARIENCIA FUTURISTA CON PSUDONIMO */
/*#home::after {
    content: ""; /* Crea la capa invisible */
    position: absolute; /* Permite mover la línea libremente sobre la sección */
    bottom: 0; /* La pega justo al suelo de la sección */
    left: 10%; /* Deja un 10% de espacio a la izquierda */
    width: 80%; /* La línea mide el 80% del ancho (se ve más elegante) */
    height: 2px; /* Es una línea muy delgadita */
    background: #001122;
    box-shadow: 0 0 15px 2px rgba(212, 175, 55, 0.7);
    border-radius: 2px;
}

#home, #b2b, #b2c {
    scroll-margin-top: 100px; /* Esto hace que el título se vea perfecto al navegar */
}

/* titulo qeu encabeza el tridente */
/*.titulo-principal-home {
/*    flex: 0 0 100%; /* obliga al titulo a ocupar todo el ancho superior*/
/*    text-align: center;
/*    color: #fecb08; /* dorado de titulo de la marca */
/*    margin-bottom: 40px; /* espacio antes de los articulos*/
/*    letter-spacing: 2px;
    font-size: 2.5rem;
    width: 100%;
}
*/

/* ESTILO UNIFICADO PARA TODOS LOS TÍTULOS DE SECCIÓN ---------------------------------------------------------------------------*/
.triangulo-articulos h2,
.header-b2b h2,
.header-b2c h2, .referencias h5 {
    flex: 0 0 100%; /* Asegura que ocupe todo el ancho en el home */
    width: 100%;
    text-align: center;
    color: #d4a843; /* Dorado brillante unificado */
    font-size: 2.5rem; /* Tamaño unificado */
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 0px; /* Espacio estándar hacia abajo */
    margin-top: 0;
    padding: 0px 0;
}

/* Ajuste para el texto de la sección Referencias */
.referencias p {
    color: #ffffff !important;
    font-size: 1.4rem !important; /* Aumenta el tamaño para que no se vea pequeño */
    text-align: center;
    max-width: 900px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}


/* SECCION 3 ARTICULOS EL TRIANGULO */
.triangulo-articulos {
    display: flex; /* los tres articulos iran alineados horizontalmente*/
    justify-content: center; /* alinear los tres articulos en el centro*/
    align-items: stretch; /* que los 3 espacios sean iguales */
    gap: 30px; /* espacio entre articulos*/
    max-width: 1200px; /*centra toda la seccion*/
    margin: 0 auto;
    position: relative; /* para que la linea sepa donde ponerse*/
    padding-bottom: 80px; /*deja espacio para que la linea respire*/
    flex-wrap:wrap; /* permite que el titulo este arriba y no se amontone*/
}

/* estilo de cada articulo*/
    .triangulo-articulos article {
        flex: 1; /* Las 3 tarjetas ocupan el mismo ancho */
        background: rgba(255, 255, 255, 0.03); /* Fondo sutilmente más claro que el azul */
        padding: 40px 25px;
        border-radius: 15px;
        border: 1px solid rgba(212, 175, 55, 0.2); /* Borde dorado suave */
        text-align: center;
        transition: all 0.4s ease; /* Para que el hover sea suave */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Alinea el contenido y la imagen */
    }

        /* Efecto al pasar el mouse */
        .triangulo-articulos article:hover {
            transform: translateY(-10px); /* Igualamos la altura de elevación */
            border-color: #d4af37;
            background: rgba(212, 175, 55, 0.05);
        }


    /* EL TÍTULO: Debe ocupar todo el ancho y ser el primero */
    .triangulo-articulos h2 {
        flex: 0 0 100%; /* Obliga al título a medir el 100% del ancho */
        text-align: center;
        color: #d4af37;
        font-size: 2.5rem; /* Tamaño jerárquico */
        margin-bottom: 50px;
        font-weight: 800;
        /*text-transform: uppercase;*/
        order: -1; /* Asegura que siempre esté al principio de la caja flex */
    }

    /* TÍTULOS Y TEXTO */
/* Estilos aplicados al nuevo h3 con palabras clave */
h3.servicio-subtitulo {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.3rem; /* Tamaño intermedio y legible */
    color: #d4af37; /* Color de texto blanco base */
    font-weight: 400; /* Cambiado a 400: Letra normal/delgada para la primera frase */
    line-height: 1.3; /* Interlineado cómodo */
    margin-bottom: 12px; /* Separación ideal con el texto descriptivo de abajo */
}

    /* Control del texto en negrita (strong) donde guardas tus palabras clave principales */
    h3.servicio-subtitulo strong {
        font-weight: 700; /* Aplica negrilla únicamente a tus palabras clave principales */
        color: #d4af37; /* Puedes dejarlo blanco o cambiarlo por #d4a843 (dorado) si quieres que destaquen en la cuadrícula */
    }

    .triangulo-articulos p {
        color: #e0e0e0; /* Blanco grisáceo para no cansar la vista */
        font-size: 1.05rem;
        line-height: 1.6;
        margin-bottom: 30px;
        text-align: justify; /* Justifica el contenido del tridente */
        padding: 0 5px;
        hyphens: auto; /* Corta palabras con guiones si es necesario */
    }

    /* LAS IMÁGENES DENTRO DE LOS ARTÍCULOS */
    .triangulo-articulos img {
        width: 100%; /* Se adapta al ancho de la tarjeta */
        height: 200px; /* Altura fija para que todas se vean iguales */
        object-fit: cover; /* Recorta la imagen para que no se deforme */
        border-radius: 8px;
        border: 1px solid rgba(212, 175, 55, 0.1);
    }

/* RESPONSIVE (Para celulares) */
@media (max-width: 768px) {
    .triangulo-articulos {
        flex-direction: column; /* En celular, las tarjetas se ponen una debajo de otra */
    }
}




/*header nav de forma horizontal NAV --------------------------------------------------------------------------------------------*/
.nav-header {
    /*flex:1;/* el menuocupa el espacio central*/
    display: flex; /* horizontalidad en los elementos de todo el nav*/
    align-items: center; /*centra el texto verticalmente con respecto al logo*/
    gap: 15px; /* espacio entre elementos*/
    font-size:20px ; /* tamaño del texto*/

}

.nav-header ul {
    display: flex; /*linea clav para hacerlo horizontal*/
    list-style: none; /*quita los puntos negros*/
    gap: 40px; /*da espacio entre cada palabra*/
    margin: 0; /* margenes de cada elemento del nav*/
    padding: 0; /* espacio entre su contenido y su borde */
    text-align:center;
}

/* estilo para los enlases a del nav */
.nav-header a {
    color:white; /* color del texto de cada enlase */
    text-decoration: none;/*texto limpio sin liena debajo  */
    font-weight: bold;/* texto con negrita gruesa*/
    font-size: 20px; /* tamaño de la letra*/
    text-align: center;
}

    /* Selecciona los enlaces (a) dentro de la lista (li) de la navegación */
    .nav-header ul li a:hover {
        color: #f5c518; /* Cambia el color del texto al amarillo de tu marca */
    }

/* boton whtasapp y diagnostico nav*/
/* --- ESTILO BASE PARA LOS ENLACES (Lo que los hace parecer botones) --- */
.btn-whatsapp {
    background-color: transparent; /* Eliminamos el verde */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Sin rellenos que achiquen la imagen */
    border: none; /* Sin bordes */
    transition: transform 0.3s ease;
    width: auto; /* Que el ancho lo defina la imagen */
    height: auto;
}

/* Ajuste de la imagen (más grande) */
.img-ws {
    width: 100px; /* Subimos de 35px a 45px para que se vea bien */
    height: 100px;
    object-fit: contain;
    display: block;
    border-radius: 8px; /* Un toque redondeado suave si la imagen es cuadrada */
}

.btn-whatsapp:hover {
    transform: scale(1.1); /* Efecto de crecimiento al pasar el mouse */
}
/* --- CONTENEDOR PADRE --- */
.header-buton-whatsapp {
    display: flex; /* Crea un eje horizontal para poner los botones uno al lado del otro. */
    align-items: center; /* Centra los botones verticalmente con respecto al logo y al menú. */
    gap: 12px; /* Define una separación exacta de 12px entre los dos botones. */
    flex-shrink: 0; /* Impide que los botones se deformen si el menú se queda sin espacio. */
}
.btn-whatsapp:hover, .btn-diagnostico {
    transform: translateY(-2px); /* Mueve el botón 2 píxeles hacia arriba (efecto de presionado) */
}

    /* --- 6. EFECTOS HOVER (Para ambos) --- */
    .btn-whatsapp:hover, .btn-diagnostico:hover {
        transform: translateY(-3px); /* Mueve el botón hacia arriba 3 píxeles simulando que flota. */
        filter: brightness(1.1); /* Aclara un poco el color para dar feedback visual. */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Aumenta la sombra para reforzar la profundidad. */
    }


/* logo header HEADER --------------------------------------------------------------------------------------------------------------- */
.logo-header {
    flex:0 0 auto; /* esto obliga al contenedro del logo a empujar el menu al a derecha*/
    display: flex;
    justify-content: flex-start; /*asegura el logo pegado a la izquierda */
    margin-left: 0%; /*truco: un margen negativo para pegarlo mas al borde izquierdo*/
}

/*logo img header*/
.logo-header img {
    height: 80px; /* Esto controla el alto. Puedes subirlo a 80px si lo quieres más grande */
    width: auto; /* Esto hace que el ancho se ajuste solo para no deformar el logo */
    display: block; /* Quita un espacio pequeño que los navegadores ponen debajo de las imágenes */
    /*filter: drop-shadow(0 0 10px rgba(212,175,55,0.3)); /*brillo dorado al logo */
    /*filter: drop-shadow(0 0 10px rgba(212,175,55,0.3)); /*brillo dorado al logo */
    transition: transform 0.3s ease; /*apariencia cuando paso el mause por encima*/
}

.logo-header img:hover {
    transform: scale(1.05); /* Efecto interactivo al pasar el mouse */
}



/*SECCION SERVICIOS------------------------------------------------------------------------------------------------------------*/
.seccion-servicios {
    background-color: #001122; /*color fondo de toda la seccion*/
    padding-top:40px ; /*espacio sutil despues del tricente*/
    display: flex; /* activa flexbox para organizar los bloques hijos*/
    flex-direction: column; /*alinea los bloques*/
    gap: 80px; /*separacion entre los dos bloques*/
}

/*ESTILOS encabezados de servicios*/

.header-b2b, .header-b2c {
    text-align: center; /* alinea los textos en el centro (titulos , parrafos etc)*/
    margin-bottom: 50px; /* separa el encabezado de las tarjetas de servicios*/
}


.header-b2b p, .header-b2c p {
    color: #ffffff; /* texto en balnco */
    font-size: 1.5rem; /*tamaño de la lectura comodo*/
    max-width: 800px; /*evita qeu las lineas de texto  sean demaciado largas y no se puedan leer*/
    margin: 0 auto; /*centra el bloque de texto si es mas corto que el contenedor*/
    padding: 5% ;
}

/* GRID B2B */
.servicios-b2b-grid {
    display: flex; /* alinea las 3 tarjetas de forma horizontal*/
    gap: 30px ; /* espacio de 30px entre las tarjetas*/
    list-style: none; /* quita los puntos negros pro defecto de la etiqueta*/
    padding: 0; /* elimina el espacio interior que traen por defecto las listas*/

}

.servicios-b2b-grid li {
    flex: 1; /* obliga a las 3 tarjetas a medir lo mismo */
    background: rgba(255, 255, 255, 0.03); /* fondo balnco opaco casi invisible*/
    padding: 40px 25px; /* espacio interno para que el texto no toque los bordes*/
    border-radius: 20px; /* redonde las esquinas de las tarjetas*/
    border: 1px solid rgba(212,175,55,0.2); /* borde dorado sutil y elegante*/
    text-align: center; /* centra el contenido dentro de la ttarjeta*/
    transition: 0.4s; /*duracion de la animacion cuando el mouse pasa por encima de el*/
}

    .servicios-b2b-grid li:hover {
        border-color: #d4af37; /* Al pasar el mouse, el borde se vuelve dorado intenso */
        transform: translateY(-10px); /* La tarjeta sube 10px dando efecto de "flotación" */
        background: rgba(212, 175, 55, 0.05); /* El fondo se ilumina ligeramente en dorado */
    }

    .servicios-b2b-grid h4 {
        color: #d4af37; /* Color dorado para los nombres de los servicios (Selección, etc.) */
        font-size: 1.4rem; /* Tamaño mediano para resaltar el nombre del servicio */
        margin-bottom: 15px; /* Espacio antes de la descripción */
        
    }

    .servicios-b2b-grid p {
        color: #e0e0e0; /* Gris claro para la descripción (menos peso visual que el título) */
        font-size: 1rem; /* Tamaño estándar de lectura */
        line-height: 1.5; /* Espacio entre renglones para que no se vea apretado el texto */
        text-align: justify; /* justificar parrafos*/
        font-weight: 400 !important;
    }

/* --- GRID B2C (Estructura de Personas) --- */


.lista-b2c {
    display: flex; /* Alinea el Escape Room y Redes Sociales de forma horizontal */
    gap: 30px; /* Espacio entre los dos bloques B2C */
    list-style: none; /* Limpieza de lista */
    padding: 0; /* Limpieza de espacio */
    
}

.lista-b2c li {
    flex: 1; /* Ambas tarjetas ocupan el 50% del ancho */
    /* Crea un degradado desde un dorado oscuro hasta el azul de fondo */
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.1), rgba(0, 27, 54, 1));
    padding: 40px; /* Mucho aire interno para resaltar la importancia */
    border-radius: 20px; /* Esquinas más redondeadas que el B2B para suavizar el diseño */
    border: 1px solid #d4af37; /* Borde dorado sólido para que "brille" más que los de arriba */
    transition: 0.4s; /* pasando el mause por ensima*/
}

    /* Este es el disparador que activa la transición */
    .lista-b2c li:hover {
        transform: translateY(-10px); /* La tarjeta sube suavemente */
        border-color: #ffffff; /* El borde cambia a blanco */
        box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3); /* Sombra dorada */
    }

    .lista-b2c h4 {
        color: #d4af37; /* Dorado para títulos B2C */
        font-size: 1.8rem; /* Títulos más grandes para llamar la atención del público individual */
        margin-bottom: 20px; /* Espacio inferior */
        text-align: center; /* texto alineado en el centro */
    }

    .lista-b2c p {
        color: #ffffff; /* Texto blanco para mayor claridad */
        line-height: 1.7; /* Mayor espacio entre renglones para textos largos descriptivos */
        margin-bottom: 15px; /* Espacio entre los párrafos del Escape Room */
    }

.imagen-vendete-sin-miedo {
    width: 100% !important; /* Obliga a la imagen a ocupar todo el ancho disponible. */
    height: 100% !important; /* Define una altura fija idéntica para todas las fotos. */
    object-fit: cover !important; /* Recorta la imagen para que llene el espacio sin estirarse. */
    border-radius: 12px !important; /* Redondea las esquinas para que se vean modernas. */
    margin: 0 !important; /* Empuja la imagen hacia abajo si el texto de arriba es corto. */
    display: flex !important; /* Asegura que la imagen se comporte como un bloque sólido. */
    overflow: hidden; /* Corta cualquier excedente limpiamente */
}

    /* 2. ¡LA CLAVE!: Forzamos a la imagen interna (<img>) a adaptarse a todo el espacio */
    .imagen-vendete-sin-miedo img {
        width: 100% !important; /* Se expande al ancho total del contenedor */
        height: 100% !important; /* ¡Fuerza el alto total! Se adapta al tamaño exacto de la tarjeta de texto */
        min-height: 320px; /* Altura mínima de seguridad para que no se aplaste en pantallas medianas */

        object-fit: cover !important; /* ¡EL TRUCO!: Rellena todo el alto y ancho sin deformarse ni estirarse feo */
        object-position: center !important; /* Centra el enfoque de la foto para que el encuadre sea perfecto */

        border-radius: 0px !important; /* Garantiza bordes rectos y limpios sin marcos artificiales */
        display: block !important; /* Elimina espacios fantasmas inferiores del navegador */
    }

/* --- RESPONSIVE (Adaptación a Celulares) --- */
@media (max-width: 900px) {
    .servicios-b2b-grid, .lista-b2c {
        flex-direction: column; /* En pantallas pequeñas, las tarjetas se apilan verticalmente */
    }
}

/* BOTONOES DE ACCION H2 EN AMBAS SECCIONES B2B Y B2C*/
/* Contenedor para alinear H2 , h2
/* ==========================================================================
   ALINEACIÓN LATERAL DE TÍTULOS (IZQUIERDA Y DERECHA)
   ========================================================================== */

/* Contenedor principal: mantiene el orden vertical entre la etiqueta y la sección de títulos */
.titulo-con-boton .titulo-seccion-comercial {
    /*display: flex;
    flex-direction: column;
    /*align-items: flex-start;*/
    gap: 5px;
    width: 100%;
    font-size: 3.5rem;
    line-height: 1; /*separacion entre lineas*/
}

/* La nueva sección interna que fuerza la separación de los h2 a los extremos */
/* Corrección Adaptable para tus títulos H2 */
/* Selecciona el contenedor de tus dos títulos h2 */
.bloque-titulos-flex {
    /* Activa la tecnología Flexbox para controlar la dirección de los elementos hijos */
    display: flex;
    /* Por defecto (en celulares), acomoda los títulos en forma de columna (uno debajo del otro) */
    flex-direction: column;
    /* Alinea los textos al inicio izquierdo de esa columna de manera natural */
    align-items: flex-start;
    /* Deja una separación vertical de 15 píxeles entre el primer y el segundo título */
    gap: 15px;
    /* Deja un colchón de aire: 0 píxeles arriba/abajo y 5% de espacio libre a la izquierda/derecha */
    padding: 0 5%;
    /* Asegura que el contenedor abarque todo el ancho disponible de la pantalla */
    width: 100%;
    /* Garantiza que el 5% de padding lateral no ensanche la caja más allá del 100% de la pantalla */
    box-sizing: border-box;
}

    /* Selecciona específicamente los h2 que viven dentro del bloque de títulos */
    .bloque-titulos-flex h2 {
        /* Define un tamaño de letra cómodo (22.4px aprox.), ideal para que no ocupe toda la pantalla de un celular */
        font-size: 1.2rem;
        /* Controla el espacio entre líneas del mismo párrafo para que si el título quiebra, no se pisen las letras */
        line-height: 1.3;
        /* Resetea y elimina cualquier margen nativo que el navegador le ponga por defecto a los h2 */
        margin: 0;
        /* Obliga al h2 a ocupar el 100% del ancho de su fila asignada */
        width: 100%;
    }



/* Estilo para el texto superior (etiqueta dorada) */
.titulo-con-boton > span {
    /*font-family: 'Segoe UI', sans-serif;*/
    font-size: 2rem;
    color: #d4a843;
    text-transform: uppercase;
    letter-spacing: 0em;
    font-weight: 400;
}


/* Estilo del botón verde de WhatsApp al lado del H2 */
.btn-directo-ws {
    background-color: #25d366; /* Verde WhatsApp */
    color: white !important; /* Texto blanco */
    text-decoration: none; /* Quita el subrayado */
    padding: 8px 18px; /* Tamaño del botón */
    border-radius: 50px; /* Forma de cápsula */
    font-size: 0.9rem; /* Un poco más pequeño que el H2 */
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s ease;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
}

    .btn-directo-ws span {
        font-size: 2.1rem;
    }

    .btn-directo-ws:hover {
        transform: scale(1.05); /* Crece un poquito al pasar el mouse */
        background-color: #1ebe57; /* Un verde un poco más oscuro al hacer hover */
        box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4);
    }

/* Ajuste para que el H2 no tenga el margen de abajo solo, sino que lo use el contenedor */
.header-b2b h2, .header-b2c h2 {
    margin-bottom: 0 !important;
}

/* REGLAS PARA LAS IMAGENES DE TODAS LAS TARJETAS ------------------------------------------------------------------------------------------------*/
/* Seleccionamos todas las imágenes de las tarjetas (Home, B2B y B2C) */
.triangulo-articulos img,
.servicios-b2b-grid img,
.lista-b2c img {
    width: 100% !important; /* Obliga a la imagen a ocupar todo el ancho disponible. */
    height: 100% !important; /* Define una altura fija idéntica para todas las fotos. */
    object-fit: cover !important; /* Recorta la imagen para que llene el espacio sin estirarse. */
    border-radius: 12px !important; /* Redondea las esquinas para que se vean modernas. */
    margin-top: auto !important; /* Empuja la imagen hacia abajo si el texto de arriba es corto. */
    display: block !important; /* Asegura que la imagen se comporte como un bloque sólido. */
}

/* Ajustamos las tarjetas para que todas crezcan igual y alineen la imagen al fondo */
.triangulo-articulos article,
.servicios-b2b-grid li,
.lista-b2c li {
    display: flex !important; /* Activa el modo flexible para organizar el contenido. */
    flex-direction: column !important; /* Pone el título, el texto y la foto uno bajo otro. */
    justify-content: space-between !important; /* Separa el texto de la imagen, dejándola al fondo. */
    min-height: 480px !important; /* Establece una altura mínima para que las tarjetas no se vean desiguales. */
    transition: all 0.4s ease !important; /* Asegura que cualquier movimiento sea suave. */
}

/* Unificamos el comportamiento de los textos dentro de las tarjetas */
.triangulo-articulos p,
.servicios-b2b-grid p,
.lista-b2c p, .referencias p {
    margin-bottom: 20px !important; /* Da un espacio constante entre el párrafo y la imagen. */
    flex-grow: 1 !important; /* Permite que el texto ocupe el espacio necesario antes de la foto. */

   
}



/*ESTILOS CSS PARA PAGINA COTIZACION.HTML*/

/* contenedor pagina*/
.contenedor-venta {
    max-width: 1000px; /* No deja que la página se estire más de 1000px para que no se vea desordenada. */
    margin: 0 auto; /* Centra todo el bloque en el medio de la pantalla. */
    padding: 120px 20px; /* Da aire: 120px arriba/abajo para no chocar con el menú y 20px a los lados. */
    text-align: center; /* Alinea todos los textos y botones al centro. */
}

/* TITULOS Y TEXTOS */
.titulo-seccion-venta {
    font-size: 3rem; /* Tamaño de letra grande e impactante para el encabezado. */
    margin-bottom: 25px; /* Espacio de separación con lo que sigue abajo. */
    line-height: 1.2; /* Controla el espacio entre renglones para que no se amontonen las letras. */
    color: white; /* Color de letra blanco para que resalte sobre el fondo oscuro. */
}

.texto-resaltado-amarillo {
    color: #fccb00; /* Es el color "oro" de tu marca para resaltar palabras clave. */
}

.descripcion-venta {
    font-size: 1.3rem; /* Tamaño de letra mediano, fácil de leer. */
    max-width: 700px; /* El párrafo no será muy ancho para que la vista no se canse al leer. */
    margin: 0 auto 40px auto; /* Centra el párrafo y le da 40px de espacio abajo. */
    color: #e0e0e0; /* Un gris clarito para que no canse tanto como el blanco puro. */
    line-height: 1.6; /* Más espacio entre renglones para mejorar la lectura. */
}

/* BOTON ACCION*/
.btn-accion-amarillo {
    display: inline-block; /* Permite que el botón tenga tamaño y márgenes correctos. */
    background-color: #fccb00 !important; /* Fondo amarillo (el !important asegura que no cambie). */
    color: #000a12 !important; /* Letras casi negras para que se lean perfecto sobre el amarillo. */
    padding: 15px 35px; /* Tamaño interno del botón (lo hace gordito y profesional). */
    border-radius: 50px; /* Puntas totalmente redondeadas. */
    font-weight: bold; /* Letra en negrita. */
    font-size: 1.2rem; /* Tamaño de letra del botón. */
    text-decoration: none; /* Quita el subrayado típico de los enlaces. */
    transition: all 0.3s ease; /* Hace que los cambios (como el hover) sean suaves, no bruscos. */
    box-shadow: 0 4px 15px rgba(252, 203, 0, 0.3); /* Una sombra suave amarilla para dar profundidad. */
    border: none; /* Quita cualquier borde automático. */
}

    .btn-accion-amarillo:hover {
        transform: translateY(-3px); /* Al pasar el mouse, el botón "salta" 3 píxeles hacia arriba. */
        filter: brightness(1.1); /* El botón se ilumina un poco más al tocarlo. */
        box-shadow: 0 6px 20px rgba(252, 203, 0, 0.5); /* La sombra crece cuando el botón "sube". */
    }

    /* SECCION PROBLEMAS LAS X ROJAS*/
.seccion-problemas {
    margin: 80px 0; /* Espacio de 80px arriba y abajo de esta sección. */
    background: rgba(255, 255, 255, 0.02); /* Un fondo blanco casi invisible para dar textura. */
    padding: 60px 30px; /* Espacio interno para que el contenido no toque los bordes. */
    border-radius: 20px; /* Esquinas redondeadas de la caja. */
    border: 1px solid rgba(252, 203, 0, 0.1); /* Un borde muy finito y sutil de color amarillo. */
}

.grilla-problemas {
    display: grid; /* Activa el modo "rejilla". */
    grid-template-columns: repeat(3, 1fr); /* Divide el espacio en 3 columnas exactamente iguales. */
    gap: 25px; /* Espacio de separación entre cada cuadrito de la rejilla. */
    text-align: left; /* Aquí el texto sí va alineado a la izquierda. */
    margin-bottom: 50px; /* Espacio abajo antes del siguiente elemento. */
}

.item-problema {
    display: flex; /* Alinea la "X" y el texto en la misma línea. */
    align-items: center; /* Centra la "X" verticalmente con el texto. */
    gap: 15px; /* Separación entre la "X" y la frase. */
    color: white; /* Color de texto blanco. */
}

.icono-x {
    color: #ff4d4d; /* Color rojo llamativo para las "X". */
    font-weight: bold; /* Hace la "X" más gruesa. */
}

/* TARJETAS DIAGNOSTICO*/
.grilla-diagnostico {
    display: grid; /* Otra rejilla para las tarjetas con foto. */
    grid-template-columns: repeat(3, 1fr); /* También en 3 columnas. */
    gap: 30px; /* Un poco más de espacio entre tarjetas. */
    margin: 60px 0; /* Espacio arriba y abajo de la grilla. */
}

.tarjeta-diagnostico {
    background: #001122; /* Fondo azul muy oscuro (casi negro). */
    padding: 30px; /* Aire dentro de la tarjeta. */
    border-radius: 15px; /* Esquinas suavizadas. */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde gris muy suave. */
    text-align: left; /* Texto alineado a la izquierda. */
}

    .tarjeta-diagnostico img {
        width: 100%; /* La foto ocupa todo el ancho de la tarjeta. */
        height: 180px; /* Altura fija para que todas las fotos se vean iguales. */
        object-fit: cover; /* Si la foto es más grande, la corta para que no se estire. */
        border-radius: 8px; /* Esquinas de la foto redondeadas. */
        margin: 20px 0; /* Espacio arriba y abajo de la imagen. */
    }


/* FINAL ADAPTACION A MOVILES*/
.contenedor-formulario-final {
    margin-top: 100px; /* Separa el formulario de lo anterior por 100px. */
    padding: 50px; /* Espacio dentro del cuadro del formulario. */
    border: 2px solid #fccb00; /* Un borde amarillo grueso para resaltar el objetivo final. */
    border-radius: 20px; /* Esquinas redondeadas. */
    background: rgba(0,0,0,0.3); /* Fondo oscuro semi-transparente. */
}

@media (max-width: 768px) { /* "Si la pantalla es menor a 768px (como un celular)..." */
    .grilla-problemas, .grilla-diagnostico {
        grid-template-columns: 1fr; /* Cambia las 3 columnas por 1 sola para que se lea bien. */
    }
}

/* ESTILO imagen referencias comerciales */
/* Contenedor de la sección de referencias */
/* Movimiento del Banner */
/* ============================================================
   MOVIMIENTO DEL BANNER (CARRUSEL INFINITO)
   ============================================================ */

/* Contenedor principal que actúa como una "ventana" fija */
.logos-banner {
    overflow: hidden; /* Esconde todo lo que se salga de los bordes del contenedor */
    white-space: nowrap; /* Evita que las imágenes se bajen al siguiente renglón; las mantiene en una sola fila */
    position: relative; /* Permite posicionar elementos internos de forma absoluta si fuera necesario */
    padding: 20px 0; /* Añade espacio arriba y abajo del banner para que respire */
}

/* La "tira" interna que contiene las imágenes y se desplaza */
.logos-slide {
    display: inline-block; /* Permite que el contenedor se ajuste al ancho total de las imágenes */
    /* Aplica la animación: nombre, duración, repetición infinita y velocidad constante */
    animation: deslizar-izquierda 20s infinite linear;
}

    /* Estilos específicos para las imágenes dentro del carrusel */
    .logos-slide img {
        height: 100px; /* Define una altura uniforme para que todos los logos se vean alineados */
        margin: 0 0px; /* Espaciado lateral entre logos (actualmente en 0 porque la cinta ya trae espacio) */
    }

/* Definición de la animación de desplazamiento */
@keyframes deslizar-izquierda {
    from {
        transform: translateX(0); /* Punto de inicio: posición original */
    }

    to {
        /* Punto final: se mueve un 50% a la izquierda para que el bucle sea invisible */
        transform: translateX(-50%);
    }
}

/* ============================================================
   ESTILOS PARA EL BOTÓN DE WHATSAPP (Limpio y Grande)
   ============================================================ */

/* Contenedor del botón de contacto */
.btn-whatsapp {
    background-color: transparent !important; /* Elimina cualquier fondo (como el verde anterior) */
    border: none; /* Elimina bordes o líneas de contorno */
}

/* La imagen del icono de WhatsApp */
.img-ws {
    width: 50px; /* Tamaño ajustado para que destaque en el menú de navegación */
    height: auto; /* Mantiene la proporción original para que no se deforme */
    display: block; /* Elimina espacios fantasma debajo de la imagen */
}
/* Imagen de WhatsApp más grande y sin fondo verde */
.btn-whatsapp {
    background-color: transparent !important;
    border: none;
}

.img-ws {
    width: 100px; /* Tamaño más grande como pediste */
    height: auto;
    display: block;
}
/* FOOTER - ESTILO FINAL UNIFICADO */

/* FOOTER - ESTILO FINAL UNIFICADO */

/* Contenedor principal que envuelve todo el pie de página */
.main-footer {
    background-color: #001122; /* Color azul marino profundo de la marca */
    padding: 20px 5% 10px; /* Espaciado: 60px arriba, 5% a los lados, 20px abajo */
    border-top: 1px solid #d4af37; /* Línea delgada dorada que separa el footer del contenido */
    color: white; /* Color de texto blanco por defecto */
}

/* Envoltura interna que organiza las columnas */
.contenedor-footer {
    display: flex; /* Activa Flexbox para poner las columnas en fila */
    justify-content: space-between; /* Distribuye las columnas con espacio máximo entre ellas */
    align-items: flex-start; /* Alinea las columnas desde su parte superior */
    flex-wrap: wrap; /* Permite que las columnas bajen si no caben en la pantalla */
    gap: 15px; /* Espacio de separación entre cada columna */
    max-width: 1200px; /* Ancho máximo permitido para el contenido del footer */
    margin: 0 auto; /* Centra todo el contenedor en la pantalla */
}

/* 1. CONFIGURACIÓN DE CADA COLUMNA INDIVIDUAL */
.footer-column {
    flex: 1; /* Hace que todas las columnas ocupen el mismo ancho */
    display: flex; /* Activa Flexbox interno para organizar logo y textos */
    flex-direction: column; /* Ordena los elementos uno debajo del otro */
    align-items: center; /* Centra horizontalmente todo el contenido de la columna */
    text-align: center; /* Centra el texto de los párrafos y títulos */
    padding: 15px; /* Espacio interno para que el contenido no toque los bordes */
}

    /* 2. MANIPULACIÓN DE LA IMAGEN (Logo dentro de la columna) */
    .footer-column img {
        width: 140px; /* Define el ancho fijo del logo */
        height: auto; /* Mantiene la proporción para que no se vea estirado */
        max-width: 100%; /* Si la columna se achica, el logo también se encoge solo */
        object-fit: contain; /* Asegura que el logo se ajuste al espacio sin recortarse */
        margin-bottom: 20px; /* Separa el logo del texto que viene debajo */
        filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.5)); /* Crea una sombra suave tras el logo */
        display: block; /* Elimina espacios en blanco extraños debajo de la imagen */
    }

    /* 3. AJUSTE DEL TEXTO DESCRIPTIVO (Eslogan o info) */
    .footer-column p {
        font-size: 1rem; /* Tamaño de fuente pequeño y elegante */
        color: #cccccc; /* Color gris claro para que sea legible pero discreto */
        line-height: 1.5; /* Espaciado entre renglones para mejor lectura */
        max-width: 260px; /* Limita el ancho del texto para que no se estire demasiado */
        margin: 0 auto; /* Asegura que el bloque de texto esté centrado */
    }

    /* Títulos de las columnas (Navegación, Contacto, Síguenos) */
.titulo-footer {
    color: #d4af37 !important; /* Color dorado para resaltar los títulos */
    margin-bottom: 25px; /* Espacio debajo del título */
    font-size: 2rem; /* Tamaño de fuente destacado */
    text-transform: uppercase; /* Convierte todo el título a mayúsculas */
    font-weight: bold; /* Aplica un grosor de letra completamente en negrita para dar autoridad */
}

    /* Estilos para las listas de enlaces (Navegación) */
    .footer-column ul {
        list-style: none; /* Quita los puntos negros de la lista */
        padding: 0; /* Elimina el margen interno por defecto de las listas */
    }

        /* Cada ítem de la lista */
        .footer-column ul li {
            margin-bottom: 12px; /* Separa un enlace del otro verticalmente */
        }

    /* Estilo de los enlaces en el footer */
    .footer-column a {
        color: #e0e0e0; /* Color gris muy claro casi blanco */
        text-decoration: none; /* Quita el subrayado automático */
        transition: 0.3s ease; /* Hace que los cambios de color sean suaves */
    }

        /* Efecto cuando el usuario pasa el mouse sobre un enlace */
        .footer-column a:hover {
            color: #ffffff; /* El texto se vuelve blanco puro */
            padding-left: 5px; /* El enlace se desplaza un poco a la derecha (efecto visual) */
        }

/* Clase específica para el logo principal del footer (Uso extra de seguridad) */
.footer-logo {
    max-width: 200px !important; /* Fuerza un ancho máximo aunque existan otras reglas */
    height: auto !important; /* Fuerza que la altura sea proporcional siempre */
    margin-bottom: 50px; /* Espacio inferior grande */
    display: block; /* Asegura que se comporte como un bloque independiente */
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3)); /* Sombra con brillo dorado sutil */
}

/* Estilo para botones redes sociales */
/*. Contenedor interno exclusivo de las imágenes */
.contenedor-iconos {
    display: flex; /* Pone un logo al lado del otro horizontalmente */
    gap: 12px; /* Espacio exacto entre el logo de Facebook e Instagram */
}

/* 1. Contenedor de la sección de redes */
.footer-redes {
    margin-top: 20px; /* Separa los logos del texto de contacto */
    display: flex; /* Activa flexbox */
    flex-direction: column; /* Título arriba, iconos abajo */
    gap: 10px; /* Espacio entre el título y los logos */
}

    /* 2. Título pequeño de "Síguenos" */
    .footer-redes h3 {
        font-size: 1rem !important; /* Lo hace más pequeño que los títulos principales */
        margin-bottom: 5px !important;
        color: #d4a843; /* Dorado de la marca */
    }

    /* 3. Ajuste de los logos (Aquí es donde los hacemos pequeños) */
    .footer-redes .img-red {
        width: 30px !important; /* Tamaño pequeño y elegante */
        height: 30px !important; /* Altura igual al ancho */
        min-height: auto !important; /* IMPORTANTE: Rompe la regla de las tarjetas grandes */
        object-fit: contain !important; /* Evita que el logo se deforme */
        margin-top: 0 !important; /* Quita el margen automático que usamos en servicios */
        border-radius: 4px !important; /* Redondeo suave proporcional al tamaño */
        filter: brightness(0.8);
        transition: 0.3s ease;
    }

        /* 4. Efecto al pasar el mouse */
        .footer-redes .img-red:hover {
            transform: scale(1.2); /* Crece un poquito al tocarlo */
            filter: brightness(1);
        }


/* 4. Efecto interactivo */
.img-red:hover {
    transform: scale(1.1); /* Crece un 10% cuando pasas el mouse */
    filter: brightness(1.1); /* Se ilumina un poco al pasar el mouse */
    border-radius: 50%; /* Truco opcional: se vuelven circulares al tocarlos */
}

/* Reset de address para que no salga en cursiva */
address {
    font-style: normal;
    line-height: 1.6;
    color: #e0e0e0;
}

/* Barra inferior de Copyright */
.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding: 10px 5% 10px; /* Espaciado: 60px arriba, 5% a los lados, 20px abajo */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: #888;
}

/* Estilo específico para el logo del footer */
.footer-column img {
    height: 100px; /* Ajusta este valor según tu gusto (entre 60px y 80px es lo ideal) */
    width: auto; /* Mantiene la proporción para que no se vea estirado */
    margin-bottom: 20px; /* Separa el logo del párrafo de abajo */
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.2)); /* Un brillo dorado sutil */
    display: block; /* Asegura que el margen funcione correctamente */
}

/* ESTILO DEL HOME CONVERSION */
/* ============================================================
   HERO PRINCIPAL - ABOVE THE FOLD
   Estilos para la section de conversión principal
============================================================ */
/* Contenedor principal del hero - fondo azul oscuro como imagen */
.hero-principal {
    position: relative; /* Para posicionar elementos absolutos dentro */
    display: flex; /* Layout flex: figura izquierda + contenido derecha */
    align-items: center; /* Centrado vertical */
    min-height: 100vh; /* Ocupa toda la pantalla inicial */
    background-color: #001122; /* Azul oscuro profundo como en la referencia */
    overflow: hidden; /* Evita desbordamiento de la figura */
    padding: 40px 60px; /* Espaciado interno general */
}

/* Figura con la imagen de Frank Correa - lado izquierdo */
.hero-figura {
    flex: 0 0 40%; /* Ocupa 45% del ancho */
    margin: 0; /* Sin margen extra */
    position: relative; /* Posición normal en el flujo */
    z-index: 1; /* Por encima del fondo */
    /*display: flex; /* Flex para apilar nombre e imagen */
    /*flex-direction: column; /* Nombre arriba, imagen abajo */
    align-items: flex-start; /* Alineados a la izquierda */
    align-self: stretch; /* Estira hasta el alto del hero */
}

    /* Imagen de Frank - grande, sin recuadro, con bordes desvanecidos */
    .hero-figura img {
        width: 100%; /* Ocupa todo el ancho de su contenedor */
        height: 80vh; /* Alto generoso casi toda la pantalla */
        object-fit: cover; /* Rellena sin deformar */
        object-position: top center; /* Muestra la parte superior - cara y cuerpo */
        display: block; /* Sin espacio extra debajo */
        /* Desvanecer los 4 lados con máscara de gradiente */
        -webkit-mask-image: linear-gradient( to right, transparent 0%, /* Lado izquierdo invisible */
        black 50%, /* Aparece gradualmente */
        black 80%, /* Centro completamente visible */
        transparent 20% /* Lado derecho invisible */
        ), linear-gradient( to bottom, transparent 0%, /* Borde superior invisible */
        black 10%, /* Aparece rápido arriba */
        black 85%, /* Cuerpo completamente visible */
        transparent 40% /* Borde inferior invisible */
        );
        -webkit-mask-composite: destination-in; /* Combina ambas máscaras */
        mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 85%, transparent 100%);
        mask-composite: intersect; /* Estándar: intersecta ambas máscaras */
    }
/* Contenido textual - lado derecho */
.hero-contenido {
    flex: 0 0 55%; /* Ocupa 55% del ancho */
    padding-left: 40px; /* Separación respecto a la figura */
    z-index: 2; /* Por encima del fondo */
    color: #ffffff; /* Texto blanco por defecto */
}

/* Línea superior con nombre y título del experto */
.hero-nombre-experto {
    display: flex; /* En línea horizontal */
    align-items: center; /* Centrado vertical */
    gap: 15px; /* Separación entre elementos */
    margin-bottom: 20px; /* Espacio debajo */
    font-size: 0.95rem; /* Tamaño pequeño */
    color: #d4a843; /* Dorado */
}

/* Nombre en cursiva dorada - "Frank Correa" */
/* Nombre "Frank Correa" en cursiva dorada sobre la imagen */
.hero-frank-nombre-sobre-imagen {
    font-style: italic; /* Cursiva elegante */
    color: #d4a843; /* Dorado */
    font-size: 1.2rem; /* Tamaño visible */
    font-weight: 400; /* Peso normal para cursiva fina */
    margin-bottom: 10px; /* Espacio entre nombre e imagen */
    padding-left: 10px; /* Leve sangría */
    z-index: 2; /* Por encima de la imagen */
}

/* Separador vertical entre nombre y título */
.hero-separador {
    color: #d4a843; /* Dorado */
    font-size: 1.2rem; /* Mismo tamaño */
}

/* Texto "EXPERTO EN INFLUENCIA COMERCIAL" */
.hero-titulo-experto {
    color: #ffffff; /* Blanco */
    font-size: 0.8rem; /* Pequeño */
    letter-spacing: 0.1em; /* Espaciado entre letras */
    text-transform: uppercase; /* Mayúsculas */
}

/* H1 principal del hero */
.hero-titulo-principal {
    font-size: 3.2rem; /* Grande y dominante */
    font-weight: 900; /* Muy negrita */
    line-height: 1.1; /* Líneas compactas */
    color: #ffffff; /* Blanco */
    text-transform: uppercase; /* Todo mayúsculas */
    margin-bottom: 20px; /* Espacio debajo */
    letter-spacing: 0.02em; /* Leve espaciado */
}

/* Línea amarilla del H1 - "COMUNICACIÓN NO VERBAL" */
.hero-titulo-amarillo {
    color: #f5c518; /* Amarillo brillante */
}

/* Subtítulo descriptivo bajo el H1 */
.hero-subtitulo {
    font-size: 1rem; /* Tamaño normal */
    color: #cccccc; /* Gris claro */
    line-height: 1.6; /* Espaciado cómodo */
    margin-bottom: 35px; /* Espacio antes del botón */
    max-width: 480px; /* Limita el ancho para legibilidad */
}

/* Texto dorado dentro del subtítulo */
.hero-texto-dorado {
    color: #f5c518; /* Dorado */
}

/* Imagenes dentro del hero */
.img-equipos, .img-resultados, .img-humano {
    width: 50px; /* ajustar el valor para modificar la altura */
    height: auto; /* mantiene la proporcion*/
    display: block; /* evtita espacios extra abajo */
    margin: 0 auto 5px; /* centra el logo y el espacio al texto inferior */

}

/* ============================================================
   BOTÓN PALPITANTE - CTA PRINCIPAL
   Animación que llama la atención del usuario
============================================================ */

/* Botón CTA con efecto palpitante */
.btn-hero-palpitante {
    display: inline-flex; /* Flex para alinear icono y texto */
    align-items: center; /* Centrado vertical */
    gap: 10px; /* Espacio entre icono y texto */
    background-color: #f5c518; /* Amarillo como en la imagen */
    color: #0a1628; /* Azul oscuro - contraste alto */
    font-size: 1rem; /* Tamaño legible */
    font-weight: 700; /* Negrita */
    text-decoration: none; /* Sin subrayado */
    padding: 16px 32px; /* Espaciado interno generoso */
    border-radius: 6px; /* Bordes levemente redondeados */
    text-transform: uppercase; /* Mayúsculas */
    letter-spacing: 0.05em; /* Espaciado entre letras */
    margin-bottom: 50px; /* Espacio antes de los pilares */
    animation: palpitar 1.8s ease-in-out infinite; /* Animación continua */
}

/* Definición de la animación palpitante */
@keyframes palpitar {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.6);
    }
    /* Estado normal */
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 12px rgba(245, 197, 24, 0);
    }
    /* Expandido */
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 197, 24, 0);
    }
    /* Vuelve a normal */
}

/* Efecto hover sobre el botón - pausa la animación y oscurece */
.btn-hero-palpitante:hover {
    animation-play-state: paused; /* Pausa al pasar el mouse */
    background-color: #d4a843; /* Dorado más oscuro */
    transform: scale(1.05); /* Leve agrandamiento */
}

/* ============================================================
   PILARES INFERIORES DEL HERO
   Tres íconos con texto bajo el botón CTA
============================================================ */

/* Contenedor de los tres pilares */
.hero-pilares {
    display: flex; /* En fila horizontal */
    gap: 30px; /* Separación entre pilares */
    align-items: stretch; /* Alineados desde arriba */
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas exactamente iguales en ancho */
    padding: 0; /* Resetea espacios */
    width: 100%;
}

/* Cada pilar individual */
.hero-pilar {
    display: flex; /* Flex vertical */
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center; /* Centrado horizontal */
    text-align: center; /* Texto centrado */
    gap: 8px; /* Espacio entre icono y texto */
}

/* Icono de cada pilar */
.hero-pilar-icono {
    height: 60px;                     /* MODIFICADO: Obliga a todos los iconos a medir exactamente lo mismo de alto */
    width: auto;                      /* Mantiene la proporción del icono */
    object-fit: contain;              /* Evita deformaciones */
    margin-bottom: 5px;              /* Separa el icono uniformemente del texto de abajo */
    flex-shrink: 0;                   /* Impide que el texto comprima el tamaño de la imagen */
}

/* Texto de cada pilar */
.hero-pilar p {
    font-size: 0.7rem; /* Pequeño como en la referencia */
    color: #aaaaaa; /* Gris claro */
    text-transform: uppercase; /* Mayúsculas */
    letter-spacing: 0.08em; /* Espaciado amplio */
    line-height: 1.5; /* Espaciado entre líneas */
    margin: 0; /* Sin margen extra */
}

    /* Texto en negrita dentro de cada pilar */
    .hero-pilar p strong {
        color: #ffffff; /* Blanco para el texto fuerte */
    }

/* Logo triangulo - esquina superior derecha */
.hero-logo-triangulo {
    position: absolute; /* Posición absoluta dentro del hero */
    top: 30px; /* Desde arriba */
    right: 40px; /* Desde la derecha */
    margin: 0; /* Sin margen */
    z-index: 3; /* Por encima de todo */
}

    /* Imagen del logo triangulo */
    .hero-logo-triangulo img {
        width: 120px; /* Tamaño del logo */
        opacity: 0.9; /* Leve transparencia */
    }

/* ================================================================
   RESPONSIVE: PASAR A COLUMNA EN MÓVILES
================================================================ */
@media (max-width: 768px) {
    ul.grilla-caracteristicas {
        grid-template-columns: 1fr; /* En celulares se apilan una debajo de otra */
        gap: 20px; /* Reduce un poco el espacio de separación */
    }
}


/*CONDICION QU SE ACTIVA SI SE ABRE LA PAGINA EN CELULAR*/
/* Condición: Si la pantalla es igual o menor a 768px, ejecuta todo lo que esté aquí adentro */
@media screen and (max-width: 768px) {

    /* === 1. MENÚ DE NAVEGACIÓN === */

    /* Selecciona la lista de enlaces de tu menú */
    .nav-links {
        /* Cambia el menú horizontal por una lista vertical (enlaces uno debajo de otro) */
        flex-direction: column;
        /* Separa los enlaces 10 píxeles entre sí para que sea fácil tocarlos con el dedo */
        gap: 10px;
        /* Centra los textos de los enlaces en el medio de la pantalla del móvil */
        text-align: center;
        /* Añade 10 píxeles de espacio arriba y abajo del menú para que respire */
        padding: 10px 0;
    }

    /* Selecciona la barra completa de navegación superior */
    header {
        /* Apila el Logo de la Escuela y el Menú verticalmente (uno abajo del otro) */
        flex-direction: column;
        /* Separa el logo del bloque de enlaces por 15 píxeles */
        gap: 15px;
        /* Centra todo el contenido de la cabecera en el celular */
        text-align: center;
    }

    /* === 2. CUADRÍCULA B2B === */

    /* Selecciona la cuadrícula (grid) donde se muestran los servicios para empresas */
    .servicios-b2b-grid {
        /* Activa flexbox para poder manipular la dirección en móvil */
        display: flex;
        /* Transforma la cuadrícula de lado a lado en una fila india vertical (una tarjeta abajo de otra) */
        flex-direction: column;
        /* Deja un espacio de 25 píxeles entre tarjeta y tarjeta para que no se vean amontonadas */
        gap: 25px;
        /* Elimina rellenos internos innecesarios que puedan encoger las tarjetas en el celular */
        padding: 0;
    }

        /* Selecciona cada tarjeta (cada elemento <li>) de la lista B2B */
        .servicios-b2b-grid li {
            /* Obliga a la tarjeta a expandirse por completo a lo ancho de la pantalla del teléfono */
            width: 100%;
            /* Deja un margen de seguridad de 15 píxeles abajo antes de la siguiente tarjeta */
            margin-bottom: 15px;
        }

    /* === 3. LISTA B2C === */

    /* Selecciona el contenedor de los servicios para personas (Véndete sin miedo, etc.) */
    .lista-b2c {
        /* Activa flexbox para reordenar los elementos */
        display: flex;
        /* Apila los servicios uno debajo del otro en vertical */
        flex-direction: column;
        /* Separa los bloques de servicios por 25 píxeles */
        gap: 25px;
    }

        /* Selecciona cada tarjeta de servicio individual en la sección B2C */
        .lista-b2c li {
            /* Hace que cada bloque use la totalidad del ancho de la pantalla del celular */
            width: 100%;
        }

        /* === 4. CONTROL DE IMÁGENES === */

        /* Selecciona todas las imágenes que están dentro de las tarjetas B2B y B2C */
        .servicios-b2b-grid img,
        .lista-b2c img {
            /* Hace que la imagen intente ocupar todo el ancho de su tarjeta */
            width: 100%;
            /* Bloquea la imagen para que nunca supere el ancho de la pantalla del celular, evitando que rompa el diseño */
            max-width: 100%;
            /* ¡SÚPER IMPORTANTE!: Hace que la altura se calcule sola en proporción al ancho para que la foto NO se vea estirada ni deforme */
            height: auto;
            /* Cambia la imagen a comportamiento de bloque para poder centrarla correctamente */
            display: block;
            /* Aplica márgenes inteligentes: 15px arriba para separarse del texto, "auto" a los lados para centrarse, y 0 abajo */
            margin: 15px auto 0 auto;
        }

    /* === 5. EL PIE DE PÁGINA (FOOTER) === */

    /* Selecciona el contenedor que agrupa las columnas del footer */
    .contenedor-footer {
        /* Activa flexbox para controlar la distribución */
        display: flex;
        /* Pasa las columnas que estaban de lado a una sola fila vertical */
        flex-direction: column;
        /* Separa cada sección del footer (Navegación, Contacto, Redes) por 30 píxeles */
        gap: 30px;
        /* Centra todos los textos del footer, lo que visualmente se ve mucho más estético en móviles */
        text-align: center;
    }

    /* Selecciona cada columna individual del footer */
    .footer-column {
        /* Alinea los elementos internos (como el logo o los títulos) justo al centro del celular */
        align-items: center;
    }

    /* Selecciona la caja que guarda los iconos de Facebook e Instagram */
    .footer-redes .contenedor-iconos {
        /* Centra horizontalmente los iconos de tus redes sociales en la pantalla del celular */
        justify-content: center;
    }
}

/*SE ACTIVA SI SE ABRE EN PANTALLA PC O TABLET O PORTATIL*/
/* Condición: Si la pantalla mide 769 píxeles de ancho o más, aplica lo siguiente */
@media screen and (min-width: 769px) {

    /* Selecciona el bloque de tus dos títulos h2 */
    .bloque-titulos-flex {
        /* Cambia la dirección a fila (vuelven a ponerse uno al lado del otro en horizontal) */
        flex-direction: row;
        /* Empuja el primer título a la extrema izquierda y el segundo título a la extrema derecha */
        justify-content: space-between;
        /* Deja un espacio de seguridad de 40 píxeles entre ellos por si la pantalla se achica un poco */
        gap: 40px;
        font-weight: 400 !important;
    }

        /* Selecciona los h2 dentro del bloque horizontal */
        .bloque-titulos-flex h2 {
            /* Devuelve la letra a un tamaño más imponente y grande para computadoras (25.6px aprox.) */
            font-size: 1.0rem;
            /* Hace que ambos h2 se repartan el espacio de la pantalla de forma equitativa (50% y 50% ideal) */
            flex: 1;
            font-weight: 400;
            opacity: 0.60 !important; /* texto opaco */
        }
}

/* ==========================================================================
   ESTILOS DE LA NUEVA SECCIÓN: DESARROLLO WEB (ENFOQUE DE MARKETING)
   ========================================================================== */

/* Regla para el contenedor principal que envuelve toda la nueva sección */
.seccion-desarrollo-comercial {
    padding: 80px 5%;
    background-color: #001122; /* Mantiene tu azul marino profundo original */
    border-top: 1px solid #002a54; /* Sutil línea divisoria superior */
    width: 100%;
}

/* Regla para la caja que envuelve el h2 y el párrafo del título */
.titulo-seccion-comercial {
    text-align: center; /* Centra horizontalmente el título y el subtítulo en el medio */
    margin-bottom: 20px; /* Deja 50 píxeles de espacio libre abajo antes de que aparezcan los botones */
}

    /* Regla específica para darle la misma apariencia visual a tu nuevo título H2 */
    .titulo-seccion-comercial h2 {
        font-size: 36px; /* Define un tamaño de letra grande e imponente igual a tus otros títulos */
        /*font-weight: bold; /* Aplica un grosor de letra completamente en negrita para dar autoridad */
        color: #ffffff; /* Pinta el texto del título en color blanco puro */
        letter-spacing: 0.5px; /* Separa las letras ligeramente por medio píxel para mejorar el diseño */
    }


    /* Regla para el párrafo descriptivo que va debajo del título principal */
    .titulo-seccion-comercial .subtitulo-comercial {
        font-size: 17px; /* Tamaño de letra equilibrado y cómodo para leer la propuesta de valor */
        color: #b0c4de; /* Tono azul grisáceo suave para que no compita visualmente con el H2 */
        max-width: 800px; /* Limita el ancho del texto a 800px para que las líneas no se hagan infinitas */
        margin: 15px auto 0 auto; /* Separa 15px arriba, centra a los lados (auto) y deja 0 espacio abajo */
        line-height: 1.6; /* Deja un espacio interlineado amplio para que el párrafo no se vea amontonado */
    }

/*parrafo p de desarrollo web */
.titulo-seccion-comercial p {
    color: #ffffff; /* texto en balnco */
    font-size: 1.5rem; /*tamaño de la lectura comodo*/
    max-width: 800px; /*evita qeu las lineas de texto  sean demaciado largas y no se puedan leer*/
    margin: 0 auto; /*centra el bloque de texto si es mas corto que el contenedor*/
    padding: 5%;
}

/* Regla para la caja contenedora elástica que agrupa los 3 botones */
.bloque-botones-marketing {
    display: flex; /* Activa la caja flexible Flexbox para alinear los botones en horizontal */
    flex-wrap: wrap; /* TRUCO CLAVE: Si los botones no caben en fila (celulares), se bajan solos */
    justify-content: center; /* Centra de forma simétrica los tres botones en el medio de la pantalla */
    gap: 25px; /* Deja exactamente 25 píxeles de separación entre cada botón */
    margin-bottom: 60px; /* Deja 60 píxeles de espacio libre abajo antes de las tarjetas de argumentos */
}

/* CLASE MAESTRA: Formato estructural base idéntico para los 3 botones de acción */
.boton-marketing-accion {
    display: flex; /* Convierte el botón interno en otra caja flexible para acomodar sus textos */
    flex-direction: column; /* Ordena los textos en vertical: el título arriba y el subtítulo abajo */
    justify-content: center; /* Centra verticalmente los textos dentro del cuerpo del botón */
    align-items: center; /* Centra horizontalmente los textos dentro del cuerpo del botón */
    padding: 20px 25px; /* Deja 20px de colchón interno arriba/abajo y 25px a los lados del botón */
    border-radius: 8px; /* Suaviza y redondea las esquinas del botón con un radio de 8 píxeles */
    text-decoration: none; /* Elimina la línea subrayada inferior que traen los enlaces por defecto */
    text-align: center; /* Asegura que los textos internos del botón estén perfectamente centrados */
    min-width: 270px; /* Evita que los botones se achiquen de más, manteniendo la simetría visual */
    max-width: 330px; /* Impide que el botón se estire demasiado en pantallas gigantes de escritorio */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Genera una sombra negra suave abajo para simular profundidad */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Suaviza el movimiento y cambio de color al pasar el mouse */
}

/* Regla para la primera línea de texto (El beneficio principal en mayúsculas) */
.txt-boton-principal {
    font-size: 19px; /* Letra grande y llamativa para el título del botón */
    font-weight: bold; /* Pone el texto en negrita fuerte para captar la atención */
    text-transform: uppercase; /* Convierte todo este texto a MAYÚSCULAS automáticamente */
    margin-bottom: 5px; /* Deja 5 píxeles de separación con el subtítulo de abajo */
    letter-spacing: 0.5px; /* Separa ligeramente las letras para un look más moderno */
}

/* Regla para la segunda línea de texto (La explicación comercial pequeña) */
.txt-boton-secundario {
    font-size: 13px; /* Tamaño de letra reducido para la descripción del botón */
    opacity: 0.9; /* Le da un 90% de opacidad para que se vea sutilmente más suave */
    line-height: 1.5; /* Ajusta el espacio vertical entre líneas del subtítulo */
    text-align: left;
}

/* Estilo para el Botón 1 (Páginas que Venden - Fondo Rosa Comercial) */
.btn-marketing-rosa {
    background-color: #d4a843; /* Color fucsia/rosa encendido de alta conversión para llamar al clic */
    color: black; /* Texto en color blanco puro para contrastar perfecto */
}

    /* Efecto hover interactivo cuando el usuario pone el mouse sobre el botón rosa */
    .btn-marketing-rosa:hover {
        background-color: #e02253; /* color dorado Oscurece un tono el fondo simulando que el botón es oprimido */
        transform: translateY(-4px); /* EFECTO LEVITACIÓN: Sube el botón 4 píxeles de forma elegante */
        box-shadow: 0 8px 22px rgba(255, 51, 102, 0.45); /* Multiplica la sombra inferior con un resplandor rosa */
    }

/* Estilo para el Botón 2 (Impulso Digital - Fondo Turquesa Tecnológico) */
.btn-marketing-turquesa {
    background-color: #00ffcc; /* Fondo color verde turquesa brillante que evoca desarrollo moderno */
    color: #001122; /* CONTRASTE OBLIGATORIO: Letra azul marino oscuro para que sea legible */
}

    /* Efecto hover interactivo cuando el usuario pone el mouse sobre el botón turquesa */
    .btn-marketing-turquesa:hover {
        background-color: #00ccaa; /* Cambia el tono del turquesa al pasar el mouse por encima */
        transform: translateY(-4px); /* Hace flotar el botón 4 píxeles hacia arriba fluidamente */
        box-shadow: 0 8px 22px rgba(0, 255, 204, 0.45); /* Añade un resplandor turquesa en la sombra de abajo */
    }

/* Estilo para el Botón 3 (Tu Web Pro - Transparente con Borde Blanco) */
.btn-marketing-pro {
    background-color: transparent; /* Fondo transparente para dejar ver el azul marino de tu página */
    color: #ffffff; /* Texto interno en color blanco puro */
    border: 2px solid #ffffff; /* Dibuja un marco o borde sólido de 2 píxeles de grosor en color blanco */
}

    /* Efecto hover interactivo cuando el usuario pone el mouse sobre el botón transparente */
    .btn-marketing-pro:hover {
        background-color: #ffffff; /* INVERSIÓN: El fondo del botón se rellena completamente de blanco */
        color: #001122; /* El texto cambia a azul marino oscuro para resaltar sobre el fondo blanco */
        transform: translateY(-4px); /* Eleva el botón 4 píxeles de forma fluida */
        box-shadow: 0 8px 22px rgba(255, 255, 255, 0.25); /* Genera un reflejo blanco suave en la base */
    }

/* Regla para la cuadrícula inteligente que organiza los 3 bloques informativos de SEO */
.rejilla-argumentos-seo {
    display: grid; /* Activa el sistema Grid nativo para estructurar las tarjetas */
    /* REGLA DE ORO RESPONSIVE SIN MEDIA QUERIES:
       Acomoda de forma automática las columnas que quepan en la pantalla. Cada una medirá un mínimo de 290px
       y un máximo de 1 fracción del espacio total (1fr). Si no caben en celulares, se bajan solas */
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 30px; /* Separa de forma exacta y simétrica cada tarjeta por 30 píxeles */
    max-width: 1200px; /* Asegura que la rejilla no se ensanche a más de 1200px en monitores gigantes */
    margin: 0 auto; /* Centra de forma matemática todo el bloque en el medio de la pantalla */
}

/* Regla para el diseño individual de cada tarjeta contenedora de beneficio */
.tarjeta-argumento-seo {
    background-color: #002244; /* Color azul intermedio (más claro que el body) para dar volumen y contraste */
    padding: 30px; /* Colchón interno de 30px para que los textos respiren y no toquen las esquinas */
    border-radius: 8px; /* Redondea las esquinas de la tarjeta a 8 píxeles */
    border-left: 4px solid #d4a843; /* DETALLE DE MARCA: Dibuja una línea turquesa vertical gruesa a la izquierda */
}

    /* Regla para los títulos H3 dentro de cada tarjeta de beneficio */
    .tarjeta-argumento-seo h3 {
        font-size: 20px; /* Letra clara, destacada y legible para los subtítulos técnicos */
        color: #d4a843; /* Pinta el H3 de color turquesa haciendo juego con el borde lateral */
        margin-bottom: 12px; /* Deja 12 píxeles de separación abajo antes del párrafo */
    }

    /* Regla para los textos explicativos dentro de las tarjetas */
    .tarjeta-argumento-seo p {
        font-size: 15px; /* Tamaño de letra estándar e ideal para lecturas continuas */
        color: #d0e0f0; /* Color azul grisáceo claro muy cómodo para leer en pantallas oscuras */
        line-height: 1.6; /* Interlineado de 1.6 para separar renglones y evitar el cansancio visual */
    }

/* ==========================================================================
   CONTROL EXCLUSIVO PARA DISPOSITIVOS MÓVILES (MEDIA QUERY)
   ========================================================================== */

/* Las siguientes reglas se activan únicamente en pantallas de 768px de ancho o menores (Celulares) */
@media (max-width: 768px) {

    /* Regla para encoger el título H2 en celulares */
    .titulo-seccion-comercial h2 {
        font-size: 26px; /* Baja de 36px a 26px para evitar que el texto salte de renglón de forma fea */
    }

    /* OPTIMIZACIÓN MÓVIL CRÍTICA PARA EL PULGAR DEL USUARIO */
    .boton-marketing-accion {
        width: 100%; /* Los botones pasan a abarcar el 100% del ancho del celular */
        max-width: none; /* Desactiva el freno del ancho máximo de computadoras */
    }
}

/* Corrección scroll-margin para que el header no tape el footer al navegar */
#contacto {
    scroll-margin-top: 80px;
}