@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- Estilos para la sección con degradado y imagen --- */
.hero-section {
    /* Define un alto mínimo para que el fondo sea visible */
    min-height: 500px; /* Ajusta según lo necesites */
    width: 100%; /* Opcional, suele ser por defecto */
    display: flex; /* Para centrar el contenido (introduccion) si lo deseas */
    /* align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    
    /* La magia del degradado y la imagen */
    background: 
        /* 1. Degradado blanco a transparente */
        linear-gradient(to top, white 2%, rgba(255, 255, 255, .8) 3% , rgba(255, 255, 255, .5) 4%, rgba(255, 255, 255, 0) 6%),
        /* 2. La imagen de fondo */
        url('../images/inicio/paneles.avif') no-repeat center top;
    
    /* Ajusta el tamaño de la imagen */
    background-size: cover; /* Cubre todo el espacio, cortando si es necesario */
    
}

.introduccion .logo_completo {
    /* Aplica la animación */
    animation: fadeInSlideUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    /* 'forwards' mantiene el estado final */
}
/* Ajustes a tu .introduccion para que se vea bien sobre el nuevo fondo */
.introduccion {
    text-align: center;
    /* margin-top: 70px;  Ya no es necesario si usas flexbox para centrar */
    margin-top: 80px;
    color: var(--mdc-theme-on-primary);
    /* background-color: rgba(255, 255, 255, 0.8); Fondo semi-transparente para el texto */
    border-radius: 8px; /* Bordes redondeados */
    max-width: 800px; /* Limita el ancho del contenido de introducción */
}
.introduccion h1 {
    /* Aplica la animación con un ligero retraso */
    animation: fadeInSlideUp 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.2s; /* Aparece 0.2s después del logo */

    /* Importante: Inicia opaco para que la animación funcione */
    opacity: 0; 
}
.logo_completo {
    height: 120px;
    /* Ajusta la altura del logo según necesites */
    width: auto;
    margin-top: 80px;
    /* Espacio entre el logo y el texto */
}
.centrado{
    display: flex;
    text-align: center;
    justify-content: center;
    width: 100%;
}
.titulosCenter {
    text-align: center;
    /* margin-top: 70px;  Ya no es necesario si usas flexbox para centrar */
    /* background-color: rgba(255, 255, 255, 0.8); Fondo semi-transparente para el texto */
    color: var(--mdc-theme-primary);
    border-radius: 8px; /* Bordes redondeados */
    width: 70%; /* Limita el ancho del contenido de introducción */
}

/* --- ESTILOS PARA EL CARRUSEL (SWIPER) --- */

.carousel-container {
    /* Contenedor estilo "Card" de Material */
    position: relative;
    width: 100%;
    margin: 48px auto; /* 48px de espacio arriba/abajo y centrado horizontal */
    /* border-radius: 8px;  Bordes redondeados */
    overflow: hidden; /* Clave para que el carrusel se vea contenido */
    /* La sombra (mdc-elevation--z4) se aplica desde el HTML */
}

/* Degradado superior */
.carousel-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Altura del degradado, puedes ajustar */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1.0) 1%, rgba(255, 255, 255, 0) 25%);
    z-index: 2; /* Para que esté por encima de la imagen del slide */
    pointer-events: none; /* Para que no interfiera con los clics en el carrusel */
}

/* Degradado inferior */
.carousel-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Altura del degradado, puedes ajustar */
    background: linear-gradient(to top, rgba(255, 255, 255, 1.0) 1%, rgba(255, 255, 255, 0) 25%);
    z-index: 2; /* Para que esté por encima de la imagen del slide */
    pointer-events: none; /* Para que no interfiera con los clics en el carrusel */
}

.swiper {
    width: 100%;
    /* height: 540px;  Ajusta esta altura a tu gusto */    
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #f5f5f5; /* Un fondo claro mientras carga la imagen */

    /* Para centrar la imagen (si es más pequeña) */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
}

