/* ==========================================================================
   1.  Base - Estilos generales y variables globales
   ========================================================================== */

   :root {
    /* Colores */
    --color-primary: #007bff; /* Color primario (botones, enlaces) */
    --color-primary-dark: #0056b3; /* Versión más oscura del color primario (hover) */
    --color-text: #333; /* Color principal del texto */
    --color-text-light: #000000; /* Color del texto secundario/más claro */
    --color-bg: #faf9f9; /* Color de fondo general */
    --color-bg-light: #fff; /* Color de fondo claro (tarjetas, etc.) */
    --color-border: #ddd; /* Color de los bordes */

    /* Tipografía */
    --font-family: sans-serif; /* Fuente principal */
    --font-size-base: 1rem; /* Tamaño de fuente base (16px) */
    --font-size-h1: 2.5em; /* Tamaño de fuente para encabezados h1 */
    --font-size-h2: 2em; /* Tamaño de fuente para encabezados h2 */
    --font-size-h3: 1.5em; /* Tamaño de fuente para encabezados h3 */
    --font-size-small: 0.9em; /* Tamaño de fuente para texto pequeño */

    /* Espaciado */
    --spacing-sm: 10px; /* Espaciado pequeño */
    --spacing-md: 20px; /* Espaciado mediano */
    --spacing-lg: 30px; /* Espaciado grande */
    --spacing-xl: 40px; /* Espaciado extra grande */
    --spacing-section: 60px; /* Espaciado para secciones */
    --spacing-hero: 80px; /* Espaciado para la sección Hero */

    /* Bordes y Sombras */
    --border-radius: 5px; /* Radio de borde */
    --box-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra pequeña */
    --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra mediana */

    /* Transiciones */
    --transition-duration: 0.3s; /* Duración de la transición */
    --transition-ease: ease; /* Función de temporización de la transición */
}

/* Estilos para el body (aplicados a toda la página) */
body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    font-size: var(--font-size-base);
}

/* Estilos para el contenedor central (usado en varias secciones) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

/* Estilos para los enlaces (etiquetas <a>) */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* ==========================================================================
   2.  Componentes - Estilos reutilizables
   ========================================================================== */

/* Estilos para los botones (clase .button) */
.button {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-bg-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: background-color var(--transition-duration) var(--transition-ease);
}

.button:hover {
    background-color: var(--color-primary-dark);
}

/* Estilos para los botones secundarios (clase .button-secondary) */
.button-secondary {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
}

.button-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-bg-light);
}

/* ==========================================================================
   3.  Layout - Estructura de la página
   ========================================================================== */

/* 3.1 Header - Estilos para la cabecera del sitio */

header {
    background-color: var(--color-bg-light);
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
}

header .logo img {
    height: 30px;
    margin-right: var(--spacing-sm);
    vertical-align: middle;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav li {
    margin-left: var(--spacing-md);
}

nav a {
    color: var(--color-text);
}

/* 3.2 Hero - Estilos para la sección principal de la página de inicio */

.hero {
    background-color: #e9ecef;
    padding: var(--spacing-hero) 0;
    text-align: center;
}

.hero .container {
    max-width: 800px;
}

.hero h1 {
    font-size: var(--font-size-h1);
    margin-bottom: var(--spacing-md);
}

.hero .lead {
    font-size: 1.2em;
    color: #6c757d;
    margin-bottom: var(--spacing-lg);
}

/* 3.3 Portfolio - Estilos para la sección del portafolio */

.portfolio {
    padding: var(--spacing-section) 0;
    text-align: center;
}

.portfolio h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-lg);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.project-card {
    background-color: var(--color-bg-light);
    border-radius: 8px;
    box-shadow: var(--box-shadow-sm);
    padding: var(--spacing-md);
    text-align: left;
}

.project-card img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 5px;
}

.project-card h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

.portfolio .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.project-card {
    box-shadow: var(--box-shadow-md);
    transition: transform var(--transition-duration) ease-in-out;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.project-image {
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-duration) ease-in-out;
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

.project-details {
    padding: var(--spacing-md);
    text-align: left;
    background-color: var(--color-bg-light);
    border-radius: 0 0 8px 8px;
}

.project-details h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    font-size: 1.3em;
}

