/*! #######################################################################

	MeanMenu 2.0.7
	--------

	To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)

####################################################################### */

/* hide the link until viewport size is reached */
a.meanmenu-reveal {
	display: none;
}

/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
	float: left;
	width: 100%;
	position: relative;
	background: #16dbcb;
	padding: 4px 0;
	min-height: 42px;
	z-index: 999999;
}

.mean-container a.meanmenu-reveal {
	width: 22px;
	height: 22px;
	padding: 13px 13px 11px 13px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	text-indent: -9999em;
	line-height: 22px;
	font-size: 1px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
}

.mean-container a.meanmenu-reveal span {
	display: block;
	background: #fff;
	height: 3px;
	margin-top: 3px;
}

.mean-container .mean-nav {
	float: left;
	width: 100%;
	background: #070337;
	margin-top: 44px;
}

.mean-container .mean-nav ul {
	padding: 0;
	margin: 0;
	width: 100%;
	list-style-type: none;
}

.mean-container .mean-nav ul li {
	position: relative;
	float: left;
	width: 100%;
}

.mean-container .mean-nav ul li a {
	display: block;
	float: left;
	width: 90%;
	padding: 10px 5%;
	margin: 0;
	text-align: left;
	color: #fff;
	border-top: 1px solid #e0e3ed;
	text-decoration: none;
	text-transform: uppercase;
}

.mean-container .mean-nav ul li li a {
	width: 80%;
	padding: 10px 10%;
	text-shadow: none !important;
	visibility: visible;
}

.mean-container .mean-nav ul li.mean-last a {
	border-bottom: none;
	margin-bottom: 0;
}

.mean-container .mean-nav ul li li li a {
	width: 70%;
	padding: 10px 15%;
}

.mean-container .mean-nav ul li li li li a {
	width: 60%;
	padding: 10px 20%;
}

.mean-container .mean-nav ul li li li li li a {
	width: 50%;
	padding: 10px 25%;
}


.mean-container .mean-nav ul li a.mean-expand {
	margin-top: 1px;
	width: 26px;
	height: 32px;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-weight: 700;
	background: transparent;
	border: none !important;
	font-size: 14px;
}




.mean-container .mean-push {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	clear: both;
}

.mean-nav .wrapper {
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar, .mean-container .mean-bar * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}


.mean-remove {
	display: none !important;
}

/* --- NUEVOS ESTILOS PARA LA SECCIÓN DE CONTACTO Y REDES SOCIALES --- */

.contact-section {
    background-color: var(--bg-dark); /* Un color de fondo para la sección de contacto */
    padding: 80px 0;
    text-align: center;
}

.contact-section h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.contact-section h2::after {
    background-color: var(--primary-color);
}

.contact-section p {
    max-width: 700px;
    margin: 0 auto 30px auto;
    font-size: 1.1em;
}

.social-links {
    margin-top: 30px;
    margin-bottom: 40px;
    display: flex; /* Para centrar el enlace social */
    justify-content: center;
    align-items: center;
    gap: 15px; /* Espacio entre el icono y el texto/otros iconos */
}

.social-links a {
    display: flex; /* Para alinear el icono y el texto */
    align-items: center;
    text-decoration: none;
    color: var(--text-dark); /* Color de texto para el nombre de usuario */
    font-weight: 600;
    font-size: 1.2em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: var(--primary-color); /* Cambia de color al pasar el ratón */
    transform: translateY(-3px); /* Pequeño efecto de elevación */
}

.social-icon {
    width: 32px; /* Tamaño del icono */
    height: 32px;
    margin-right: 10px; /* Espacio entre el icono y el texto */
    vertical-align: middle;
}

.contact-info {
    font-size: 1.05em;
    color: var(--text-light);
}

.contact-info a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Media Queries para la nueva sección de contacto */
@media (max-width: 768px) {
    .contact-section p {
        font-size: 1em;
    }
    .social-links {
        flex-direction: column; /* Apila los enlaces en pantallas pequeñas si hay muchos */
        gap: 10px;
    }
    .social-links a {
        font-size: 1.1em;
    }
}

/* --- Estilos para la sección de Lecciones (tp-feature) en index.html --- */

