.experiencia-dcd {
    position: relative;
    overflow: hidden;
}
.experiencia-dcd .experiencia-dcd-uno {
    position: absolute;
    width: 100%;
    height: 15vw;
    overflow: hidden;
    background-image: url('../img/bannerssecciones/b1.webp'); /* Ruta relativa a la carpeta img */
    background-size: cover;
    background-position: center;  
    text-align: left;  
    display: flex; /* Utilizamos flexbox para alinear verticalmente */
    justify-content: left; /* Centramos horizontalmente */
    align-items: center; /* Centramos verticalmente */
}
.experiencia-background{
    position: absolute;    
    width: 100%;
    height: 15vw;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 50%, rgba(246, 146, 30, 0.5) 50%);
    opacity: 0.7;
}
@media (max-width: 800px) {    
    .experiencia-dcd-uno {
        height: 30vw;
        text-align: center;
        justify-content: center; /* Una columna cuando no caben dos */
    }
    .experiencia-background{
        height: 15vw;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0.9) 50%);
    }
    .experiencia-text
    {
        text-align: center;
    }
}
.experiencia-content {
    position: relative;
    z-index: 1;
    padding: 20px;
    margin-bottom: 15vw;
    overflow: hidden;
}
.experiencia-text {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 3vw;
    height: 15vw;
    overflow: hidden;
}




.experiencia-historia {
    position: relative;
    padding: 10px;
    margin-top: 0px;
    overflow: hidden; /* Añadimos un relleno para separar del contenido superior */
}

.historia-row {
    display: flex;
    margin-bottom: 5px;
}

.historia-column {
    flex-grow: 1; 
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}



.historia-column img:hover {
    transform: scale(1.1);
}
 .historia-column img { 
    object-fit: contain;
    transition: transform 0.5s ease-in-out;
}

.historia-imagen {
    border-radius: 0%;
    width: 200px;
    height: 200px;
    margin-bottom: 5px;    
}

.historia-titulo {
    font-weight: bold;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
    color: #f6921e;
    margin-left: 10vw;
    margin-right: 10vw;
    width: 30vw;
    text-align: center;
    line-height: 1;
}

.historia-detalle,
.historia-subdetalle {
    margin-right: 0vw;
    font-family: 'Montserrat', sans-serif;
    color: #f6921e;
    text-align:right;
    align-content: right;
    align-items: right;
    line-height: 1;

}
.historia-detalle-derecha,
.historia-subdetalle-derecha {
    margin-left: 0vw;
    font-family: 'Montserrat', sans-serif;
    color: #c07537;
    text-align:left;
    align-content: left;
    align-items: left;
    line-height: 1;

}

.historia-column-delgada {
    position: relative;
    flex: 0;
    width: 40px; /* Ancho del icono */
    margin: 0 5px;
    border-radius: 20%;
    background-color: white;     
}
.historia-column-delgada img:hover {
    transform: translate(-50%, -50%) rotate3d(0, 1, 0, 720deg);
     /* Gira el elemento 360 grados al pasar el mouse sobre él */
}
.historia-column-delgada  img{ 
    display: block; 
    background-color: white;   
    border-radius: 50%;
    transition: transform 5s ease;
    transform-style: preserve-3d;
}

.historia-column-delgada::before {
    content: ""; /* Pseudo-elemento para la línea */
    position: absolute;
    top: 2vw;
    left: 0%;
    transform: translateX(0%);
    width: 1px; /* Ancho de la línea */
    height: 80vh;
    background-image: repeating-linear-gradient(to bottom, black, black 30vw, transparent 0vw, transparent 26.5vw); /* Patrón de líneas */
    
}

.primer_icono {
    position: absolute; /* Establece posición absoluta */
    top: 0%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Centra completamente */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white; 
    z-index: 2;
}
.segundo_icono {
    position: absolute; /* Establece posición absoluta */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Centra completamente */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    
    background-color: white;; 
    background-size: 200%;
    z-index: 2;
}