/* Reset y configuración base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    max-width: 100vw;
}

/* Estilos de la cabecera */
.cabecera {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000;
}

.contenedor-cabecera {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Logo */
.logo-contenedor {
    flex-shrink: 0;
}

.logo {
    height: 85px;
    width: auto;
    object-fit: contain;
}

/* Información de contacto */
.info-contacto {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-grow: 1;
    justify-content: flex-end;
}

/* Asesorías */
.asesorias {
    display: flex;
    align-items: center;
}

.imagen-asesorias {
    height: auto;
    max-width: 100%;
    width: auto;
}

.texto-asesorias {
    font-size: 24px;
    font-weight: 700;
    color: #002B5B;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

/* Teléfono */
.telefono {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0066CC;
    text-decoration: none;
}

.icono-telefono {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.numero-telefono {
    font-size: 22px;
    font-weight: 600;
    color: #0066CC;
}

/* Botón de WhatsApp */
.imagen-whatsapp {
    height: auto;
    max-width: 100%;
    width: auto;
    transition: transform 0.3s ease;
}

.imagen-whatsapp:hover {
    transform: translateY(-2px);
}

/* Sección Hero */
.seccion-hero {
    background-image: url('slider_am_consultores-1024x533.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.seccion-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
}

.contenedor-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.contenido-hero {
    max-width: 700px;
    margin-left: 0;
}

.titulo-principal {
    font-size: 60px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.texto-principal {
    font-size: 34px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 30px;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.destacado {
    color: #ffffff;
    font-weight: 600;
    background-color: #00bcd4;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.boton-informacion {
    display: inline-block;
    background-color: #00bcd4;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
    border: 2px solid transparent;
}

.boton-informacion:hover {
    background-color: #0097a7;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
}

/* Sección de Experiencia */
.seccion-experiencia {
    background-color: #f8f9fa;
    padding: 120px 0;
}

.contenedor-experiencia {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.imagen-experiencia {
    order: 1;
}

.img-experiencia {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.contenido-experiencia {
    order: 2;
}

.titulo-experiencia {
    font-size: 42px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 25px;
    line-height: 1.2;
}

.texto-experiencia {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
}

/* Sección Nuestros Servicios */
.seccion-servicios {
    background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%);
    padding: 100px 0;
    color: #333;
}

.contenedor-servicios {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.titulo-servicios {
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 80px;
    color: white;
}

.grid-servicios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.tarjeta-servicio {
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 50px 0 0 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: left;
    color: #002B5B;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: none !important;
    animation: none !important;
}

.tarjeta-servicio * {
    transition: none !important;
    animation: none !important;
}

.tarjeta-servicio:hover {
    background-color: #002B5B;
    color: #ffffff;
    transition: none !important;
    animation: none !important;
}

.icono-servicio {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icono-servicio .material-symbols-outlined {
    font-size: 60px;
    color: #002B5B;
    transition: none !important;
}

.tarjeta-servicio:hover .icono-servicio .material-symbols-outlined {
    color: #ffffff;
}

.titulo-tarjeta {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px;
    color: inherit;
    line-height: 1.3;
}

.texto-tarjeta {
    font-size: 16px;
    line-height: 1.6;
    color: inherit;
}

/* Sección Por qué Elegirnos */
.seccion-por-que {
    background-color: #1e3a5f;
    padding: 80px 0;
    color: white;
}

.contenedor-por-que {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.titulo-por-que {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 80px;
    text-align: center;
}

.contenido-por-que {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 100px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.contador-seccion {
    text-align: center;
}

.numero-contador {
    font-size: 120px;
    font-weight: 700;
    color: #00bcd4;
    margin-bottom: 10px;
    line-height: 1;
}

.texto-contador {
    font-size: 22px;
    font-weight: 600;
    color: white;
    line-height: 1.2;
}

.caracteristicas {
    text-align: left;
}

.lista-caracteristicas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 40px;
}

.contenedor-boton {
    text-align: center;
    margin-top: 60px;
}

.caracteristica {
    display: flex;
    align-items: center;
    font-size: 18px;
    gap: 15px;
    transition: transform 0.3s ease;
}

.caracteristica:hover {
    transform: translateX(5px);
}

.icono-caracteristica {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 188, 212, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.icono-caracteristica svg {
    width: 24px;
    height: 24px;
    color: #00bcd4;
    transition: all 0.3s ease;
}

.caracteristica:hover .icono-caracteristica {
    background-color: #00bcd4;
}

.caracteristica:hover .icono-caracteristica svg {
    color: #ffffff;
}

.texto-caracteristica {
    color: white;
    font-weight: 400;
    font-size: 16px;
}

.boton-contacto {
    display: inline-block;
    background-color: #00bcd4;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

.boton-contacto:hover {
    background-color: #0097a7;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
}

.contenedor-boton-asesoria {
    text-align: center;
    margin-top: 60px;
}

.boton-solicitar-asesoria {
    display: inline-block;
    background-color: #FFD700;
    color: #000000;
    padding: 18px 40px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 30px;
    transition: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.boton-solicitar-asesoria:hover {
    background-color: #FFE44D;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: none !important;
}

/* Sección Qué nos hace especiales */
.seccion-especiales {
    background-color: #ffffff;
    padding: 80px 0;
    position: relative;
}

.contenedor-especiales {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.columna-contenido {
    flex: 1;
    position: relative;
    padding-right: 20px;
}

.columna-imagen {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.columna-imagen img {
    width: 90%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.imagen-reunion {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.titulo-especiales {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
    text-align: left;
    max-width: none;
}

.contador-clientes {
    background-color: #FFD700;
    display: inline-block;
    padding: 15px 25px;
    border-radius: 12px;
    position: absolute;
    top: -10px;
    left: 10%;
    text-align: center;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.numero-contador-especiales {
    font-size: 44px;
    font-weight: 700;
    color: #000;
    line-height: 1;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texto-contador-especiales {
    font-size: 16px;
    color: #000;
    font-weight: 500;
    margin: 0;
}

.lista-caracteristicas-especiales {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 20px;
}

.caracteristica-especial {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
}

.icono-especial {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background-color: #e8f4ff;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icono-especial svg {
    width: 25px;
    height: 25px;
    color: #0066CC;
}

.contenido-caracteristica h3 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
}

.contenido-caracteristica p {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.contenedor-boton-especiales {
    margin-top: 50px;
}

.boton-solicitar-asesoria-especiales {
    display: inline-block;
    background-color: #0099FF;
    color: #ffffff;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 20px;
    transition: none !important;
    margin-top: 20px;
}

.boton-solicitar-asesoria-especiales:hover {
    background-color: #0052a3;
    transform: translateY(-2px);
}

/* Sección de Video */
.seccion-video {
    background: #ffffff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.contenedor-video {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.titulo-video {
    font-size: 42px;
    font-weight: 700;
    color: #002B5B;
    margin-bottom: 20px;
    line-height: 1.2;
}

.descripcion-video {
    font-size: 18px;
    color: #002B5B;
    margin-bottom: 50px;
    font-weight: 500;
}

.descripcion-video span {
    font-weight: 600;
}

.boton-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #002B5B;
    margin-top: 20px;
}

.boton-video:hover {
    transform: scale(1.1);
    background: rgba(0, 43, 91, 0.1);
}

.icono-play {
    width: 40px;
    height: 40px;
    color: #002B5B;
}

.icono-play svg {
    width: 100%;
    height: 100%;
}

/* Modal de Video */
.modal-video {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-video.activo {
    display: flex;
    opacity: 1;
}

.contenido-modal {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: auto;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
}

.cerrar-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    color: #333;
    cursor: pointer;
    z-index: 2;
    padding: 5px;
    line-height: 1;
}

.marco-contenido {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

.contenedor-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.contenedor-iframe iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contenedor-cabecera {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .info-contacto {
        width: 100%;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .logo {
        height: 68px;
    }
    
    .texto-asesorias {
        font-size: 20px;
    }
    
    .numero-telefono {
        font-size: 18px;
    }
    
    .imagen-whatsapp {
        max-height: 45px;
        width: auto;
    }
    
    /* Hero responsive */
    .seccion-hero {
        min-height: 550px;
    }
    
    .seccion-hero::before {
        background-color: rgba(0, 0, 0, 0);
    }
    
    .contenedor-hero {
        padding: 40px 20px;
    }
    
    .titulo-principal {
        font-size: 36px;
    }
    
    .texto-principal {
        font-size: 22px;
    }
    
    .boton-informacion {
        padding: 12px 24px;
        font-size: 16px;
    }
    
    /* Experiencia responsive */
    .seccion-experiencia {
        padding: 80px 0;
    }
    
    .contenedor-experiencia {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .imagen-experiencia {
        order: 1;
    }
    
    .contenido-experiencia {
        order: 2;
    }
    
    .titulo-experiencia {
        font-size: 32px;
    }
    
    .texto-experiencia {
        font-size: 16px;
    }
    
    /* Por qué elegirnos responsive */
    .seccion-por-que {
        padding: 60px 0;
    }
    
    .titulo-por-que {
        font-size: 36px;
        margin-bottom: 50px;
    }
    
    .contenido-por-que {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .numero-contador {
        font-size: 80px;
    }
    
    .texto-contador {
        font-size: 18px;
    }
    
    .lista-caracteristicas {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .caracteristica {
        font-size: 16px;
        justify-content: flex-start;
    }
    
    .contenedor-boton {
        margin-top: 40px;
    }
    
    .boton-contacto {
        padding: 12px 24px;
        font-size: 16px;
    }
    
    /* Servicios responsive */
    .seccion-servicios {
        padding: 80px 0;
    }
    
    .titulo-servicios {
        font-size: 36px;
        margin-bottom: 60px;
    }
    
    .grid-servicios {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .tarjeta-servicio {
        padding: 35px 30px;
    }
    
    .titulo-tarjeta {
        font-size: 22px;
    }
    
    .texto-tarjeta {
        font-size: 15px;
    }
    
    .contenedor-boton-asesoria {
        margin-top: 40px;
    }
    
    .boton-solicitar-asesoria {
        padding: 15px 30px;
        font-size: 18px;
        width: 100%;
        max-width: 300px;
    }

    .seccion-especiales {
        padding: 60px 0;
    }

    .titulo-especiales {
        font-size: 32px;
        text-align: center;
    }

    .contador-clientes {
        display: block;
        margin: 0 auto 30px;
        max-width: 200px;
    }

    .numero-contador-especiales {
        font-size: 36px;
    }

    .texto-contador-especiales {
        font-size: 16px;
    }

    .caracteristica-especial {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .contenido-caracteristica h3 {
        font-size: 20px;
    }

    .contenido-caracteristica p {
        font-size: 15px;
    }

    .icono-caracteristica {
        width: 35px;
        height: 35px;
    }

    .icono-caracteristica svg {
        width: 20px;
        height: 20px;
    }

    .texto-caracteristica {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .contenedor-cabecera {
        padding: 12px;
    }
    
    .info-contacto {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
    
    .telefono {
        order: 1;
    }
    
    .asesorias {
        display: none;
    }
    
    .imagen-whatsapp {
        max-height: 80px;
        width: auto;
        transition: transform 0.3s ease;
    }
    
    .imagen-whatsapp:hover {
        transform: scale(1.1);
    }
    
    .logo {
        height: 80px;
    }
    
    .texto-asesorias {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }
    
    .imagen-asesorias {
        max-height: 40px;
        width: auto;
    }
    
    /* Hero móvil */
    .seccion-hero {
        min-height: 350px;
    }
    
    .seccion-hero::before {
        background-color: rgba(0, 0, 0, 0);
    }
    
    .contenedor-hero {
        padding: 20px 15px;
    }
    
    .titulo-principal {
        font-size: 28px;
        margin-bottom: 10px;
    }
    
    .texto-principal {
        font-size: 18px;
        margin-bottom: 20px;
        line-height: 1.3;
    }
    
    .boton-informacion {
        padding: 10px 20px;
        font-size: 16px;
        width: 100%;
        max-width: 280px;
        margin-top: 10px;
    }
    
    /* Experiencia móvil */
    .seccion-experiencia {
        padding: 60px 0;
    }
    
    .contenedor-experiencia {
        padding: 0 15px;
        gap: 30px;
        display: flex;
        flex-direction: column;
    }
    
    .imagen-experiencia {
        order: 2; /* Movemos la imagen al final */
    }
    
    .img-experiencia {
        height: 250px; /* Restauramos la altura de la imagen */
        object-fit: cover; /* Aseguramos que la imagen cubra bien el espacio */
        width: 100%;
    }
    
    .contenido-experiencia {
        order: 1; /* Movemos el contenido al inicio */
        text-align: left; /* Alineamos el texto a la izquierda */
        padding-right: 20px; /* Añadimos un poco de padding a la derecha */
    }
    
    .titulo-experiencia {
        font-size: 24px;
        margin-bottom: 15px;
        text-align: left; /* Aseguramos que el título esté alineado a la izquierda */
    }
    
    .texto-experiencia {
        font-size: 15px;
        text-align: left; /* Aseguramos que el texto esté alineado a la izquierda */
    }
    
    /* Por qué elegirnos móvil */
    .seccion-por-que {
        padding: 40px 0;
    }
    
    .contenedor-por-que {
        padding: 0 15px;
    }
    
    .titulo-por-que {
        font-size: 28px;
        margin-bottom: 40px;
    }
    
    .contenido-por-que {
        gap: 40px;
    }
    
    .numero-contador {
        font-size: 60px;
    }
    
    .texto-contador {
        font-size: 16px;
    }
    
    .lista-caracteristicas {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .caracteristicas {
        text-align: left;
    }
    
    .caracteristica {
        font-size: 15px;
        justify-content: flex-start;
    }
    
    .contenedor-boton {
        margin-top: 30px;
    }
    
    .boton-contacto {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
        font-size: 16px;
    }
    
    /* Servicios móvil */
    .seccion-servicios {
        padding: 60px 0;
    }
    
    .contenedor-servicios {
        padding: 0 15px;
    }
    
    .titulo-servicios {
        font-size: 28px;
        margin-bottom: 40px;
    }
    
    .grid-servicios {
        gap: 25px;
    }
    
    .tarjeta-servicio {
        padding: 30px 25px;
    }
    
    .icono-servicio svg {
        width: 45px;
        height: 45px;
    }
    
    .titulo-tarjeta {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .texto-tarjeta {
        font-size: 14px;
    }
    
    .contenedor-boton-asesoria {
        margin-top: 30px;
    }
    
    .boton-solicitar-asesoria {
        padding: 14px 25px;
        font-size: 16px;
    }

    .seccion-especiales {
        padding: 40px 0;
    }

    .contenedor-especiales {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
    }

    .columna-contenido {
        order: 2;
    }

    .columna-imagen {
        order: 1;
        position: relative;
        margin: 0 auto;
        width: 100%;
        max-width: 320px;
    }

    .imagen-reunion {
        width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: cover;
        border-radius: 10px;
        margin: 0 auto;
    }

    .contador-clientes {
        position: absolute;
        bottom: auto;
        top: -10px;
        left: -10px;
        right: auto;
        transform: none;
        width: auto;
        padding: 15px 20px;
        border-radius: 10px;
        background-color: #FFD700;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .numero-contador-especiales {
        font-size: 32px;
        margin-bottom: 5px;
        color: #333;
        font-weight: bold;
    }

    .texto-contador-especiales {
        font-size: 14px;
        color: #333;
        font-weight: 500;
    }

    .caracteristica-especial {
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 25px;
        padding: 15px;
    }

    .icono-especial {
        min-width: 40px;
        width: 40px;
        height: 40px;
    }

    .contenido-caracteristica h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .contenido-caracteristica p {
        font-size: 14px;
        line-height: 1.5;
    }

    .titulo-especiales {
        font-size: 28px;
        text-align: center;
        margin-bottom: 30px;
        padding: 0 15px;
    }
}

/* Responsive ajustado */
@media (max-width: 992px) {
    .contenedor-especiales {
        flex-direction: column;
    }

    .columna-imagen {
        order: -1;
        margin-bottom: 40px;
        justify-content: center;
    }

    .columna-imagen img {
        width: 70%;
        max-width: 400px;
    }

    .contador-clientes {
        left: 50%;
        transform: translateX(-50%);
        top: -15px;
    }
}

@media (max-width: 768px) {
    .seccion-especiales {
        padding: 60px 0;
    }

    .titulo-especiales {
        font-size: 32px;
        text-align: center;
    }

    .columna-imagen {
        position: relative;
    }

    .columna-imagen img {
        width: 85%;
        max-width: 350px;
    }

    .contador-clientes {
        padding: 12px 20px;
        left: auto;
        right: 0;
        top: 20px;
        transform: none;
    }

    .numero-contador-especiales {
        font-size: 32px;
    }

    .texto-contador-especiales {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .seccion-especiales {
        padding: 40px 0;
    }

    .contenedor-especiales {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
    }

    .columna-contenido {
        order: 2;
    }

    .columna-imagen {
        order: 1;
        position: relative;
        margin: 0 auto;
        width: 100%;
        max-width: 320px;
    }

    .imagen-reunion {
        width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: cover;
        border-radius: 10px;
        margin: 0 auto;
    }

    .contador-clientes {
        position: absolute;
        bottom: auto;
        top: -10px;
        left: -10px;
        right: auto;
        transform: none;
        width: auto;
        padding: 15px 20px;
        border-radius: 10px;
        background-color: #FFD700;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .numero-contador-especiales {
        font-size: 32px;
        margin-bottom: 5px;
        color: #333;
        font-weight: bold;
    }

    .texto-contador-especiales {
        font-size: 14px;
        color: #333;
        font-weight: 500;
    }

    .caracteristica-especial {
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 25px;
        padding: 15px;
    }

    .icono-especial {
        min-width: 40px;
        width: 40px;
        height: 40px;
    }

    .contenido-caracteristica h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .contenido-caracteristica p {
        font-size: 14px;
        line-height: 1.5;
    }

    .titulo-especiales {
        font-size: 28px;
        text-align: center;
        margin-bottom: 30px;
        padding: 0 15px;
    }
}

/* Sección de Clientes */
.seccion-clientes {
    background-color: #ffffff;
    padding: 80px 0;
    text-align: center;
}

.contenedor-clientes {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.titulo-clientes {
    font-size: 42px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 60px;
    line-height: 1.2;
}

.grid-clientes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.grid-clientes > :nth-last-child(-n+4) {
    grid-column: span 1;
}

.grid-clientes > :nth-last-child(-n+4):first-child {
    grid-column-start: 2;
}

.cliente {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.cliente:hover {
    transform: translateY(-5px);
}

.logo-cliente {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}

.contenedor-boton-clientes {
    margin-top: 60px;
}

.boton-solicitar-asesoria {
    display: inline-block;
    background-color: #FFD700;
    color: #000000;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.boton-solicitar-asesoria:hover {
    background-color: #FFE44D;
    transform: translateY(-2px);
}

/* Responsive para la sección de clientes */
@media (max-width: 992px) {
    .grid-clientes {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-clientes > :nth-last-child(-n+4):first-child {
        grid-column-start: auto;
    }
}

@media (max-width: 768px) {
    .seccion-clientes {
        padding: 60px 0;
    }

    .titulo-clientes {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .grid-clientes {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .logo-cliente {
        max-height: 60px;
    }
}

@media (max-width: 480px) {
    .grid-clientes {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 10px;
    }

    .cliente {
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120px;
    }

    .logo-cliente {
        max-width: 100%;
        max-height: 100px;
        width: auto;
        height: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    .titulo-clientes {
        font-size: 28px;
        text-align: center;
        margin-bottom: 30px;
        padding: 0 15px;
    }

    .boton-solicitar-asesoria {
        padding: 12px 30px;
        font-size: 16px;
        width: 100%;
        max-width: 280px;
    }
}

/* Sección de Outsourcing */
.seccion-outsourcing {
    background-color: #008B9E;
    padding: 80px 0;
    color: #ffffff;
    overflow: hidden;
}

.contenedor-outsourcing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.contenido-outsourcing {
    flex: 1;
}

.titulo-outsourcing {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}

.titulo-outsourcing .destacado {
    color: #FFE600;
    background: none;
    padding: 0;
    border-radius: 0;
    display: inline;
    font-weight: inherit;
}

.descripcion-outsourcing {
    font-size: 24px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 300;
}

.imagen-outsourcing {
    flex: 1;
    display: flex;
    justify-content: center;
}

.img-outsourcing {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

/* Responsive para la sección de outsourcing */
@media (max-width: 992px) {
    .contenedor-outsourcing {
        flex-direction: column;
        gap: 40px;
    }

    .contenido-outsourcing {
        text-align: left;
        padding: 0 20px;
    }

    .titulo-outsourcing {
        font-size: 42px;
    }

    .descripcion-outsourcing {
        font-size: 22px;
    }

    .imagen-outsourcing {
        width: 100%;
        padding: 0 20px;
    }

    .img-outsourcing {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .seccion-outsourcing {
        padding: 60px 0;
    }

    .titulo-outsourcing {
        font-size: 36px;
    }

    .descripcion-outsourcing {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .seccion-outsourcing {
        padding: 40px 0;
    }

    .contenedor-outsourcing {
        padding: 0;
        gap: 30px;
    }

    .contenido-outsourcing {
        padding: 0 15px;
    }

    .titulo-outsourcing {
        font-size: 32px;
    }

    .descripcion-outsourcing {
        font-size: 18px;
    }

    .imagen-outsourcing {
        padding: 0 15px;
    }

    .img-outsourcing {
        border-radius: 15px;
    }
}

/* Sección de Contacto */
.seccion-contacto {
    background-color: #1e3a5f;
    padding: 80px 0;
    color: #ffffff;
}

.contenedor-contacto {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.columna-texto {
    padding-right: 20px;
}

.titulo-contacto {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: left;
}

.descripcion-contacto {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.9);
}

.columna-formulario {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.formulario-contacto {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.campo-formulario {
    width: 100%;
}

.campo-formulario input,
.campo-formulario select {
    width: 100%;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.campo-formulario input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.campo-formulario input:focus,
.campo-formulario select:focus {
    outline: none;
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
}

.campo-formulario select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 45px;
}

.campo-formulario select option {
    background-color: #1e3a5f;
    color: #ffffff;
}

.texto-politica {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.boton-enviar {
    background-color: #ffffff;
    color: #002B5B;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    width: 100%;
}

.boton-enviar:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* Responsive para la sección de contacto */
@media (max-width: 992px) {
    .contenedor-contacto {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .columna-texto {
        padding-right: 0;
        text-align: center;
    }

    .titulo-contacto {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .seccion-contacto {
        padding: 60px 0;
    }

    .titulo-contacto {
        font-size: 32px;
    }

    .descripcion-contacto {
        font-size: 16px;
    }

    .columna-formulario {
        padding: 30px 20px;
    }

    .campo-formulario input,
    .campo-formulario select {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .seccion-contacto {
        padding: 40px 0;
    }

    .titulo-contacto {
        font-size: 28px;
    }

    .descripcion-contacto {
        font-size: 15px;
    }

    .columna-formulario {
        padding: 20px 15px;
    }

    .campo-formulario {
        margin-bottom: 15px;
    }
}

/* Footer */
.footer {
    background-color: #1C2833;
    padding: 40px 0;
    color: #ffffff;
}

.contenedor-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.info-contacto-footer {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.item-contacto {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
}

.icono-contacto {
    width: 20px;
    height: 20px;
    color: #FFE600;
}

.derechos {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive del footer */
@media (max-width: 768px) {
    .footer {
        padding: 30px 0;
    }

    .info-contacto-footer {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .item-contacto {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 25px 0;
    }

    .info-contacto-footer {
        gap: 15px;
    }

    .item-contacto {
        font-size: 14px;
    }

    .derechos {
        font-size: 12px;
    }
}

/* Estilos para el carrusel de clientes */
.desktop-grid {
    display: block;
}

.mobile-carousel {
    display: none;
}

@media screen and (max-width: 768px) {
    .desktop-grid {
        display: none;
    }

    .mobile-carousel {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 20px 0;
    }

    .carrusel-contenedor {
        display: flex;
        transition: transform 0.5s ease;
        width: 100%;
    }

    .carrusel-slide {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
    }

    .carrusel-slide img {
        max-width: 200px;
        height: auto;
        object-fit: contain;
    }

    .carrusel-indicadores {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }

    .indicador {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ddd;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .indicador.activo {
        background-color: #FFD700;
    }
}

/* Estilos para animaciones de entrada */
.desde-izquierda {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease;
}

.desde-derecha {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease;
}

.desde-abajo {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .desde-izquierda,
    .desde-derecha {
        transform: translateY(30px);
        transition: all 0.6s ease;
    }
}