/* ============================================ */
/* ESTILOS PARA LA PÁGINA 'ESTRUCTURAS'         */
/* ============================================ */

/* Estilo del Hero genérico para páginas internas */
.page-hero-section {
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-blanco);
    background-image: url('../assets/img/bodega2.png'); /* <-- CAMBIA ESTA IMAGEN */
    background-size: cover;
    background-position: center;
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   background-color: rgba(1, 14, 34, 0.6); /* Azul oscuro semitransparente, ajusta opacidad */
}

.page-hero-content {
    position: relative;
    z-index: 2;
}

.page-hero-title {
    font-family: var(--color-acento-azul);
    font-size: 2.8rem;
    text-transform: uppercase;
}

.page-hero-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
}

/* ============================================ */
/* SECCIÓN DE INTRODUCCIÓN - REDISEÑO */
/* ============================================ */
#intro-estructuras {
    /* REMOVEMOS background-color: var(--color-blanco); */
    overflow: hidden; /* Volvemos a ocultar si no hay sombras que sobresalgan mucho */
    padding: 0; /* Eliminamos el padding vertical del contenedor principal */
    position: relative; /* Para posicionar el overlay y el contenido */
    display: flex; /* Usamos flexbox para centrar el contenido verticalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 80vh; /* Ocupa al menos el 80% de la altura de la ventana */
    
    /* IMAGEN DE FONDO */
    background-image: url('../assets/img/banersi\ \(1\).png'); /* <-- RUTA DE TU IMAGEN DE FONDO */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Añadir un overlay para que el texto sea legible */
#intro-estructuras::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* CAMBIO: Overlay azul semi-transparente */
    background-color: rgba(1, 46, 114, 0.4);
    z-index: 1;
}

/* Ajustes para el container dentro de esta sección */
#intro-estructuras .container {
    position: relative; /* Para que su contenido esté por encima del overlay */
    z-index: 2;
    display: flex; /* Ahora el container es un flexbox */
    justify-content: flex-end; /* Alinea su contenido a la derecha */
    align-items: center; /* Centra el contenido verticalmente */
    width: 100%; /* Ocupa todo el ancho */
    max-width: var(--container-max-width); /* Mantiene el ancho máximo de tu container general */
    margin: 0 auto; /* Centra el container */
    padding: 0 var(--padding-site); /* Mantén el padding lateral del sitio */
}


/* --- REEMPLAZO: Estilos para la Tarjeta de Texto 3D (ajustes de posición) --- */
.intro-text-content {
    background-color: var(--color-blanco); /* Fondo blanco */
    padding: 45px;
    border-radius: 15px;
    position: relative;
    z-index: 3; /* Para asegurar que esté por encima del overlay */
    
    /* CAMBIOS CLAVE PARA LA POSICIÓN */
    width: 100%; /* Ocupa todo el ancho disponible en móvil */
    max-width: 550px; /* Ancho máximo para la tarjeta en escritorio */
    margin-left: auto; /* Empuja la tarjeta a la derecha en escritorio */
    margin-right: 0; /* Asegura que no haya margen derecho */

    /* Mantenemos la sombra y transición 3D */
    box-shadow: 
        0px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        0px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        0px 12.5px 10px rgba(0, 0, 0, 0.035),
        0px 22.3px 17.9px rgba(0, 51, 160, 0.08),
        0px 41.8px 33.4px rgba(0, 51, 160, 0.12),
        0px 100px 80px rgba(0, 51, 160, 0.15);
    
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    transform-style: preserve-3d; 
}

/* Efecto al pasar el mouse - Mantenemos */
.intro-text-content:hover {
    transform: translateY(-15px) scale(1.03) rotateX(3deg) rotateY(-2deg);
    box-shadow: 
        0px 3px 3px rgba(0, 0, 0, 0.03),
        0px 8px 7px rgba(0, 0, 0, 0.04),
        0px 15px 13px rgba(0, 0, 0, 0.05),
        0px 28px 23px rgba(0, 51, 160, 0.12),
        0px 52px 43px rgba(0, 51, 160, 0.18),
        0px 125px 100px rgba(0, 51, 160, 0.25);
}

/* Estilos internos (Icono, Título, Párrafo) - Mantenemos */
.intro-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.intro-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--color-acento-azul);
}
.intro-icon svg { width: 100%; height: 100%; }

.intro-text-content h3 {
    font-family: var(--font-titulos);
    font-size: 30px;
    color: var(--color-texto-principal-oscuro);
    line-height: 1.3;
}
.intro-text-content p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-corporativo-gris);
}

/* Responsive (ajustes) */
@media (max-width: 992px) {
    #intro-estructuras {
        min-height: 70vh; /* Menos altura en móvil si es necesario */
        padding: 60px 0; /* Añadimos padding para que la tarjeta no se pegue arriba/abajo */
    }
    #intro-estructuras .container {
        justify-content: center; /* Centra la tarjeta en pantallas pequeñas */
        align-items: center;
    }
    .intro-text-content {
        max-width: 90%; /* Ajusta el ancho de la tarjeta en móvil */
        margin: 0 auto; /* Centra la tarjeta en móvil */
    }
    }

    
   