.project-details .project-category {
    color: #777;
    font-size: var(--font-size-small);
    margin-bottom: 5px;
}

.project-details .project-description {
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin-bottom: 15px;
}

/* 3.4 Contact - Estilos para la sección de contacto */

.contact {
    padding: var(--spacing-section) 0;
    background-color: var(--color-bg-light);
    text-align: center;
}

.contact h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-lg);
}

.contact form {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: var(--spacing-md);
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
}

.contact-links {
    margin-top: var(--spacing-md);
}

.form-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.form-checkbox input[type="checkbox"] {
    margin-right: var(--spacing-sm);
}

.form-checkbox label {
    font-size: var(--font-size-small);
    line-height: 1.4;
}

.form-checkbox label a {
    color: var(--color-primary);
    text-decoration: underline;
}

.form-checkbox label a:hover {
    text-decoration: none;
}

/* 3.5 Approach - Estilos para la sección "Mi Enfoque" */

.approach {
    padding: var(--spacing-section) 0;
    background-color: #e9ecef;
    text-align: center;
}

.approach h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-md);
}

.approach .container {
    max-width: 800px;
}

/* 3.6 Social Links - Estilos para la sección de enlaces a redes sociales */

.social-links {
    padding: 40px 0;
    background-color: #f8f9fa;
    text-align: center;
}

.social-links h2 {
    font-size: 1.5em;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light);
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
}

.social-icons a {
    display: inline-block;
}

.social-icons img {
    height: 30px;
    width: auto;
    opacity: 0.7;
    transition: opacity var(--transition-duration) var(--transition-ease);
}

.social-icons img:hover {
    opacity: 1;
}

/* 3.7 Cookie Popup - Estilos para el aviso de cookies */

.cookie-popup {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--color-bg-light);
    padding: var(--spacing-md);
    text-align: center;
    z-index: 1000;
    display: none;
}

.cookie-content {
    max-width: 960px;
    margin: 0 auto;
}

.cookie-content p {
    margin-bottom: 15px;
}

.cookie-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.cookie-buttons .button {
    /* Reutiliza los estilos de botón existentes */
}

.cookie-buttons .button.secondary {
    background-color: transparent;
    border: 1px solid var(--color-bg-light);
    color: var(--color-bg-light);
}

.cookie-buttons .button.secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
    .cookie-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* 3.8 Footer - Estilos para el pie de página */

