/* variables.css */
:root {
    --color-primary: #0074d9;
    --color-secondary: #00509e;
    --color-dark: #003366;
    --color-background: #f0f8ff;
    --color-text: #333333;
    --color-white: #ffffff;
    --color-border: #cccccc;
    --color-hover: rgba(0, 0, 0, 0.1);
    --font-family: Arial, sans-serif;
    --transition-speed: 0.3s;
    --max-width: 1200px;
}

/* Reset y Estilos Generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--color-text);
    line-height: 1.6;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed);
}

a:hover, a:focus {
    color: var(--color-secondary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Barra de Navegación */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    z-index: 1000;
}

.header__logo img {
    height: 50px;
}

.header__logo-mobile {
    display: none;
}

.header__logo-desktop {
    display: block;
}

.header__menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
}

.header__menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--color-white);
    margin-bottom: 4px;
    border-radius: 3px;
    transition: all var(--transition-speed) ease;
}

.header__menu-toggle span:last-child {
    margin-bottom: 0;
}

.header__menu-toggle--active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.header__menu-toggle--active span:nth-child(2) {
    opacity: 0;
}

.header__menu-toggle--active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.header__nav {
    flex: 1;
    margin-left: 20px;
}

.header__nav-list {
    list-style: none;
    display: flex;
    align-items: center;
}

.header__nav-item {
    position: relative;
}

.header__nav-link {
    color: var(--color-white);
    padding: 14px 20px;
    display: block;
    transition: background-color var(--transition-speed);
}

.header__nav-link:hover,
.header__nav-link:focus,
.header__nav-item:hover .header__nav-link {
    background-color: var(--color-secondary);
}

.header__dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-secondary);
    min-width: 160px;
    z-index: 1;
}

.header__dropdown-content a {
    color: var(--color-white);
    padding: 12px 16px;
    display: block;
    transition: background-color var(--transition-speed);
}

.header__dropdown-content a:hover,
.header__dropdown-content a:focus {
    background-color: var(--color-primary);
}

.header__nav-item:hover .header__dropdown-content {
    display: block;
}

/* Menú Responsivo */
@media (max-width: 768px) {
    /* Cambio de logo */
    .header__logo-desktop {
        display: none;
    }

    .header__logo-mobile {
        display: block;
    }

    .header__menu-toggle {
        display: flex;
        z-index: 1001; /* Asegura que el botón esté por encima del menú */
    }

    .header__nav {
        position: fixed; /* Menú fijo para cubrir la pantalla */
        top: 60px; /* Ajusta si la altura del header cambia */
        left: 0;
        width: 100%;
        height: calc(100% - 60px); /* Ajusta según la altura del header */
        background-color: var(--color-dark);
        flex-direction: column;
        align-items: flex-start;
        max-height: 0;
        overflow-y: auto;
        transition: max-height var(--transition-speed) ease;
        z-index: 1000; /* Menú debajo del botón */
    }

    .header__nav--active {
        max-height: 100vh; /* Expande el menú a toda la altura de la pantalla */
    }

    .header__nav-list {
        flex-direction: column;
        width: 100%;
    }

    .header__nav-item {
        width: 100%;
    }

    .header__nav-link {
        width: 100%;
        padding: 15px 20px;
        border-bottom: 1px solid var(--color-border);
    }

    .header__dropdown-content {
        position: static;
        width: 100%;
        background-color: var(--color-secondary);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-speed) ease;
    }

    .header__nav-item--dropdown.active .header__dropdown-content {
        max-height: 500px; /* Ajusta según la cantidad de contenido */
    }

    .header__dropdown-link {
        padding-left: 40px; /* Indenta los submenús */
    }

    /* Mostrar submenús en dispositivos móviles */
    .header__nav-item--dropdown .header__nav-link::after {
        content: '▼';
        float: right;
        transition: transform var(--transition-speed);
    }

    .header__nav-item--dropdown.active .header__nav-link::after {
        transform: rotate(180deg);
    }

    .header__nav-item--dropdown .header__dropdown-content {
        display: block; /* Disponible para control por max-height */
    }
}

