/*
Theme Name: Erre Construye Theme
Theme URI: https://erreconstruye.es
Author: Erre Construye
Description: Clon exacto 1:1 React a WordPress (Versión Final Definitiva).
Version: 4.3
License: GNU General Public License v2 or later
Text Domain: erre-construye
*/

/* Reset y Base */
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    background-color: #ffffff;
    color: #0f172a;
    scroll-behavior: smooth;
}

/* Ocultar Scrollbar */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- UTILIDADES DE TEXTO (STROKE) --- */
.text-stroke {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    color: transparent;
}
.text-stroke-strong {
    -webkit-text-stroke: 2px white;
    color: transparent;
}
.text-stroke-black {
    -webkit-text-stroke: 1px black;
    color: transparent;
}

/* --- ANIMACIONES --- */
@keyframes traverse {
    0% { left: 0; transform: translateX(0); }
    100% { left: 100%; transform: translateX(-100%); }
}
.animate-traverse {
    animation: traverse 20s ease-in-out infinite alternate;
}

/* Marquee Infinito Perfecto */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee-infinite {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

/* =========================================
   ANIMACIÓN PROYECTOS (EXACTA A REACT)
   ========================================= */

/* Versión Desktop (Acordeón Horizontal) */
@media (min-width: 1024px) {
    #projects-accordion {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 750px;
        gap: 1rem;
    }

    .project-card {
        /* Estado por defecto (Inactivo) */
        /* Flex-grow 1, Shrink 1, Basis 0% -> Clave para animación suave */
        flex: 1 1 0% !important; 
        width: auto !important;
        
        /* La misma curva Bezier que React */
        transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }
    
    .project-card.active {
        /* Estado Activo (Expandido) */
        flex: 3.5 3.5 0% !important;
    }
}

/* Versión Móvil (Stack Vertical) */
@media (max-width: 1023px) {
    #projects-accordion {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .project-card {
        width: 100%;
        height: 400px;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    /* En móvil no hay expansión horizontal, solo visual */
}

/* --- ELEMENTOS INTERNOS DEL PROYECTO --- */

/* Imagen de fondo */
.project-card .project-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s ease-out, opacity 0.7s ease;
}

/* Estado Inactivo: Zoom in + Oscuro */
.project-card:not(.active) .project-img {
    transform: scale(1.15);
    opacity: 0.6;
}

/* Estado Activo: Zoom out (normal) + Brillante */
.project-card.active .project-img {
    transform: scale(1);
    opacity: 1;
}

/* Overlay Oscuro (desaparece en hover active) */
.project-card .dark-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.3);
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.project-card.active .dark-overlay {
    opacity: 0; /* Se aclara al activar */
}

/* --- CONTENIDO INACTIVO (Texto Vertical) --- */
.project-card .inactive-content {
    position: absolute;
    inset: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    transition: opacity 0.4s ease;
    opacity: 1;
    z-index: 20;
    pointer-events: none;
}
/* Ocultar cuando está activo */
.project-card.active .inactive-content {
    opacity: 0;
}

/* --- CONTENIDO ACTIVO (Info completa) --- */
.project-card .active-content {
    position: absolute;
    inset: 0;
    padding: 2rem; /* Mobile */
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    
    /* Animación de entrada */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s; /* Delay para esperar que se abra */
    pointer-events: none;
}

@media (min-width: 768px) {
    .project-card .active-content {
        padding: 3rem;
    }
}

/* Mostrar cuando está activo */
.project-card.active .active-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Fix Admin Bar */
body.admin-bar #main-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar #main-header { top: 46px; }
}