/*
* ========================================
* Hoja de Estilos Principal - Learning Together
* Archivo: Sobre-nosotros-style.css
* Descripción: Define la apariencia y el diseño de las páginas HTML de la aplicación.
* ========================================
*/

/*
* --- Importar fuentes de Google Fonts ---
* La regla @import permite enlazar hojas de estilo externas. Aquí traemos la fuente 'Poppins'
* de Google Fonts para asegurar una tipografía moderna y consistente en todo el sitio.
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/*
* --- Variables CSS (Custom Properties) ---
* Las variables CSS (declaradas dentro de :root para ser globales) nos permiten definir
* valores reutilizables (como colores, sombras, etc.). Esto facilita la gestión de la paleta
* de colores y otros estilos, haciendo el código más limpio y fácil de modificar.
* Si decides cambiar un color, solo lo haces una vez aquí.
*/
:root {
    --primary-color: #0e2d62; /* Verde vibrante: Usado para acentos, botones, enlaces activos. */
    --secondary-color: #0e2d62; /* Púrpura oscuro: Podría usarse para elementos complementarios o encabezados secundarios. */
    --text-dark: #333; /* Color oscuro para el texto principal de los párrafos. */
    --text-light: #000000; /* Color ligeramente más claro para texto secundario. */
    --bg-light: #f8f8f8; /* Fondo general de secciones, un gris muy claro. */
    --bg-dark: #eee; /* Fondo de secciones alternas o contenedores secundarios, un gris más pronunciado. */
    --card-bg: #98c5ec; /* Fondo blanco para tarjetas y módulos de contenido. */
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra estándar para dar profundidad a los elementos. */
}

/*
* ========================================
* --- Estilos Generales y Resets Básicos ---
* Establece propiedades por defecto para elementos comunes para asegurar consistencia
* entre navegadores y preparar el lienzo para el diseño.
* ========================================
*/
body {
    font-family: 'Poppins', sans-serif; /* Aplica la fuente importada a todo el texto del cuerpo. */
    margin: 0; /* Elimina el margen por defecto que los navegadores suelen añadir al body. */
    padding: 0; /* Elimina el padding por defecto. */
    background-color: var(--bg-light); /* Aplica el color de fondo general de la página. */
    color: var(--text-dark); /* Define el color de texto por defecto para todo el body. */
    line-height: 1.7; /* Espaciado entre líneas para mejorar la legibilidad del texto. */
    overflow-x: hidden; /* Evita que aparezca una barra de desplazamiento horizontal no deseada. */
    /*
    * ¡IMPORTANTE! Ajuste para el header fijo/transparente:
    * Cuando un elemento tiene 'position: fixed' (como nuestro header), se "saca" del flujo
    * normal del documento y ya no ocupa espacio. Esto haría que el contenido debajo del
    * header se desplace hacia arriba y quede oculto bajo él.
    * 'padding-top' en el body empuja todo el contenido hacia abajo, creando el espacio
    * necesario para que el header fijo no lo tape. Ajusta el valor si tu header cambia de altura.
    */
    padding-top: 80px;
}

.container {
    max-width: 1200px; /* Limita el ancho máximo del contenido para mejorar la legibilidad. */
    margin: 0 auto; /* Centra el contenedor horizontalmente en la página. */
    padding: 0 20px; /* Añade un padding horizontal para que el contenido no toque los bordes de la ventana. */
}

/*
* ========================================
* --- HEADER PRINCIPAL (TRANSPARENTE CON BLUR Y FIJO) ---
* Estilos para la barra de navegación superior que permanece visible al hacer scroll.
* ========================================
*/
.main-header {
    background-color: rgba(0, 0, 0, 0.2); /* Fondo casi transparente (negro con 20% de opacidad). */
    backdrop-filter: blur(8px); /* Efecto de desenfoque detrás del header, ideal para fondos transparentes. */
    -webkit-backdrop-filter: blur(8px); /* Prefijo para asegurar compatibilidad con navegadores basados en WebKit (ej. Safari). */
    padding: 15px 0; /* Padding vertical para dar espacio al contenido del header. */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad al header. */
    position: fixed; /* Hace que el header sea "pegajoso" y permanezca en la parte superior al hacer scroll. */
    width: 100%; /* Asegura que el header ocupe todo el ancho de la ventana. */
    top: 0; /* Fija el header en la parte superior. */
    left: 0; /* Fija el header en el lado izquierdo. */
    z-index: 1000; /* Asegura que el header esté por encima de casi todos los demás elementos de la página. */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo si cambia (ej. al hacer scroll). */
}