footer {
    background-color: var(--color-text);
    color: var(--color-bg-light);
    padding: var(--spacing-md) 0;
    text-align: center;
    font-size: var(--font-size-small);
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

footer nav li {
    margin-left: 15px;
}

footer nav a {
    color: var(--color-bg-light);
}

/* 3.9 Thank You Popup - Estilos para el mensaje de agradecimiento */

.thank-you-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.thank-you-popup.show {
    display: flex;
}

.popup-content {
    background-color: var(--color-bg-light);
    padding: var(--spacing-lg);
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
}

/* ==========================================================================
   4.  Páginas - Estilos específicos para cada página
   ========================================================================== */

/* 4.1 Mi Enfoque - Estilos para la página "Mi Enfoque" */

.approach-page .hero-approach {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) 0;
    position: relative;
    background-image: url(/assets/img/fondo-hero.jpg);
    background-color: rgba(231, 228, 228, 0.7);
    color: var(--color-text);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.approach-page .hero-text {
    flex: 1;
    padding-left: 16px;
}

.approach-page .hero-image {
    flex: 1;
    text-align: center;
}

.approach-page .hero-image img {
    max-width: 300px;
    height: auto;
    border-radius: 10px;
}

.approach-page .principles,
.approach-page .process,
.approach-page .values {
    padding: var(--spacing-xl) 0;
    border-top: 1px solid #eee;
}

.approach-page .principles ul {
    list-style: none;
    padding: 0;
}

.approach-page .principles li {
    margin-bottom: 15px;
}

.approach-page .principles li strong {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

/* 4.2 Portafolio - Estilos para la página del portafolio */

.portfolio-page .container {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

.portfolio-page h1 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.portfolio-page .filters {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.portfolio-page .filter-button {
    background: none;
    border: 1px solid var(--color-text);
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0 var(--spacing-sm);
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
}

.portfolio-page .filter-button.active,
.portfolio-page .filter-button:hover {
    background-color: var(--color-text);
    color: var(--color-bg-light);
}

.portfolio-page .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.portfolio-page .portfolio-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow-md);
    transition: transform var(--transition-duration) ease-in-out;
}

.portfolio-page .portfolio-item:hover {
    transform: scale(1.05);
}

.portfolio-page .portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
}

.portfolio-page .portfolio-item h3 {
    padding: 15px;
    margin: 0;
    background-color: #f9f9f9;
    text-align: center;
    font-size: 1.2em;
}

.portfolio-page .portfolio-item p {
    padding: 0 15px 15px;
    margin: 0;
    font-size: var(--font-size-small);
    color: #666;
    text-align: center;
}

.portfolio-page .portfolio-item a.button {
    display: block;
    background-color: var(--color-text);
    color: var(--color-bg-light);
    text-align: center;
    padding: var(--spacing-sm) 15px;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: background-color var(--transition-duration) ease;
}

.portfolio-page .portfolio-item a.button:hover {
    background-color: #555;
}

/* 4.3 Proyecto Detalle - Estilos para la página de detalle de un proyecto */

.project-detail-page .container {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

.project-detail-page .project-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.project-detail-page .project-header h1 {
    font-size: var(--font-size-h1);
    margin-bottom: var(--spacing-sm);
}

.project-detail-page .project-header .project-category {
    color: #777;
    font-style: italic;
    margin-bottom: var(--spacing-md);
}

.project-detail-page .project-header img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: var(--box-shadow-md);
}

.project-detail-page .project-overview,
.project-detail-page .project-details,
.project-detail-page .project-gallery {
    margin-bottom: 50px;
    padding: 0 var(--spacing-md);
}

.project-detail-page h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid #eee;
    padding-bottom: var(--spacing-sm);
}

.project-detail-page .detail-section {
    margin-bottom: var(--spacing-lg);
}