/* Iconos de Redes Sociales */
.header__social-icons {
    display: flex;
    align-items: center;
}

.header__social-link {
    margin-left: 15px;
}

.header__social-icon {
    width: 34px;
    height: 34px;
    transition: opacity var(--transition-speed);
}

.header__social-icon:hover,
.header__social-icon:focus {
    opacity: 0.7;
}

/* Banner Principal */
.banner {
    background-image: url('images/banner.png');
    background-size: cover;
    background-position: center;
    height: 60vh;
    margin-top: 60px; /* Ajustado para la barra fija */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-image 0.5s ease-in-out;
}

.banner__content {
    color: var(--color-white);
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
}

.banner__title {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.banner__cta {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 12px 24px;
    border-radius: 4px;
    transition: background-color var(--transition-speed);
}

.banner__cta:hover,
.banner__cta:focus {
    background-color: var(--color-secondary);
}

/* Contenido Principal */
.main-content {
    max-width: var(--max-width);
    margin: 20px auto;
    padding: 20px;
}

/* Secciones Generales */
.section {
    padding: 60px 20px;
    background-color: var(--color-background);
}

.section--alternate {
    background-color: var(--color-white);
}

.section__title {
    font-size: 2rem;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 40px;
}

.section__content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.section__text {
    flex: 2;
    min-width: 250px;
}

.section__image {
    flex: 1;
    min-width: 250px;
}

.section__image img {
    border-radius: 8px;
    border: 2px solid var(--color-border);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.section__list {
    list-style-type: disc;
    margin-left: 20px;
}

.section__list--nested {
    list-style-type: circle;
    margin-left: 20px;
}

/* Iconos */
.icons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icon__image {
    width: 60px;
    height: 60px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.icon__text {
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: bold;
}

/* Footer */
.footer {
    background-color: var(--color-dark);
    color: var(--color-white);
    text-align: center;
    padding: 20px;
}

.footer__links a {
    margin: 0 10px;
    color: var(--color-white);
    transition: color var(--transition-speed);
}

.footer__links a:hover,
.footer__links a:focus {
    color: var(--color-primary);
}

/* Galería de Imágenes */
.gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 40px;
}

.gallery__image {
    width: calc(33.333% - 10px);
    max-width: 200px;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-speed), opacity var(--transition-speed);
}

.gallery__image:hover,
.gallery__image:focus {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Botones de Llamado a la Acción */
.button {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 12px 24px;
    border-radius: 4px;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.button:hover,
.button:focus {
    background-color: var(--color-secondary);
    transform: scale(1.05);
}

/* Formularios de Contacto */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form__input,
.contact-form__textarea {
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
}

.contact-form__submit {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.contact-form__submit:hover,
.contact-form__submit:focus {
    background-color: var(--color-secondary);
}

/* Media Queries Adicionales */
@media (max-width: 992px) {
    .gallery__image {
        width: calc(50% - 10px);
        max-width: 300px;
    }
}

@media (max-width: 600px) {
    .gallery__image {
        width: 100%;
        max-width: 100%;
    }

    .section__content {
        flex-direction: column;
    }

    .header__social-icons {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* Estilos para la sección "¿Qué es?" */

.que-es-container {
    background-color: #f0f8ff; 
    background-size: cover;
    background-position: center;
    padding: 60px 20px;
}

.titulo-principal {
    text-align: center;
    font-size: 36px;
    color: #ff0000; /* Cambiado a rojo para destacar */
    text-transform: uppercase; /* Mayúsculas */
    margin-bottom: 40px;
}

/* Primer apartado: Introducción */
.apartado.introductorio p {
    background-color: #0074d9;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    font-size: 20px;
}

/* Segundo apartado: Trastornos del desarrollo */
.apartado.trastornos-desarrollo,
.apartado.fallas-logros {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

.contenido-izquierda,
.contenido-derecha {
    flex: 2;
    min-width: 250px;
    padding: 20px;
}

.imagen-derecha,
.iconos-izquierda {
    flex: 1;
    min-width: 200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contenido-izquierda h2,
.contenido-derecha h2 {
    font-size: 28px;
    color: #0074d9; /* Cambiado a rojo para destacar */
    margin-bottom: 20px;
}

.contenido-izquierda p,
.contenido-derecha p,
.contenido-izquierda ul,
.contenido-derecha ul {
    font-size: 18px;
    color: #000000;
}

.contenido-izquierda ul,
.contenido-derecha ul {
    list-style-type: disc;
    margin-left: 20px;
}

.contenido-derecha ul ul {
    list-style-type: circle;
    margin-left: 20px;
}

/* Imagen del doctor */
.imagen-derecha img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid #786123; /* Borde colorido */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
}

/* Iconos */
.icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.icono img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    border: 2px solid #786123; /* Borde colorido */
    border-radius: 50%; /* Bordes circulares */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}

.icono p {
    font-size: 18px;
    color: #0074d9; /* Cambiado a rojo para destacar */
    text-align: center;
    font-weight: bold;
}

/* Subsección PTI y Programas Individualizados */
.subseccion-pti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px;
}

.subseccion-pti h3 {
    font-size: 24px;
    color: #786123; /* Cambiado a rojo para destacar */
    margin-bottom: 15px;
    text-transform: uppercase;
}

.subseccion-pti p {
    font-size: 16px;
    color: #333333;
    line-height: 1.6;
}

.imagen-subseccion img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid #786123; /* Borde colorido */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
}

/* Galería de Imágenes */
.galeria-imagenes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* Espacio entre imágenes */
}

.galeria-imagenes img {
    width: calc(33.333% - 10px); /* Tres imágenes por fila */
    max-width: 400px;
    border: 2px solid #786123; /* Borde colorido */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Estilos para la sección "Deteccion temprana" */

.tras-diagnostico-container {
    padding: 60px 20px;
    background-color: #f0f8ff;
}

.seccion-superior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px;
}

.seccion-superior .columna-izquierda {
    flex: 1;
    min-width: 300px;
}

.seccion-superior .columna-izquierda img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.seccion-superior .columna-derecha {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.seccion-superior .columna-derecha h1 {
    font-size: 36px;
    color: #0074d9;
}

.contenido-principal {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

.contenido-principal .columna-izquierda,
.contenido-principal .columna-derecha {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.contenido-principal .columna-izquierda p,
.contenido-principal .columna-derecha p,
.contenido-principal .columna-izquierda ul,
.contenido-principal .columna-derecha ul {
    font-size: 18px;
    color: #000000;
    line-height: 1.6;
}

.contenido-principal .columna-izquierda ul,
.contenido-principal .columna-derecha ul {
    list-style-type: disc;
    margin-left: 20px;
}

.contenido-principal .columna-derecha h2 {
    font-size: 28px;
    color: #0074d9;
    margin-bottom: 20px;
}

.contenido-principal .columna-derecha ul ul {
    list-style-type: circle;
    margin-left: 20px;
}

.separador {
    border: 0;
    height: 1px;
    background: #ccc;
    margin-top: 40px;
}


/* Estilos para la sección "Asociación Civil" */
.asociacion-civil-container {
    padding: 60px 20px;
    background-color: #f0f8ff; /* Fondo suave */
}

.titulo-encabezado {
    text-align: left;
    font-size: 36px;
    color: #0074d9; /* Color rojo destacado */
    margin-bottom: 20px;
}

.parrafo-intro {
    text-align: justify;
    font-size: 18px;
    color: #333333;
    margin-bottom: 40px;
}

.seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 40px;
    border-top: 1px solid #cccccc; /* Separador fino entre secciones */
    padding-top: 20px;
}

.contenido-maestras {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 40px;
    border-top: 1px solid #cccccc; /* Separador fino entre secciones */
    padding-top: 20px;
}

.contenido-servicios .texto-principal,
.contenido-desconocimiento .texto-principal {
    flex: 2;
    min-width: 300px;
    text-align: left;
}

.imagen-derecha {
    flex: 1;
    min-width: 250px;
    padding-left: 20px;
}

.imagen-derecha img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* Bordes suaves */
    border: 2px solid #cccccc; /* Marco suave */
}

.subtitulo-desconocimiento {
    font-size: 24px;
    color: #0074d9; /* Tono azul para resaltar */
    font-weight: bold;
    margin-bottom: 10px;
}

.contenido-desconocimiento .texto-principal p {
    margin-bottom: 15px;
}

.parrafo-cierre {
    text-align: left;
    font-size: 18px;
    color: #333333;
    margin-top: 40px;
}

.parrafo-cierre strong {
    color: #0074d9; /* Opcional: resaltar en rojo */
}

/* Estilos para la sección "Misión y Valores" */

.mision-valores-container {
    padding: 60px 20px;
    background-color: #f0f8ff;
}

.titulo-principal {
    text-align: center;
    font-size: 32px;
    color: #0074d9;
    margin-bottom: 40px;
}

.seccion {
    margin-bottom: 60px;
}

.seccion h2 {
    font-size: 28px;
    color: #0074d9;
    margin-bottom: 10px;
}

.seccion hr {
    border: 0;
    height: 1px;
    background: #ccc;
    margin-bottom: 20px;
}

.seccion .contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.seccion .contenido p {
    flex: 2;
    min-width: 200px;
    font-size: 16px;
    color: #000;
    line-height: 1.6;
    margin-right: 20px;
}

.seccion .contenido img {
    flex: 1;
    max-width: 600px;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.objetivos .contenido {
    display: block;
}

.objetivos .contenido ul {
    list-style-type: disc;
    margin-left: 40px;
}

.objetivos .contenido ul li {
    margin-bottom: 15px;
    font-size: 16px;
    color: #000;
    line-height: 1.6;
}

/* Estilos para la página "¿Por qué un centro de atención a niños autistas?" */
.porque-container {
    padding: 60px 20px;
    background: linear-gradient(to bottom right, #f0f8ff, #e6f7ff); /* Degradado suave */
}

.titulo-porque {
    text-align: center;
    font-size: 36px;
    color: #0074d9; /* Color rojo destacado */
    margin-bottom: 40px;
}

.contenido-porque {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 40px;
    /* Separador fino entre secciones */
    border-top: 1px solid #cccccc;
    padding-top: 20px;
}

.texto-porque {
    flex: 2;
    min-width: 300px;
    text-align: justify;
    font-size: 18px;
    line-height: 1.6;
    color: #333333;
    margin-right: 20px;
}

.imagen-porque {
    flex: 1;
    min-width: 250px;
    padding-left: 20px;
}

.imagen-porque img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* Bordes suaves */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border: 2px solid #cccccc; /* Marco suave */
}

.texto-adicional-porque {
    text-align: left;
    font-size: 18px;
    line-height: 1.6;
    color: #333333;
    margin-top: 20px;
}

/* Separadores Finos Entre Párrafos */
.porque-container p {
    margin-bottom: 20px;
}

/* Estilos para la página "¿Qué ofrecemos?" */
.que-ofrecemos-container {
    padding: 60px 20px;
    background-color: #f0f8ff; /* Fondo suave */
}

.titulo-que-ofrecemos {
    text-align: left; /* Puedes cambiar a center si lo prefieres */
    font-size: 36px;
    color: #0074d9; /* Color rojo destacado */
    text-transform: uppercase; /* Mayúsculas */
    margin-bottom: 40px;
}

.contenido-servicios {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 40px;
    border-top: 1px solid #cccccc; /* Separador fino entre secciones */
    padding-top: 20px;
}

.texto-servicios {
    flex: 2;
    min-width: 300px;
    text-align: left;
    font-size: 18px;
    line-height: 1.6;
    color: #333333;
    margin-right: 20px;
}

.texto-servicios ul.lista-servicios {
    list-style-type: disc;
    margin-left: 20px;
}

.imagen-servicios {
    flex: 1;
    min-width: 250px;
    padding-left: 20px;
}

.imagen-servicios img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* Bordes suaves */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border: 2px solid #cccccc; /* Marco suave */
    transition: transform 0.3s, opacity 0.3s; /* Transición para hover */
}

.imagen-servicios img:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.contenido-aptitudes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 40px;
    border-top: 1px solid #cccccc; /* Separador fino entre secciones */
    padding-top: 20px;
}

.texto-aptitudes {
    flex: 2;
    min-width: 300px;
    text-align: left;
    font-size: 18px;
    line-height: 1.6;
    color: #333333;
    margin-right: 20px;
}

.columna-imagenes {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre imágenes */
    padding-left: 20px;
}

.row-imagenes {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: row;
    gap: 15px; /* Espacio entre imágenes */
    padding-left: 20px;
}

.imagen-miniatura img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Bordes suaves */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border: 1px solid #cccccc; /* Marco suave */
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s;
}

.imagen-miniatura img:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Tooltip para descripciones emergentes */
.imagen-miniatura img[title]:hover::after {
    content: attr(title);
    position: absolute;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 10;
}

/* Botón de Llamado a la Acción */
.cta-que-ofrecemos {
    text-align: center;
    margin-top: 40px;
}

.boton-cta {
    background-color: #0074d9;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    font-size: 18px;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.3s;
}

.boton-cta:hover {
    background-color: #00509e;
    transform: scale(1.05);
}


/* Estilos para la sección "¿Cómo lo hacemos?" */
.como-lo-hacemos-container {
    padding: 60px 20px;
    background-color: #f0f8ff; /* Fondo suave */
}

.titulo-como-lo-hacemos {
    text-align: center;
    font-size: 32px;
    color: #0074d9; /* Color rojo destacado */
    text-transform: uppercase; /* Mayúsculas */
    margin-bottom: 40px;
}

.contenido-bloque,
.subseccion-pti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px;
}

.texto-bloque,
.texto-subseccion {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.imagen-bloque,
.imagen-subseccion {
    flex: 1;
    min-width: 250px;
    padding: 20px;
}

.imagen-bloque img,
.imagen-subseccion img {
    width: 100%;
    height: auto;
    border: 2px solid #cccccc; /* Borde colorido */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
}

/* Subsección PTI y Programas Individualizados */
.subseccion-pti h3 {
    font-size: 24px;
    color: #0074d9; /* Tono azul */
    margin-bottom: 15px;
}

.subseccion-pti p {
    font-size: 16px;
    color: #333333;
    line-height: 1.6;
}

/* Galería de Imágenes */
.galeria-imagenes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* Espacio entre imágenes */
}

.galeria-imagenes img {
    width: calc(33.333% - 10px); /* Tres imágenes por fila */
    max-width: 200px;
    border: 2px solid #ff0000; /* Borde colorido */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}


/* Estilos para la página de donaciones */
.donaciones-container {
    padding: 60px 20px;
    background-color: #f8f9fa;
}

.titulo-donaciones {
    text-align: center;
    font-size: 32px;
    color: #0074d9;
    margin-bottom: 20px;
}

.descripcion-donaciones {
    text-align: center;
    font-size: 18px;
    color: #333333;
    margin-bottom: 40px;
    line-height: 1.8;
}

.opciones-donacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 40px;
}

.opcion {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    width: 30%;
    min-width: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;
}

.opcion h3 {
    font-size: 24px;
    color: #0074d9;
    margin-bottom: 15px;
}

.opcion p {
    font-size: 16px;
    color: #555555;
    margin-bottom: 20px;
}

.boton-donar, .boton-contacto, .boton-mas-info {
    background-color: #0074d9;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.boton-donar:hover, .boton-contacto:hover, .boton-mas-info:hover {
    background-color: #0056a3;
}

.galeria-imagenes {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.galeria-imagenes img {
    width: calc(33.333% - 10px);
    max-width: 400px;
    border: 2px solid #0074d9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos para la página de contacto */
/* Estilos para la página de contacto */
.contacto-container {
    padding: 60px 20px;
    background-color: #f8f9fa;
}

.titulo-contacto {
    text-align: center;
    font-size: 32px;
    color: #0074d9;
    margin-bottom: 20px;
}

.descripcion-contacto {
    text-align: center;
    font-size: 18px;
    color: #333333;
    margin-bottom: 40px;
    line-height: 1.8;
}

/* Estilo para el bloque de correo electrónico */
.correo-contacto {
    text-align: center;
    margin-top: 30px;
    font-size: 18px;
    color: #333;
}

.correo-contacto strong {
    color: #0074d9; /* Cambia el color del correo electrónico */
    font-weight: bold;
}

/* Estilo para el contacto por WhatsApp */
.whatsapp-contacto {
    text-align: center;
    margin-top: 40px;
}

.boton-whatsapp {
    display: inline-block;
    background-color: #25d366;
    color: white;
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.boton-whatsapp:hover {
    background-color: #1da851;
}

/* Estilo para la dirección de contacto y enlace de Google Maps */
.direccion-contacto {
    text-align: center;
    margin-top: 40px;
}

.direccion-contacto p {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.direccion-contacto a {
    display: inline-block;
    background-color: #4CAF50; /* Color de fondo */
    color: white; /* Color del texto */
    padding: 10px 20px; /* Relleno */
    text-decoration: none; /* Quitar subrayado */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 18px;
    margin-top: 10px;
}

.direccion-contacto a:hover {
    background-color: #45a049; /* Color de fondo cuando se pasa el ratón */
}


/* Sección de Convenios */
.convenios-container {
    padding: 60px 20px;
    background-color: var(--color-background);
}

.convenios-container .section__title {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
}

/* Beneficios de Participar */
.beneficios-convenios {
    margin-bottom: 40px;
}

.beneficios-convenios__titulo {
    font-size: 1.8rem;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 20px;
}

.beneficios-convenios__lista {
    list-style-type: disc;
    max-width: 600px;
    margin: 0 auto;
    padding-left: 20px;
    font-size: 1rem;
    color: var(--color-text);
}

.beneficios-convenios__lista li {
    margin-bottom: 10px;
}

/* Galería de Convenios */
.galeria-convenios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-items: center;
}

/* Cada Convenio */
.convenio {
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.convenio:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Logotipo del Convenio */
.convenio__logo {
    width: 100px;
    height: auto;
    margin-bottom: 15px;
}

/* Nombre de la Universidad */
.convenio__nombre {
    font-size: 1.2rem;
    color: var(--color-dark);
    margin-bottom: 10px;
}

/* Descripción del Convenio */
.convenio__descripcion {
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 15px;
}

/* Botón de Más Información */
.convenio .button {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
    display: inline-block;
}

.convenio .button:hover,
.convenio .button:focus {
    background-color: var(--color-secondary);
    transform: scale(1.05);
}

/* Testimonios */
.testimonios {
    margin-top: 50px;
    text-align: center;
}

.testimonios__titulo {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 30px;
}

.testimonio {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.testimonio p {
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.6;
}

/* Contacto Convenios */
.contacto-convenios {
    text-align: center;
    margin-top: 40px;
}

.contacto-convenios__titulo {
    font-size: 1.6rem;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.contacto-convenios .button {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
    display: inline-block;
}

.contacto-convenios .button:hover,
.contacto-convenios .button:focus {
    background-color: var(--color-secondary);
    transform: scale(1.05);
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .convenios-container {
        padding: 40px 10px;
    }

    .convenios-container .section__title {
        font-size: 1.8rem;
    }

    .beneficios-convenios__titulo {
        font-size: 1.6rem;
    }

    .galeria-convenios {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .convenio {
        padding: 15px;
    }

    .convenio__logo {
        width: 80px;
    }

    .convenio__nombre {
        font-size: 1.1rem;
    }

    .convenio__descripcion {
        font-size: 0.95rem;
    }

    .testimonios__titulo {
        font-size: 1.6rem;
    }

    .testimonio p {
        font-size: 0.95rem;
    }

    .contacto-convenios__titulo {
        font-size: 1.4rem;
    }
}


@media (max-width: 768px) {
    /* Ajustes para row-imagenes */
    .row-imagenes {
        flex-direction: column;
        padding-left: 0;
    }

    .imagen-miniatura {
        width: 100%;
    }

    .imagen-miniatura img {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .imagen-miniatura {
        flex-basis: 100%;
    }
}

@media (max-width: 768px) {
    /* Ajustes para galeria-imagenes */
    .galeria-imagenes img {
        width: 100%;
        max-width: none;
    }
}