/* Efecto al hacer scroll: El header puede cambiar de color ligeramente para mejor contraste */
/* Esta clase se añade/quita con JavaScript cuando el usuario hace scroll */
.main-header.scrolled {
    background-color: rgba(0, 0, 0, 0.7); /* Se vuelve menos transparente al hacer scroll. */
}

.header-content {
    display: flex; /* Utiliza Flexbox para alinear el logo y la navegación horizontalmente. */
    justify-content: space-between; /* Distribuye el espacio para que el logo esté a la izquierda y la navegación a la derecha. */
    align-items: center; /* Centra verticalmente los elementos (logo y navegación) dentro del header. */
}

.header-logo {
    height: 50px; /* Establece una altura fija para el logo. */
    width: auto; /* Permite que el ancho se ajuste automáticamente para mantener la proporción de la imagen. */
    transition: transform 0.3s ease; /* Suaviza el efecto de transformación al pasar el ratón. */
}

.header-logo:hover {
    transform: scale(1.05); /* Agranda ligeramente el logo al pasar el ratón por encima. */
}

.main-nav ul {
    list-style: none; /* Elimina los puntos o viñetas por defecto de las listas. */
    margin: 0; /* Elimina los márgenes por defecto de la lista. */
    padding: 0; /* Elimina el padding por defecto de la lista. */
    display: flex; /* Utiliza Flexbox para alinear los ítems del menú horizontalmente. */
    justify-content: center; /* Centra los ítems del menú si hay espacio extra. */
    gap: 30px; /* Crea un espacio de 30px entre cada ítem del menú (sin necesidad de márgenes individuales). */
}

.main-nav ul li a {
    color: #fff; /* Color de texto blanco para los enlaces del menú. */
    text-decoration: none; /* Elimina el subrayado por defecto de los enlaces. */
    font-weight: 600; /* Hace el texto de los enlaces más negrita. */
    font-size: 1.1em; /* Tamaño de fuente relativo al tamaño base del cuerpo. */
    padding: 10px 15px; /* Padding interno para que los enlaces sean más fáciles de clickear. */
    transition: background-color 0.3s ease, color 0.3s ease; /* Suaviza las transiciones de color y fondo al interactuar. */
    border-radius: 5px; /* Bordes ligeramente redondeados para los enlaces. */
}

.main-nav ul li a:hover,
.main-nav ul li a.active { /* Estilos al pasar el ratón o cuando el enlace está activo (página actual). */
    background-color: var(--primary-color); /* Cambia el fondo al color primario. */
    color: #fff; /* Mantiene el color de texto blanco. */
}

/*
* ========================================
* --- SECCIONES GENERALES DE CONTENIDO ---
* Estilos aplicados a la mayoría de las secciones de la página.
* ========================================
*/
section {
    padding: 80px 0; /* Padding vertical para crear espacio entre secciones. */
    margin-bottom: 20px; /* Margen en la parte inferior para separar secciones. */
}

h2 {
    font-size: 2.8em; /* Tamaño de fuente grande para los encabezados principales de sección. */
    color: var(--text-dark); /* Color oscuro para el texto. */
    text-align: center; /* Centra el texto del encabezado. */
    margin-bottom: 40px; /* Margen inferior para separar el encabezado del contenido. */
    font-weight: 600; /* Peso de la fuente negrita. */
    position: center; /* Necesario para posicionar el pseudoelemento '::after' relativo a este h2. */
    padding-bottom: 10px; /* Espacio para la línea decorativa debajo. */
}

