/* Estilos generales para dispositivos móviles */
@media only screen and (max-width: 768px) {
    
    /* Ajuste de tamaño de los títulos */
    h1, h2, h3 {
        font-size: 1.8rem; /* Tamaño ajustado para móviles */
        line-height: 1.2; /* Line-height para mejorar la legibilidad */
    }

    /* Ajuste del ancho de los contenedores */
    .container {
        width: 90%; /* Contenedor más ancho en móviles */
        padding: 10px; /* Espaciado más ajustado */
    }

    /* Timeline completamente vertical en móviles */
    .timeline-container {
        width: 100%; /* Utiliza todo el ancho de la pantalla */
    }

    .timeline-item {
        margin-left: 0; /* Elimina el margen izquierdo */
        padding-left: 20px; /* Ajuste del padding */
    }

    .timeline-item::before {
        left: 0; /* Línea del timeline alineada a la izquierda */
        width: 2px; /* Línea más delgada */
        background-color: #ccc; /* Color de la línea */
    }

    .timeline-date {
        position: relative; /* Posición relativa en lugar de absoluta */
        left: 0; /* Alineado a la izquierda */
        margin-bottom: 10px; /* Espacio bajo la fecha */
    }

    /* Imágenes en blogs y proyectos */
    .featured-image {
        width: 100%; /* Asegura que las imágenes no se desborden */
        height: auto; /* Mantiene la proporción de las imágenes */
    }

    /* Ajuste de las grillas de blogs y proyectos para columnas apiladas */
    .blog-grid, .projects-grid {
        grid-template-columns: 1fr; /* Columnas apiladas verticalmente */
    }

    .blog-post, .project-item {
        margin-bottom: 20px; /* Espacio adicional entre elementos */
    }

    /* Navegación vertical en móviles */
    nav ul {
        flex-direction: column; /* Cambia la navegación a una lista vertical */
        padding-left: 0; /* Elimina el padding izquierdo */
    }

    nav ul li {
        margin: 10px 0; /* Espacio entre los elementos del menú */
    }

    /* Botones y formularios optimizados para móviles */
    form button {
        width: 70%; /* Botón a pantalla completa en móviles */
        padding: 15px; /* Aumentar el padding para clics más fáciles */
        font-size: 1rem; /* Tamaño de fuente adecuado */
    }

    form input, form textarea {
        font-size: 1rem; /* Aumentar tamaño de la fuente en campos de formulario */
        padding: 10px; /* Padding ajustado */
    }

    /* Efectos más suaves en móviles */
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none; /* Elimina transiciones pesadas en móviles */
    }

    /* Ajustes de espaciado entre secciones */
    .section {
        padding: 40px 20px; /* Reducir el padding en secciones */
    }
}

/* Ajustes generales para timeline en móviles */
@media only screen and (max-width: 768px) {

    /* Contenedor del timeline en pantalla completa */
    .timeline-container {
        width: 90%;
        padding-left: 0; /* Elimina padding lateral */
    }

    /* Elementos del timeline apilados verticalmente */
    .timeline-item {
        margin-left: 0; /* Sin margen izquierdo */
        padding-left: 0; /* Sin padding izquierdo */
        padding-bottom: 20px; /* Espacio entre los elementos */
    }

    /* Línea del timeline ajustada a la izquierda */
    .timeline-item::before {
        content: '';
        position: absolute;
        left: 0; /* Alineación a la izquierda */
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #ccc; /* Color de la línea */
    }

    /* Ajuste de las fechas para móviles */
    .timeline-date {
        position: relative; /* Relativa para asegurar alineación correcta */
        left: 0; /* Alineado a la izquierda */
        margin-bottom: 10px; /* Espacio inferior para separar del contenido */
        margin-left:20px;
        font-size: 1rem; /* Tamaño de fuente más pequeño para móviles */
        color: #ffcc00; /* Mismo color que en versiones mayores */
    }

    /* Contenido del timeline completamente alineado a la izquierda */
    .timeline-content {
        padding-left: 20px; /* Espaciado del contenido */
        font-size: 1rem; /* Tamaño adecuado para móviles */
        text-align: left; /* Alineación del texto a la izquierda */
    }

    /* Ajustes para las animaciones y efectos en móviles */
    .timeline-item.active {
        transform: none; /* Eliminar transformaciones en móviles */
    }

    .timeline-item.active::before {
        background-color: #ffcc00; /* Cambia color de la línea activa */
    }
}