/* Estilos de la sección principal que contiene todas las lecciones */
.tp-feature__section {
    background-color: var(--card-bg); /* Un fondo suave para la sección, ajusta según tus variables CSS */
    padding: 120px 0 30px 0; /* Espaciado interno superior (120px) y inferior (30px) */
    margin-top: 50px; /* Margen superior para separar de la sección anterior */
    box-shadow: var(--shadow); /* Una sombra sutil para darle profundidad, ajusta según tus variables CSS */
    border-radius: 12px; /* Bordes ligeramente redondeados para la sección */
}

/* Estilos del contenedor del título de la sección "Algunas Lecciones Con Las Que Contamos" */
.tp-section__title-wrapper {
    margin-bottom: 40px; /* Espacio debajo del título */
    text-align: center; /* Centra el texto del título */
}

/* Estilos del título principal de la sección */
.tp-section__title {
    font-size: 2.8em; /* Tamaño de fuente grande para el título */
    color: var(--text-dark); /* Color oscuro para el texto del título, ajusta según tus variables CSS */
    font-weight: 700; /* Texto en negrita */
    position: relative; /* Necesario para posicionar la línea decorativa con ::after */
    padding-bottom: 15px; /* Espacio entre el texto del título y la línea decorativa */
    display: inline-block; /* Permite que el elemento tome el ancho de su contenido y se centre */
}

/* Línea decorativa debajo del título principal de la sección */
.tp-section__title::after {
    content: ''; /* Contenido vacío para crear el elemento visual */
    position: absolute; /* Posicionamiento absoluto respecto a .tp-section__title */
    left: 50%; /* Inicia en el 50% del ancho del padre */
    transform: translateX(-50%); /* Mueve el elemento hacia la izquierda el 50% de su propio ancho para centrarlo */
    bottom: 0; /* Posiciona la línea en la parte inferior del título */
    width: 100px; /* Ancho de la línea */
    height: 4px; /* Grosor de la línea */
    background-color: var(--primary-color); /* Color de la línea, ajusta según tus variables CSS */
    border-radius: 2px; /* Bordes ligeramente redondeados para la línea */
}

/* Estilos para el contenedor de las tarjetas de lecciones, simula el "gap" de Bootstrap */
.row.gx-70 {
    display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan a la siguiente fila si no hay espacio */
    margin-left: -35px; /* Compensa el padding de las columnas */
    margin-right: -35px; /* Compensa el padding de las columnas */
}

/* Estilos para cada columna dentro del contenedor de tarjetas */
.row.gx-70 > [class*="col-"] {
    padding-left: 35px; /* Espaciado interno a la izquierda de cada columna */
    padding-right: 35px; /* Espaciado interno a la derecha de cada columna */
    box-sizing: border-box; /* Asegura que el padding no añada al ancho total del elemento */
}

/* Estilos para cada tarjeta de lección individual */
.tp-feature__item {
    background-color: var(--bg-light); /* Fondo para cada tarjeta, ajusta según tus variables CSS */
    border-radius: 10px; /* Bordes redondeados para la tarjeta */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Sombra suave para la tarjeta */
    padding: 30px; /* Espaciado interno de la tarjeta */
    text-align: center; /* Centra el contenido de la tarjeta */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para efectos hover */
    margin-bottom: 30px; /* Margen inferior entre las tarjetas */
    position: relative; /* Necesario para posicionar la barra de color superior */
    overflow: hidden; /* Asegura que la barra de color no se desborde */
}