h2::after {
    content: ''; /* Propiedad requerida para que el pseudoelemento se muestre. */
    position: center; /* Posiciona el pseudoelemento de forma absoluta dentro del h2. */
    left: 50%; /* Lo posiciona a la mitad del ancho del h2. */
    bottom: 0; /* Lo alinea a la parte inferior del h2. */
    transform: translateX(-50%); /* Lo mueve hacia la izquierda la mitad de su propio ancho, centrándolo perfectamente. */
    width: 80px; /* Ancho de la línea decorativa. */
    height: 4px; /* Altura de la línea decorativa. */
    background-color: var(--primary-color); /* Color de la línea. */
    border-radius: 2px; /* Ligeramente redondeado para un aspecto suave. */
}

p {
    font-size: 1.1em; /* Tamaño de fuente para párrafos. */
    color: var(--text-light); /* Color ligeramente más claro para el texto de los párrafos. */
}

.highlight {
    font-weight: 600; /* Hace que el texto resaltado sea más negrita. */
    color: var(--primary-color); /* Aplica el color primario para el resaltado. */
}

/*
* ========================================
* --- Sección de Título Específico de la Página (Debajo del Header Global) ---
* Esta es la primera sección de contenido que se ve y sirve como encabezado visual
* para la página actual, visible a través del header transparente.
* ========================================
*/
.page-title-section {
    background-color: var(--primary-color); /* Color de fondo principal para esta sección. */
    color: #fff; /* Color de texto blanco. */
    padding: 80px 0; /* Padding vertical para un buen espaciado. */
    text-align: center; /* Centra el texto. */
    box-shadow: var(--shadow); /* Sombra para dar un efecto elevado. */
    position: relative; /* Para posicionar los pseudoelementos decorativos. */
    overflow: hidden; /* Oculta cualquier parte de los pseudoelementos que se extienda fuera de la sección. */
    margin-bottom: 40px; /* Espacio debajo de esta sección. */
}

.page-title-section h1 {
    margin: 0; /* Elimina márgenes por defecto del h1. */
    font-size: 3.5em; /* Tamaño de fuente grande para el título de la página. */
    font-weight: 700; /* Muy negrita. */
    letter-spacing: 1px; /* Espaciado entre letras para un título más impactante. */
}

.page-title-section p {
    font-size: 1.2em; /* Tamaño de fuente para el subtítulo. */
    font-weight: 300; /* Más ligero. */
    margin-top: 10px; /* Espacio entre el título y el subtítulo. */
}

/* Efectos de fondo para el título de la página (formas geométricas semitransparentes) */
.page-title-section::before,
.page-title-section::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.1); /* Blanco con baja opacidad. */
    border-radius: 50%; /* Hace que las formas sean circulares. */
}

.page-title-section::before {
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    transform: rotate(45deg); /* Gira la forma. */
}

.page-title-section::after {
    bottom: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.15); /* Ligeramente más opaco. */
    transform: rotate(-30deg); /* Gira la forma en dirección opuesta. */
}

/*
* ========================================
* --- Sección de Introducción de la Aplicación ---
* Contiene la descripción general de la app y una imagen principal.
* ========================================
*/
.app-intro-section {
    background-color: var(--card-bg); /* Fondo blanco para esta sección. */
    box-shadow: var(--shadow); /* Sombra para destacarla. */
    border-radius: 12px; /* Esquinas redondeadas. */
    padding: 60px 0; /* Espaciado interno. */
    margin-top: 40px; /* Margen superior para separarla del título de la página. */
}

.app-info-grid {
    display: flex; /* Usa Flexbox para organizar el texto y la imagen. */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas. */
    gap: 40px; /* Espacio entre el texto y la imagen. */
    align-items: center; /* Centra verticalmente el texto y la imagen. */
}

.app-info-text {
    flex: 2; /* Asigna un factor de crecimiento mayor para que el texto ocupe más espacio. */
    min-width: 300px; /* Ancho mínimo antes de que el elemento se envuelva. */
}

