/* ======================================================== */
/* === PROJECT-DETAIL.CSS: ESTILOS ESPECÍFICOS PARA PÁGINAS DE PROYECTO === */
/* ======================================================== */

/* ================================ */
/* === 1. SECCIÓN HERO DEL PROYECTO === */
/* ================================ */
.project-hero-section {
    background-color: var(--dark-background-color); /* Fondo suave para la sección hero */
    color: var(--dark-text-color); /* Color de texto general para esta sección */
    text-align: center;
    padding: 0; /* Ajustado a 0 para que la imagen ocupe todo el espacio vertical del hero */
    overflow: hidden; /* Asegura que nada se salga si hay efectos */
    position: relative; /* Necesario para que el overlay de la imagen ocupe el 100% de la altura de la sección */
    height: 70vh; /* Ajusta la altura de la sección hero si lo deseas, o usa min-height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor principal de la imagen y el overlay */
.project-hero-image-wrapper {
    position: absolute; /* Ocupa todo el espacio de la sección hero */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0; /* Eliminar márgenes */
    border-radius: 0; /* Eliminar border-radius */
    box-shadow: none; /* Eliminar sombra */
    overflow: hidden; /* Asegura que la imagen y el overlay respeten el border-radius */
}

.main-project-image {
    width: 100%;
    height: 100%; /* La imagen ocupa el 100% de la altura del wrapper */
    object-fit: cover; /* Recorta la imagen para que cubra el área */
    display: block;
    margin: 0; /* Asegurarse de no tener márgenes */
    border-radius: 0; /* Eliminar border-radius */
    box-shadow: none; /* Eliminar sombra */
}

/* Overlay para el texto sobre la imagen */
.project-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente oscuro */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: var(--white-background-color); /* Texto blanco para buena legibilidad */
    text-align: center;
    z-index: 2; /* Asegura que esté sobre la imagen */
}

.project-hero-overlay h1 {
    font-size: 3.5rem; /* Tamaño de título más grande para el proyecto */
    margin-bottom: 0.8rem;
    color: var(--white-background-color); /* Color blanco para que resalte sobre el overlay */
    line-height: 1.1;
    max-width: 90%; /* Limita el ancho del título */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra sutil para mejor lectura */
}

.project-hero-overlay .section-intro {
    font-size: 1.2rem;
    margin-bottom: 2rem; /* Añade margen inferior para separar del botón */
    max-width: 700px;
    color: var(--white-background-color); /* Texto blanco */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra sutil para mejor lectura */
}

/* Estilos para el botón/flecha de "Ver Más" */
.scroll-down-btn {
    display: inline-block;
    color: var(--primary-color); /* Color verde */
    font-size: 2.5rem; /* Tamaño grande para la flecha */
    text-decoration: none;
    position: absolute; /* Posición absoluta respecto al overlay */
    bottom: 2rem; /* Distancia desde la parte inferior del overlay */
    left: 50%;
    transform: translateX(-50%); /* Centrar horizontalmente */
    z-index: 3; /* Asegura que esté por encima de todo */
    animation: bounce 2s infinite; /* Animación de rebote */
}

.scroll-down-btn:hover {
    color: var(--primary-color-dark); /* Tono más oscuro al pasar el mouse */
}

/* Animación de rebote para el botón de "Ver Más" */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-15px);
    }
    60% {
        transform: translateX(-50%) translateY(-7px);
    }
}


/* =================================== */
/* === 2. CONTENIDO Y DETALLES DEL PROYECTO (ESTILO DE UNA SOLA COLUMNA) === */
/* =================================== */
.project-content-section {
    background-color: var(--dark-background-color); /* Fondo general de la página para la sección */
    padding-top: 4rem; /* Espaciado superior */
    padding-bottom: 4rem; /* Espaciado inferior */
}