/* Estilo Material para los botones de navegación */
.swiper-button-next,
.swiper-button-prev {
    color: white; /* Color del icono */
    background-color: rgba(0, 0, 0, 0.3); /* Fondo semitransparente */
    border-radius: 50%; /* Círculo perfecto */
    width: 44px; /* Tamaño del círculo */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

/* Ocultar las flechas '::after' por defecto de Swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Estilo Material para la paginación (puntitos) */
.swiper-pagination-bullet-active {
    background: var(--mdc-theme-primary); /* Usa tu color primario */
}

.textoCenter {
    text-align: center;
    /* margin-top: 70px;  Ya no es necesario si usas flexbox para centrar */
    /* background-color: rgba(255, 255, 255, 0.8); Fondo semi-transparente para el texto */
    color: var(--mdc-theme-primary);
    width: 40%; /* Limita el ancho del contenido de introducción */
}

.izquierda {
    display: flex;
    width: 100%;
    justify-content: flex-end
}

.servicios-bar {
    /* En caso de olo mover este elemento a la derecha 
    margin-left: auto;*/
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: var(--mdc-theme-primary);
    width: 80%;
    /* Color de texto (blanco, de tu variable --mdc-theme-on-primary) */
    color: var(--mdc-theme-on-primary);
    
    text-align: center;
    padding: 24px 16px; /* 24px arriba/abajo, 16px izq/der */
    
    /* Espacio para separarlo del texto anterior */
    margin-top: 48px; 
    margin-bottom: 48px;

    /* 1. Estado inicial: 100% recortado (oculto) desde la derecha */
    clip-path: inset(0 0 0 100%);

    /* 2. Transición: Animará la propiedad 'clip-path' suavemente */
    transition: clip-path 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.servicios-bar.is-visible {
    clip-path: inset(0 0 0 0);
}

.servicios-bar h1 {
    margin: 0; /* Quita margen por defecto del h2 */
    margin-right: 25%;
}

.carousel-servicios {
    /* Contenedor estilo "Card" de Material */
    position: relative;
    width: 60%;
    margin: 48px auto; /* 48px de espacio arriba/abajo y centrado horizontal */
    /* border-radius: 8px;  Bordes redondeados */
    overflow: hidden; /* Clave para que el carrusel se vea contenido */
    /* La sombra (mdc-elevation--z4) se aplica desde el HTML */
}

/* Degradado superior */
.carousel-servicios::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Altura del degradado, puedes ajustar */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1.0) 1%, rgba(255, 255, 255, 0) 25%);
    z-index: 2; /* Para que esté por encima de la imagen del slide */
    pointer-events: none; /* Para que no interfiera con los clics en el carrusel */
}

/* Degradado inferior */
.carousel-servicios::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Altura del degradado, puedes ajustar */
    background: linear-gradient(to top, rgba(255, 255, 255, 1.0) 1%, rgba(255, 255, 255, 0) 25%);
    z-index: 2; /* Para que esté por encima de la imagen del slide */
    pointer-events: none; /* Para que no interfiera con los clics en el carrusel */
}

.botonesContacto1 {
    /* Hacemos el fondo transparente y el texto del color del logo */
    background-color: var(--mdc-theme-primary) !important;
    margin: 30px;
    text-transform: none;
    /* Evita que los botones se pongan en mayúsculas */
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Efecto hover para los links (se mantiene igual y funciona perfecto) */
.botonesContacto1:hover {
    background-color: #dde666a9 !important;
    /* Un leve brillo del color claro al pasar el ratón */
}

.derecha {
    display: flex;
    width: 100%;
}

.servicios-bar1 {
    /* En caso de olo mover este elemento a la derecha 
    margin-left: auto;*/
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: var(--mdc-theme-secondary);
    width: 80%;
    /* Color de texto (blanco, de tu variable --mdc-theme-on-primary) */
    color: var(--mdc-theme-primary);
    
    text-align: center;
    padding: 24px 16px; /* 24px arriba/abajo, 16px izq/der */
    
    /* Espacio para separarlo del texto anterior */
    margin-top: 48px; 
    margin-bottom: 48px;

    /* 1. Estado inicial: 100% recortado (oculto) desde la derecha */
    clip-path: inset(0 100% 0 0);

    /* 2. Transición: Animará la propiedad 'clip-path' suavemente */
    transition: clip-path 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.servicios-bar1.is-visible {
    clip-path: inset(0 0 0 0);
}

.servicios-bar1 h1 {
    margin: 0; /* Quita margen por defecto del h2 */
    margin-left: 25%;
}

.carousel-solucion-integral {
    /* Contenedor estilo "Card" de Material */
    position: relative;
    width: 60%;
    margin: 48px auto; /* 48px de espacio arriba/abajo y centrado horizontal */
    /* border-radius: 8px;  Bordes redondeados */
    overflow: hidden; /* Clave para que el carrusel se vea contenido */
    /* La sombra (mdc-elevation--z4) se aplica desde el HTML */
}

/* Degradado superior */
.carousel-solucion-integral::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Altura del degradado, puedes ajustar */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1.0) 1%, rgba(255, 255, 255, 0) 25%);
    z-index: 2; /* Para que esté por encima de la imagen del slide */
    pointer-events: none; /* Para que no interfiera con los clics en el carrusel */
}

/* Degradado inferior */
.carousel-solucion-integral::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Altura del degradado, puedes ajustar */
    background: linear-gradient(to top, rgba(255, 255, 255, 1.0) 1%, rgba(255, 255, 255, 0) 25%);
    z-index: 2; /* Para que esté por encima de la imagen del slide */
    pointer-events: none; /* Para que no interfiera con los clics en el carrusel */
}