.project-detail-page .detail-section h3 {
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.project-detail-page .detail-section p {
    line-height: 1.6;
    color: var(--color-text-light);
}

.project-detail-page .project-gallery .gallery-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.project-detail-page .project-gallery .gallery-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.project-detail-page .back-to-portfolio {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.project-detail-page .back-to-portfolio .button {
    display: inline-block;
    background-color: var(--color-text);
    color: var(--color-bg-light);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-duration) ease;
}

.project-detail-page .back-to-portfolio .button:hover {
    background-color: #555;
}

/* 4.4 Blog - Estilos para la página del blog */

.blog-page .container {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

.blog-page h1 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.blog-page .blog-hero {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.blog-page .blog-hero .lead {
    font-size: 1.1em;
    color: #777;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

.blog-page .blog-posts {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
    flex-direction: row;
}

.blog-page .blog-content {
    flex: 2; /* Contenido principal del blog */
}

.blog-page .post-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.blog-page .post-preview {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow-md);
    transition: transform var(--transition-duration) ease-in-out;
    background-color: var(--color-bg-light);
    display: flex;
    flex-direction: column;
}

.blog-page .post-preview:hover {
    transform: scale(1.02);
}

.blog-page .post-preview a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.blog-page .post-preview a > img,
.blog-page .post-preview a > h3,
.blog-page .post-preview a > .post-meta,
.blog-page .post-preview a > .excerpt {
    padding: 0 15px;
}

.blog-page .post-preview a > .excerpt {
    padding-bottom: 15px;
    flex-grow: 1; /* El extracto ocupa el espacio restante */
}

.blog-page .post-preview a > .read-more {
    display: block;
    padding: var(--spacing-sm) 15px;
    background-color: #f9f9f9;
    text-align: right;
    color: var(--color-text);
    font-weight: bold;
    border-top: 1px solid #eee;
    border-radius: 0 0 8px 8px;
    transition: background-color var(--transition-duration) ease;
    margin-top: auto; /* El botón "Leer más" se empuja hacia abajo */
}

.blog-page .post-preview a > .read-more:hover {
    background-color: #eee;
}

.blog-page .post-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-page .post-preview h3 {
    padding: 15px;
    margin: 0;
    font-size: 1.3em;
    text-align: center;
}

.blog-page .post-preview .post-meta {
    padding: 0 15px;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.blog-page .post-preview .excerpt {
    padding: 0 15px 15px;
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.6;
}

.blog-page .blog-sidebar {
    flex: 1; /* Barra lateral del blog */
}

.blog-page .blog-sidebar .widget {
    background-color: #f9f9f9;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border-radius: 8px;
    border: 1px solid #eee;
}

.blog-page .blog-sidebar .widget h3 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-text);
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.blog-page .blog-sidebar .widget ul.categories-list,
.blog-page .blog-sidebar .widget ul.latest-posts-list,
.blog-page .blog-sidebar .widget ul.archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-page .blog-sidebar .widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.blog-page .blog-sidebar .widget ul li:last-child {
    border-bottom: none;
}

.blog-page .blog-sidebar .widget ul li a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-ease);
}

.blog-page .blog-sidebar .widget ul li a:hover {
    color: var(--color-primary);
}

.blog-page .blog-sidebar .widget input[type="text"] {
    width: 100%;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.blog-page .blog-sidebar .widget .button {
    width: 100%;
}

.blog-page .pagination {
    text-align: center;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.blog-page .pagination a.button,
.blog-page .pagination span.page-number {
    display: inline-block;
    padding: var(--spacing-sm) 15px;
    margin: 0 5px;
    border-radius: var(--border-radius);
    line-height: 1.5;
}

.blog-page .pagination a.button {
    background-color: #f9f9f9;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: background-color var(--transition-duration) var(--transition-ease);
}

.blog-page .pagination a.button:hover {
    background-color: #eee;
}

.blog-page .pagination span.page-number {
    color: #777;
}

.blog-page .blog-ad {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

/* 4.5 Blog Post - Estilos para la página individual de un artículo del blog */

/* Estilos para la página individual del post */
.blog-post-page .container {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

.blog-post-page .blog-post-container {
    display: flex;
    gap: var(--spacing-lg);
    flex-direction: row; /* Asegura que el contenido y la barra lateral estén en fila */
}

.blog-post-page .blog-post {
    flex: 2; /* Contenido principal del artículo */
    margin-bottom: var(--spacing-xl); /* Espacio antes de la paginación y volver al blog */
}

.blog-post .post-title {
    font-size: 2.5em;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    text-align: left; /* Alinea el título a la izquierda */
}

.blog-post .post-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: var(--spacing-lg);
    border-radius: 8px;
    box-shadow: var(--box-shadow-md);
}

.blog-post .post-meta {
    color: var(--color-text-light);
    font-style: italic;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-small);
    text-align: left; /* Alinea la meta información a la izquierda */
}

.blog-post .post-subtitle {
    font-size: 1.8em;
    color: var(--color-text);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    text-align: left; /* Alinea el subtítulo a la izquierda */
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

.blog-post .post-content {
    line-height: 1.8;
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xl);
}
/* estilos para los botones de paginación */
.post-pagination {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    padding: 0 var(--spacing-md);
}

.post-pagination a.button {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-duration) var(--transition-ease);
}

.post-pagination a.button:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-light);
}

.back-to-blog {
    text-align: left; /* Alinea el botón de volver a la izquierda */
    margin-bottom: var(--spacing-section);
    padding: 0 var(--spacing-md);
}

.blog-post-page .blog-sidebar-recommendations,
.blog-post-page .blog-sidebar-ads {
    flex: 1; /* Barra lateral */
    background-color: #f9f9f9;
    padding: var(--spacing-md);
    border-radius: 8px;
    border: 1px solid #eee;
    order: 2; /* Por defecto aparecen después del contenido */
    margin-top: var(--spacing-xl); /* Espacio desde el contenido principal */
}