/* El contenedor principal de la sección de contenido será el único con fondo blanco y sombra */
.project-content-section .container {
    background-color: var(--white-background-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 2.5rem; /* Padding interno para todo el contenido blanco */
    max-width: 900px; /* Ancho de columna general para el contenedor */
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* Alineación del texto general dentro del contenedor */
}

.project-info {
    margin-bottom: 3rem; /* Espacio entre la información del proyecto y el primer bloque */
    max-width: 80ch; /* Limita el ancho del bloque de información */
    margin-left: auto; /* Centrarlo */
    margin-right: auto; /* Centrarlo */
    width: 100%; /* Asegura que ocupe todo el ancho disponible hasta el max-width */
}

.project-info h3,
.project-section-block h3 { /* Aplicar a los h3 dentro de project-info y project-section-block */
    font-size: 1.8rem;
    color: var(--dark-text-color); /* Títulos en gris oscuro */
    margin-bottom: 1.5rem;
    text-align: left;
    font-family: var(--heading-font);
    font-weight: 700;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-top: 2rem;
}

/* Ajuste específico para el primer h3 en la sección principal del proyecto */
.project-info h3:first-of-type {
    margin-top: 0;
}

.project-info ul {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    /* === CAMBIO CLAVE AQUÍ: mover el border-left y padding-left al UL === */
    padding-left: 0.5rem; /* Espacio para que el texto no toque la línea */
    border-left: 3px solid var(--primary-color); /* La línea vertical ahora en el UL */
    /* =================================================================== */
}

.project-info li {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.4;
    /* === CAMBIO CLAVE AQUÍ: eliminar border-left y padding-left de los LI === */
    padding-left: 0; /* Remover padding-left individual */
    border-left: none; /* Remover la línea vertical individual */
    /* ======================================================================= */
}

.project-info li strong {
    color: var(--dark-text-color);
    font-weight: 600;
}

/* --- ESTILOS PARA CADA BLOQUE DE SECCIÓN --- */
.project-section-block {
    border-radius: 8px; /* Mantener bordes redondeados */
    padding: 1.5rem; /* Padding interno para cada bloque de contenido */
    margin-bottom: 2rem; /* Espacio entre bloques de sección */
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: flex-start; /* Alinea los ítems al inicio del flex-start (izquierda) */
    gap: 1rem; /* Espacio entre h3, p y section-images */
    /* REMOVIDO: border: 1px solid var(--border-color); */
}

.project-section-block h3 {
    font-size: 1.6rem; /* Ajuste para los títulos internos de la descripción */
    color: var(--dark-text-color);
    margin-bottom: 0.5rem; /* Menor margen que el h3 principal del project-description */
    padding-bottom: 0; /* Sin línea inferior aquí para los subtítulos */
    border-bottom: none;
    display: flex; /* Para alinear icono y texto */
    align-items: center;
    gap: 0.8rem; /* Espacio entre icono y texto del título */
    width: 100%; /* Asegura que el título ocupe todo el ancho para la justificación del párrafo */
}

/* Estilo para los iconos en los títulos */
.icon-title {
    color: var(--primary-color); /* Color del icono */
    font-size: 1.4rem; /* Tamaño del icono */
    flex-shrink: 0; /* Evita que el icono se encoja */
}

.project-section-block p {
    font-size: 1.05rem; /* Tamaño de fuente por defecto para párrafos */
    line-height: 1.6;
    margin-bottom: 0; /* Eliminar margen inferior de párrafo si existe */
    color: var(--text-color);
    text-align: justify; /* Párrafo justificado a ambos lados */
    max-width: 80ch; /* Aumenta el ancho máximo a ~80 caracteres por línea */
    margin-left: auto; /* Centrar el párrafo */
    margin-right: auto; /* Centrar el párrafo */
    width: 100%; /* Asegura que el párrafo intente ocupar el max-width definido */
}

/* Contenedor para las imágenes dentro de cada bloque de sección */
.section-images {
    width: 100%; /* Asegura que ocupe todo el ancho disponible del project-section-block */
    display: grid; /* Permite múltiples imágenes en grid */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsivo para múltiples imágenes */
    gap: 0.75rem; /* Espacio entre imágenes si hay más de una */
    margin-top: 1rem; /* Margen superior para separar de los párrafos */
    max-width: 100ch; /* Misma anchura que los párrafos para justificación visual */
    margin-left: auto; /* Centrar el contenedor de imágenes */
    margin-right: auto; /* Centrar el contenedor de imágenes */
}

.section-images img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
    display: block;
}


/* =============================== */
/* === SECCIÓN: CALL TO ACTION (CTA) - ACTUALIZADA CON FOTO A LA IZQUIERDA === */
/* =============================== */
.call-to-action-section {
    background-color: var(--dark-text-color); /* Negro grisáceo */
    color: var(--white-background-color); /* Texto blanco para contraste */
    padding: 2.5rem;
    margin-bottom: 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
}

.call-to-action-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.call-to-action-section .cta-content {
    flex: 1;
    text-align: center;
}

.call-to-action-section h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--white-background-color);
    border-bottom: none;
    padding-bottom: 0;
}