.botonesContacto2 {
    /* Hacemos el fondo transparente y el texto del color del logo */
    background-color: var(--mdc-theme-secondary) !important;
    margin: 30px;
    color: var(--mdc-theme-on-secondary) !important;
    text-transform: none;
    /* Evita que los botones se pongan en mayúsculas */
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Efecto hover para los links (se mantiene igual y funciona perfecto) */
.botonesContacto2:hover {
    background-color: #dde666a9 !important;
    /* Un leve brillo del color claro al pasar el ratón */
}

.carousel-proyectos {
    /* Contenedor estilo "Card" de Material */
    position: relative;
    width: 100%;
    margin: 48px auto; /* 48px de espacio arriba/abajo y centrado horizontal */
    /* border-radius: 8px;  Bordes redondeados */
    overflow: hidden; /* Clave para que el carrusel se vea contenido */
    /* La sombra (mdc-elevation--z4) se aplica desde el HTML */
}

/* Degradado superior */
.carousel-proyectos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Altura del degradado, puedes ajustar */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1.0) 1%, rgba(255, 255, 255, 0) 25%);
    z-index: 2; /* Para que esté por encima de la imagen del slide */
    pointer-events: none; /* Para que no interfiera con los clics en el carrusel */
}

/* Degradado inferior */
.carousel-proyectos::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Altura del degradado, puedes ajustar */
    background: linear-gradient(to top, rgba(255, 255, 255, 1.0) 1%, rgba(255, 255, 255, 0) 25%);
    z-index: 2; /* Para que esté por encima de la imagen del slide */
    pointer-events: none; /* Para que no interfiera con los clics en el carrusel */
}


.seccion-dividida {
    display: flex;
    justify-content: center;
    /* Centra las columnas */
    align-items: center;
    /* Alinea verticalmente */
    width: 50%;
    /* Ancho de la sección en escritorio */
    margin: 64px auto;
    /* Espacio arriba/abajo y centrado */
    gap: 150px;
    /* Espacio entre las columnas */
    transition: transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

.parte1 {
    flex: 1;
    text-align: center;
    /* Permite que la columna de texto crezca */
    
    /* Texto centrado como en la imagen */
    color: var(--mdc-theme-primary);
    opacity: 0;
    transform: translateX(60px);
    /* Empieza 30px a la derecha */
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 1s ease-out;
}


.parte2 {
    flex: 1;
    text-align: center;
    /* Ocupa el espacio restante */
    max-width: 450px;
    opacity: 0;
    transform: translateX(-60px);
    /* Empieza 30px a la izquierda */
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 1s ease-out;
}

.seccion-dividida.activo .parte1,
.seccion-dividida.activo .parte2 {
    opacity: 1;
    transform: translateX(0);
    /* Vuelven a su posición (0) */
}
.info_contacto{

    display: flex;
    text-align:start;
    margin-right: 50px;
    flex-direction: column;
    justify-content: center;
}
.info_contacto h3 {
    margin: 0; /* Quita margen por defecto del h2 */
    color: var(--mdc-theme-primary);
}

.info_ubicación iframe {
    border: 0; /* Quita el borde por defecto */
    border-radius: 8px; /* Bordes redondeados para que combine con tu diseño */
    width: 400px;
    height: 300px;
}


/* --- ESTILOS RESPONSIVE (inicio.css) --- */

@media (max-width: 900px) {

    /* --- Fuentes (H1 se hace más pequeño) --- */
    .introduccion h1 {
        font-size: 1.8rem; /* Tamaño más pequeño, como un h3 */
    }
    
    .titulosCenter h1 {
        font-size: 1.5rem; /* Más pequeño */
    }

    .servicios-bar h1,
    .servicios-bar1 h1 {
        font-size: 1.4rem;
        margin-right: 5%; /* Ajustamos márgenes */
        margin-left: 5%;
    }

    .textoCenter h2 {
        font-size: 1.1rem; /* Fuentes de párrafo más pequeñas */
    }

    /* --- Anchos de Contenedores --- */
    .titulosCenter,
    .textoCenter {
        width: 90%; /* Ocupan más ancho en móvil */
    }

    .servicios-bar,
    .servicios-bar1 {
        width: 95%; /* Las barras casi ocupan todo el ancho */
    }

    .carousel-servicios,
    .carousel-solucion-integral {
        width: 90%; /* Carruseles más anchos */
    }

    /* --- Botones --- */
    .centrado .mdc-button h2 {
        font-size: 1rem;
    }
    .centrado .mdc-button .material-symbols-outlined,
    .centrado .mdc-button .bi {
        font-size: 1.1rem;
    }

    .seccion-dividida {
        flex-direction: column;
        /* Apila las columnas */
        width: 90%;
    }

    .parte1 {
        transform: translateX(20px);
        max-width: 90%;
        /* Empieza 30px a la derecha */
    }

    .parte2 {
        
        transform: translateX(-20px);
        /* Empieza 30px a la izquierda */
    }
 

    .info_contacto {
        margin: 0;      /* Quita el margen lateral */
        margin-bottom: 32px;  /* Añade espacio entre los bloques */
        text-align: center;   /* Centra el texto (opcional) */
        align-items: center;
    }

    .info_ubicación {      /* Quita el margen lateral */
        width: 100%;          /* El mapa ocupa el 90% del ancho de la pantalla */
        max-width: 400px;     /* Un tope para que no sea gigante */
        margin: 0;
    }

    .info_ubicación iframe {
        width: 100%;          /* El iframe se adapta a su contenedor */
        height: 300px;
    }

}