/* Efecto al pasar el ratón sobre una tarjeta */
.tp-feature__item:hover {
    transform: translateY(-8px); /* Eleva la tarjeta ligeramente */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

/* Estilos del contenedor del icono dentro de la tarjeta */
.tp-feature__icon {
    margin-bottom: 20px; /* Espacio debajo del icono */
    display: inline-block; /* Permite aplicar padding y border-radius */
    background-color: #fff; /* Fondo blanco para el círculo del icono */
    padding: 15px; /* Espaciado interno del círculo del icono */
    border-radius: 50%; /* Hace el fondo del icono circular */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para el círculo del icono */
}

/* Estilos de la imagen del icono dentro de la tarjeta */
.tp-feature__icon img {
    width: 60px; /* Ancho de la imagen del icono */
    height: 60px; /* Alto de la imagen del icono */
    object-fit: contain; /* Ajusta la imagen sin recortarla, manteniendo sus proporciones */
}

/* Estilos del título de la lección dentro de la tarjeta */
.tp-feature__title {
    font-size: 1.8em; /* Tamaño de fuente para el título de la lección */
    font-weight: 600; /* Negrita para el título */
    margin-bottom: 0; /* Elimina el margen inferior predeterminado */
}

/* Estilos del enlace del título de la lección */
.tp-feature__title a {
    text-decoration: none; /* Quita el subrayado del enlace */
    color: var(--text-dark); /* Color del texto del enlace, ajusta según tus variables CSS */
    transition: color 0.3s ease; /* Transición suave al cambiar de color */
}

/* Efecto al pasar el ratón sobre el enlace del título de la lección */
.tp-feature__title a:hover {
    color: var(--primary-color); /* Cambia el color del texto al pasar el ratón, ajusta según tus variables CSS */
}

/* Líneas de color en la parte superior de cada tarjeta (usando el pseudo-elemento ::before) */
.tp-feature__item.before-color-1::before,
.tp-feature__item.before-color-2::before,
.tp-feature__item.before-color-3::before,
.tp-feature__item.before-color-4::before,
.tp-feature__item.before-color-5::before,
.tp-feature__item.before-color-6::before,
.tp-feature__item.before-color-7::before,
.tp-feature__item.before-color-8::before {
    content: ''; /* Contenido vacío para crear el elemento visual */
    position: absolute; /* Posicionamiento absoluto respecto a .tp-feature__item */
    top: 0; /* Posiciona la línea en la parte superior de la tarjeta */
    left: 0; /* Inicia desde el borde izquierdo */
    width: 100%; /* La línea abarca todo el ancho de la tarjeta */
    height: 8px; /* Altura de la línea de color */
}

/* Colores específicos para cada línea de la tarjeta, usando clases numéricas */
.tp-feature__item.before-color-1::before { background-color: #A0C4FF; } /* Azul claro */
.tp-feature__item.before-color-2::before { background-color: #B2FFD6; } /* Verde menta */
.tp-feature__item.before-color-3::before { background-color: #FFC0CB; } /* Rosa */
.tp-feature__item.before-color-4::before { background-color: #FFD6A5; } /* Naranja suave */
.tp-feature__item.before-color-5::before { background-color: #FFADAD; } /* Rojo coral */
.tp-feature__item.before-color-6::before { background-color: #E2CCFF; } /* Púrpura claro */
.tp-feature__item.before-color-7::before { background-color: #FFFFB5; } /* Amarillo pálido */
.tp-feature__item.before-color-8::before { background-color: #C7E0B3; } /* Verde grisáceo */


/* --- Media Queries para la adaptabilidad (responsive design) --- */

/* Para tablets y pantallas medianas (hasta 991px de ancho) */
@media (max-width: 991px) {
    .tp-feature__section .col-lg-3,
    .tp-feature__section .col-md-4 {
        flex: 0 0 50%; /* Hace que cada columna ocupe el 50% del ancho, mostrando 2 columnas por fila */
        max-width: 50%; /* Asegura que no exceda el 50% */
    }
}

/* Para móviles y pantallas pequeñas (hasta 767px de ancho) */
@media (max-width: 767px) {
    .tp-feature__section .col-lg-3,
    .tp-feature__section .col-md-4 {
        flex: 0 0 100%; /* Hace que cada columna ocupe el 100% del ancho, mostrando 1 columna por fila */
        max-width: 100%; /* Asegura que no exceda el 100% */
    }
    .tp-section__title {
        font-size: 2em; /* Reduce el tamaño del título principal de la sección para pantallas pequeñas */
    }
}

.link-amarillo {
  /* Color del texto */
  color: #FFD700; /* Un amarillo dorado */
  text-decoration: none; /* Quita el subrayado predeterminado del enlace */
  font-weight: bold; /* Hace el texto más grueso */
  transition: color 0.3s ease-in-out; /* Suaviza la transición de color al pasar el ratón */
  display: inline-flex; /* Permite alinear el texto y el ícono */
  align-items: center; /* Centra verticalmente el texto y el ícono */
}

.link-amarillo:hover {
  color: #FFFF00; /* Un amarillo más brillante al pasar el ratón */
}

.link-amarillo i {
  margin-left: 5px; /* Espacio entre el texto y el ícono */
  transition: transform 0.3s ease-in-out; /* Suaviza la transición del ícono */
}

.link-amarillo:hover i {
  transform: translateX(3px); /* Mueve el ícono ligeramente a la derecha al pasar el ratón */
}