.app-intro-image {
    flex: 1; /* Asigna un factor de crecimiento menor para que la imagen ocupe menos espacio. */
    min-width: 250px; /* Ancho mínimo para la imagen. */
    display: flex; /* Utiliza Flexbox para centrar la imagen dentro de su contenedor. */
    justify-content: center;
    align-items: center;
}

.app-intro-image img {
    max-width: 100%; /* Asegura que la imagen no se desborde de su contenedor. */
    height: auto; /* Mantiene la proporción de la imagen. */
    border-radius: 8px; /* Esquinas ligeramente redondeadas para la imagen. */
    box-shadow: var(--shadow); /* Sombra para la imagen. */
}

/*
* ========================================
* --- Sección de Características de la Aplicación ---
* Describe las tres secciones principales (Traductor, Lecciones, Quizzes).
* ========================================
*/
.app-features-section {
    background-color: var(--bg-dark); /* Color de fondo alternativo para contraste. */
    padding: 80px 0; /* Espaciado interno. */
    text-align: center; /* Centra el texto del encabezado de la sección. */
}

.features-intro {
    max-width: 800px; /* Limita el ancho del párrafo introductorio. */
    margin: 0 auto 50px auto; /* Centra el párrafo y añade margen inferior. */
    font-size: 1.15em;
    color: var(--text-light);
}

.feature-cards {
    display: grid; /* Utiliza CSS Grid para organizar las tarjetas de características. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* grid-template-columns: Define las columnas.
    * 'repeat(auto-fit, ...)' crea tantas columnas como quepan.
    * 'minmax(280px, 1fr)' asegura que cada columna tenga un mínimo de 280px
    * y crezca para ocupar el espacio disponible equitativamente (1fr). */
    gap: 30px; /* Espacio entre las tarjetas (tanto horizontal como vertical). */
    justify-content: center; /* Centra las tarjetas si no ocupan todo el ancho disponible. */
    padding-top: 20px; /* Padding superior para separar de la descripción. */
}

.feature-card {
    background-color: var(--card-bg); /* Fondo blanco para cada tarjeta de característica. */
    padding: 30px; /* Espaciado interno. */
    border-radius: 10px; /* Esquinas redondeadas. */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Sombra para dar profundidad. */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza las transiciones al pasar el ratón. */
}

.feature-card:hover {
    transform: translateY(-5px); /* Eleva la tarjeta ligeramente al pasar el ratón. */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); /* Aumenta la sombra para un efecto de "flotar". */
}

.feature-card h3 {
    font-size: 1.8em; /* Tamaño de fuente para el título de la característica. */
    color: var(--primary-color); /* Color primario para el título. */
    margin-bottom: 20px; /* Espacio debajo del título. */
    font-weight: 600;
}

.feature-card img {
    max-width: 150px; /* Tamaño máximo para los iconos de características. */
    height: auto; /* Mantiene la proporción. */
    margin-bottom: 25px; /* Espacio debajo del icono. */
    border-radius: 8px; /* Un poco de redondez si la imagen es cuadrada. */
}

.feature-card p {
    font-size: 1em; /* Tamaño de fuente para la descripción de la característica. */
    color: var(--text-light); /* Color de texto ligeramente más claro. */
    margin-bottom: 0; /* Elimina el margen inferior por defecto del último párrafo. */
}

/*
* ========================================
* --- Sección Misión y Visión (de Sobre Nosotros, reusable) ---
* ========================================
*/
.mission-vision {
    background-color: var(--bg-dark);
    padding: 60px 0;
}

.mission-vision .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.mv-card {
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mv-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.mv-card h3 {
    font-size: 2em;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.mv-card h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.mv-card.mission h3::after {
    background-color: var(--primary-color);
}

/*
* ========================================
* --- Sección Equipo (de Sobre Nosotros, reusable) ---
* ========================================
*/
.team-section {
    background-color: var(--card-bg);
    padding: 80px 0;
}

.team-intro-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 1.15em;
}

.department {
    background-color: var(--bg-dark);
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 50px;
    box-shadow: var(--shadow);
}

.department h3 {
    font-size: 2.2em;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
}

.department-description {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 30px auto;
    font-size: 1.05em;
    color: var(--text-light);
}

.member-count {
    font-size: 0.7em;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 15px;
    color: var(--text-dark);
    font-weight: normal;
}

.team-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    justify-content: center;
}