.blog-post-page .blog-sidebar-recommendations h3,
.blog-post-page .blog-sidebar-ads h3 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
    border-bottom: 1px solid #eee;
    padding-bottom: var(--spacing-sm);
}

.blog-post-page .blog-sidebar-recommendations ul.related-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-post-page .blog-sidebar-recommendations ul.related-posts-list li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid #eee;
}

.blog-post-page .blog-sidebar-recommendations ul.related-posts-list li:last-child {
    border-bottom: none;
}

.blog-post-page .blog-sidebar-recommendations ul.related-posts-list li a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-ease);
}

.blog-post-page .blog-sidebar-recommendations ul.related-posts-list li a:hover {
    color: var(--color-primary-dark);
}

.blog-post-page .blog-sidebar-ads .ad-slot {
    /* Estilos para el contenedor del anuncio */
}

/* Media query para apilar la barra lateral debajo del contenido en pantallas más pequeñas */
@media (max-width: 900px) {
    .blog-post-page .blog-post-container {
        flex-direction: column;
    }

    .blog-post-page .blog-sidebar-recommendations,
    .blog-post-page .blog-sidebar-ads {
        width: 100%;
        margin-top: var(--spacing-xl);
    }
}
.blog-post-page .blog-post-container {
    display: flex;
    gap: var(--spacing-lg);
}

.blog-post-page .blog-post {
    flex: 2; /* Contenido principal del artículo */
}

.blog-post-page .blog-sidebar-recommendations {
    flex: 1; /* Barra lateral de recomendaciones */
    background-color: #f9f9f9;
    padding: var(--spacing-md);
    border-radius: 8px;
    border: 1px solid #eee;
    order: 1; /* Aparece primero en la barra lateral */
}

.blog-post-page .blog-sidebar-ads {
    flex: 1; /* Barra lateral de publicidad */
    background-color: #f9f9f9;
    padding: var(--spacing-md);
    border-radius: 8px;
    border: 1px solid #eee;
    order: 2; /* Aparece después en la barra lateral */
}

.blog-post-page .blog-sidebar-recommendations h3,
.blog-post-page .blog-sidebar-ads h3 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-text);
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.blog-post-page .blog-sidebar-recommendations ul.related-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-post-page .blog-sidebar-recommendations ul.related-posts-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.blog-post-page .blog-sidebar-recommendations ul.related-posts-list li:last-child {
    border-bottom: none;
}

.blog-post-page .blog-sidebar-recommendations ul.related-posts-list li a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-ease);
}

.blog-post-page .blog-sidebar-recommend
.blog-post-page .blog-sidebar-recommendations ul.related-posts-list li a:hover {
    color: var(--color-primary-dark);
}

.blog-post-page .blog-sidebar-ads .ad-slot {
    /* Estilos para el contenedor del anuncio */
}

/* ==========================================================================
   5.  Navegación - Estilos para la navegación del sitio
   ========================================================================== */

/* 5.1 Menú Hamburguesa - Estilos para el icono del menú en móviles */

.hamburger {
    display: none; /* Oculto por defecto en pantallas grandes */
    cursor: pointer;
    padding: var(--spacing-sm);
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text);
    margin: 5px auto;
    transition: all var(--transition-duration) var(--transition-ease);
}

.hamburger.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.open .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* 5.2 Navegación Principal - Estilos para el menú de navegación */

nav {
    display: none; /* Oculto por defecto en móviles */
    position: absolute;
    top: 60px; /* Ajustar según la altura del header */
    left: 0;
    width: 100%;
    background-color: var(--color-text); /* Fondo oscuro para el menú en móviles */
    z-index: 10;
}

nav.open {
    display: block; /* Mostrar el menú cuando la clase 'open' está presente */
}

nav ul {
    display: flex;
    flex-direction: column; /* Alineación vertical en móviles */
    align-items: center;
    padding: 0;
    margin: 0;
}

nav li {
    margin: 0;
    border-bottom: 1px solid #555; /* Separador entre los items del menú en móviles */
    width: 100%;
    text-align: center;
}

nav li:last-child {
    border-bottom: none;
}