/* Efecto al pasar el mouse - Más pronunciado */
.intro-text-content:hover {
    transform: translateY(-15px) scale(1.03) rotateX(3deg) rotateY(-2deg); /* Se levanta, agranda y inclina sutilmente */
    /* Sombras más intensas en hover */
     box-shadow: 
        0px 3px 3px rgba(0, 0, 0, 0.03),
        0px 8px 7px rgba(0, 0, 0, 0.04),
        0px 15px 13px rgba(0, 0, 0, 0.05),
        0px 28px 23px rgba(0, 51, 160, 0.12),
        0px 52px 43px rgba(0, 51, 160, 0.18),
        0px 125px 100px rgba(0, 51, 160, 0.25);
}


.intro-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.intro-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--color-acento-azul); /* Mantenemos icono azul */
}
.intro-icon svg { width: 100%; height: 100%; }

.intro-text-content h3 {
    font-family: var(--font-titulos);
    font-size: 30px; /* Ligeramente más pequeño para encajar mejor */
    color: var(--color-texto-principal-oscuro);
    line-height: 1.3;
}
.intro-text-content p {
    font-size: 17px; /* Ligeramente más pequeño */
    line-height: 1.7;
    color: var(--color-corporativo-gris); /* Usamos gris corporativo */
}

/* Responsive (sin cambios necesarios aquí) */
@media (max-width: 992px) {
    .intro-grid {
        grid-template-columns: 1fr; 
    }
    .intro-image-content {
      max-width: 80%; /* Reduce imagen en móvil */
      margin: 0 auto 40px auto; /* Centra y añade espacio abajo */
    }
}
/* Responsive */
@media (max-width: 992px) {
    .intro-grid {
        grid-template-columns: 1fr; /* Apila las columnas en pantallas pequeñas */
    }
}



/* ============================================ */
/* SECCIÓN USOS RECOMENDADOS (VERSIÓN FORZADA) */
/* ============================================ */
#usos {
    background-color: var(--color-fondo-claro);
    padding: 120px 0;
}

/* Forzamos que el contenedor sea visible */
#usos .usos-container-animado {
    width: 100%;
    overflow: visible !important; /* FORZADO: visible */
}

/* Forzamos la cuadrícula */
#usos .usos-grid {
    display: grid !important; /* FORZADO: grid */
    grid-template-columns: repeat(auto-fit, minmax(150px, 2fr)) !important; 
    gap: 20px !important;

    /* Anulamos las reglas flex antiguas por si acaso */
    flex-wrap: wrap !important; 
    width: 100% !important; 
}

.uso-item {
    height: 350px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 20px;

    /* Anulamos las reglas flex antiguas por si acaso */
    margin-right: 0 !important;
    flex-shrink: 1 !important;
}
/* ============================================================== */
/* SECCIONES DE BENEFICIOS Y CARACTERÍSTICAS (DISEÑO DE TARJETAS) */
/* ============================================================== */
/* ======================================= */
/* FORZAR FONDO CLARO PARA SECCIÓN BENEFICIOS */
/* ======================================= */



/* Estilos comunes para ambas secciones */
.section-with-cards {
    position: relative; 
    padding: 100px 0; 
    overflow: hidden; 
    background-color: var(--color-acento-azul); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#beneficios { background-image: url('../assets/img/Galeria2.jpg'); }
#caracteristicas { background-image: url('../assets/img/LEAN.JPG'); }


/* Overlay común */
.section-with-cards::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(1, 34, 105, 0.6), rgba(0, 2, 7, 0.6)); 
    z-index: 1;
}

/* Título de la sección */
.section-with-cards .section-title {
    color: var(--color-blanco); position: relative; z-index: 2; margin-bottom: 60px; 
}
.section-with-cards .section-title span { color: var(--color-blanco); }
.section-with-cards .section-title.light { color: var(--color-blanco); }


/* Grid para las tarjetas (AHORA MÁS ESPECÍFICO) */
.section-with-cards .feature-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* <--- ¡CÁMBIALO A ESTO! */
    gap: 30px; 
    position: relative; 
    z-index: 2;
    max-width: 1200px; 
    margin: 0 auto; 
}

/* Tarjeta individual (AHORA MÁS ESPECÍFICO) */
.section-with-cards .feature-card {
    background-color: rgba(255, 255, 255, 0.9); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    border-radius: 15px; 
    padding: 35px 25px; 
    text-align: center;
    position: relative;
    overflow: hidden; 
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08), 0px 15px 30px rgba(0, 51, 160, 0.15); 
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease; 
    
    /* Brillo */
    &::after {
        content: ''; position: absolute; top: -50%; left: -50%; width: 0%; height: 200%;
        background: rgba(255, 255, 255, 0.15); 
        transform: rotate(45deg); transition: width 0.4s ease; z-index: 0;
    }
}