.member-card {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.member-card img {
    width: 140px;
    height: 140px;
    border-radius: 50%; /* Hace la imagen perfectamente circular. */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse, recortando si es necesario. */
    margin-bottom: 18px;
    border: 4px solid var(--primary-color); /* Borde de color primario alrededor de la imagen. */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* Borde blanco interno simulado con sombra. */
}

.member-card h4 {
    font-size: 1.4em;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: 600;
}

.member-card p {
    color: var(--text-light);
    font-size: 0.95em;
    margin-bottom: 0;
}

/*
* ========================================
* --- FOOTER GLOBAL ---
* ========================================
*/
.global-footer {
    background-color: var(--text-dark); /* Fondo oscuro para el footer */
    color: #fff; /* Texto blanco en el footer */
    text-align: center; /* Centra el texto */
    padding: 30px 0; /* Espaciado vertical */
    font-size: 0.9em; /* Tamaño de fuente ligeramente más pequeño */
}

/*
* ========================================
* --- Media Queries (Responsiveness) ---
* Estas reglas adaptan el diseño a diferentes tamaños de pantalla (móviles, tablets, etc.).
* Usamos un enfoque "mobile-first" o "desktop-first", aquí es más desktop-first,
* ajustando para pantallas más pequeñas.
* ========================================
*/
@media (max-width: 992px) { /* Estilos para pantallas de hasta 992px de ancho (ej. tablets en horizontal) */
    h2 {
        font-size: 2.2em; /* Reduce el tamaño de los encabezados principales. */
    }
    .page-title-section h1 {
        font-size: 2.8em; /* Reduce el título de la página. */
    }
    .intro-content h2 {
        font-size: 1.8em;
    }
    .mv-card h3 {
        font-size: 1.8em;
    }
    .department h3 {
        font-size: 1.8em;
    }
    .main-nav ul {
        gap: 15px; /* Reduce el espacio entre ítems en la navegación. */
    }
    .main-nav ul li a {
        font-size: 1em;
        padding: 8px 12px;
    }
}

@media (max-width: 768px) { /* Estilos para pantallas de hasta 768px de ancho (ej. tablets en vertical, algunos móviles grandes) */
    .header-content {
        flex-direction: column; /* Apila el logo y la navegación verticalmente. */
        text-align: center;
        gap: 15px; /* Espacio entre el logo y el menú apilado. */
    }
    .main-nav ul {
        flex-wrap: wrap; /* Permite que los ítems del menú se envuelvan a la siguiente línea si no caben. */
        justify-content: center;
        gap: 10px;
    }
    .main-nav ul li a {
        font-size: 0.95em;
        padding: 6px 10px;
    }

    .page-title-section {
        padding: 50px 0; /* Reduce el padding del título de la página. */
    }
    .page-title-section h1 {
        font-size: 2.5em;
    }
    section {
        padding: 50px 0; /* Reduce el padding general de las secciones. */
    }
    .about-intro .container,
    .app-info-grid { /* Ajustes para ambas secciones de introducción (nosotros y app) */
        flex-direction: column; /* Apila el texto y la imagen. */
        text-align: center;
    }
    .intro-content, .intro-image,
    .app-info-text, .app-intro-image {
        min-width: unset; /* Elimina el ancho mínimo para permitir mayor flexibilidad. */
        width: 100%; /* Ocupa todo el ancho disponible. */
    }
    .intro-content h2 {
        text-align: center; /* Centra el encabezado de la introducción. */
    }
    .intro-content h2::after {
        left: 50%;
        transform: translateX(-50%); /* Centra la línea decorativa también. */
    }
    .intro-content ul {
        padding-left: 20px; /* Ajusta el padding de las listas para que no queden pegadas al borde. */
        text-align: left; /* Mantiene el texto de la lista alineado a la izquierda. */
    }
    .mission-vision .container {
        grid-template-columns: 1fr; /* Una sola columna para las tarjetas de misión/visión. */
    }
    .department h3 {
        font-size: 1.6em;
    }
    .feature-cards {
        grid-template-columns: 1fr; /* Apila las tarjetas de características en móviles. */
    }
}

@media (max-width: 480px) { /* Estilos para pantallas pequeñas (ej. la mayoría de los móviles) */
    .header-logo {
        height: 40px; /* Logo un poco más pequeño en móviles. */
    }
    .main-nav ul {
        flex-direction: column; /* Apila los ítems del menú verticalmente. */
        align-items: center; /* Centra los ítems del menú. */
    }
    .page-title-section h1 {
        font-size: 2em; /* Reduce aún más el título de la página. */
    }
    h2 {
        font-size: 1.8em;
    }
    .intro-content h2 {
        font-size: 1.5em;
    }
    .mv-card h3 {
        font-size: 1.5em;
    }
    .department h3 {
        font-size: 1.4em;
    }
    .team-members {
        grid-template-columns: 1fr; /* Una sola columna para las tarjetas de miembros del equipo. */
    }
    .member-card img {
        width: 100px;
        height: 100px; /* Reduce el tamaño de las imágenes de los miembros. */
    }
}

/* --- Nuevos estilos para la sección de Contacto en el Footer (para index.html) --- */
.contact-section-footer {
    background-color: var(--bg-dark); /* Color de fondo para esta sección */
    padding: 80px 0; /* Espaciado interno */
    text-align: center; /* Centra el texto */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05); /* Sombra superior sutil */
    margin-top: 50px; /* Espacio por encima de la sección */
}