nav a {
    display: block;
    color: var(--color-bg-light); /* Color del texto del menú en móviles */
    padding: 15px var(--spacing-md);
    text-decoration: none;
    transition: background-color var(--transition-duration) ease-in-out;
}

nav a:hover {
    background-color: #555; /* Color de fondo al pasar el ratón en móviles */
}

/* ==========================================================================
   6.  Efectos - Estilos para animaciones y efectos visuales
   ========================================================================== */

/* 6.1 Efecto Fade-in - Estilos para la animación de aparición de secciones */

.section-fade-in {
    opacity: 0;
    transform: translateY(50px); /* Empieza 50px abajo de su posición final */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.section-fade-in.visible {
    opacity: 1;
    transform: translateY(0); /* Se mueve a su posición original */
}

/* ==========================================================================
   7.  Media Queries - Estilos para la responsividad
   ========================================================================== */

/* 7.1 Menú Hamburguesa en Móviles */

@media (max-width: 767px) {
    .hamburger {
        display: block; /* Mostrar en móviles */
    }

    nav {
        display: none; /* Ocultar la navegación por defecto en móviles */
        position: absolute;
        top: 60px; /* Ajustar según la altura del header */
        left: 0;
        width: 100%;
        background-color: var(--color-text); /* Fondo oscuro para el menú en móviles */
        z-index: 10;
    }

    nav.open {
        display: block; /* Mostrar la navegación cuando la clase 'open' está presente */
    }

    nav ul {
        display: flex;
        flex-direction: column; /* Alineación vertical en móviles */
        align-items: center;
        padding: 0;
        margin: 0;
    }

    nav li {
        margin: 0;
        border-bottom: 1px solid #555; /* Separador entre los items del menú en móviles */
        width: 100%;
        text-align: center;
    }

    nav li:last-child {
        border-bottom: none;
    }

    nav a {
        display: block;
        color: var(--color-bg-light); /* Color del texto del menú en móviles */
        padding: 15px var(--spacing-md);
        text-decoration: none;
        transition: background-color var(--transition-duration) ease-in-out;
    }

    nav a:hover {
        background-color: #555; /* Color de fondo al pasar el ratón en móviles */
    }

    header .container nav ul {
        flex-direction: column; /* Asegura la alineación vertical en móviles */
        align-items: flex-start; /* Alinea los items a la izquierda */
    }
}

/* 7.2 Navegación en Escritorio */

@media (min-width: 768px) {
    .hamburger {
        display: none; /* Ocultar en escritorio */
    }

    nav {
        display: flex; /* Mostrar la navegación en escritorio */
        position: static;
        background-color: transparent;
        width: auto;
    }

    nav ul {
        flex-direction: row; /* Alineación horizontal en escritorio */
    }

    nav li {
        margin-left: var(--spacing-md);
    }

    nav a {
        color: var(--color-text); /* Color del texto del menú en escritorio */
    }

    header .container nav ul {
        flex-direction: row; /* Asegura la alineación horizontal en escritorio */
        align-items: center; /* Alinea verticalmente los items en el header */
    }
}

@media (max-width: 767px) {
    .hamburger.open {
        z-index: 11; /* Un valor mayor que el z-index del menú (10) */
    }
}

/* 7.3 Ajustes para la página de la Barra Lateral del Blog en pantallas más pequeñas */

@media (max-width: 768px) {
    .blog-post {
        flex-basis: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .blog-sidebar-recommendations,
    .blog-sidebar-ads {
        flex-basis: 100%;
        order: initial; /* Volver al orden del HTML en pantallas pequeñas */
        margin-bottom: 20px;
    }
}

/* 7.4 Ajustes para la página del Blog con barra lateral */

@media (max-width: 900px) {
    .blog-page .blog-posts {
        flex-direction: column; /* Apilar contenido y barra lateral */
    }

    .blog-page .blog-sidebar {
        width: 100%; /* La barra lateral ocupa todo el ancho */
    }

    .blog-page .post-list {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajustar la grilla de posts */
    }
}

@media (max-width: 600px) {
    .blog-page .post-list {
        grid-template-columns: 1fr; /* Una sola columna en pantallas muy pequeñas */
    }
}

/* 7.5 Ajustes para la página del Portafolio en pantallas más pequeñas */

@media (max-width: 600px) {
    .portfolio-page .portfolio-grid {
        grid-template-columns: 1fr; /* Una sola columna en pantallas muy pequeñas */
    }

    .portfolio-page .filters {
        flex-direction: column;
        align-items: center;
    }

    .portfolio-page .filter-button {
        margin: 5px 0;
        width: 80%;
    }
}

/* 7.6 Ajustes para la página de detalles del proyecto en pantallas más pequeñas */

@media (max-width: 767px) {
    .project-detail-page .project-header h1 {
        font-size: 2em;
    }

    .project-detail-page .project-overview,
    .project-detail-page .project-details,
    .project-detail-page .project-gallery {
        padding: 0 10px;
    }

    .project-detail-page .project-gallery .gallery-images {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .project-detail-page .social-links .social-icons a img {
        width: 30px;
        height: 30px;
    }
}

/* 7.7 Ajustes para la página de inicio (últimas entradas del blog) en pantallas más pequeñas */

@media (max-width: 767px) {
    .latest-posts-grid {
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
    }
}

/* 7.8 Ajustes para la página "Mi Enfoque" en pantallas más pequeñas */

@media (max-width: 767px) {
    .approach-page .hero-approach {
        flex-direction: column; /* Apilar texto e imagen */
        text-align: center; /* Centrar contenido */
    }

    .approach-page .hero-image {
        margin-top: var(--spacing-md); /* Espacio entre texto e imagen apilados */
    }

    .approach-page .hero-image img {
        max-width: 80%; /* La imagen ocupa más ancho */
    }
}
/* Estilos para la sección de últimas entradas en la página principal */
.latest-posts {
    padding: var(--spacing-section) 0; /* Usando variable */
    background-color: var(--color-bg-light); /* Usando variable */
    border-top: 1px solid var(--color-border); /* Usando variable */
    border-bottom: 1px solid var(--color-border); /* Usando variable */
}

.latest-posts .container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--spacing-md); /* Usando variable */
}

.latest-posts h2 {
    text-align: center;
    margin-bottom: var(--spacing-lg); /* Usando variable */
    font-size: var(--font-size-h2); /* Usando variable */
    color: var(--color-text); /* Usando variable */
}

.latest-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md); /* Usando variable */
    margin-bottom: var(--spacing-lg); /* Usando variable */
}