/* Hover (AHORA MÁS ESPECÍFICO) */
.section-with-cards .feature-card:hover {
    transform: translateY(-15px) scale(1.04); 
    border-color: rgba(255, 255, 255, 0.6); 
    background-color: rgba(255, 255, 255, 1); 
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.12), 0px 25px 50px rgba(0, 51, 160, 0.25); 
    /* Brillo */
    &::after { width: 200%; }
}

/* Icono (AHORA MÁS ESPECÍFICO) */
.section-with-cards .card-icon { 
    width: 55px; height: 55px; margin: 0 auto 20px auto; 
    color: var(--color-acento-azul); 
    transition: color 0.3s ease; position: relative; z-index: 1; 
}
.section-with-cards .card-icon svg { width: 100%; height: 100%; }

/* Título (AHORA MÁS ESPECÍFICO) */
.section-with-cards .feature-card__title {
    font-family: var(--font-titulos); font-size: 1.2rem; line-height: 1.4;
    color: var(--color-texto-principal-oscuro); 
    position: relative; z-index: 1;
}

/* Responsive (AHORA MÁS ESPECÍFICO) */
@media (max-width: 768px) {
    .section-with-cards { padding: 80px 0; }
    .section-with-cards .feature-card-grid { gap: 20px; }
    .section-with-cards .feature-card { padding: 30px 20px; border-radius: 12px; }
    .section-with-cards .card-icon { width: 45px; height: 45px; margin-bottom: 15px; }
    .section-with-cards .feature-card__title { font-size: 1.1rem; }
}
/* Oculta los estilos antiguos si aún existen */
.horizontal-scroller, .cards-track { display: none !important; }


/* ============================================ */
/* SECCIÓN COMPONENTES - FONDO IMAGEN + FILTRO AZUL */
/* ============================================ */

#componentes {
    position: relative; /* Necesario para el overlay */
    padding: 100px 0; /* Ajusta el padding si es necesario */
    overflow: hidden; 
    

    /* IMAGEN DE FONDO */
    background-color: #e7e6e6;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Opcional: efecto parallax */

    /* CAMBIO: Eliminar fondo claro si lo tenía */
    /* background-color: var(--color-blanco); */ 
}

/* Overlay azul oscuro */
#componentes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
}


/* Ajustar contenido para que esté encima del overlay y sea legible */
#componentes .container {
    position: relative; 
    z-index: 2; /* Encima del overlay */
}

/* Título de la sección */
#componentes .section-title {
    color: var(--color-acento-azul); /* Texto blanco */
}
/* Asegura que el span también sea blanco */
#componentes .section-title span {
    color: var(--color-acento-azul); 
}
/* Si usa la clase .light, forzar blanco */
#componentes .section-title.light {
    color: var(--color-acento-azul);
}


/* Texto introductorio (si existe, como en .usos-intro-text) */
#componentes .usos-intro-text p {
     color: var(--color-texto-principal-oscuro, #2b2a2a); /* Texto claro */
}

/* IMPORTANTE: Asegurar que las tarjetas neumórficas no se vean afectadas */
/* Las reglas originales para .componente-icon-card-3d, etc. deben seguir en main.css */
/* No es necesario redefinirlas aquí a menos que quieras ajustar su posición relativa al nuevo fondo */

.componentes-icons-grid { /* O el nombre de tu contenedor de tarjetas */
    display: grid;
    grid-template-columns: repeat(3, 1fr)!important; /* <-- Esta es la línea clave */
    gap: 25px;
}

/* Si las tarjetas neumórficas tenían un fondo claro explícito, se mantiene */
.componente-icon-card-3d {
    background: var(--color-fondo-claro); /* Mantiene fondo claro original */
    /* ... resto de estilos neumórficos ... */
}
.componente-icon-card-3d h4 {
    color: var(--color-corporativo-gris); /* Mantiene texto gris original */
}

/* ... (resto de estilos neumórficos para wrapper, icono, hover) ... */

/* --- Estilos para la sección de Portafolio (Scroll Infinito) --- */

#portafolio {
    background-color: #f0f2f5;
    padding: 80px 0;
    overflow: hidden; /* Evita barras de scroll horizontales no deseadas */
}

/* Contenedor del Slider */
.portfolio-slider {
    width: 100%;
    padding: 20px 0;
}

/* Hacemos que la transición sea lineal para un movimiento suave y constante */
.portfolio-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Estilo de cada Slide/Tarjeta */
.swiper-slide {
    width: 300px; /* Ancho de cada tarjeta */
    height: 380px;
    transition: transform 0.3s ease; /* Transición suave para el hover */
}

/* Efecto de pausa al pasar el mouse */
.swiper-slide:hover {
    transform: scale(1.05);
    z-index: 10;
}

/* Tarjeta del Portafolio */
.portfolio-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenido sobre la imagen (igual que antes) */
.portfolio-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: #fff;
}

.portfolio-content h3 {
    margin: 0 0 5px 0;
    font-size: 1.5rem;
}

/* Ocultamos la navegación y paginación, ya que el carrusel es automático */
.portfolio-prev,
.portfolio-next,
.swiper-pagination {
    display: none;
}