.contact-section-footer h2 {
    font-size: 2.5em;
    color: var(--primary-color); /* Color primario para el título */
    margin-bottom: 20px;
}

.contact-section-footer h2::after {
    background-color: var(--secondary-color); /* Línea decorativa debajo del título */
}

.contact-section-footer p {
    font-size: 1.1em;
    color: var(--text-light);
    margin-bottom: 15px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.contact-details {
    margin-top: 30px;
    margin-bottom: 40px;
}

.contact-details p {
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.contact-details p a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-details p a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Puedes añadir iconos simples si no usas librerías como Font Awesome */
.contact-details .icon-email::before {
    content: "✉️"; /* Unicode envelope icon */
    margin-right: 8px;
}

.contact-details .icon-phone::before {
    content: "📞"; /* Unicode phone icon */
    margin-right: 8px;
}

.social-media {
    margin-top: 30px;
}

.social-media h3 {
    font-size: 1.6em;
    color: var(--text-dark);
    margin-bottom: 25px;
    font-weight: 600;
}

.instagram-link {
    display: inline-flex; /* Permite alinear el icono y el texto */
    align-items: center; /* Centra verticalmente */
    text-decoration: none;
    color: #fff; /* Color del texto del enlace */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); /* Colores de Instagram */
    padding: 15px 30px;
    border-radius: 50px; /* Bordes muy redondeados para un aspecto de botón de red social */
    font-weight: 700;
    font-size: 1.2em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.instagram-link:hover {
    transform: translateY(-5px); /* Pequeño efecto de elevación al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.instagram-link img {
    width: 30px; /* Tamaño del icono de Instagram */
    height: 30px;
    margin-right: 12px; /* Espacio entre el icono y el texto */
    border-radius: 50%; /* Por si el icono no es redondo, lo hace redondo */
    background-color: #fff; /* Fondo blanco para el icono, si es necesario */
    padding: 3px; /* Pequeño padding alrededor del icono */
}

/* Media Queries para la nueva sección de contacto */
@media (max-width: 768px) {
    .contact-section-footer h2 {
        font-size: 2em;
    }
    .contact-details p {
        font-size: 1em;
    }
    .instagram-link {
        font-size: 1em;
        padding: 12px 25px;
    }
    .instagram-link img {
        width: 25px;
        height: 25px;
        margin-right: 10px;
    }
}