.latest-posts-grid .latest-post-preview {
    background-color: var(--color-bg-light); /* Usando variable */
    border-radius: var(--border-radius); /* Usando variable */
    overflow: hidden;
    box-shadow: var(--box-shadow-sm); /* Usando variable */
    transition: transform var(--transition-duration) var(--transition-ease); /* Usando variable */
}

.latest-posts-grid .latest-post-preview:hover {
    transform: scale(1.02);
}

.latest-posts-grid .latest-post-preview a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.latest-posts-grid .latest-post-preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius) var(--border-radius) 0 0; /* Usando variable */
}

.latest-posts-grid .latest-post-preview h3 {
    padding: var(--spacing-sm); /* Usando variable */
    margin: 0;
    font-size: var(--font-size-h3); /* Usando variable */
    text-align: center;
    color: var(--color-text); /* Usando variable */
}

.latest-posts-grid .latest-post-preview .post-meta {
    padding: 0 var(--spacing-sm) var(--spacing-sm); /* Usando variable */
    font-size: var(--font-size-small); /* Usando variable */
    color: var(--color-text-light); /* Usando variable */
    text-align: center;
}

.latest-posts .view-all-blog {
    text-align: center;
}

.latest-posts .view-all-blog .button {
    transition: background-color var(--transition-duration) var(--transition-ease); /* Usando variable */
}

.latest-posts .view-all-blog .button:hover {
    background-color: var(--color-primary-dark); /* Usando variable */
}

/* Media queries para ajustar el diseño en pantallas más pequeñas */
@media (max-width: 767px) {
    .blog-page .blog-posts .post-list {
        grid-template-columns: 1fr;
    }

    .latest-posts-grid {
        grid-template-columns: 1fr;
    }
}