.call-to-action-section p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-contact-info {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.cta-contact-info p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--white-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-contact-info p i {
    margin-right: 0.8rem;
    font-size: 1.2rem;
    color: var(--white-background-color);
}

.cta-contact-info p a {
    color: var(--white-background-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.cta-contact-info p a:hover {
    color: var(--dark-background-color);
    text-decoration: underline;
}

.button-center-wrapper {
    text-align: center;
    width: 100%;
}

.call-to-action-section .cta-btn {
    background-color: var(--white-background-color);
    color: var(--primary-color);
    font-weight: 700;
    padding: 0.9rem 2.2rem;
    border-radius: 5px;
    text-decoration: none;
    transition: all var(--transition-speed) ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    margin-top: 0;
}

.call-to-action-section .cta-btn i {
    margin-right: 0.8rem;
    font-size: 1.1rem;
}

.call-to-action-section .cta-btn:hover {
    background-color: var(--dark-background-color);
    color: var(--primary-color-dark);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.call-to-action-section .cta-image {
    flex-shrink: 0;
    order: -1;
}

.call-to-action-section .cta-image .profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white-background-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


/* =============================== */
/* === BOTÓN VOLVER A PROYECTOS (TEXTO) === */
/* =============================== */
.back-to-projects-link {
    margin-top: 2rem;
    padding-bottom: 3rem;
    text-align: center;
}

.back-to-projects-link .back-link {
    display: inline-flex;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.back-to-projects-link .back-link i {
    margin-right: 0.6rem;
    font-size: 1.1rem;
}

.back-to-projects-link .back-link:hover {
    color: var(--primary-color);
    transform: translateX(-5px);
}


/* ========================== */
/* === MEDIA QUERIES === */
/* ========================== */
@media (min-width: 769px) {
    /* Ajustes para tablet y desktop */

    /* El contenedor principal de la sección ahora es el que controla el ancho máximo */
    .project-content-section .container {
        max-width: 900px;
    }

    /* Ya no es necesario project-info con max-width si el padre ya lo limita */
    .project-info {
        max-width: unset; /* Permite que ocupe el 100% del contenedor padre */
        margin-left: 0;
        margin-right: 0;
        padding: 0; /* Eliminar padding si se desea que se ajuste al padding del container */
        box-shadow: none; /* Eliminar sombra si antes la tenía individualmente */
        border-radius: 0;
        background-color: transparent; /* No tiene fondo propio */
    }

    /* Asegurar que los títulos internos de los bloques de sección ocupen el 100% del ancho */
    .project-section-block {
        padding: 1.5rem; /* Mantener el padding interno de cada bloque */
        /* Asegurar que ocupe todo el ancho disponible dentro del .container */
        width: 100%;
        max-width: unset; /* Eliminar cualquier restricción de ancho que tuviera individualmente */
    }

    /* Ajustes para el CTA en desktop */
    .call-to-action-section {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 3rem;
    }

    .call-to-action-section .cta-image {
        order: unset;
        margin-right: 2rem;
        margin-left: 0;
    }

    .call-to-action-section .cta-content {
        text-align: left; /* Align text to left in desktop view */
        margin-right: 0;
    }

    .call-to-action-section p {
        margin-left: 0;
        margin-right: auto;
    }

    .cta-contact-info {
        text-align: left;
    }

    .cta-contact-info p {
        justify-content: flex-start;
    }

    /* Override button centering for larger screens, align left */
    .button-center-wrapper {
        text-align: left; /* Align button to left */
    }
}

@media (max-width: 768px) {
    .project-hero-section {
        height: 60vh;
    }

    .project-hero-overlay h1 {
        font-size: 2rem;
    }

    .project-hero-overlay .section-intro {
        font-size: 0.9rem;
    }

    /* El contenedor principal de la sección en móvil */
    .project-content-section .container {
        padding: 1.5rem; /* Reduce el padding en móvil */
    }

    /* Ajuste para el tamaño de fuente de los párrafos en móvil */
    .project-section-block p {
        font-size: 0.9rem; /* Achica la tipografía para móviles */
        line-height: 1.5;
        max-width: unset; /* Elimina la restricción de ancho para móvil */
        text-align: left; /* En móvil, la justificación puede verse rara con párrafos muy cortos */
        word-break: break-word; /* Asegura que palabras largas no rompan el layout */
        margin-left: 0; /* Deshacer centrado en móvil */
        margin-right: 0; /* Deshacer centrado en móvil */
    }

    /* Asegura que las imágenes en móvil también tomen todo el ancho disponible */
    .section-images {
        max-width: unset; /* Elimina la restricción de ancho para móvil */
        margin-left: auto;
        margin-right: auto; /* Mantener auto para centrar si el contenedor interno de imágenes no es 100% */
    }

    /* Asegura que el botón de scroll-down sea visible y centrado en pantallas más pequeñas */
    .scroll-down-btn {
        bottom: 1rem; /* Ajusta la posición para pantallas más pequeñas */
        font-size: 2rem; /* Tamaño ligeramente más pequeño */
    }

    /* Asegura que el botón CTA esté centrado en pantallas más pequeñas */
    .button-center-wrapper {
        text-align: center; /* Centrar explícitamente para móvil */
    }

    /* Ajustes para el bloque de sección en móvil */
    .project-section-block {
        padding: 1rem; /* Reduce el padding interno del bloque en móvil */
    }
}