/* Evita el desplazamiento horizontal */
html, body {
overflow-x: hidden;
width: 100%;
}
/*panel de la imagen de arriba*/
.cursos-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: -50px;
position: relative;
overflow: hidden; /* 馃敼 Evita m谩rgenes extra */
}
.cursos-container {
position: relative; /* Para que el cuadro se posicione respecto a la imagen */
width: 100%;
height: auto; /* Ajusta la altura de acuerdo con el contenido */
max-width: 100%;
display: flex;
justify-content: center;
align-items: center; /* 馃敼 Centra el contenido verticalmente */
}
.cursos-img {
width: 100%; /* 馃敼 Hace que la imagen ocupe todo el ancho de la pantalla */
height: auto;
display: block;
}
.cursos-texto {
position: absolute;
top: 30%;
left: 30%;
color: white;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
width: 80%;
max-width: 400px;
text-align: center;
border-radius: 10px;
}
.cursos-texto h2 {
font-size: 2.5em;
margin-bottom: 10px;
position: relative;
display: flex;
flex-direction: column; /* 馃敼 Asegura que la rayita quede debajo del texto */
align-items: center; /* 馃敼 Centra el contenido */
text-align: center;
}
/* Rayita naranja debajo del t铆tulo */
.cursos-texto h2::after {
content: "";
display: block;
width: 60px;
height: 4px;
background-color: orange;
margin-top: 5px auto 0 auto; /* 馃敼 Centra horizontalmente */
}
.cursos-texto p {
font-size: 1.2em;
margin-top: 20px;
text-align: center;
}
.ver-cursos {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: red;
color: white;
border: 2px solid red;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
}
.ver-cursos:hover {
background-color: white;
color: red;
}
.icono-abajo {
display: block;
width: 60px; /* Icono m谩s peque帽o */
height: auto;
margin: 10px auto 0; /* Centrado y con margen arriba */
cursor: pointer;
transition: transform 0.3s ease;
}
.icono-abajo:active {
transform: scale(0.9); /* Peque帽o efecto al tocar */
}
/* Estilos del t铆tulo "Nuestros Cursos" */
.titulo-cursos {
text-align: center;
font-size: 3.5em; /* 馃敼 Aumenta el tama帽o de la fuente */
font-weight: bold;
margin-top: 40px;
text-decoration: underline;
text-decoration-color: black; /* 馃敼 Subrayado en negro */
text-underline-offset: 8px; /* 馃敼 Ajuste de separaci贸n */
}
/* ------------------- Responsividad ------------------- */
/* 馃敼 Ajustes para pantallas grandes de 1047px o m谩s */
@media (min-width: 1047px) {
.cursos-texto {
top: 50%; /* 馃敼 Exactamente en el centro vertical de la imagen */
left: 50%;
transform: translate(-50%, -50%); /* 馃敼 Lo mantiene en el centro */
width: 50%; /* Ajuste de ancho para que se vea mejor */
max-width: 500px;
font-size: 1.2em;
}
}
/* 馃敼 Ajustes para pantallas medianas (tablets) */
@media (max-width: 1046px) {
.cursos-texto {
top: 45%; /* 馃敼 Lo sube un poco para que no se vea tan abajo */
width: 70%;
max-width: 400px;
}
}
/* 馃敼 AJUSTES PARA PANTALLAS MEDIANAS (TABLETS) */
@media (max-width: 1024px) {
.cursos-container {
min-height: 650px; /* 馃敼 Aumenta la altura del contenedor */
}
.cursos-texto {
top: 62%; /* 馃敼 Subido m谩s arriba */
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
text-align: center;
}
.titulo-cursos {
font-size: 3em;
}
.titulo-cursos::after {
width: 70px;
}
}
/* 馃敼 AJUSTES PARA PANTALLAS PEQUE脩AS (TABLETS Y M脫VILES) */
@media (max-width: 768px) {
.cursos-container {
padding-left: 0;
min-height: 750px; /* 馃敼 Aumenta la altura en tablets y m贸viles */
}
.cursos-img {
object-position: top; /* 馃敼 Recorta la imagen desde arriba */
width: 100vw; /* 馃敼 Hace que la imagen cubra todo el ancho de la pantalla */
height: 100%; /* 馃敼 Mantiene la proporci贸n */
display: block;
}
.cursos-texto {
left: 50%;
text-align: center;
width: 85%;
}
.cursos-texto h2 {
font-size: 2em;
}
.cursos-texto h2::after {
width: 60px; /* 馃敼 Rayita naranja m谩s visible */
margin: auto; /* 馃敼 Centrado perfecto debajo del t铆tulo */
}
.cursos-texto p {
font-size: 1em;
}
.ver-cursos {
padding: 10px 18px;
margin-top: 30px; /* 馃敼 Baja el bot贸n un poco m谩s */
}
.titulo-cursos {
font-size: 3em;
}
.titulo-cursos::after {
width: 60px;
}
}
/* 馃敼 AJUSTES PARA PANTALLAS MUY PEQUE脩AS (M脫VILES) */
@media (max-width: 480px) {
.cursos-container {
min-height: 800px; /* 馃敼 M谩s altura para m贸viles */
}
.cursos-texto {
top: 35%; /* 馃敼 para pode rbjar y subir el cuadro del texto */
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 90%;
padding: 12px;
}
.cursos-img {
object-fit: cover;
width: 100vw;
}
.cursos-texto h2 {
font-size: 1.8em;
}
.cursos-texto h2::after {
width: 50px; /* 馃敼 Rayita naranja m谩s peque帽a */
margin: auto;
}
.cursos-texto p {
font-size: 0.9em;
}
.ver-cursos {
padding: 8px 14px;
margin-top: 35px; /* 馃敼 Ajusta la separaci贸n */
}
.titulo-cursos {
font-size: 2.5em;
}
.titulo-cursos::after {
width: 50px;
}
}
/*Estilos para las imagenes con los cuadros en blanco*/
/* Estilos generales del contenedor de cursos */
.cursos-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 馃敼 3 columnas en pantallas grandes */
gap: 25px;
margin-bottom: 80px;
justify-content: center; /* 馃敼 Centrar contenido */
}
/* Tarjeta de cada curso */
.curso-card {
background: white;
width: 100%; /* Ocupa todo el ancho disponible en su celda */
max-width: 300px; /* M谩ximo de 300px */
padding: 15px;
text-align: center;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
margin: auto; /* Centra los elementos */
}
/* Imagen de los cursos */
.curso-card img {
width: 100%;
object-fit: cover;
border-radius: 8px;
}
/* T铆tulo del curso */
.curso-card h3 {
margin-top: 10px;
font-size: 1.5em;
color: #333;
}
/* Descripci贸n del curso */
.curso-card p {
font-size: 1em;
color: #555;
margin: 10px 0;
}
/* Bot贸n de "Ver Video" */
.btn-ver-video {
display: inline-block;
padding: 10px 15px;
background-color: #ff5722;
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
transition: 0.3s;
}
.btn-ver-video:hover {
background-color: #e64a19;
}
/* 馃敼 Si hay un solo elemento en la segunda fila, lo centramos */
.cursos-container .curso-card:nth-child(4):nth-last-child(1) {
grid-column: 2 / span 1; /* 馃敼 Centra el cuarto elemento */
}
/* 馃搶 PANTALLAS GRANDES (+1024px) */
@media (min-width: 1025px) {
.cursos-container {
grid-template-columns: repeat(3, 1fr); /* 3 columnas */
}
}
/* 馃搶 PANTALLAS MEDIANAS (768px - 1024px) */
@media (max-width: 1024px) {
.cursos-container {
grid-template-columns: repeat(2, 1fr); /* 馃敼 2 columnas */
gap: 30px;
}
/* 馃敼 Restaurar la posici贸n normal si hay m谩s de 4 cursos */
.cursos-container .curso-card:nth-child(4):nth-last-child(1) {
grid-column: auto;
}
}
/* 馃搶 PANTALLAS PEQUE脩AS (menos de 768px) */
@media (max-width: 768px) {
.cursos-container {
grid-template-columns: 1fr; /* 馃敼 1 curso por fila */
gap: 20px;
}
}
/* 馃搶 PANTALLAS MUY PEQUE脩AS (menos de 480px) */
@media (max-width: 480px) {
.cursos-container {
gap: 15px;
}
.curso-card {
width: 90%; /* M谩s ancho en pantallas muy peque帽as */
}
}