.caj-art-entrevistas{
width: 100%;
height: 270px;
}
.art-entrevistas{
display: grid;
grid-template-columns: 50% 50%;
max-width: 550px;
height: 100%;
margin: auto;
background: #224b28;
border: 1.3px solid #3a6841;
border-radius: 12px;
}
.img-art{
display: flex;
margin: auto;
width: 250px;
height: 250px;
overflow: hidden;
border-radius: 13px;
}
.textos-art{
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
width: 250px;
height: 250px;
row-gap: 10px;
}
.titulo-art{
font-family: 'SemanaSans-Medium', sans-serif;
font-weight: 300;
font-size: 17px;
color: #fff;
text-align: left;
}
.linea-art{
width: 100%;
height: 1px;
background: #fff;
}
.chapo-art{
font-family: 'SemanaSans-Light', sans-serif;
font-size: 15px;
font-weight: 300;
color: #fff;
text-align: left;
}
.boton-art{
display: flex;
flex-wrap: wrap;
width: 100px;
height: 33px;
background: #fff;
border-radius: 6px;
margin-top: 10px;
justify-content: center;
align-content: center;
}
.boton-art a {
text-decoration: none;
}
.boton-art a p{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
font-family: 'SemanaSans-Medium', sans-serif;
font-size: 15px;
color: #186723;
text-decoration: none;
}
/* Estilo general para el contenedor */
.slider-container {
width: 760px; /* Ajusta según tu necesidad */
overflow: hidden; /* Oculta los desbordes */
position: relative; /* Para añadir controles si es necesario */
}
/* Estilo para el slider */
.slider {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
cursor: grab; /* Indicar que se puede arrastrar */
user-select: none; /* Deshabilita la selección del texto*/
}
.slider:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slide */
.slide {
flex: 0 0 100%; /* Cada slide ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slide al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slide img{
pointer-events: none;
user-select: none;
}
/* Estilo de los controles */
.estilo-boton {
font-family: 'SemanaSans-Bold', sans-serif;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
color: #fff;
border: none;
cursor: pointer;
z-index: 1;
}
.btn-slider-art{
opacity: 0.9;
width: 20px;
height: 37px;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.hidden {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.slider::-webkit-scrollbar {
display: none;
}
/*----------------------------E1-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE1r */
.sliderE1 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE1:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE1 */
.slideE1 {
flex: 0 0 100%; /* Cada slideE1 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE1 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE1 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE1 {
left: 10px;
}
.nextE1 {
right: 10px;
}
.hiddenE1 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE1::-webkit-scrollbar {
display: none;
}
/*----------------------------E2-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE2r */
.sliderE2 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE2:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE2 */
.slideE2 {
flex: 0 0 100%; /* Cada slideE2 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE2 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE2 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE2 {
left: 10px;
}
.nextE2 {
right: 10px;
}
.hiddenE2 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE2::-webkit-scrollbar {
display: none;
}
/*----------------------------E3-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE3r */
.sliderE3 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE3:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE3 */
.slideE3 {
flex: 0 0 100%; /* Cada slideE3 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE3 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE3 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE3 {
left: 10px;
}
.nextE3 {
right: 10px;
}
.hiddenE3 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE3::-webkit-scrollbar {
display: none;
}
/*----------------------------E4-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE4r */
.sliderE4 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE4:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE4 */
.slideE4 {
flex: 0 0 100%; /* Cada slideE4 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE4 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE4 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE4 {
left: 10px;
}
.nextE4 {
right: 10px;
}
.hiddenE4 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE4::-webkit-scrollbar {
display: none;
}
/*----------------------------E5-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE5r */
.sliderE5 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE5:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE5 */
.slideE5 {
flex: 0 0 100%; /* Cada slideE5 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE5 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE5 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE5 {
left: 10px;
}
.nextE5 {
right: 10px;
}
.hiddenE5 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE5::-webkit-scrollbar {
display: none;
}
/*----------------------------E6-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE6r */
.sliderE6 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE6:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE6 */
.slideE6 {
flex: 0 0 100%; /* Cada slideE6 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE6 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE6 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE6 {
left: 10px;
}
.nextE6 {
right: 10px;
}
.hiddenE6 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE6::-webkit-scrollbar {
display: none;
}
/*----------------------------E7-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE7r */
.sliderE7 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE7:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE7 */
.slideE7 {
flex: 0 0 100%; /* Cada slideE7 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE7 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE7 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE7 {
left: 10px;
}
.nextE7 {
right: 10px;
}
.hiddenE7 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE7::-webkit-scrollbar {
display: none;
}
/*----------------------------E8-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE8r */
.sliderE8 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE8:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE8 */
.slideE8 {
flex: 0 0 100%; /* Cada slideE8 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE8 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE8 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE8 {
left: 10px;
}
.nextE8 {
right: 10px;
}
.hiddenE8 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE8::-webkit-scrollbar {
display: none;
}
/*----------------------------E9-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE9r */
.sliderE9 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE9:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE9 */
.slideE9 {
flex: 0 0 100%; /* Cada slideE9 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE9 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE9 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE9 {
left: 10px;
}
.nextE9 {
right: 10px;
}
.hiddenE9 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE9::-webkit-scrollbar {
display: none;
}
/*----------------------------E10-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE10r */
.sliderE10 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE10:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE10 */
.slideE10 {
flex: 0 0 100%; /* Cada slideE10 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE10 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE10 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE10 {
left: 10px;
}
.nextE10 {
right: 10px;
}
.hiddenE10 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE10::-webkit-scrollbar {
display: none;
}
/*----------------------------E11-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE11r */
.sliderE11 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE11:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE11 */
.slideE11 {
flex: 0 0 100%; /* Cada slideE11 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE11 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE11 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE11 {
left: 10px;
}
.nextE11 {
right: 10px;
}
.hiddenE11 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE11::-webkit-scrollbar {
display: none;
}
/*----------------------------E12-----------------------------------*/
/* Estilo general para el contenedor */
/* Estilo para el slideE12r */
.sliderE12 {
display: flex; /* Coloca los elementos en fila */
scroll-snap-type: x mandatory; /* Activar snapping horizontal */
overflow-x: scroll; /* Permite desplazamiento horizontal */
scroll-behavior: smooth; /* Desplazamiento suave */
-webkit-overflow-scrolling: touch; /* Mejora en dispositivos táctiles */
user-select: none; /* Deshabilita la selección del texto*/
}
.sliderE12:active {
cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}
/* Estilo para cada slideE12 */
.slideE12 {
flex: 0 0 100%; /* Cada slideE12 ocupa el 100% del contenedor */
scroll-snap-align: center; /* Centra cada slideE12 al hacer scroll */
text-align: center; /* Opcional, para alinear el contenido */
font-size: 24px;
box-sizing: border-box;
}
.slideE12 img {
pointer-events: none; /* Desactiva el arrastre de imágenes */
user-select: none; /* Evita que las imágenes sean seleccionables */
}
.prevE12 {
left: 10px;
}
.nextE12 {
right: 10px;
}
.hiddenE12 {
display: none;
}
/* Quita la apariencia de scrollbars para una experiencia más limpia */
.sliderE12::-webkit-scrollbar {
display: none;
}
/*----------*/
@media (max-width: 768px){
.caj-art-entrevistas{
width: 100%;
height: 100%;
max-width: 300px;
margin: auto;
}
.art-entrevistas{
grid-template-columns: 1fr;
}
.slider-container {
width: 100%;
height: 100%;
}
.img-art{
margin-top: 20px;
}
.textos-art{
row-gap: 5px
}
}