/* ========================================= */
/* ESTILOS ESPECÍFICOS PARA LA PÁGINA CONTPAQI DESPACHOS */
/* Este archivo debe cargarse DESPUÉS de styles.css */
/* ========================================= */

/* --- 1. HERO CON VIDEO (400x300px) --- */

.hero-video-seccion {
    /* Fondo Azul Claro */
    background-color: #eaf9ff; 
    /* Altura Fija */
    height: 390px; 
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 5%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hero-video-seccion2 {
    /* Fondo Azul Claro */
    background-color: #eaf9ff; 
    /* Altura Fija */
    height: 390px; 
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 5%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hero-video-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    gap: 40px;
}

.hero-video-texto {
    flex: 1; 
    padding-right: 20px;
}

.hero-video-texto h1 {
    /* REDUCE ESTE VALOR DE 2.5em a 1.8em (o el valor que prefieras) */
    font-size: 1.8em; 
    color: var(--color-secundario);
    margin-bottom: 10px; /* Reducimos el margen después del título */
    line-height: 1.2;
}

.hero-video-texto img {
    /* Aplica el tamaño de 50px de alto solicitado */
    height: 80px; 
    /* Asegura que el ancho se ajuste proporcionalmente */
    width: auto; 
    /* Añade un margen en la parte inferior para separarlo del título */
    margin-bottom: 15px; 
    /* Para centrar la imagen si decides poner el texto centrado */
    display: block; 
}

.hero-video-texto p {
    font-size: 1.2em;
    color: var(--color-texto);
    margin-bottom: 30px;
}

.hero-video-media {
    /* Dimensiones fijas solicitadas */
    width: 560px; 
    height: 315px; 
    
    background-color: black;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    flex-shrink: 0; 
}

.btn-hero-cotizar {
    display: inline-block;
    background-color: var(--color-principal);
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.btn-hero-cotizar:hover {
    background-color: var(--color-secundario);
}


/* --- 2. PRESENTACIÓN POWER POINT (Scroll Horizontal) --- */

.presentacion-seccion {
    padding: 60px 5%;
    background-color: #f8f8f8;
    text-align: center;
}

.subtitulo-presentacion {
    font-size: 1.2em;
    color: var(--color-texto);
    margin-bottom: 30px;
}

.powerpoint-container {
    width: 100%;
    height: 450px; 
    overflow-x: scroll; 
    overflow-y: hidden;
    white-space: nowrap; 
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 10px var(--color-sombra);
    padding: 20px 0;
}

.powerpoint-slides {
    display: flex;
    align-items: flex-start;
    height: 100%;
}

.slide-item {
    display: inline-block;
    width: 350px; 
    height: 400px; 
    margin: 0 15px;
    padding: 20px;
    background-color: var(--color-fondo);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: left;
    white-space: normal;
    flex-shrink: 0;
}

.slide-item h3 {
    text-align: left;
    color: var(--color-principal);
    font-size: 1.3em;
    padding-bottom: 5px;
    border-bottom: none;
    margin: 15px 0 10px;
    max-width: 100%;
}

.slide-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
}

.llamada-accion-presentacion {
    margin-top: 30px;
}

.btn-presentacion {
    background-color: var(--color-secundario);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-presentacion:hover {
    background-color: var(--color-principal);
}


/* --- 3. SECCIÓN DE DETALLES DEL PRODUCTO --- */

.detalles-producto-seccion {
    padding: 60px 5%;
    max-width: 1100px;
    margin: 0 auto;
}

.detalles-grid {
    display: flex;
    align-items: center;
    gap: 40px;
}

.detalles-texto {
    flex: 1;
}

.detalles-imagen {
    flex: 1;
    text-align: center;
}

.detalles-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.detalles-texto h3 {
    color: var(--color-secundario);
    margin-top: 20px;
}

.detalles-texto ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 15px;
}

.detalles-texto li {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%231a73e8" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>') no-repeat left center;
    background-size: 16px;
    padding-left: 25px;
    margin-bottom: 10px;
}

.btn-cotizar-detalles {
    display: inline-block;
    background-color: #fbbc05; 
    color: var(--color-secundario);
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 5px;
    margin-top: 25px;
    transition: background-color 0.3s;
}

.btn-cotizar-detalles:hover {
    background-color: #ffde59;
}


/* --- 4. RESPONSIVIDAD ESPECÍFICA --- */

@media (max-width: 992px) {
    /* Responsividad del Hero Video */
    .hero-video-seccion {
        height: auto; 
        padding: 40px 5%;
    }
    
    .hero-video-contenido {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-video-texto {
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .hero-video-texto h1 {
        font-size: 2em;
    }
    
    .hero-video-media {
        height: 300px; 
        width: 100%;
        max-width: 500px;
    }
    
    /* Responsividad de Detalles */
    .detalles-grid {
        flex-direction: column;
        text-align: center;
    }
    
    .detalles-imagen {
        order: -1; 
        margin-bottom: 20px;
    }
    
    .detalles-texto ul {
        text-align: left;
    }
}

@media (max-width: 500px) {
    .powerpoint-container {
        height: 400px;
        padding: 10px 0;
    }
    .slide-item {
        width: 280px;
        height: 350px;
    }
}

/* ========================================= */
/* ESTILOS ESPECÍFICOS PARA LA PÁGINA CONTPAQI DESPACHOS */
/* (CONTINUACIÓN) */
/* ========================================= */

/* --- 2. NUEVA SECCIÓN: IMAGEN IZQUIERDA, TEXTO DERECHA --- */

.imagen-texto-seccion {
    padding: 60px 5%;
    background-color: var(--color-fondo); /* Fondo blanco */
}

.imagen-texto-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
}

.imagen-texto-media {
    flex: 1; 
    text-align: center;
}

.imagen-texto-media img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.imagen-texto-texto {
    flex: 1;
}

.imagen-texto-texto h2 {
    /* Deshace el centrado del h2 general para alinearlo con el texto */
    text-align: left; 
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    /* Mantiene la línea gris del CSS general */
}

.imagen-texto-texto h3 {
    color: var(--color-secundario);
    margin-top: 20px;
    font-size: 1.2em;
}

.imagen-texto-texto p {
    font-size: 1.05em;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Estilos de la lista de beneficios (opcional, si los usas) */
.imagen-texto-texto ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 15px;
}

.imagen-texto-texto li {
    padding-left: 25px;
    margin-bottom: 10px;
    /* Usa el check azul del CSS general (o puedes definir uno aquí) */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%231a73e8" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>') no-repeat left center;
    background-size: 16px;
}

/* Botón de llamada a la acción */
.btn-presentacion {
    display: inline-block;
    background-color: var(--color-secundario);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.btn-presentacion:hover {
    background-color: var(--color-principal);
}


/* --- C. RESPONSIVIDAD ESPECÍFICA (Ajuste para móviles) --- */

@media (max-width: 768px) {
    .imagen-texto-contenido {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .imagen-texto-media {
        /* Mueve la imagen arriba en vista móvil */
        order: -1; 
    }
    
    .imagen-texto-texto h2,
    .imagen-texto-texto h3 {
        text-align: center; 
    }
}

/* ========================================= */
/* ESTILOS ESPECÍFICOS: 5 RECUADROS DE CARACTERÍSTICAS (ADAPTACIÓN COMPLETA) */
/* ========================================= */

.caracteristicas-seccion {
    /* Ocupa el ancho completo por defecto */
    background-color: #052d5b; 
    padding: 60px 5%;
    text-align: center;
}

.caracteristicas-seccion h2 {
    /* Asegura que el título de la sección esté centrado */
    text-align: center; 
    color: #ffffff;
}

.cards-grid {
    display: flex;
    flex-wrap: wrap;
    /* Justifica y centra el grupo de tarjetas */
    justify-content: center; 
    /* Espacio vertical y horizontal de 10px */
    gap: 20px; /* Usaremos 20px de gap para asegurar 10px entre los bordes de cada tarjeta (10px a la derecha y 10px a la izquierda de la siguiente) */
    margin-top: 40px;
    max-width: 100%; /* Asegura que la grilla ocupe todo el ancho disponible */
}

.card-item {
    /* Tamaño base de la tarjeta */
    width: 100%;
    /* Altura fija: 300px */
    height: 300px; 
    background-color: white;
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    
    /* Centrado interno del contenido */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Adaptabilidad: Permite que la tarjeta se encoja si es necesario */
    flex-grow: 1; 
    flex-shrink: 1;
    
    /* Mínimo y Máximo de Ancho */
    min-width: 250px; /* Evita que se hagan demasiado estrechas */
    max-width: 500px; /* Límite para que no sean excesivamente anchas */
}

/* Estilos para el icono, título y texto (se mantienen iguales) */
.card-icon {
    font-size: 3em;
    color: var(--color-secundario);
    margin-bottom: 15px;
}

.card-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #003366; 
    margin-bottom: 10px;
    border-bottom: none; 
}

.card-text {
    font-size: 0.95em;
    color: #003366;
    line-height: 1.5;
}

/* Estilos para el texto y botón debajo de los recuadros (se mantienen iguales) */
.llamada-final-texto {
    font-size: 1.2em;
    color: var(--color-secundario);
    margin: 50px auto 30px;
    max-width: 800px;
}

.texto-final {
    text-align: center; 
    color: #ffffff;
    margin-top: 30px; 
    margin-bottom: 30px;
}

.btn-final-cotizar {
    display: inline-block;
    background-color: var(--color-principal);
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.btn-final-cotizar:hover {
    background-color: var(--color-secundario);
}


/* --- RESPONSIVIDAD (Asegura el flujo adaptativo) --- */

@media (min-width: 1000px) {
    /* Escritorio grande: Forzar a 3 tarjetas por fila para que sean más anchas */
    .card-item {
        /* 33.33% - 20px de gap */
        width: calc(33.33% - 20px); 
        /* Permitimos que la tarjeta se extienda hasta el max-width de 500px */
        max-width: 500px; 
    }
}

@media (max-width: 999px) and (min-width: 650px) {
    /* Escritorio mediano/Tableta: Forzar a 2 tarjetas por fila */
    .card-item {
        /* 50% - 20px de gap */
        width: calc(50% - 20px); 
    }
}

@media (max-width: 767px) {
    /* Tabletas pequeñas: 2 tarjetas por fila */
    .card-item {
        width: calc(50% - 20px); 
        min-width: 250px;
    }
}

@media (max-width: 649px) {
    /* Móviles: 1 tarjeta por fila */
    .card-item {
        width: 100%;
        max-width: 450px; /* Ancho máximo en móvil */
    }
}