/* Wrapper principal del bloque para aislamiento */
.wp-block-gs-hero-section {
    /* Variables Locales */
    --de-black: #1a1a1a;    
    --de-red: #d00000;      
    --de-gold: #ffce00;     
    --primary: #0f172a;     
    --primary-light: #334155;
    --accent-blue: #003399;
    --text-main: #1e293b;
    --text-light: #64748b;
    --bg-body: #ffffff;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    line-height: 1.6;
}

/* Reset básico para el editor */
.wp-block-gs-hero-section * { box-sizing: border-box; }

/* Estilos Específicos del Hero */
.wp-block-gs-hero-section .hero { 
    padding: 6.25rem 0; 
    position: relative; 
    overflow: hidden; 
    background: linear-gradient(120deg, #f0f4f8 0%, #ffffff 50%, #f1f5f9 100%); 
}

.wp-block-gs-hero-section .container { 
    max-width: 75rem; 
    margin: 0 auto; 
    padding: 0 1.5rem; 
    position: relative; 
    z-index: 2; 
}

.wp-block-gs-hero-section a { 
    text-decoration: none; 
    color: inherit; 
}

.wp-block-gs-hero-section .hero-flex { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 3.75rem; 
    position: relative; 
    z-index: 2; 
}

.wp-block-gs-hero-section .hero-content { 
    flex: 1; 
    text-align: left; 
}

/* --- BANDERA ALEMANA --- */
.wp-block-gs-hero-section .hero-title-wrapper { 
    display: inline-flex; 
    flex-direction: column; 
    align-items: flex-start; 
    position: relative !important; 
    padding-left: 1.5rem !important; /* Espacio para la bandera */
    margin-bottom: 1.5rem; 
    margin-top: 0;
}

.wp-block-gs-hero-section .hero-title-wrapper::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0.6rem;    
    bottom: 0.8rem; 
    width: 0.375rem; 
    /* Gradiente de la bandera */
    background: linear-gradient(to bottom, 
        #1a1a1a 0%, #1a1a1a 33%, 
        #d00000 33%, #d00000 66%, 
        #ffce00 66%, #ffce00 100%
    ); 
    border-radius: 4px; 
    z-index: 10;
    min-height: 60px;
}

/* Tipografía */
.wp-block-gs-hero-section .t-light { 
    font-weight: 300; 
    font-size: 1.6rem; 
    color: var(--primary-light); 
    line-height: 1.2; 
    display: block;
}

.wp-block-gs-hero-section .t-bold { 
    font-weight: 800; 
    font-size: 4.8rem; 
    color: var(--de-black); 
    line-height: 0.95; 
    letter-spacing: -2px; 
    margin-left: -0.2rem; 
    display: block;
}

.wp-block-gs-hero-section .t-italic { 
    font-family: 'Playfair Display', serif; 
    font-style: italic; 
    font-size: 2rem; 
    color: var(--primary); 
    align-self: flex-end; 
    margin-top: 0.3rem; 
    padding-right: 0.3rem; 
    text-decoration: underline; 
    text-decoration-color: var(--de-gold); 
    text-decoration-thickness: 0.25rem; 
    text-underline-offset: 0.25rem; 
    display: block;
}

.wp-block-gs-hero-section .hero-subtitle { 
    font-size: 1rem; 
    color: var(--text-light); 
    margin-top: 0.5rem; 
    margin-bottom: 2rem; 
    max-width: 30rem; 
}

/* Botón */
.wp-block-gs-hero-section .btn-primary { 
    background-color: var(--accent-blue); 
    color: white; 
    padding: 0.9rem 1.75rem; 
    border-radius: 0.6rem; 
    font-weight: 600; 
    cursor: pointer; 
    border: none; 
    transition: var(--transition); 
    display: inline-flex; 
    align-items: center; 
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); 
    font-size: 1rem; 
}

.wp-block-gs-hero-section .btn-primary:hover { 
    transform: translateY(-2px); 
    background-color: #1d4ed8; 
}

/* Visual Stack (Decoración Derecha) */
.wp-block-gs-hero-section .visual-stack-container { 
    flex: 1; 
    position: relative; 
    height: 22rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.wp-block-gs-hero-section .stack-card { 
    background: white; 
    border: 1px solid #e2e8f0; 
    border-radius: 1.25rem; 
    position: absolute; 
    width: 20rem; 
    height: 17.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
}

.wp-block-gs-hero-section .stack-1 { 
    transform: rotate(-6deg) translate(-1.25rem, 0.6rem); 
    z-index: 1; 
    opacity: 0.8; 
    background: rgba(255,255,255,0.8); 
}

.wp-block-gs-hero-section .stack-2 { 
    transform: rotate(4deg) translate(1.25rem, -0.3rem); 
    z-index: 2; 
    opacity: 0.9; 
    background: rgba(255,255,255,0.9); 
}

.wp-block-gs-hero-section .stack-main { 
    z-index: 3; 
    padding: 1.8rem; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); 
}

/* --- MEDIA QUERIES (AQUÍ ESTÁ LA MAGIA) --- */
@media (max-width: 900px) {
    .wp-block-gs-hero-section .hero { 
        padding-top: 2.5rem; 
        padding-bottom: 3.75rem; 
    }
    
    /* Contenedor principal en columna y centrado */
    .wp-block-gs-hero-section .hero-flex { 
        flex-direction: column; 
        align-items: center; /* Esto centra el bloque del título en la pantalla */
        text-align: center; 
        gap: 2.5rem; 
    }

    /* Aseguramos que el contenido hijo se centre */
    .wp-block-gs-hero-section .hero-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra el botón y los párrafos */
    }

    /* TÍTULO Y BANDERA: */
    /* El wrapper se comporta como una caja centrada en la pantalla... */
    .wp-block-gs-hero-section .hero-title-wrapper { 
        display: inline-flex; 
        width: fit-content; /* Se ajusta al tamaño del texto */
        
        /* ...PERO dentro de esa caja, alineamos a la izquierda */
        /* para que el texto se pegue a la bandera */
        align-items: flex-start; 
        text-align: left; 
        
        padding-left: 1.5rem !important; 
    }

    .wp-block-gs-hero-section .hero-subtitle { 
        margin-left: auto; 
        margin-right: auto; 
        text-align: center;
    }

    .wp-block-gs-hero-section .visual-stack-container { 
        display: none; 
    }
}

@media (max-width: 600px) {
    .wp-block-gs-hero-section .t-bold { 
        font-size: 3.5rem; 
    }
}